Zenn
🛠️

ターミナルから離れたくない…Tmux(＆Neovim)の設定例🖊

2024/03/12に公開
shell
Neovim
tmux
tech

この記事の概要


tmuxとneovimを組み合わせている様子…
こんにちは！食パン🍞と申します🏜
普段はフロントエンドを中心にパソコンをｶﾀｶﾀしている者です💻

私は普段のコーディング時のメインエディタとして、ターミナル環境下で、Neovimを用いています。
(Neo)Vimは、その独特な操作体系ゆえ慣れるまでがちょっぴり大変ですが、一度習熟すると非常に効率よくテキスト操作を行えるため、日々愛用しています。

また、開発作業の過程では、複数の画面を都度切り替えながらコーディングをしたり、複数のシェルを用いてコマンド操作を実行したくなる機会が多々あります。

例えば、

  • Viteでフロント開発環境を立ち上げてリアルタイムでコード変更を確認したい
  • docker composeで複数のコンテナを立ち上げつつターミナルでログを確認したい
  • それはそれとしてNeovimも並行して使いたい

といった具合です。

そこで、ひとつのターミナル(端末)内で、擬似的に複数のシェルを立ち上げ管理することを可能にするターミナル・マルチプレクサツール(terminal multiplexer)、Tmuxを組み合わせています。
これにより、ターミナル環境から離れることなく、多くの開発作業を完結させることが可能になります🍞

本記事では、NeovimとTmuxを組み合わせて、ターミナル環境下で快適に開発作業を行うためのTmuxの設定の一例や、実際の作業イメージなどをごく簡単に示せたらと思います。

なお、今回の記事ではNeovimの個別のプラグイン設定などは省略しています。
Neovimの詳細な設定などが気になる方は、以前投稿しました、下記の記事などを参考いただければ幸いです。
https://zenn.dev/fukakusa_kadoma/articles/4d48fb4e67c945
https://zenn.dev/fukakusa_kadoma/articles/99e8f3ab855a56

TmuxとNeovimを組み合わせた作業フロー

作業の流れ(一例)


このGif画像では、おおむね、以下の作業をターミナル内で実施しています
(なお、この一連の作業ではキーボードのみに触れており、マウスは操作していません)

  1. tmuxコマンドでTmuxの新規セッションを立ち上げる
  2. 事前に設定しておいたFishシェルの関数ideを実行して、Tmuxの画面を3つのペイン(≒分割された画面のこと)に分割する
  3. 右下のペインでnpm run devを実行し、Next.jsの開発環境を立ち上げる
  4. 左下のペインでなんとなくディレクトリ構造をちらっと確認する
  5. 上半分のペインでNeovimを立ち上げる
  6. Works.jsというファイルを開き、コードフォーマッターのPrettierを実行してコードを整える
  7. ファイルの変更を保存する
  8. Tmuxで別のウィンドウを開く
  9. Git操作を効率よく行えるTigを起動し、変更差分を確認→ステージングする
  10. git statusで、差分が正常にステージングされ、コミットする準備ができたことを確認する。

(以後、コミットしたりなんやかんやする作業に繋がっていく…)
大体いつもこんな感じで、ターミナル内で作業を完結させることが多いです🏜

ターミナルで作業を行うと、

  • 楽しい
  • かっこいい(※個人の感想です)
  • ターミナル(≒自分が利用しているシェル)の挙動や設定に詳しくなる
  • 常にコマンドで作業を行うため、CLIでの操作全般に対する抵抗感がなくなり、理解も深まる
  • Tmuxなど複数のアプリを組み合わせることで、マウスをほとんど操作せずに作業を行うことが可能になる
  • シェルを用いた作業が非常にやりやすい

といったメリット(？)があります。

以下、いくつかの要素について個別に補足を加えていきたいと思います。

Tmux

https://github.com/tmux/tmux
Tmuxは、ターミナル内で仮想的に複数のシェルを立ち上げることができるマルチプレクサツールです。
Tmuxを用いることで、複数の作業を一つのターミナル内で並行して行うことが可能になります。

インストール方法
https://github.com/tmux/tmux/wiki/Installing

基本的な操作方法や概念については、下記の記事がわかりやすく、参考になります。
https://zenn.dev/azunasu/articles/25d9999ca0fb96

Tmuxは.tmux.confと呼ばれる設定ファイルを編集することで、各種キーバインドや挙動などを自分好みにアレンジできます。
ターミナルでの開発作業を快適に行うために、私は.tmux.confを以下のように設定し、カスタマイズしています。

.tmux.conf
# prefixキーをC-qに変更
unbind C-b
set -g prefix C-g

# PaneをVim-likeに移動する
bind -r k select-pane -U 
bind -r j select-pane -D 
bind -r h select-pane -L 
bind -r l select-pane -R

# ステータスバーの色を設定する
set -g status-bg "colour60"
set -g status-fg "colour236"

# window-status のフォーマットを指定する
setw -g window-status-format "#I:#W "
# カレントウィンドウの window-status のフォーマットを指定する
setw -g window-status-current-format "#[fg=colour254,bg=colour67] #I:#W"

# ステータスバーの右側の表示内容を空に設定
set -g status-right ""

#マウス操作を有効にする
set -g mouse on
#コピーモード時のキーバインドをVimに
setw -g mode-keys vi

# ヴィジュアルノーティフィケーションを無効にする
setw -g monitor-activity off
set -g visual-activity off

# ステータスバーを上部に表示する
set -g status-position top
# checkhealth回避用
set -g escape-time 10
set -g focus-events on

# tmuxのコピーモードからクリップボードにコピー
bind-key -T copy-mode-vi v send-keys -X begin-selection
bind-key -T copy-mode-vi C-v send-keys -X rectangle-toggle
bind-key -T copy-mode-vi y send-keys -X copy-pipe-and-cancel "xsel -bi"
bind-key -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "xsel -bi"

設定の補足

# prefixキーをC-gに変更
unbind C-b # デフォルトのプレフィックスを解除
set -g prefix C-g # Ctrl + gをプレフィックスに設定

Tmuxを操作する際は、まず最初にプレフィックスキーを入力し、その後にTmux固有のキーボードショートカットを打ち込みます。
例えば、

  1. プレフィックスキーとして、Ctrl + bを打ち込む
  2. (Tmuxがキーボードショートカットを受け付けるようになる)
  3. Tmuxの各種キーボードショートカットを入力する
    といった形です。

デフォルトのプレフィックスキーは、Ctrl + bに設定されていますが、個人的には少し押しづらいためCtrl + gに変更しています。

# PaneをVim-likeに移動する
bind -r k select-pane -U  # プレフィックスキーを押した後に、kを押すと上のペインへ移動
bind -r j select-pane -D  # プレフィックスキーを押した後に、を押すと下のペインへ移動
bind -r h select-pane -L  # プレフィックスキーを押した後に、hを押すと左のペインへ移動
bind -r l select-pane -R  # プレフィックスキーを押した後に、lを押すと右のペインへ移動

複数のペイン間を、Vimっぽく移動できるようにしています。
冒頭のGif画像では分割された複数のペイン間をカーソルが移動していますが、これらの移動はこのキーバインドによるものです。
特にVim使いの方は、Vimの感覚でTmuxのペイン間を簡単に移動できるようになるため、個人的にイチオシの設定です👀

# ステータスバーの色を設定する
set -g status-bg "colour60"
set -g status-fg "colour236"

# window-status のフォーマットを指定する
setw -g window-status-format "#I:#W "
# カレントウィンドウの window-status のフォーマットを指定する
setw -g window-status-current-format "#[fg=colour254,bg=colour67] #I:#W"

# ステータスバーの右側の表示内容を空に設定
set -g status-right ""

# ステータスバーを上部に表示する
set -g status-position top

ステータスバー(Gif画像では、ターミナル上部に表示される紫色のバー)の見た目などを設定しています。個人的にはシンプルで装飾の少ない表示が好みのため、いくつかの要素を非表示にしたりしつつ、色を調節しています。

#コピーモード時のキーバインドをVimに
setw -g mode-keys vi

# tmuxのコピーモードからクリップボードにコピー
bind-key -T copy-mode-vi v send-keys -X begin-selection
bind-key -T copy-mode-vi C-v send-keys -X rectangle-toggle
bind-key -T copy-mode-vi y send-keys -X copy-pipe-and-cancel "xsel -bi"
bind-key -T copy-mode-vi Enter send-keys -X copy-pipe-and-cancel "xsel -bi"

Tmuxのコピーモード(Tmux上で文字列等をコピーできるモード)でのキーバインドは、デフォルトではEmacsスタイルになっています。
個人的にはVimっぽいキーバインドで統一したいため、setw -g mode-keys viとすることで、コピーモードのキーバインドをVi(m)スタイルに変更しています。

また、Tmuxのコピーモードでコピーした文字列を、システムのクリップボードで共有するための設定も記述しています(これを設定しておかないと、Tmux上でコピーした文字列がシステムのクリップボードに入らずちょっと不便です。)

参考：
https://qiita.com/purutane/items/1d1dc4818013bbbaead4

以上の設定を行うことで、マウスを触らずにキーボードのみでペインを(Vimっぽいキーバインドで)自由に移動したり、文字列をコピーしたりすることが可能になります。
Tmuxの主要なキーバインドを覚えるまでがやや大変ですが、一度覚えてしまうとかなり効率良く作業できます👍

シェルの設定

Tmuxを使うようになると、なにかとコマンドを打ち込む機会も増えます。
私は普段、Fishシェルを用いているのですが、設定ファイルであるconfig.fishにエイリアスなどを設定することで、少ない文字数で効率よくコマンドを打ち込めるようにしてます。

config.fish
#一部のみ抜粋
if status is-interactive
    set -g fish_greeting
    #alias
    alias tp='trash-put'
    alias dstart='systemctl --user start docker-desktop'
    alias dstop='systemctl --user stop docker-desktop'
    alias dcon='docker container'
    alias la='eza -la --icons'
    alias ll='eza -l --icons'
    alias lt='eza -T -L 3 -a -I "node_modules|.git|.cache" --icons'
    alias t='tmux' #tmuxを起動
    alias tse='tmux new -s' #tmuxの新規セッションを名前付きで開始
    alias tki='tmux kill-server' #tmuxのセッションを削除
    alias vim='nvim'
    alias lg='lazygit'
    alias g='git'
    alias com='cz c'
end

また、複数のTmuxのペインを一発で展開するfish関数も作っています。

ide.fish
function ide
  tmux split-window -v -p 25 #ウィンドウを垂直に分割し、新しいペインを作成
  tmux split-window -h -p 50 #新しく作成されたペインをさらに水平に分割
end

Gif画像では、このide関数で、3つのペイン(上・左下・右下)を展開しています。

シェルの設定(特にエイリアス)は、簡単に記述できる割に得られる恩恵が大きいため、Tmuxの設定を編集するついでに整備すると、日々の作業をかなり効率化できるとおもいます🤔

.gitconfigの設定

バージョン管理ツールのGitは、特段の設定なしでも扱うことができますが、.gitconfigに設定を記述しカスタマイズすることで、より楽に各種Gitコマンドを用いることが可能です。

# 一部抜粋(1~2文字でコマンドを打てるようにエイリアスを設定)
[alias] 
  d = diff
  su = status
  b = branch
  co = checkout
  a = add
  aa = add -A
  cm = commit -m
  # 現在いるブランチ名を取得してpushする
  ps = "!git push origin $(git rev-parse --abbrev-ref @)"
  cp = cherry-pick
  # Gitのコミットログをグラフで表示する
  ll = log --graph --date=relative --name-status --abbrev-commit
  # # Gitのコミットログをグラフで表示する(シンプルに)
  sl = log --graph --oneline --date=relative --abbrev-commit
  df = difftool -y
  mt = mergetool -y

先程のconfig.fish上では、以下のように、

if status is-interactive
    #alias
    （省略）
    # 'g'と打つと'git'になる
    alias g='git'
end

gと打つとgitになるようにエイリアスを設定しています。

このため、コマンドラインで例えば、

$ g ll

と入力した場合、上記コマンドは、

$ git log --graph --date=relative --name-status --abbrev-commit

として展開されます。

ターミナル上で直接Gitコマンドを打ち込みたくなるタイミングは多々あるため、.gitconfigにコマンドエイリアスを記述しておくと作業がかなり効率化できます👀

終わりに

ここまでの設定、

  • ①Tmuxの設定
  • ②シェルの設定
  • ③.gitconfigの設定

をある程度整えれば、冒頭のGif画像のような作業フローが可能になります。

ターミナルでの作業を効率化したい方や、(Neo)vimをメインエディタとして扱ってみたい方、Tmuxの活用法が気になる方の参考になれば幸いです🍞

Discussion