在VSCode 裝個漂亮的 Terminal 介面- zsh + powerlevel10k


reference by powerlevel10k

解決完連環 powerlevel9k 的設定問題後,赫然發現,竟然出新版本了,完全可以無腦安裝,照著介面操作,一分鐘就搞定!
完全不用經歷 debug 上一版本各種 icon 顯示不出來的問題,還不快繞過前人的坑,現賺數小時XD


  1. 未安裝 Brew
照著官網安裝 https://brew.sh/index_zh-tw

#安裝指令
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

#指定路徑
echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/$USER/.zprofile

eval $(/opt/homebrew/bin/brew shellenv)

Reference:
https://stackoverflow.com/questions/36657321/after-installing-homebrew-i-get-zsh-command-not-found-brew

  1. 已安裝Brew ->安裝 iTerm2
#沒有用過 brew cask 的話需要先跑這行
brew tap homebrew/cask# 安裝 iTerm2
brew instal iterm2
  1. 安裝 iTerm2
#沒有用過 brew cask 的話需要先跑這行
brew tap homebrew/cask
# 安裝 iTerm2
brew instal iterm2


2. 安裝 zsh

brew install zsh

並把 zsh 設定為你的預設 shell:

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

3. 安裝 oh-my-zsh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

執行完以後如果沒有出現什麼錯誤訊息就代表成功了,同時會發現多了 oh-my-zsh 的資料夾 ~/.oh-my-zsh

4. 安裝 zsh theme: powerlevel10k

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k
#根據官網教學,安裝過 oh-my-zsh 可直接用上述指令安裝主題
# EX: ~/.oh-my-zsh
# 需要注意的是,由於 VsCode的 Terminal 主題設定會直接讀取 ~/.oh-my-zsh/themes 資料夾下中的主題,我們這邊就不另外放到客製化資料夾了

5. 切換內建的 theme

修改你的 ~/.zshrc,把原本 ZSH_THEME=”robbyrussell 改成你想要的:

#編輯 ~/.zshrc
vi ~/.zshrc
#找到這個參數,修改後面的值
ZSH_THEME="powerlevel10k/powerlevel10k"

任何的 zsh 設定修改過後,還要執行以下指令才會生效

exec $SHELL

6. 重啟 iTerm

7. 會出現 PowerLevel10k 的設定友善介面,照著做完就好囉!

你現在應該會看到類似的繽紛畫面~ 恭喜你,成功囉!

8. 開啟 VSCode,設定 terminal

Preference > Settings > Features > Terminal

點擊在 setting.json 內編輯 ( Edit in settings.json )

新增上這行

"terminal.integrated.defaultProfile.osx": "zsh"

也可以透過操作 command + 上箭頭 + P 的命令選取區,更換預設設定檔

然後也要確認一下設定檔中的 zsh 路徑是否正確

"terminal.integrated.profiles.osx":{ "zsh": {  "path": "/usr/local/bin/zsh", #正確路徑可在 iterm 下 which zsh 得到  "args": [  "-l"  ] }}

最後修改 font family

"terminal.integrated.fontFamily": "MesloLGS NF" #PowerlevelXk 系列的字體

9. 重開 VSCode ,就會看到漂亮的 Terminal 囉!

由於我是做了一系列 Powerlevel9k 的設定動作後,才改裝10k的,所以各位如果直接安裝 10k ,有少什麼流程,歡迎再留言提出!


Learn More

About Brew Part …

Q: what is taps ?
A: Taps (Third-Party Repositories)

Q: What cask ?
A: a CLI workflow

Reference 

超簡單!十分鐘打造漂亮又好用的 zsh command line 環境 https://medium.com/statementdog-engineering/prettify-your-zsh-command-line-prompt-3ca2acc967f

How to update visual studio code’s default terminal shell from bash to zsh
https://medium.com/fbdevclagos/updating-visual-studio-code-default-terminal-shell-from-bash-to-zsh-711c40d6f8dc

想要在 Medium 收藏這篇文章這邊走 ~