这篇 iTerm2 + Oh My Zsh 教程手把手让你成为这条街最靓的仔

前言

做为一名程序员，开发环境不舒服会很大程度影响开发效率，因此必定要花时间好好整一下开发环境（好了，我知道你是在给摸鱼找借口）。

最近短短几个月，换了两次新电脑，经历了两次装机（因为各类缘由，无法备份恢复，你懂的），每一次都得从新搞一套属于本身的开发环境。

这里就记录一下我是如何一步一步的打造属于本身的 Terminal在 macOS 上的 Terminal 是怎么样的，你若是想和我同样，直接 cv 大法 就能够搞一套同样的。

文中的连接在微信里没法打开，若是有须要能够点击 阅读全文跳转到掘金的文章里。

Terminal

Terminal 咱们常常会称做 终端，如今中文版的 mac 里也是叫作这个。

咱们天天都须要在其中输入不少命令去作一些事情。能够说，天天有大量的时间都须要面对它。

我记得我第一次点下鼠标，打开这个终端的时候，看到了这样一个界面：

我傻了。怎么这么丑？macOS 上怎么容许有这么丑的应用？

不行，若是让我天天对着它，必定会把电脑砸了（虽然它是高贵的 16寸 MacBook Pro），我得找一个第三方 Terminal 来替代它。

iTerm2

很快，我就找到了新欢，它的名字叫 iTerm2，它是一款彻底免费，为 macOS 打造的一款终端工具，能够说是程序员必备了，若是还没用过的，赶忙跟着这篇文章用起来吧。

iTerm2 官网 符合国外网站一贯的极简风格（又不是不能用，搞那么花里胡哨干吗）。

直接下载，解压，拖入 Application 里就 ok 了。打开看看。

怎么感受不太对，虽然你的背景变黑了，但依然掩盖不了你的丑啊。

没事儿，先天不足，后天努力嘛。

告别黑底白字，整出最骚终端，开始吧。

on my zsh

主角是它，拥有了它，你必定是大家组最靓的仔。

Oh My Zsh is an open source, community-driven framework for managing your zsh configuration.

安装

官网提供了两种安装方式：

# via curl
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

# via wget
sh -c "$(wget -O- https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

若是，因为一些缘由，上面两种方法你都没能安装成功，能够试一下手动安装：

# 下载 oh-my-zsh 源码
git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
# 而且把 .zshrc 配置文件拷贝到根目录下
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc
# 让 .zshrc 配置文件生效
source ~/.zshrc

嗯... 你和我说，clone 也不行啊，不可描述的缘由，网速不容许啊。

那你这样作。

在 oh-my-zsh GitHub 上下载 zip -> 解压 -> 移动 oh-my-zsh 目录到根目录：

cd ~/Downloads
mv ohmyzsh-master ~/.oh-my-zsh
cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc
source ~/.zshrc

若是还不行，你来找我。

好了，从新启动 iTerm2，是否是已经变了。

.zshrc

这个文件很是关键，是 oh-my-zsh 的配置文件，它的位置在根目录下，能够经过 vim ~/.zshrc 查看。

每一次修改它以后，若是想要当即生效须要手动执行 source ~/.zshrc。

修改配色方案

一打开 .zshrc，就能够看到关于配色方案的配置：

# Set name of the theme to load --- if set to "random", it will
# load a random theme each time oh-my-zsh is loaded, in which case,
# to know which specific one was loaded, run: echo $RANDOM_THEME
# See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes
ZSH_THEME="agnoster"

oh-my-zsh 提供了不少内置的配色方案，能够经过命令来查看：

ls ~/.oh-my-zsh/themes

也能够打开 https://github.com/ohmyzsh/ohmyzsh/wiki/Themes 更为直观的查看全部的配色方案。

只要修改 ZSH_THEME 的值就能够设置对应的配色方案了。

若是你想天天都过得不同，能够设置成 random，每次打开 iTerm2 的都会随机使用一种配色方案。

我曾经有一段时间，因为不想折腾，使用的是这个配色方案：agnoster，它是这样的：

固然，有一天，我忽然想造做一下，就开始本身配色。（没备份... 找不着了...）

若是你以为默认的配色方案不够骚，而且以为本身的审美 ok，也能够本身来搭配颜色。

自定义配色方案

入口：菜单栏 -> Profiles -> Open Profiles -> Edit Profiles -> + 一个配置 -> 选择 Colors

像我这样审美不行的人，花了一成天的时间搞这个，到头来发现，仍是默认的更好看一点...

⚠️ 别摸一下午鱼搞这个被老板发现，仍是下班了再搞吧。

第三方配色方案

固然，不是只有你和我想要本身搞一套最骚的配色方案，你们都有这样的想法。

iTerm2-Color-Schemes 这里有很是多的配色方案题，也已经在 GitHub 上开源。

你能够像我同样这样作：

# 找一个目录存放 iterm2 相关的文件
mkdir Code/other/iterm2
# 下载 iTerm2-Color-Schemes
git clone https://github.com/mbadolato/iTerm2-Color-Schemes
# schemes 文件夹就是真实存放配色方案的目录
cd iTerm2-Color-Schemes/schemes

一样，若是 clone 不下来就下载 zip 解压就行了。

经过如下操做路径能够导入全部配色方案：

菜单栏 -> Profiles -> Open Profiles -> Edit Profiles -> 选择 Colors -> 右下角 Color Presets -> Import...

找到 schemes 文件夹选中全部配色方案就行了，而后你就 眼花缭乱 会收获满满的幸福。

没事，等等会有更高级的方案。

安装字体 PowerFonts

为何要安装字体呢？有些主题是会设置图标的，咱们电脑上的字体通常都不支持这些图标，会出现乱码。

打开 Fonts 下载 zip 包都本地解压，就会获得不少字体。

# 将下载好的 fonts 移动到以前建的目录
mv ~/Downlaods/fonts-master ~/Code/other/iterm2/fonts
cd ~/Code/other/iterm2/fonts
# 执行安装文件
./install.sh

这样就安装好了，而后经过如下操做路径设置字体：

菜单栏 -> Profiles -> Open Profiles -> Edit Profiles -> 选择 Text

能够选择 Meslo 这个字体，乱码的图标就正常了。

毛玻璃效果/窗口大小

若是想要更高逼格的毛玻璃效果，而且找到本身舒服的大小（？？？），能够在这里设置：

操做路径：菜单栏 -> Profiles -> Open Profiles -> Edit Profiles -> 选择 Window

自定义背景

激动人心的时刻，你能够为你的终端设置一个本身喜欢的 小姐姐 图片做为背景，敲命令的时候都会更带劲吧：

咳咳，Dota 云玩家们，你是更喜欢冰女仍是火女？

操做路径：菜单栏 -> Profiles -> Open Profiles -> Edit Profiles -> 选择 Window

状态栏

能够为每一个打开的终端都设置一个状态栏，显示一些系统信息（好比 CPU、RAM、当前目录等）。

操做路径：菜单栏 -> Profiles -> Open Profiles -> Edit Profiles -> 选择 Session

总结

通过这一番折腾，一个属于你本身的高颜值终端就诞生了。

不过，总感受这样仍是有点麻烦，有没有更厉害的玩意儿？有的，咱们这就用起来。

神器 Powerlevel10k

Powerlevel10k 简单来讲就是一个 ZSH 的主题，只不过它的功能很强大，如下简称 p10k。

安装

咱们用的是 Oh My Zsh，因此这样安装 p10k 便可：

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k

而后须要打开 ~/.zshrc 设置 ZSH_THEME:

ZSH_THEME="powerlevel10k/powerlevel10k

安装字体 Nerd Fonts

上文咱们已经安装了 PowerFonts，若是须要使用一些图标，这个字体是不够用的，咱们须要一个强大的字体：Nerd Fonts，它支持下面这么多种图标：

安装

你能够如官网所说，经过 brew 来安装：

brew tap homebrew/cask-fonts
brew cask install font-hack-nerd-font

可是我不建议这样，包括不建议你下载 zip 包，由于这个文件太大了，太大了，太大了。。。

咱们能够这样：

打开 https://github.com/ryanoasis/nerd-fonts/releases，滑动页面找到 Assets 区域，如图：

咱们只要下载箭头所指的 Hack.zip 这个字体包，解压缩以后就会得到一些 ttf 字体文件，双击安装便可。

zshrc 设置字体

POWERLEVEL9K_MODE="nerdfont-complete"
ZSH_THEME="powerlevel10k/powerlevel10k"

注意，须要设置在 ZSH_THEME 以前。

iTerm2 设置字体

操做路径：菜单栏 -> Profiles -> Open Profiles -> Edit Profiles -> 选择 Text

这样，全部的图标就均可以正常显示了。

自动配置

若是你指定了 ZSH_THEME="powerlevel10k/powerlevel10k" 可是在 zshrc 里没进行任何手动的配置，打开 iTerm2 的时候就会触发自动配置的流程。

也能够经过如下命令再次进入自动配置的流程：

p10k configure

问题大体以下：

1. 这个符号看起来像钻石（旋转的正方形）吗？
2. 这个符号看起来像锁吗？
3. 这个符号看起来像 Debian logo 吗？
4. 这些图标都交叉分布在 X 之间吗？
5. 风格
6. 编码
7. 是否显示时间
8. 目录层级分隔符
9. 头部（左边）
10. 尾部（右边）
11. 是否换行
12. 左边和右边是否有链接线
13. 命令行和提示是否链接
14. 两行命令之间分布稀疏仍是松散
15. 是否须要图标

后面几个选项随意，执行完命令以后，就会初始化 p10k：在根目录下生成 ~/.p10k.zsh，而且在 ~/.zshrc 底部写入：

若是想废除 p10k 的配置，只须要删除 ~/.p10k.zsh，而且删除上面这条命令便可。

自定义配置

若是你想当高玩，也能够在 ~/.zshrc 里手动配置 p10k，或者在 ~/.p10k.zsh 基础上进行修改。

这个得要本身看文档摸索啦，这里我简单说几个配置：

• POWERLEVEL9K_LEFT_PROMPT_ELEMENTS
• POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS
• POWERLEVEL9K_VCS_GIT_GITHUB_ICON

POWERLEVEL9K_LEFT_PROMPT_ELEMENTS

显示在命令行左边区域的元素：

和上图相对应的配置为：

POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(user dir vcs newline)

POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS

显示在命令行右边区域的元素：

和上图相对应的配置为：

POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(time)

能够在 POWERLEVEL9K_LEFT_PROMPT_ELEMENTS 和 POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS 里用的字段有：

字段	含义
user	用户名
dir	当前目录名
vcs	远程仓库信息
os_icon	系统图标
date	日期
host	主机名
status	上一条命令的执行状态
time	当前时间
...	...

若是还想了解更多，自行前往文档查看。

POWERLEVEL9K_VCS_GIT_GITHUB_ICON

若是它是一个 Github 目录，就会显示这个图标：

因此出如今窗口里的图标均可以自定义，能够经过命令查看目前正在使用的图标：

get_icon_names

找到想要修改的 KEY 就能够修改图标了。

注意：须要使用 Nerd Fonts 才能收获这满满的快乐。

有人问，这个图标的代码该去哪找呢？

在这里：https://www.nerdfonts.com/cheat-sheet

这是 Nerd Fonts 可以支持的全部图标，能够直接使用关键字进行搜索。

好比，我想修改 Git 的图标：

找到喜欢的图标以后，右下角的 f113 就是这个图标的值，只须要这样就了：

POWERLEVEL9K_VCS_GIT_GITHUB_ICON=$'\uf113'

快造做起来~

插件

到了这一步，你的 iTerm2 应该已经颜值爆表，足够好看了。

毕竟这是咱们的饭碗，光好看不行，得好用，来了解一下强大的插件体系。

首先，咱们先了解一下插件在 ~/.zshrc 的哪一个位置，找到下面这个字段就不会错了：

plugins=(git)

git

git 插件是自带插件，默认已经开启，它可让咱们使用很是骚好用的的 git 命令，提升开发效率：

用了插件以前的 git 命令	用了插件以后的 git 命令
git add --all	gaa
git branch -D	gbD
git commit -a -m	gcam
git checkout -b	gcb
git checkout master	gcm

是否是简单多了。能够经过命令查看全部配置：

vim ~/.oh-my-zsh/plugins/git/git.plugin.zsh

自动跳转对应目录

若是你像我同样是一个整理狂魔，会把文件、目录一层一层的整理好。

整理一时爽，用时就不爽

目录层级深了，年龄大了，就找不到文件放哪了，cd 起来也不方便了，有什么办法能够解决呢？教你两招。

设置别名 alias

打开 ~/.zshrc 输入别名，好比：

alias articles='~/Code/GitHub/articles'

而后执行 articles 就会自动跳到 ~/Code/GitHub/articles 了。

这样仍是比较麻烦的，得为每一个目录都配置 alias。

autojump 插件

autojump 插件会记录你全部的访问记录，不一样单独配置，直接访问便可。

安装

brew install autojump

配置

打开 ~/.zshrc 加一行代码：

[[ -s $(brew --prefix)/etc/profile.d/autojump.sh ]] && . $(brew --prefix)/etc/profile.d/autojump.sh

而后就是 source 一下就生效了。

使用

使用 j 命令就能够执行 auto-jump，好比 j articles：

前提是你访问过 articles 目录，也就是你得让它记住。

zsh-autosuggestions

这个插件的做用很简单，就是像它名字同样，会在你输入命令的时候提示而且自动完成：

brew install zsh-autosuggestions

colors

这是一个文件目录美化插件，如图所示：

gem install colorls

而后执行 colors 就行了，你也能够设置 alias 更高效一点：

alias lc='colorls -lA --sd'

设置了别名以后，就像我同样，输入 lc 就行了。

我就只用了以上几个插件，已经可以大幅度提高工做效率了，若是有其它好用的插件，必定要告诉我呀。

VS Code 配置

若是你用的是 VS Code，须要再配置一下字体:

{
  "terminal.integrated.fontFamily": "Hack Nerd Font"
}

homebrew 安装

上面的几个插件都用的是 brew 命令安装，应该不在少数的人刚开始电脑上是没有 brew 的：

brew: command not found

而后就百度了一下，说要装一个叫 Homebrew 的东西，而后就按照官网的方式执行安装：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

若是安装成功了，恭喜你，你的运气真的很好。若是没安装成功，那你必定会各类百度如何安装，而后仍是安装不成功：

curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

有人告诉你，换一个中科大的源试试：

/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

而后，你可能会卡在这：

==> Tapping homebrew/core
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'...

也就是由于不可描述的缘由，下载 homebrew-core 这个库的时候网络不行了，那咱们就手动 clone 一个吧，或者下载一个 zip 包解压到对应目录：

cd "$(brew --repo)/Library/Taps/"
mkdir homebrew && cd homebrew
git clone git://mirrors.ustc.edu.cn/homebrew-core.git

而后再执行上面的命令安装就行了：

/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

会看到成功安装的提示：

==> Installation successful!

写在最后

就问你这样一套终端开发环境骚不骚好很差用。不说别的，看着这背景，写代码都更有动力了。

交流讨论

欢迎关注公众号「前端试炼」，公众号平时会分享一些实用或者有意思的东西，发现代码之美。专一深度和最佳实践，但愿打造一个高质量的公众号。