【小ネタ】VS Code の zsh テキストをカスタマイズしてみた

はじめに

こんにちは！
アノテーション界の楠木正成、香園紳瑛（かぞの しんえい）です！

普段から VS Code を愛用しているのですが、ターミナルだけお米カラーでした。
もっと味変ができるように zsh テキストをカスタマイズしてみた ので紹介します。

カスタマイズ前（デフォルト仕様）

カスタマイズ後

環境情報

Mac のターミナル（zsh）の手順になりますので、私の環境情報を記載しておきます。
macOS Sonoma 14.7
zsh 5.9 (x86_64-apple-darwin23.0)

ハンズオン

Step.1 プロンプト記号までの設定

1. システムの設定ファイルが格納されている /private/etc ディレクトリに移動

cd /private/etc

2. 名前が zs で始まるすべての項目を表示

ls zs*

以下の出力が出ていれば OK（出力例）

zshrc                   zshrc_Apple_Terminal

3. zshrc ファイルを VS Code で開く

code zshrc

4. zshrc ファイルの 70 行目（# Default promptの下）にある、ホスト名とカレントディレクトリをコピー

PS1="%n@%m %1~ %# "

5. ホームディレクトリに戻る

cd ~

6. .zshrc ファイルを作成

code .zshrc

7. 手順 4 でコピーしたものを貼り付ける

8. カスタマイズ（Kazono.Shinei は名前、{} の中は色）

PS1="%F{magenta}Kazono.Shinei %F{yellow}%1~%f %F{blue}%#%f "

9. 確認

設定した名前と色に変わっていれば OK（出力例）

名前は日本語でも OK

Step.2 プロンプト入力欄の設定

1. ターミナルの ↓ から ターミナル設定の構成 を選択

2. workbench color を検索し、setting.json で編集 を選択

3. "workbench.colorCustomizations" の中をカスタマイズ（入力例）

"workbench.colorCustomizations": {
  "terminal.background":"#090300",
  "terminal.foreground":"#34b851",
  "terminalCursor.foreground":"#f39f1a",
  // 既存のカスタマイズがあれば追加
}

設定した色に変わっていれば OK（出力例）

さいごに

これでお米を生かした、炒飯や焼きおにぎりなどが味わえますね。
可読性が向上し、モチベーション爆上がり案件です。
これからもより面白い組み合わせができるように、検討に検討を重ねていきます。

最後までありがとうございました！
また会いましょーう！

アノテーション株式会社について

アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。当社は様々な職種でメンバーを募集しています。「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。