VS Codeのターミナル(zsh)でプロンプトの場所をパッと見で分かるようにしたい

2022.01.08

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

今回は、Visual Studio Codeのターミナル(zsh)で、プロンプトの場所がパッと見で分かるように工夫していることの備忘です。

前提環境

$ zsh --version
zsh 5.8 (x86_64-apple-darwin20.0)

$ sw_vers
ProductName:    macOS
ProductVersion: 11.6
BuildVersion:   20G165

実現したこと

先に実際のものをお見せすると、こんな感じにプロンプトのテーマを変えています。

背景色緑の部分がプロンプトです。

表示するパスはカレントディレクトリだけとしています。

デフォルトから次のようなカスタマイズをしています。

  • プロンプト文字列を{カレントフォルダ名} $とする
  • プロンプト部分の背景色を目立つ蛍光色(greenなど)とする

これにより、こんなことが解決できています。

  • プロンプト部分がカレントディレクトリだけの表示なので、横長にならず場所を取らない
  • 出力結果の表示が多い処理の際に、以前のプロンプトの場所(どこからどこまでが直前の出力結果か?)が行方不明にならず、パッと見で場所が分かる

ちなみにVS Codeだけでなく、Macのターミナルの方もzshを使っていれば同様に変わります。

方法

.zshrcを開きます。

$ ls ~/.zshrc
/Users/wakatsuki.ryuta/.zshrc

次の記述を追記、または既存のexport PS1=の記述と置き換え、保存します。

export PS1="%K{green}%C $ %k "

ターミナル(シェル)を開き直すか、下記コマンドで再起動すれば反映されます。

$ exec $SHELL -l

何をしているのか

.zshrcにおいてPS1という環境変数でプロンプトのテーマが定義できます。

今回使用しているのは次のタグ(正式な呼び名は分からず)です。

  • %C:カレントディレクトリ名
  • %K:背景色の変更開始
  • %k:背景色の変更終了

色は次から選択可能です。NameかNumberのいずれかを指定できます。

Name Number
black 0
red 1
green 2
yellow 3
blue 4
magenta 5
cyan 6
white 7

それぞれの色を指定した様子です。私は一番目立つ&目に優しいと感じたのでgreenを選びました。(whiteは濃いグレーになるんですね)

その他

%kを付け忘れた場合

%Kを付けて、%kを付け忘れた場合、プロンプト部分だけでなく、コマンド指定部分や結果部分もすべて背景色が変わってしまいます。これで良いという人には良いのかもしれませんね。

フォントカラーも変えられる

背景色だけでなく、フォントカラーももちろん変えられます。%F%fを使います。

背景色とフォントカラーを同時に変更したい場合は次のようにします。

export PS1="%F{2}%K{0}%C $ %k%f "

おわりに

Visual Studio Codeのターミナル(zsh)で、プロンプトの場所がパッと見で分かるように工夫していることでした。

ここしばらくは%K{green}%C $ %kとしていましたが、「フォントカラーも変えられる」で試したのを機に%F{2}%K{0}%C $ %k%fにすることにしました。皆さんもプロンプトの自分好みのテーマを探してみてください。

参考

以上