ターミナルをいい感じにして楽しむ

はじめまして。
この度PCを新調しまして、いつものようにターミナルにGitのブランチ名を表示させようとしたのですが、ふともっといい感じに表示できたらかっこいいのでは？と思い立っていろいろ調べた備忘録です。ついでに環境構築もしてました。

環境

macOS Catalina (10.15.4)

フロントエンドの開発がメインの人です。
筆者のスキル＝ターミナルはほぼGit用、あとDockerやnpmの起動とかビルドで使う 程度

Finderの隠しファイルを表示する

デフォルトでは非表示になっている Finder の隠しファイルを見えるようにしておきます。
Finderをアクティブにした状態でショートカットを入れるだけでOK。

隠しファイルの表示・非表示ショートカット： command + shift + .

テーマを設定する

Iceberg

定番のテーマ。強いこだわりがないなら Iceberg にしておけば間違いない。
でもゲンガーのテーマとかかわいいなって思います。

Homebrew の導入

Homebrew

便利な万能パッケージマネージャー。
Homebrewのインストールには xcode-select というコマンドラインツールが必要なので、AppStoreでXcodeをインストール（重い）するか、xcode-select単体をインストールしてください。
xcode-select が使える状態になったら公式サイトのスクリプトを実行して導入します。

2021年2月4日追記

macOS 10.15.6 Catalina でxcode-selectの単体インストールする前にHomebrewのインストールコマンドを打ってしまいましたが、Homebrew インストール時に xcode-select も一緒にインストールしてくれてました！お手軽！

zsh と Git のインストール

どちらも標準で入っていますが、アップデートかねて Homebrew で入れ直します。
ついでに補完プラグインも入れちゃいます。

brew install zsh
brew install git
brew install zsh-completions

なお、Catalinaからはデフォルトでzshになのでログインシェルの変更は必要ありません。
念の為、 cat /etc/shells と叩いてzshがあるか確認、一覧にzshがあったらOKです。

cat /etc/shells

# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.

/bin/bash
/bin/csh
/bin/dash
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh

zshの設定

zshの設定ファイルを作り、環境変数の設定やインストールした補完プラグインの適用をします。
新品のmacで今回の手順だと多分 .zshrc ファイルはないのでホームディレクトリに新しく作って任意のエディタから編集しましょう

touch .zshrc

作った.zshrcは /Users/ユーザー名/.p10k.zsh にあります！
一番最初の「隠しファイルの表示」設定を忘れてると見えないので設定しましょうね

エディタで開いたら以下の内容をペタッと。
ここは必要があれば各々設定の追加・削除をしてください。

~/.zshrc

# 環境変数
export LANG=ja_JP.UTF-8

# ----------
#    補完
# ----------
if type brew &>/dev/null; then
  FPATH=$(brew --prefix)/share/zsh/site-functions:$FPATH

  autoload -Uz compinit
  compinit
fi

## 大文字小文字を区別しない
zstyle ':completion:*' matcher-list 'm:{a-z}={A-Z}'

## 日本語ファイルを扱えるようにする
setopt print_eight_bit

# ----------
#    履歴
# ----------
export HISTFILE=~/.zsh_history
export HISTSIZE=1000
export SAVEHIST=10000

##  直前の重複を記録しない
setopt hist_ignore_dups

これでいろいろ便利なTab補完の完成です。いいものだなー。
ヒストリー（履歴）に関しては取り急ぎおまけ程度です。

補完 : https://docs.brew.sh/Shell-Completion

zinit の導入

zinit

ターミナルのカスタマイズについて調べると oh-my-zsh の紹介がたくさん出てくるのですが、さらに調べると oh-my-zsh は起動が遅いとか古いとかもっと優秀なプラグインマネージャーがあるとか見かけました。
使い方を理解できてないものの、今回は速度が早いらしい zinit を入れてみることに。

インストール手順に沿って導入します。
https://github.com/zdharma/zinit#installation

zsh-syntax-highlighting を読み込む

zsh-syntax-highlighting

せっかく入れたので試しにプラグインを読み込ませてみます。
zinit の記述の後に zsh-syntax-highlighting を遅延読み込みする設定で追記。
一文追加するだけでいいのはお手軽ですね…！

~/.zshrc

source "$HOME/.zinit/bin/zinit.zsh"
autoload -Uz _zinit
(( ${+_comps} )) && _comps[zinit]=_zinit

## コマンドに色付け
zinit ice wait'!0'; zinit load zsh-users/zsh-syntax-highlighting

【zsh高速化】え～、そんなプラグインマネージャーがあるんだったらもっと早く教えてよ、と姉が怒り出した - Zinit (旧名Zplugin)

Meslo Nerd Font の導入

Meslo Nerd Font

後述する Powerlevel10k の推奨フォントです。Nerd Fonts のお仲間ちゃん。
Powerlevel10k にフォントファイルが置いてあるのでそちらをそのままお借りします。

フォントを落としたらターミナルのフォント設定を MesloLGS NF に変更します。

Powerlevel10k の導入

Powerleve10k

プロンプトの表示をいい感じにするプラグインです。今回の大本命ちゃん。
各種インストール方法が記載さているので自身の環境にあったものを適用してください。

インストール後、ターミナルを再起動すると Powerlevel10k の設定ウィザードが始まります。
好みな方を選択するだけであっという間にセッティングが完了します👏

適当に設定しただけでもいい感じに。
やり直したい場合は p10k configure でもう一度開始することができます。
細かい設定を変更したい場合は ~/.p10k.zsh にある設定ファイルをいじればOKです。

設定ウィザードで再設定したり設定ファイルをごにょごにょ弄ってできたのがこちら。

これすっごいテンション上がる
設定ファイルを書き加えたり変更したのは以下の3箇所（上からOS、ディレクトリ、Git）です。

~/.p10k.zsh

# OS identifier color.
typeset -g POWERLEVEL9K_OS_ICON_FOREGROUND=255
typeset -g POWERLEVEL9K_OS_ICON_BACKGROUND=235

~/.p10k.zsh

# Current directory background color.
typeset -g POWERLEVEL9K_DIR_BACKGROUND=237
# Default current directory foreground color.
typeset -g POWERLEVEL9K_DIR_FOREGROUND=32

# 〜省略〜

# Color of the shortened directory segments.
typeset -g POWERLEVEL9K_DIR_SHORTENED_FOREGROUND=103
# Color of the anchor directory segments. Anchor segments are never shortened. The first
# segment is always an anchor.
typeset -g POWERLEVEL9K_DIR_ANCHOR_FOREGROUND=39

~/.p10k.zsh

typeset -g POWERLEVEL9K_VCS_BACKGROUND=220

Gitの背景色だけ該当する記述が見つからなかったので # Version control system colors の後に書き加えました。

2021年4月13日追記

いつの間にか # Version control system colors は見当たらないけど340行付近にGitに関する設定群があったのでそちらに加えました！

プロンプトヘッドの色がちょっと明るくなってるのも直したかったのですが、修正箇所が分かりませんでした…。（分かる方いたら教えてください！）

おわり

一通り設定を終わらせたらなんだかいい感じのターミナルになりました。

最初は oh-my-zsh を入れたらいい感じになるらしい程度の認識だったのですが、入れる前にどんなものか調べてみたら前述の内容に加え実際にほしい機能は Powerlevel9k と判明。そのプラグインも後継の Powerlevel10k が出てたりと、導入前にいろいろ調べてみてよかったと思います。
せっかく新しいPCなのに設定やプラグインが古いのはもったいないですしね。

バリバリにターミナル使って開発する人には物足りないと思いますが、フロントエンドメインならこの程度でも十分開発を楽しめる気がします。
なんなら Powerlevel10k の設定だけでも楽しかったので実質優勝ですはっぴー。

参考

とりあえずZshを使えば良いんだろう？
Homebrewでzsh-completionsを利用する手順。
お前らのターミナルはダサい