こんにちは。今回はお気に入りの VS Code を、もっとお気に入りにしたいと思います。

ゴール

こんな感じで、味気なかったターミナルをなんとなくスタイリッシュに。

いろいろ試して、VS Codeのターミナルはこんなかんじで落ち着いた。 pic.twitter.com/aDv4IASrQN
— Takahito Miyamoto (@takahito0508) September 16, 2019

前提

> brew -v

Homebrew 2.1.11
Homebrew/homebrew-core (git revision 9cc538; last commit 2019-09-15)
Homebrew/homebrew-cask (git revision 96afd; last commit 2019-09-16)

> git --version   

git version 2.23.0

zsh をセットアップする

# 必要に応じて
sudo chown -R $(whoami) /usr/local/Cellar
sudo chown -R $(whoami) /usr/local/Homebrew
sudo chown -R $(whoami) /usr/local/var/homebrew

brew update
brew install zsh

echo "/usr/local/bin/zsh" | sudo tee -a /etc/shells
chsh -s /usr/local/bin/zsh

一度ターミナルを閉じて開き直すと zsh の設定画面が開きますが、何もしないオプションを選択します。

prezto をセットアップする

git clone --recursive https://github.com/sorin-ionescu/prezto.git "${ZDOTDIR:-$HOME}/.zprezto"

setopt EXTENDED_GLOB
for rcfile in "${ZDOTDIR:-$HOME}"/.zprezto/runcoms/^README.md(.N); do
  ln -s "$rcfile" "${ZDOTDIR:-$HOME}/.${rcfile:t}"
done

フォントをセットアップする

以下のフォントをダウンロードして、それぞれダブルクリックしてインストールしてください。

ターミナルをセットアップする

ターミナル > 環境設定 > プロファイル > フォント > 変更から、「MesloLGS NF」を選択してください。一度ターミナルを閉じて開き直すとフォントが反映されます。

VS Code をセットアップする

次の3行を settings.json に追加しましょう。

settings.json

{
  (省略)
  "terminal.integrated.shell.osx": "/usr/local/bin/zsh",
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "terminal.integrated.fontSize": 14,
  (省略)
}

powerlevel10k をセットアップする

~/.zpreztorc を VS Code で開き、該当箇所を探します。既存の行をコメントアウトして、powerlevel10kに置き換えましょう。

# zstyle ':prezto:module:prompt' theme 'sorin'
zstyle ':prezto:module:prompt' theme 'powerlevel10k'

一度ターミナルを閉じて開き直すと、Powerlevel10kの設定画面が開きます。指示に従いながら、好みに応じたデザインにしていってください。

これで完璧です。これでますますコーディングが大好きになりますねー

Happy Coding!!

Acknowledgement

こちらを参考にさせていただきました。ありがとうございました。

zsh + prezto + powerlevel10k で VS Code のターミナルをかっこよくする

ゴール

前提