{"componentChunkName":"component---src-templates-blog-post-js","path":"/best-terminal-setup/","result":{"data":{"site":{"siteMetadata":{"title":"Viking Zhang, 一个前端开发工程师以及独立开发者的故事"}},"markdownRemark":{"id":"6b62f774-e6bb-54de-8606-43674628ae2a","excerpt":"在 Youtube…","html":"<p><strong><a href=\"https://www.youtube.com/watch?v=AWtc3SQQPpI&#x26;ab_channel=%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9A%84%E4%B9%8C%E6%89%98%E9%82%A6\">在 Youtube 观看视频版本</a></strong></p>\n<p>今天的文章是关于：怎样打造一个比较完美的终端环境。\n为什么想做这个教程呢？因为在我的慕课网的教学视频中，问的做多的一个和课程具体内容没关系的问题就是“老师，你的终端是什么配色和用了什么插件？”所以我发现非常多程序员在对某些和我们朝夕相处的工具都在追求高颜值：比如终端，编辑器，键盘等等。在这里，我想单独拿出终端来说说，它是除了编辑器以外最常用的工具，我们会从几方面来对它就行打造，最终让它既好看又好用，最后声明，这是一期比较新手向的教程，假如你已经是 shell 高手，我建议你就不用看啦。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/cba016a891d1f1efa77e7c93d15e3710/1e2c2/final.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 38.86847905951507%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAIAAAB2/0i6AAAACXBIWXMAAAsSAAALEgHS3X78AAABZklEQVQY032QT0+DQBDF+RSa2NLuUpZCCywLu2y7QCFQENFK6782piamiQdvjYnx6FcX1OrBxGQymcP8Zt57UnZ+PX/cR5tnf7lzFk/B1aa8S4mYdgHuq7g3aLrzVb1B2wEiXWgFSbm6fZDC7Hy62pFqi4u1XW7p2XJWhSZlMsSK7im6CzTSMBARqLlQIwA5DeyLeVFdS0l+icMKuSkiCUlrf37B4xizYORFYx4bNFIM2nyz2Mywp0OTf0rAzeywWKJRDqEp94xOVzdsYXnZyClUY4J5EuQLMknbn0NXVPWIBF/6m1sn/fFRR5eiomYX91Z2Y6VLb7H1zy7jamYyH2geGjGoEvAJQN3ro4NnxWIia2VjP8rXe7F5d1evTv3Gb15EWY4Jg+jb7SGt3+RkxbZIKKJT6VjWI748LWrKQ5cKTCZAbfK0AXJ+tv9Ww3eAKckDm3pJEMbU54xPiEtV/T/sYLvV/wF4Fl4oB+y07AAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/cba016a891d1f1efa77e7c93d15e3710/799d3/final.png\"\n        srcset=\"/static/cba016a891d1f1efa77e7c93d15e3710/00d96/final.png 148w,\n/static/cba016a891d1f1efa77e7c93d15e3710/0b23c/final.png 295w,\n/static/cba016a891d1f1efa77e7c93d15e3710/799d3/final.png 590w,\n/static/cba016a891d1f1efa77e7c93d15e3710/2a3d6/final.png 885w,\n/static/cba016a891d1f1efa77e7c93d15e3710/ae92f/final.png 1180w,\n/static/cba016a891d1f1efa77e7c93d15e3710/1e2c2/final.png 2722w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>我们最终的目标 - 自动补全，提示，命令行丰富的信息，字体，配色</p>\n</blockquote>\n<h3>Shell: Bash/ZSH/Fish</h3>\n<p>本教程会采用 macOS 作为操作系统，其他操作系统原理类似，请大家自己去研究一下怎样移植过来。\n首先我们来明确几个概念，第一个是 Unix Shell，如果去看 维基百科它是这么描述的：提供一个命令行界面，让程序员通过一些简单的命令（commands）去控制操作系统的行为。所以它是一个最基础的应用程序。</p>\n<p>后来有一些程序员，发现了 Shell 在使用上有一些改进之处，所以它们基于 shell 做出了一系列的加强版，或者说是超集，bash 是其中最流行的的一个改进版本，它几乎是所有 linux 发行版预装的程序。</p>\n<blockquote>\n<p>Bash (bash) is one of many available (yet the most commonly used) Unix shells. Bash stands for “Bourne Again SHell”, and is a replacement/improvement of the original Bourne shell (sh)</p>\n</blockquote>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token comment\"># 打开终端直接运行，就会发现它被预装了</span>\n<span class=\"token function\">bash</span> --version\n<span class=\"token comment\"># 输出 GNU bash, version 3.2.57(1)-release (x86_64-apple-darwin18)</span>\n<span class=\"token comment\"># 也并非所有都安装了Bash，以小巧著称的 alpine Linux 就没有安装</span></code></pre></div>\n<p>除了 Bash，程序员们还在孜孜不倦的推出很多魔改版本，比如</p>\n<ul>\n<li>ZSH - （添加了 cd 自动补全，拼写自动修复，插件以及主题的支持，Mac 自带安装，并且默认启用，我们最终要使用的 Shell）</li>\n<li>Fish - 简单的配置，各种插件</li>\n<li>PowerShell - Windows 的杀手锏，由于是近几年推出的，属于划时代产品，比 bash 厉害多了。</li>\n</ul>\n<p>来测试一下：</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">zsh</span> --version\n<span class=\"token comment\"># zsh 5.3 (x86_64-apple-darwin18.0)</span></code></pre></div>\n<p>如果发现没有安装和配置，可以按照 GitHub 的官方教程进行安装并且设置为默认 shell：\n<a href=\"https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH\">https://github.com/ohmyzsh/ohmyzsh/wiki/Installing-ZSH</a></p>\n<h3>终端 Terminal</h3>\n<p>用来运行各种 Shell 的软件就称之为 Terminal，Mac 和 Windows 都有自带的终端软件，但是 Mac 的终端非常简陋，连添加 tab 都不支持。所以有更多的选项，有很多大家应该都熟悉。</p>\n<ul>\n<li>iTerm2 （我们要使用的软件，<a href=\"https://iterm2.com/%EF%BC%8C\">https://iterm2.com/，</a> GPL协议，免费）</li>\n<li>XShell ，Putty（专注于 SSH 远程操作）</li>\n<li>跨平台的 Hyper （<a href=\"https://hyper.is/\">https://hyper.is/</a> 跨平台基于 electron，可以尝试下）</li>\n</ul>\n<h3>安装 oh-my-zsh</h3>\n<p>有了心仪的 shell 以及 terminal 以后，下一步就是配置让它变得更强大，之前我们说过 ZSH 支持自定义插件以及主题，那么我们要从哪里下载这些内容呢？在这里，我们可以使用 oh-my-zsh: <a href=\"https://ohmyz.sh/\">https://ohmyz.sh/</a>\n它是一个开源的，社区管理的 zsh 的框架，里面预装了非常多精挑细选的插件，主题以及配置，就像一个合集，安装使用后，让你想不禁喊出 “Oh My ZSH”, 这就是这个名称的来源。</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token comment\"># 安装</span>\n<span class=\"token function\">sh</span> -c <span class=\"token string\">\"<span class=\"token variable\"><span class=\"token variable\">$(</span><span class=\"token function\">curl</span> -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh<span class=\"token variable\">)</span></span>\"</span>\n<span class=\"token comment\"># 因为上面是 github content 的内容，国内有可能需要代理</span>\n<span class=\"token comment\"># https://gitee.com/mirrors/oh-my-zsh/raw/master/tools/install.sh</span></code></pre></div>\n<p>安装完毕，就会发现用户的根目录下会有一个 <strong>.oh-my-zsh</strong> 的文件夹。里面就有一系列的文件夹，包括 themes 和 plugins，这些就是预装的插件和主题，供你使用。这些内容都可以在用户根目录下的 .zshrc 文件进行配置，这个我们之后再说。</p>\n<h3>配置主题</h3>\n<p>主题由两部分构成，第一部分是 Iterm2 本身的主题，包括整个界面的配色，比如背景颜色，各种文字颜色等等，第二部分是 zsh 的配置，包括提示行的展示方式以及对应的信息等等，这两部分一起构成了一个主题。</p>\n<p><strong>配置 Iterm2</strong></p>\n<p>选择 preferences => Profile => Colors 进行配置，可以在下拉框选择 Presets ，就是一系列设置好的主题，除了默认的几种还可以在网上下载：<a href=\"https://iterm2colorschemes.com/\">https://iterm2colorschemes.com/</a></p>\n<p>下载完对应的文件，直接点 import 选择文件就可以了，比如我这里的 Ayu/ Ayu Mirage 就是我下载的几个主题。和我的编辑器主题对应，做到大一统的感觉。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/17f5a67500b8a1051b4a1e800ba67077/dbcd2/change-theme.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 86.79245283018868%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAIAAABSJhvpAAAACXBIWXMAAAsSAAALEgHS3X78AAADOUlEQVQ4y41SS08bVxSeRRdhkay6KK2aVqVS2kYKUptNs8kfigwhNFKFqkqRUikVJEgWccHY2ECghBSa8ijEoTG08eDxvGcYz/PO2/bM2I4TBUMiFjkGdZNFlKNPo3PvPd/5zmOwMIxsE0kovLXycnhtXzcrURgYBnJdr1qtKaoWBIGm6eB7nhcEoef7BkJwDKMQ43leFPcEgbdt23UdiHCA50GMD99GvV6tVr1jc11XEASW43Rdh1dIisG5UMCJIqEosmHoQHSPjRcEWZanZu/ntrbDMIDUCKHckzzH8TgEq1oURVi5XMZxXFXV26Px2XvzzWYD4qAWgihB3r9W1gv4LoiomoYX8KHYIMuwi1OZ7c1c6/lzTEf2NmUzNI0TLMOXKxXfcRzgS5JEULS3ueqXcK/WmQJDEuJSAil70saMRvwTNVsYNKebriLxI0v8zGO5Gfq240JLIEtRlMzzSFUqlYooShxHClwcIXGvnNW0rShqYaBjmsiyLElWNcMEmmXbDMPSNMOyrCTLum4AWVVUkiLzzI5u6E/5XU4R6lG9M7BisQgiFCMYyIZx6QYyTdM6NoRM23Zsx2FYhqS4lf9eKLr7qPisJITNeg0TRREUCrulmv5v0+dtx4e2LcuGciCF47hQGgwfwmiW/ZvnVIS2BJFU1AZMGx5gSVJZnUv+svFnpt5oWZbJshwJpTAsDBn0/eOyQXyHK8ma5tThd3GCWoBBDxBH0/R4em51fatWq8ImSZIEPpBJklJUFcQVRYWllvfKjajGyNEO43fKfvXqsN3ebzQahwf7R0ev2+32wUEbLg8PD04AfqvVwneJzUeP19Y38vn8kwKXJyTHtrBY/w+A/oHrfR1nsK+DjnNyD7gSuzZ4fWj54VoylUmlpycms4uLf+RyueRkFjt1uvvU6Y/+R/db6DrT/UHXhx9/+nUmOz+WSI0lJscnMjOziw+WVvsGfsS+OPftO9Dz1Xdne3p7L16O303/fOPXGzdHxn7LTM8tLTxYvTr4E3a258I78NmXvZ98fv6b3kt3J7LDo4nhO4lkei6V+X12fjk2MPSe5O/jianRePJOPAlOOrtwb+Fh7NrQG6Hmw+evNMgJAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/17f5a67500b8a1051b4a1e800ba67077/799d3/change-theme.png\"\n        srcset=\"/static/17f5a67500b8a1051b4a1e800ba67077/00d96/change-theme.png 148w,\n/static/17f5a67500b8a1051b4a1e800ba67077/0b23c/change-theme.png 295w,\n/static/17f5a67500b8a1051b4a1e800ba67077/799d3/change-theme.png 590w,\n/static/17f5a67500b8a1051b4a1e800ba67077/2a3d6/change-theme.png 885w,\n/static/17f5a67500b8a1051b4a1e800ba67077/dbcd2/change-theme.png 1166w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>在 iTerm2 中修改主题</p>\n</blockquote>\n<p>我选用的 Ayu Mirage 主题，可以在这里下载：\n<a href=\"https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/Ayu+Mirage.itermcolors\">https://raw.githubusercontent.com/mbadolato/iTerm2-Color-Schemes/master/schemes/Ayu+Mirage.itermcolors</a></p>\n<h3>配置 ZSH</h3>\n<p>oh-my-zsh 以及内置了很多主题，就在 themes 文件夹下，然后可以在 .zshrc 中进行配置, 效果可以在这里观看演示：<a href=\"https://github.com/ohmyzsh/ohmyzsh/wiki/Themes\">https://github.com/ohmyzsh/ohmyzsh/wiki/Themes</a></p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">vim</span> .zshrc\n<span class=\"token comment\"># 修改对应的值，切换不同的主题</span>\n<span class=\"token assign-left variable\">ZSH_THEME</span><span class=\"token operator\">=</span><span class=\"token string\">\"robbyrussell\"</span>\n<span class=\"token comment\"># 修改完毕以后保存，打开新的tab 观看效果</span></code></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/5ddb3da8385a2e4c273810d73c49a9ce/5d675/theme.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 35.8%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAAA9klEQVQY022Qy26DMBBF8x0NtCCCwQ+Ejcf4BZENqKv2/3+nE0XdkNzNWB4dn/FctDXKx26Ut9s0dmxoSd/3nPO2bb8wn4/813MuW96ctZOSszUatFRqHMdlWay1eE8o+7gWxfX6HvbBGzNTSgHAOw+gBzGklGKMxoAN0YXIGCuK4g3snDMATdOg0HuvtRZcIBxiQPOaNnxFcFZVVV1XZziEYGZDWiKlRBj9QoicMzIReynr5e7TpgFwC2VZvsDGoFlKhV/FM+37Y9/XdX2wx/H98+ti5EKg/GXsJYS8Ty7gmpzUE+PP+Wc7E0I6xqlUdV2fnM/8ARkgR95XFc1RAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/5ddb3da8385a2e4c273810d73c49a9ce/799d3/theme.png\"\n        srcset=\"/static/5ddb3da8385a2e4c273810d73c49a9ce/00d96/theme.png 148w,\n/static/5ddb3da8385a2e4c273810d73c49a9ce/0b23c/theme.png 295w,\n/static/5ddb3da8385a2e4c273810d73c49a9ce/799d3/theme.png 590w,\n/static/5ddb3da8385a2e4c273810d73c49a9ce/2a3d6/theme.png 885w,\n/static/5ddb3da8385a2e4c273810d73c49a9ce/5d675/theme.png 1000w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>修改为 oh-my-zsh 其中的一个主题</p>\n</blockquote>\n<p><strong>特别注意，任何修改都是要在新的 session 中才能显示，重启 iterm2 或者打开一个新的 tab 就能看到结果。</strong></p>\n<p>后来慢慢发现内置的主题，还不够我玩的，很多人都在推荐 powerlevel10k，它不是内置的主题之一，先来看看它的主页：<a href=\"https://github.com/romkatv/powerlevel10k\">https://github.com/romkatv/powerlevel10k</a></p>\n<p>它提供更多有意思的信息，并且有更多的可定制化的能力，如果想详细了解，大家可以去看文档，我们这里就直接来安装。</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token comment\"># 其实就是 clone 到对应的文件夹中</span>\n<span class=\"token function\">git</span> clone --depth<span class=\"token operator\">=</span><span class=\"token number\">1</span> https://github.com/romkatv/powerlevel10k.git <span class=\"token variable\">${ZSH_CUSTOM<span class=\"token operator\">:-</span>$HOME<span class=\"token operator\">/</span>.oh-my-zsh<span class=\"token operator\">/</span>custom}</span>/themes/powerlevel10k\n<span class=\"token comment\"># 然后在 .zshrc 中修改为对应的主题</span>\n<span class=\"token assign-left variable\">ZSH_THEME</span><span class=\"token operator\">=</span><span class=\"token string\">\"powerlevel10k/powerlevel10k\"</span></code></pre></div>\n<p>在安装完毕以后，重启 Iterm2，由于 powerlevel10k 会提供一个命令提供一个可视化的界面去配置对应的主题，只需要输入</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">p10k configure</code></pre></div>\n<h3>安装字体</h3>\n<p>第一次运行 p10k configure ，如果它发现没有一个特定字体，它会自动下载一个等宽字体，对于编程字体，我想大家应该也是如数家珍，这里可以选择自己喜欢的编程字体。但是我还是推荐所有人都用它推荐的字体 - MesloLGS NF。</p>\n<p>Powerlevel10k 关于字体的描述：\n<a href=\"https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k\">https://github.com/romkatv/powerlevel10k#meslo-nerd-font-patched-for-powerlevel10k</a></p>\n<p>这个字体的特殊之处，它来自一个特殊的字体家族：<a href=\"https://www.nerdfonts.com/\">https://www.nerdfonts.com/</a> 看名字就知道专门给 nerds 提供的字体，它魔改了目前市面上非常流行的编程字体，除了字体之外还添加了非常多的图标，可以更丰富我们的展示界面。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/fd7423d2e39229fbf9d688aa4085ff24/76be7/font-enabled.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 13.472485768500947%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAIAAAAcOLh5AAAACXBIWXMAAAsSAAALEgHS3X78AAAAtUlEQVQI12NobW6Zu3FP8uLDmesuJi3Ynzh/f/rK08kLD8ZM3Zg4b0/q4iMJs3YmzdsTO3t/9a6D3cuy2xZk9K/M6V+V07k4i6E6NywuKVHbM9EoIEXfO17fKw5I6nnEajkG67hF6HvF67pF6XnE6LjFWATH2vva2XnbgkgfWxsvWwYzU2MVVW1JaXUZWSDSkJHTADHkNGXltWSBpKyGrLwmiCGnKS2tLiWrKyWrJymrJwVCugDpTjvEPKcqwAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/fd7423d2e39229fbf9d688aa4085ff24/799d3/font-enabled.png\"\n        srcset=\"/static/fd7423d2e39229fbf9d688aa4085ff24/00d96/font-enabled.png 148w,\n/static/fd7423d2e39229fbf9d688aa4085ff24/0b23c/font-enabled.png 295w,\n/static/fd7423d2e39229fbf9d688aa4085ff24/799d3/font-enabled.png 590w,\n/static/fd7423d2e39229fbf9d688aa4085ff24/2a3d6/font-enabled.png 885w,\n/static/fd7423d2e39229fbf9d688aa4085ff24/76be7/font-enabled.png 1054w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>MesloLGS NF字体提供各种图标</p>\n</blockquote>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/3ebe15048414f9052d08345a8a651ed2/2850b/font-disabled.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 12.860892388451441%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAIAAAAcOLh5AAAACXBIWXMAAAsSAAALEgHS3X78AAAAm0lEQVQI12Nomb8mZsaOmGlbYqdvjZu5I372zrDOJWFdy+Jn72ld21HRHVXRn9Q6L71xZqq5rZOekZ2Bqb2BCRQx+IdHqNmH6LpG6LpH67pFAZG2Y4imXYCua6SVl6uJrZmpg6W1h42Fs7Wcir6Mkh4yYlBQ1paW1ZCV04QgGTkNWXktWQVtIFtKVkdaXg+IpORASF7FQEEVBQEAHHMv66wyAOoAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/3ebe15048414f9052d08345a8a651ed2/799d3/font-disabled.png\"\n        srcset=\"/static/3ebe15048414f9052d08345a8a651ed2/00d96/font-disabled.png 148w,\n/static/3ebe15048414f9052d08345a8a651ed2/0b23c/font-disabled.png 295w,\n/static/3ebe15048414f9052d08345a8a651ed2/799d3/font-disabled.png 590w,\n/static/3ebe15048414f9052d08345a8a651ed2/2850b/font-disabled.png 762w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>Fira Code 原版没有提供图标，会显示为问号</p>\n</blockquote>\n<p>如果自动下载失败(因为字体源文件来自 githubusercontent)，可以在这手动下载 MesloLGS NF：<a href=\"https://github.com/romkatv/dotfiles-public/blob/master/.local/share/fonts/NerdFonts/MesloLGS%20NF%20Regular.ttf\">https://github.com/romkatv/dotfiles-public/blob/master/.local/share/fonts/NerdFonts/MesloLGS%20NF%20Regular.ttf</a></p>\n<p>大家还可以从 nerdfonts 选择自己喜欢的字体进行下载安装。这里的字体都是经过改装的，结合了字体和图标，具体地址请看：<a href=\"https://www.nerdfonts.com/font-downloads\">https://www.nerdfonts.com/font-downloads</a></p>\n<p>下载完后，双击字体文件进行安装，安装完字体以后，重启 iterm2 并且在 iterm2 中进行对应字体的配置，Preferences => Profile => Text => Change Font。</p>\n<p>选择完了有图标的字体以后，就可以继续运行 </p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">p10k configure</code></pre></div>\n<p>进行配置了，根据提示选择你喜欢的展示形式。</p>\n<h3>安装插件</h3>\n<p>最后我们来安装两个插件，在 zsh 中，插件指的是一些别名和函数的合集，简单来说就是完成特定的功能，oh-my-zsh 已经提供了很多默认的插件，这里我们来另外安装两个，这两个插件也是我平时用的最多，帮助最大的，建议大家都安装一下。\n第一个是 自动补全 <strong>auto-suggestion</strong>，<a href=\"https://github.com/zsh-users/zsh-autosuggestions/\">https://github.com/zsh-users/zsh-autosuggestions/</a> 它可以记录你输入的历史记录，当你键入前面的命令的时候，他会显示之前输入的命令。</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token comment\"># 安装，其实就是 clone 到本地 oh-my-zsh 的 plugins 当中</span>\n<span class=\"token function\">git</span> clone https://github.com/zsh-users/zsh-autosuggestions <span class=\"token variable\">${ZSH_CUSTOM<span class=\"token operator\">:-</span>~<span class=\"token operator\">/</span>.oh-my-zsh<span class=\"token operator\">/</span>custom}</span>/plugins/zsh-autosuggestions\n<span class=\"token comment\"># 使用，编辑 .zshrc 文件</span>\n<span class=\"token assign-left variable\">plugins</span><span class=\"token operator\">=</span><span class=\"token punctuation\">(</span> \n    <span class=\"token comment\"># other plugins...</span>\n    zsh-autosuggestions\n<span class=\"token punctuation\">)</span></code></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/bfdc2a66c4d150b55890d3ede16520e3/8a848/auto-sugg.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 12.027027027027028%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAIAAADXZGvcAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYElEQVQI103LWwqAIBCF4fZRXpoxNaPRMq2HqP3vqoEIgo/D/3Ia8NnFel53SAdOB46FmVAxVDPtnnY3F2bChm7t7YI+K5MEUAfUaJu5Wk28EklhZPIjIEp4O/HnTw/pAcMwExgFMxfTAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/bfdc2a66c4d150b55890d3ede16520e3/799d3/auto-sugg.png\"\n        srcset=\"/static/bfdc2a66c4d150b55890d3ede16520e3/00d96/auto-sugg.png 148w,\n/static/bfdc2a66c4d150b55890d3ede16520e3/0b23c/auto-sugg.png 295w,\n/static/bfdc2a66c4d150b55890d3ede16520e3/799d3/auto-sugg.png 590w,\n/static/bfdc2a66c4d150b55890d3ede16520e3/2a3d6/auto-sugg.png 885w,\n/static/bfdc2a66c4d150b55890d3ede16520e3/ae92f/auto-sugg.png 1180w,\n/static/bfdc2a66c4d150b55890d3ede16520e3/8a848/auto-sugg.png 1480w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>会自动补全之前输入的命令</p>\n</blockquote>\n<p>第二个插件是语法高亮 <strong>syntax highlighting</strong>，<a href=\"https://github.com/zsh-users/zsh-syntax-highlighting\">https://github.com/zsh-users/zsh-syntax-highlighting</a> 它可以用绿色或者红色显示你输入的命令是不是一个合法的命令以及一系列相关的高亮。</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token comment\"># 安装 同样的道理</span>\n<span class=\"token function\">git</span> clone https://github.com/zsh-users/zsh-syntax-highlighting.git <span class=\"token variable\">${ZSH_CUSTOM<span class=\"token operator\">:-</span>~<span class=\"token operator\">/</span>.oh-my-zsh<span class=\"token operator\">/</span>custom}</span>/plugins/zsh-syntax-highlighting\n<span class=\"token comment\"># 使用，同样</span>\n<span class=\"token assign-left variable\">plugins</span><span class=\"token operator\">=</span><span class=\"token punctuation\">(</span> <span class=\"token punctuation\">[</span>plugins<span class=\"token punctuation\">..</span>.<span class=\"token punctuation\">]</span> zsh-syntax-highlighting<span class=\"token punctuation\">)</span></code></pre></div>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/58389158dafc60612a22334a4ff25283/d54e7/hightlight.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 30.56092843326886%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAIAAABM9SnKAAAACXBIWXMAAAsSAAALEgHS3X78AAABbElEQVQY02PQNbLr7epoXLk3dMHx2CWngqdsj1xwJGL+Yf/edYETN4fO3Bs8dUfQpM3Bsw7XbppROzW4aUFiw5zY9mVJhtaWDGpaZma29nbeXoY2Lk4eXtZOrpYObk7uHmY2Dip61sr6tip6tsp6Nir6dpomNlqGJlpGppr6IFJR3ZDB2NxR28BKQ9vY2MhKX89UVlZdRkZNTlZNTl5DWkYNiGRk1MEMVQlJDUkZPQlpHQlpXXEpXVklfQYVTRNHF19zzwhttxgdtxg9twh9r1h9z1hd1wh9j2h99yg9t0h990igiLWfr5WrlY2nna2XnZ2XnYqWEYOusV1LbW3T7LXxs7ZlLt7l1rDAv2eNX/cat+oZHnVzfdqXeTUv9myY592+On9eV36LX3FfZGFnWOXkaH0LCwY5FQMjbRNHfQsPG3M/V3MRCQ05eU0ZWQ1ZeS0ZOU0gCWKA2VKy2tIK+tJyelJyepKyunJK+gDPOGh2g5aadQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/58389158dafc60612a22334a4ff25283/799d3/hightlight.png\"\n        srcset=\"/static/58389158dafc60612a22334a4ff25283/00d96/hightlight.png 148w,\n/static/58389158dafc60612a22334a4ff25283/0b23c/hightlight.png 295w,\n/static/58389158dafc60612a22334a4ff25283/799d3/hightlight.png 590w,\n/static/58389158dafc60612a22334a4ff25283/2a3d6/hightlight.png 885w,\n/static/58389158dafc60612a22334a4ff25283/d54e7/hightlight.png 1034w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<blockquote>\n<p>高亮对应的语法，绿色和红色可以指示是否是合法的命令</p>\n</blockquote>\n<h3>安装增强应用程序 Fig</h3>\n<p>Fig <a href=\"https://fig.io/\">https://fig.io/</a> 是一个第三方软件，它不是一个单独的 ternimal 程序，它可以集成到对应的终端程序上，提供更丰富的任务。\n它内部提供了一个接口，可以自动显示一些常用命令的自动补全，特别注意这个比之前的插件要强大，因为不需要时你之前输入过的。而是自动获取常用的命令，非常的好用。\n大家可以自己去安装，操作都是傻瓜式的，很简单。看看最后的效果：\n<span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 590px;\"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 34.467455621301774%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsSAAALEgHS3X78AAABU0lEQVQY022QbUvCUBiG9y8Crel007m57Xh2ztnb2RQ3NV8KlQgHJpq9Ilj0QmGiZvS/2+xLSHBxc3+54HluxrCD4WTWmH25d1t6tSzfb+3xuzNZ0OlHVOj1pv8w7U/8wax9dtvMFuBRRkvxgM3GyZSQ1wtH4fMifFmTwZM3ejPP53b46AxfrV2e3lx2L1rdUasTHosKESTMF1BOxlwOMnwBH7B5PqM1mp9WbwNb62JjJdVXor+UgqXoL6TGN0/GiUMpwWppocTlSruEaQEwkkKSGSUn0mF73uqcVIOm7VUNy0MGRcSByILYlFXM8iAlgOjUvzAaMBJcMS/ag/rUDyqmadqWiRFCOkS6rkMINEWSNZbfN2NZBSTJKULe7NfCWr1aKZc9z3VdSqljGgRjhLGuqJDN/icXVRwNGL0BdFvHFBI3LoRCHFNCjgIMUUa/8+7xA9Z/X6lw1LVSAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"图片\"\n        title=\"图片\"\n        src=\"/static/ac9ddb68463e6da8b768b123254b86c4/799d3/fig.png\"\n        srcset=\"/static/ac9ddb68463e6da8b768b123254b86c4/00d96/fig.png 148w,\n/static/ac9ddb68463e6da8b768b123254b86c4/0b23c/fig.png 295w,\n/static/ac9ddb68463e6da8b768b123254b86c4/799d3/fig.png 590w,\n/static/ac9ddb68463e6da8b768b123254b86c4/2a3d6/fig.png 885w,\n/static/ac9ddb68463e6da8b768b123254b86c4/ae92f/fig.png 1180w,\n/static/ac9ddb68463e6da8b768b123254b86c4/e60c7/fig.png 1352w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<blockquote>\n<p>自动补全 git 的一些常见命令</p>\n</blockquote>\n<p>好，经过一系列的操作，现在我们的终端看起来完美了，兼具颜值和效率，可以让你赏心悦目加事半功倍了。</p>","frontmatter":{"slug":"best-terminal-setup","title":"打造程序员完美的终端环境，颜值爆表，效率 X 10倍","date":"July 30, 2022","excerpt":"非常多程序员在对某些和我们朝夕相处的工具都在追求高颜值：比如终端，编辑器，键盘等等，在这里，我想单独拿出终端来说说，它是除了编辑器以外最常用的工具，也是体现程序员个性的一个重要展示途径，让我们一起来一次终端终极改造计划，让你的终端颜值爆表，效率提高十倍。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/best-terminal-setup/","previous":{"fields":{"slug":"/pro-git/"},"frontmatter":{"title":"程序员必会的六条黄金 Git 命令，让你效率提高百分之百"}},"next":{"fields":{"slug":"/first-300-customers/"},"frontmatter":{"title":"我独立开发的产品是怎样获得最初的 300 个用户的？"}}}}}