tags: MacOS、iTerms2、oh-my-zsh、VScode、terminal、Powerlevel10k

客製化 Terminal - iTerms2 + oh-my-zsh

• iTerms2 比 MAC 原生的 Terminal 提供更多功能，可取代原生的終端機使用
• oh-my-zsh 為 zsh 的 framework，可用來管理 zsh 設定

主要會安裝這兩個組合的最大原因，是為了美美的 command line 環境！！每次輸入指令時候，心情就會非常美麗～～我的快樂就是這麼樸實無華

安裝 iTerms2

$brew install --cask iterm2

安裝 oh-my-zsh

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

安裝 zsh theme Powerlevel10k

1. 安裝 powerlevel10k

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

2. 修改 zsh 主題 (zsh theme)

$vim ~/.zshrc

• ZSH 主題： ZSH_THEME="robbyrussell" -> powerlevel10k/powerlevel10k
• command line 左邊想顯示的內容： POWERLEVEL9K_LEFT_PROMPT_ELEMENTS=(dir)

找到 ZSH_THEME="robbyrussell" 這行，先輸入 i 進入 insert 模式，將 robbyrussell 改為 powerlevel10k/powerlevel10k，按 esc 結束編輯，輸入 wq，存擋離開。

...

## 修改 theme 的名稱為 powerlevel10k/powerlevel10k
ZSH_THEME="powerlevel10k/powerlevel10k"

...

3. 重新執行 .zshrc 設定檔

source ~/.zshrc

4. 依據 prompt 去設定 p10k config

重新執行 .zshrc 設定檔後，會進入 p10k 設定流程：

• 是否要安裝 Meslo Nerd Font
  如果之前沒裝過才會出現這個畫面，為了讓 icon 正常顯示，一定要裝，選「y」。

• 一系列 icon 有無正常顯示問題，依實際情況回答即可

• 設定 command line 樣式，依自己需求選擇即可

p10k configure

修改 iTerm2 的 color scheme

1. 下載 scheme

iTerm2 預設提供樣式很少，要更多漂亮的樣式，可以先到 iTerm2-Color-Schemes clone repo

2. import 樣式

打開 iTerm2 的 color scheme 的設定，路徑為：
Preferences > Profiles > Colors > Color Presets，import 剛剛 repo 中的 color scheme

3. 選擇樣式

還需要手動選擇剛剛 import 的 scheme
(筆者選擇的是 Tomorrow Night Eighties)

這時候開啟 iTerm2，就是美麗的 command line 了 🍻

解決原生 Terminal 亂碼問題

現在開啟原生 Terminal，會出現 icon 無法順利顯示，雖然不影響功能，大部分也基本是開 iTerms2，但看到那堆問號框框，就非常難受，主要原因是 Terminal 預設字型無法支援顯示出 icon，可以透過修改成跟 iTerms2 一樣的字型來解決。

iTerms2 字體設定為 MesloLGS NF：

1. 打開 Terminal 的 Text 的設定，路徑為：

Terminal > Preferences > Profiles > Text > font > change...

2. 選擇 MesloLGS NF 字體

順利解決 🎉🎉，終於不用在看見問號框框了！

設定 VScode

VScode 目前打開也是有 icon 變成方框問題，另外除了 iTerms2，VScode 的 Terminal 也是筆者常輸入指令的地方，所以希望這裡的 command line 也像 iTerms2 這麼繽紛！

主要會分成兩個步驟來設定：

Step 1. 修改字體

方法一：

左下齒輪 > Settings > Features > Terminal > Integrated: Font Family，字體改成 MesloLGS NF

方法二：

左下齒輪 > Settings > Extensions > JSON > Schemas > Edit in settings.json，新增 "terminal.integrated.fontFamily": "MesloLGS NF" 至 settings.json 內容中

// settings.json
{
    ...,
    // 新增這段
    "terminal.integrated.fontFamily": "MesloLGS NF",
}

icon 問題就解決了！

Step 2. 修改主題樣式

左下齒輪 > Settings > Extensions > JSON > Schemas > Edit in settings.json，多新增 "workbench.colorCustomizations" 設定，這邊顏色設定，筆者是直接參考 Tomorrow Night Eighties.json。

// settings.json
{
    ...,
    "terminal.integrated.fontFamily": "MesloLGS NF",
    // 新增這段
    "workbench.colorCustomizations": {
        "terminal.foreground": "#cccccc",
        "terminal.background": "#2d2d2d",
        "terminal.ansiBlack": "#000000",
        "terminal.ansiBlue": "#6699cc",
        "terminal.ansiCyan": "#66cccc",
        "terminal.ansiGreen": "#99cc99",
        "terminal.ansiMagenta": "#cc99cc",
        "terminal.ansiRed": "#f2777a",
        "terminal.ansiWhite": "#ffffff",
        "terminal.ansiYellow": "#ffcc66",
        "terminal.ansiBrightBlack": "#000000",
        "terminal.ansiBrightBlue": "#6699cc",
        "terminal.ansiBrightCyan": "#66cccc",
        "terminal.ansiBrightGreen": "#99cc99",
        "terminal.ansiBrightMagenta": "#cc99cc",
        "terminal.ansiBrightRed": "#f2777a",
        "terminal.ansiBrightWhite": "#ffffff",
        "terminal.ansiBrightYellow": "#ffcc66",
        "terminal.selectionBackground": "#515151",
        "terminalCursor.foreground": "#cccccc"
    }
}

最後效果，掌聲鼓勵鼓勵～～～👏👏

參考資料

• 超簡單！十分鐘打造漂亮又好用的 zsh command line 環境
• 【分享】Oh My Zsh + powerlevel10k 快速打造好看好用的 command line 環境