LoginSignup
1
1

More than 1 year has passed since last update.

ターミナル(zsh)のプロンプトにGitのbranchを表示する方法

Posted at

はじめに

 本記事は、プログラミング初学者、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
 そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
 間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

ターミナル(zsh)のプロンプトにGitのbranchを表示する方法

設定をすることで下画像のようにターミナルのプロンプトにGitのbranchを色付きで表示することができます(画像はiterm2の画面です)。

スクリーンショット 2022-03-12 1.13.52.png

設定の手順は以下の通りです。

まず、ターミナルで以下のコマンドを叩き、.zshrcを開きます。

ターミナル
# viで開く場合
$ vi ~/.zshrc

# vscodeで開く場合
$ code ~/.zshrc

.zshrcが開いたら以下を追記します。

.zshrc
# prompt(git branch)
autoload -Uz vcs_info
setopt prompt_subst
zstyle ':vcs_info:git:*' check-for-changes true
zstyle ':vcs_info:git:*' stagedstr "%F{green}"
zstyle ':vcs_info:git:*' unstagedstr "%F{red}"
zstyle ':vcs_info:*' formats "%F{blue} %c%u<%b>%f"
zstyle ':vcs_info:*' actionformats '%B%F{yellow} [%b|%a]%f%b'
PROMPT=$'\n''%F{196}┝ %f%U%c$vcs_info_msg_0_ (%D %*)%u'$'\n''%B%F{196}%#%f%b '
precmd(){ vcs_info }

ターミナルを開き直すと上画像のようにプロンプトが表示されるかと思います(GitのbranchはGitが使えるディレクトリに移動しないと表示されません)。

.zshrcの記述についての解説は以下の通りです。

  • check-for-changes
    trueにすることでformatsの箇所で%c%uというフォーマットが使用可能になる。

  • stagedstr
    git adddのみされているファイルがあった場合に、ここで設定した文字列がformats%cに展開される
    上記の例では%F{green}とすることで<カレントブランチ名>の文字色をgreenに変更しています。

  • unstagedstr
    git adddされていない変更ファイルがあった場合に、ここで設定した文字列がformats%uに展開される
    上記の例では%F{red}とすることで<カレントブランチ名>の文字色をredに変更しています。

  • formats
    $vcs_info_msg_0_で表示する内容をここに記述する。

  • actionformats
    コンフリクトの発生等、特殊な状況になった場合に formatsの代わりに actionformatsで指定した文字列が$vcs_info_msg_0_に格納される。

変数 変数の説明
%c git addのみされているファイルがあった場合に stagedstr で指定した文字列に展開される。
%u git addされていない変更ファイルがあった場合に unstagedstr で指定した文字列に展開される。
%b カレントブランチ名
$vcs_info_msg_0_ 通常メッセージが格納される。
$vcs_info_msg_1_ 警告メッセージが格納される。
$vcs_info_msg_2_ エラーメッセージが格納される。
$'\n' 改行
%F{任意の色}文字列%f フォントカラーを指定する。指定方法は色名か番号を記述する。
%U文字列%u アンダーライン
%B文字列%b 太字
%D 日付
%* 時間
%# %
  • 色の指定について
    以下の色名を記述することで色を指定することができます。
  • black
  • red
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white

色名を記述するとターミナルの場合は下画像の箇所で設定した色が適用されます。
スクリーンショット 2022-03-12 1.25.03.png

iterm2の場合は下画像の箇所で設定した色が適用されます。
スクリーンショット 2022-03-12 1.27.10.png

また、以下画像の番号を記述して指定することができます。

スクリーンショット 2022-03-12 1.46.31.png

上記の番号を指定した場合には、指定した色で表示されます。

上記を踏まえて見やすいようにカスタマイズしてください。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1