💻

毎日のTerminal操作を快適にするzshrcカスタマイズ

に公開
macOS
terminal
Zsh
zshrc
tech

普段の開発で「Git ブランチ切り替えが面倒」「リポジトリを探すのに時間がかかる」「ターミナルの見た目が地味」などの悩みはありませんか？
この記事ではfzf / ghq / zsh プラグインなどを組み合わせて、ターミナル生活を快適にする.zshrc 設定を紹介します。

必要なパッケージ

# 個別インストール
brew install ghq
brew install fzf
brew install zsh-autosuggestions
brew install zsh-syntax-highlighting

# 一括インストール
brew install ghq fzf zsh-autosuggestions zsh-syntax-highlighting
  • ghq : GitHub リポジトリをローカルで一元管理
  • fzf : コマンドラインで爆速検索 & インタラクティブ選択
  • zsh-autosuggestions : コマンド履歴から自動補完
  • zsh-syntax-highlighting : 入力中のコマンドを色付け

ghqで管理するrootディレクトリを設定します。

git config --global ghq.root '普段 git cloneしたディレクトリを配置しているパス'

完成コード

以下のコードを .zshrc に追記、反映してください。

# VSCodeで開く場合
code ~/.zshrc

# 設定を反映
source ~/.zshrc
~/.zshrc
# =======================================
# Git Branch Switcher
# =======================================
# sw          : Graphical branch switcher with commit graph preview
# sw -simple  : Simple branch switcher (log preview only)
sw() {
  if [ "$1" = "-simple" ]; then
    git branch --format="%(refname:short)" |
      fzf --preview='git log --pretty=format:"%h %cd %s" --date=format:"%Y-%m-%d %H:%M " {}' \
          --preview-window=right:70%:wrap \
          --ansi |
      xargs git checkout
  else
    git branch --format="%(refname:short)" |
      fzf --preview='git log --graph --oneline --decorate --color=always {}' \
          --preview-window=right:70%:wrap \
          --ansi |
      xargs git checkout
  fi
}


# =======================================
# GitHub Repository Navigation
# =======================================
# cdrepo   : Change directory to a selected GitHub repository
cdrepo() {
  local repodir=$(ghq list | fzf -1 +m) && cd $(ghq root)/$repodir
}

# coderepo : Open VSCode in a selected GitHub repository
coderepo() {
  local repodir=$(ghq list | fzf -1 +m) &&
  echo "Open VSCode Workspace! : $(ghq root)/$repodir"
  if [ -n "$repodir" ]; then
    code $(ghq root)/$repodir
  fi
}

# =======================================
# Terminal Appearance (Prompt / Colors)
# =======================================
# Git branch info in prompt
autoload -Uz vcs_info
precmd() { vcs_info }
setopt prompt_subst

# Colors
autoload -U colors && colors
local RED='%F{red}'
local GREEN='%F{green}'
local BLUE='%F{blue}'
local YELLOW='%F{yellow}'
local RESET='%f'

# Prompt format
PROMPT='${GREEN}%n@%m${RESET} ${BLUE}%1~${RESET} ${YELLOW}${vcs_info_msg_0_}${RESET}
> '

zstyle ':vcs_info:git:*' formats '(%b)'


# =======================================
# Zsh Plugins
# =======================================
# zsh-autosuggestions
source $(brew --prefix)/share/zsh-autosuggestions/zsh-autosuggestions.zsh

# zsh-syntax-highlighting
source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

解説

コマンド

Git ブランチ切り替え(sw)

# =======================================
# Git Branch Switcher
# =======================================

fzf のプレビュー機能を利用して、直感的にブランチを切り替えられます。

  • sw : コミットグラフ付きプレビューでブランチ選択
  • sw -simple : 軽量ログのみプレビュー

GitHub リポジトリ操作 (cdrepo, coderepo)

# =======================================
# GitHub Repository Navigation
# =======================================

リポジトリが増えても fzf で一瞬で選択できます。

  • cdrepo : ghq 管理下のリポジトリに即移動
  • coderepo : 選んだリポジトリを VSCode で開く

プロンプトの見やすさ改善

# =======================================
# Terminal Appearance (Prompt / Colors)
# =======================================

  • 常に Git ブランチ名 を表示
  • 色付きで「ユーザー名」「ディレクトリ」「ブランチ」を区別
  • 改行して入力欄が見やすい

Zsh プラグイン

# =======================================
# Zsh Plugins
# =======================================

Zshプラグインの設定です。

まとめ

.zshrcに少し追記するだけで、Terminal操作が楽に・リポジトリ移動が一瞬に・ターミナルが見やすくなります。

Discussion