Mac OS 終端機美化看這一篇就夠了!(Mac OS Terminal)

背景圖

前言

這一篇我將會來分享與紀錄該如何將預設的 Mac 終端機美化,而這一篇我會盡可能詳細的說明每個步驟,因為這一塊其實也是稍微有一點點複雜,所以我也會盡可能用簡單的方式來說明。

為什麼要美化終端機?

雖然美化終端機這件事情,並不是一個非常重要的事情,就算你沒有去美化它也可以正常開發,那麼為什麼要特別做美化這件事情呢?我自己是歸納出以下幾點原因

  • 開發時可以透過終端機的一些美化了解當前狀況,例如:當前分支、路徑、狀態等。
  • 開發時眼睛看起來特別舒適,不會像預設的終端機那麼醜。
  • 純粹就是一個爽字。

雖然有點弱弱的,但是美化前後真的有差,那麼這個流程可能會稍微複雜一點就是了。

安裝 HomeBrew

再往下進行之前,我會建議你使用 HomeBrew,而 HomeBrew 是一款 Mac 的套件管理工具,可以讓你輕鬆的安裝各種套件,而且操作方式也很簡單,那麼該怎麼安裝 HomeBrew 呢?其實很簡單,只需要打開終端機,然後輸入以下指令

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

安裝過程通常會稍微慢一點,安裝完畢後你可以在畫面上 Installation successful! 的提示訊息,表示安裝成功。

Installation successful!

接下來你可以輸入以下指令確認是否已經安裝成功

1
brew --version

若有出現版本號就代表你安裝成功了。

Note
如果發現 HomeBrew 的安裝指令無法安裝了,會建議你到 HomeBrew 官網看看是否有更新的安裝方式。

安裝 iTerm2

那麼接下來我們要來安裝 iTerm2,iTerm2 是什麼呢?其實 iTerm2 也是一個終端機,你可能會想說為什麼要再額外安裝一個終端機而不使用內建的就好了?主要原因是內建終端機在美化上有一些限制,而 iTerm2 如果要做一些美化的話,相對比較容易且方便的。

接下來安裝方式其實滿多種的,一種是透過官方網站,另一種則是透過 HomeBrew,而我會使用 HomeBrew 來安裝 iTerm2。

請你在終端機輸入以下指令

1
brew install --cask iterm2

這樣子 iTerm2 就會安裝在你的電腦上了,接下來你就可以按下 command + space,然後輸入 iTerm2 打開它。

(因為我有安裝過,所以就不附上安裝截圖。)

Z shell(Zsh) 安裝

接下來我們要來安裝 ZSH,ZSH 是什麼呢?ZSH 是一個改良過的 BASH,而 BASH 則是預設的終端機,ZSH 有很多的功能,例如:自動補全、自動提示、顏色等等,所以比內建的 BASH 來的更好用,因此非常推薦你安裝。

那麼首先我們一樣會需要使用 HomeBrew 來安裝 ZSH,請你在終端機輸入以下指令

1
brew install zsh

安裝完畢之後,你可以輸入以下指令確認是否安裝成功

1
zsh --version

接下來我們要將 ZSH 設定為預設的終端機,請你在終端機輸入以下指令

1
sudo sh -c "echo $(which zsh) >> /etc/shells"

這一行指令的意思是將 zsh 加入到 /etc/shells 這個檔案中,這樣子我們才能夠將 ZSH 設定為預設的終端機。

接著我們要輸入以下指令,將 ZSH 設定為預設的終端機進而取代 BASH

1
chsh -s $(which zsh)

當然,zsh 內建功能雖然很強大了,但是其實還是有很多的功能是沒有的,所以我們還需要安裝一些套件,才能夠讓 ZSH 更加強大。

Oh My Zsh 安裝

安裝完 Zsh 之後,我們要來安裝 Oh My Zsh,Oh My Zsh 是一個 Zsh 的框架,它可以讓你的 Zsh 更加強大,而且還有很多的主題可以選擇,通常安裝了 Zsh 之後,我們都會馬上安裝 Oh My Zsh。

接下來請在終端機輸入

1
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

或是使用 wget 方式

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

安裝完後,你才可以安裝其他的 Zsh 插件,例如:zsh-autosuggestions、zsh-syntax-highlighting 等等。

zsh-completions 安裝

雖然 Zsh 本身提供的自動補全功能已經很強大了,但是我們可以再額外安裝 zsh-completions 來讓 Zsh 的自動補全功能更強大,它裡面包含了各種各樣的自動補全功能,例如:git、brew、npm、docker 等等,所以非常推薦你安裝。

所以接下來,請你在終端機輸入以下指令

1
brew install zsh-completions

安裝完畢後,打開 ~/.zshrc 這個檔案,然後在最後面加上以下內容

1
2
3
4
5
6
7
# zsh-completions
if type brew &>/dev/null; then
FPATH=$(brew --prefix)/share/zsh-completions:$FPATH

autoload -Uz compinit
compinit
fi

接著重新打開終端機你可能會收到以下訊息

1
2
zsh compinit: insecure directories, run compaudit for list.
Ignore insecure directories and continue [y] or abort compinit [n]?

這時候你要輸入 y,然後按下 Enter,這樣子就可以了。

但是每次打開終端機都會出現這個警告訊息,剛好我有查到這一篇「zsh compinit: insecure directories

只需要輸入 compaudit | xargs chmod g-w 就解決了。

zsh-autosuggestions 安裝

zsh-autosuggestions 是一款自動提示套件,它可以提示你之前曾經輸入過的指令,非常的強大,你可以觀看以下影片來了解它的功能有多強大

asciicast

接著如何安裝呢?其實非常簡單,打開 ~/.zshrc 這個檔案,然後找到 plugins=(git) 這一行,然後在 git 後面加上 zsh-autosuggestions,最後的樣子會像這樣

1
2
3
4
5
plugins=( 
git
# other plugins...
zsh-autosuggestions
)

接下來打開終端機輸入

1
~/.oh-my-zsh/custom/plugins/ 

接著最後再輸入

1
git clone https://github.com/zsh-users/zsh-autosuggestions

這樣子就可以囉~

zsh-syntax-highlighting 安裝

接下來額外我們要安裝的套件是 zsh-syntax-highlighting,簡單來講它可以幫助我們在終端機中看到指令的顏色,例如:指令的顏色、參數的顏色等等,這樣子可以讓我們在使用指令的時候更加清楚,也可以讓我們知道我們的指令有沒有打錯。

底下是官方提供的範例圖:

zsh-syntax-highlighting

接著請打開你的終端機,然後輸入以下指令

1
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

接著一樣找到 ~/.zshrc 這個檔案,然後找到 plugins=(git) 這一行,然後在 git 後面加上 zsh-syntax-highlighting,如果你依照前面教學一路做下來的話,目前會像這樣

1
2
3
4
5
6
plugins=( 
git
# other plugins...
zsh-autosuggestions
zsh-syntax-highlighting
)

這樣子就會有 zsh-syntax-highlighting 的效果了。

以上算是差不多我滿推薦的 Zsh 插件了。

更改 Zsh 的主題

接下來我們要來更改一下 Zsh 的主題,因為我們的 Zsh 現在看起來還是有點醜,所以我們要來更改一下。

首先我們要先找到 Zsh 的主題,你可以到這裡找到你想要的主題

Zsh Themes

底下有非常非常多的主題可以給你選擇,預設 Zsh 會是 robbyrussell 這個主題,早期我自己是挑選了 agnoster 這個主題,你可以自己選擇你喜歡的主題。

因此如果你要改成 agnoster 的話,一樣打開 ~/.zshrc 這個檔案,然後找到 ZSH_THEME="robbyrussell" 這一行,然後把 robbyrussell 改成 agnoster,最後的樣子會像這樣

1
ZSH_THEME="agnoster"

這樣就會套上 agnoster 這個主題了。

安裝 Powerlevel10k

Powerlevel10k 也是一款 Zsh 的主題,只是它比較特別,它可以讓你在終端機中看到一些資訊,例如:目前所在的資料夾、目前所在的分支、目前的 Git 狀態等等,而我目前就是使用 Powerlevel10k 這個主題,簡單來講就是強化版的主題。

安裝方式一樣請你在終端機輸入

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

接著打開 ~/.zshrc 這個檔案,然後找到 ZSH_THEME="robbyrussell" 這一行,然後把 robbyrussell 改成 powerlevel10k/powerlevel10k,最後的樣子會像這樣

1
ZSH_THEME="powerlevel10k/powerlevel10k"

這樣子就可以看到 Powerlevel10k 的效果了~

Powerlevel10k 的設定

接下來會建議你在終端機輸入 p10k configure,然後按照指示一步一步的設定,透過官方的指引,你就可以設定出你想要的 Powerlevel10k 主題哩~

Powerlevel10k 的設定基本上與前一代 Powerlevel9k 簡化很多了,都是透過問答方式就可以設定出來。

iTerm2 顏色主題

接下來是關於 iTerm2 的配色,其實 iTerm2 本身就有很多配色可以選擇,你可以透過 「iTerm2 -> Settings -> Preferences -> Profiles -> Colors」底下的 Color Presets 來選擇你想要的配色。

Color Presets

如果內建提供的配色你都不喜歡的話,你可以到這裡找到你想要的配色

iTerm2-Color-Schemes

挑選出你要的配色之後,你可以整包下載回家,或者點以下的連結

https://github.com/mbadolato/iTerm2-Color-Schemes/tree/master/schemes

在這個頁面搜尋你要的配色名稱,例如我喜歡 Atom,所以我就會找到 Atom.itermcolors 這個檔案,然後點擊進去,接著點擊右上角的 Raw 按鈕,最後在這個頁面另存新檔就可以了。

取得檔案後,回到 iTerm2,然後點擊「iTerm2 -> Settings -> Preferences -> Profiles -> Colors -> Color Presets」,然後找到 import,點擊 import,然後選擇你剛剛下載的檔案,就可以套用你想要的配色了~

iTerm2 背景圖

最後補充一下使用 iTerm2 還可以加入背景圖,只需要切過去 Window 並打開背景的功能,然後選擇圖片就可以囉

背景圖

最後這就是成果囉

成果

雷點

接下來這邊我也順便記錄一些事項

nvm 不能使用

如果你電腦有安裝 nvm 的話,當你第一次設定 zsh 可能會遇到 nvm 不能使用的問題,這時候你可以在 ~/.zshrc 這個檔案中加入以下內容

1
2
3
4
# nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

這樣子 nvm 就可以使用了

Homebrew

Homebrew 也是一樣的狀況,因此也要在 ~/.zshrc 這個檔案中加入以下內容

1
2
3
# Homebrew
# # Set PATH, MANPATH, etc., for Homebrew.
eval "$(/opt/homebrew/bin/brew shellenv)"

VSCode 字型設定

首先這邊你應該會遇到 VSCode 字體怪怪的問題

VSCode

這邊只需要打開你的 VSCode 設定檔,並加入以下

1
"editor.fontFamily": "MesloLGS NF",

這樣子你的 VSCode 就可以正常顯示字體了

VSCode

我當前的 .zshrc 設定

最後我也提供我的 .zshrc 設定,以便你可以核對是不是哪邊缺少了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
# Enable Powerlevel10k instant prompt. Should stay close to the top of ~/.zshrc.
# Initialization code that may require console input (password prompts, [y/n]
# confirmations, etc.) must go above this block; everything else may go below.
if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi

# If you come from bash you might have to change your $PATH.
# export PATH=$HOME/bin:/usr/local/bin:$PATH

# Path to your oh-my-zsh installation.
export ZSH="/Users/rayxu/.oh-my-zsh"

# 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="powerlevel10k/powerlevel10k"

# Set list of themes to pick from when loading at random
# Setting this variable when ZSH_THEME=random will cause zsh to load
# a theme from this variable instead of looking in ~/.oh-my-zsh/themes/
# If set to an empty array, this variable will have no effect.
# ZSH_THEME_RANDOM_CANDIDATES=( "robbyrussell" "agnoster" )

# Uncomment the following line to use case-sensitive completion.
# CASE_SENSITIVE="true"

# Uncomment the following line to use hyphen-insensitive completion.
# Case-sensitive completion must be off. _ and - will be interchangeable.
# HYPHEN_INSENSITIVE="true"

# Uncomment the following line to disable bi-weekly auto-update checks.
# DISABLE_AUTO_UPDATE="true"

# Uncomment the following line to automatically update without prompting.
# DISABLE_UPDATE_PROMPT="true"

# Uncomment the following line to change how often to auto-update (in days).
# export UPDATE_ZSH_DAYS=13

# Uncomment the following line if pasting URLs and other text is messed up.
# DISABLE_MAGIC_FUNCTIONS=true

# Uncomment the following line to disable colors in ls.
# DISABLE_LS_COLORS="true"

# Uncomment the following line to disable auto-setting terminal title.
# DISABLE_AUTO_TITLE="true"

# Uncomment the following line to enable command auto-correction.
# ENABLE_CORRECTION="true"

# Uncomment the following line to display red dots whilst waiting for completion.
# COMPLETION_WAITING_DOTS="true"

# Uncomment the following line if you want to disable marking untracked files
# under VCS as dirty. This makes repository status check for large repositories
# much, much faster.
# DISABLE_UNTRACKED_FILES_DIRTY="true"

# Uncomment the following line if you want to change the command execution time
# stamp shown in the history command output.
# You can set one of the optional three formats:
# "mm/dd/yyyy"|"dd.mm.yyyy"|"yyyy-mm-dd"
# or set a custom format using the strftime function format specifications,
# see 'man strftime' for details.
# HIST_STAMPS="mm/dd/yyyy"

# Would you like to use another custom folder than $ZSH/custom?
# ZSH_CUSTOM=/path/to/new-custom-folder

# Which plugins would you like to load?
# Standard plugins can be found in ~/.oh-my-zsh/plugins/*
# Custom plugins may be added to ~/.oh-my-zsh/custom/plugins/
# Example format: plugins=(rails git textmate ruby lighthouse)
# Add wisely, as too many plugins slow down shell startup.
# plugins=(git)
plugins=(
git
# other plugins...
zsh-autosuggestions
zsh-syntax-highlighting
)

source $ZSH/oh-my-zsh.sh

# User configuration

# export MANPATH="/usr/local/man:$MANPATH"

# You may need to manually set your language environment
# export LANG=en_US.UTF-8

# Preferred editor for local and remote sessions
# if [[ -n $SSH_CONNECTION ]]; then
# export EDITOR='vim'
# else
# export EDITOR='mvim'
# fi

# Compilation flags
# export ARCHFLAGS="-arch x86_64"

# Set personal aliases, overriding those provided by oh-my-zsh libs,
# plugins, and themes. Aliases can be placed here, though oh-my-zsh
# users are encouraged to define aliases within the ZSH_CUSTOM folder.
# For a full list of active aliases, run `alias`.
#
# Example aliases
# alias zshconfig="mate ~/.zshrc"
# alias ohmyzsh="mate ~/.oh-my-zsh"

# zsh-completions
if type brew &>/dev/null; then
FPATH=$(brew --prefix)/share/zsh-completions:$FPATH

autoload -Uz compinit
compinit
fi

# nvm
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

# export PATH="$PATH:$(yarn global bin)"

# Homebrew
# # Set PATH, MANPATH, etc., for Homebrew.
eval "$(/opt/homebrew/bin/brew shellenv)"

# To customize prompt, run `p10k configure` or edit ~/.p10k.zsh.
[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee Buy Me A Coffee

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ