Help us understand the problem. What is going on with this article?

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

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

環境

macOS Catalina (10.15.4)

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

テーマを設定する

Iceberg

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

Homebrew の導入

Homebrew

便利な万能パッケージマネージャー。
Homebrewのインストールには xcode-select というコマンドラインツールが必要なので、AppStoreでXcodeをインストール(重い)するか、xcode-select単体をインストールしてください。

xcode-select が使える状態になったら公式サイトのスクリプトを実行して導入します。

zsh と Git のインストール

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

brew install zsh
brew install git
brew install zsh-completions

なお、Catalinaからはデフォルトでzshになのでログインシェルの変更は必要ありません。

zshの設定

環境変数の設定やインストールした補完プラグインの適用をします。
これでいろいろ便利なTab補完の完成です。いいものだなー。
ヒストリー(履歴)に関しては取り急ぎおまけ程度です。

~/.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

補完 : 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

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

https://github.com/romkatv/powerlevel10k#installation

インストール後、ターミナルを再起動すると Powerlevel10k の設定ウィザードが始まります。
好みな方を選択するだけであっという間にセッティングが完了します👏
スクリーンショット 2020-04-04 16.56.37.png
適当に設定しただけでもいい感じに。
やり直したい場合は p10k configure でもう一度開始することができます。
細かい設定を変更したい場合は ~/.p10k.zsh にある設定ファイルをいじればOKです。

設定ウィザードで再設定したり設定ファイルをごにょごにょ弄ってできたのがこちら。
スクリーンショット 2020-04-05 1.07.51.png
これすっごいテンション上がる
設定ファイルを書き加えたり変更したのは以下の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 の後に書き加えました。
プロンプトヘッドの色がちょっと明るくなってるのも直したかったのですが、修正箇所が分かりませんでした…。(分かる方いたら教えてください!)

おわり

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

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

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

参考

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

szk07
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away