這篇 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!

寫在最後

就問你這樣一套終端開發環境騷不騷好很差用。不說別的，看着這背景，寫代碼都更有動力了。

交流討論

歡迎關注公衆號「前端試煉」，公衆號平時會分享一些實用或者有意思的東西，發現代碼之美。專一深度和最佳實踐，但願打造一個高質量的公衆號。