tmuxを使用して、Neovim環境をもっと便利に!!

こんにちは。ke1nyです。

Reactを独学し、簡単なCRUDアプリを作りたいなと考えていて、
開発のモチベーションを高めるため、VSCodeではなく新しいエディタ環境で開発していきたいと思い、Neovimに挑戦しています。

前回は、Neovimを使いやすくするため、さまざまなプラグインをインストールしました。プラグインがありすぎて、どれも良い感じで、悩みに悩んで自分に最適なプラグインをインストールしたりアンインストールしたりを繰り返して、大変でしたが、楽しいものですね！！

lazy.nvimのパッケージマネージャーを使うと、アンインストールするのが楽だということを、プラグインをある程度インストールした後に知りました!w

楽に構築できれば、それに越したことはないのですが、苦労も楽しみの一つと捉え、良い経験になりました。そこら辺がNeovimを構築していく楽しみの一つなのかもしれないと、構築した後に、ふと思いました。

プラグインもインストールしたし、見た目も良い感じに構築できたし、これでReact開発できるかなと思ったのですが、、、、tmuxというのを知りました。以下は備忘録として残しています。

tmuxって何？

1つのターミナル内で、複数のウィンドウを起動したり、画面を分割することができるツールだそうです。

まずは、インストール

brew install tmux

なぜtmuxを使うことが良いのか？既存のターミナルのウィンドウ分割で充分なのでは？と疑問がありますが、インストールして使用してみないと何とも言えないので、とりあえず挑戦してみようと思います。

設定ファイルはどこだ？

brewでtmuxをインストールしたら自動的に作成されるわけではないようなので、自分で設定ファイルを作成します。
基本的には、以下の場所にファイルを作成するようです。

touch .tmux.conf
~/.tmux.conf

私の場合は、フォルダで階層を分けたい派なので別途フォルダを作成し、その中に.tmux.confを作成します。

mkdir .tmux
cd .tmux
touch .tmux.conf
ln -s ~/.tmux/.tmux.conf ~/.tmux.conf ←ホームディレクトリにシンボリックリンクを作成する

設定ファイルを編集した後に、以下のコマンドを実行することで、
即時に設定内容を適用させることができます。

tmux source ~/.tmux.conf

それでは実際に.tmux.confの設定ファイルの中身を書いていきます。

VSCodeみたいな作業画面を構築する

# 設定ファイルをリロードする
bind r source-file ~/.tmux.conf \; display "Reload !!"

# peneの開始番号
set -g base-index 1

# ウィンドウのインデックスを1から始める
set -g base-index 1

# | でペインを縦に分割する
bind | split-window -h -c '#{pane_current_path}'

# _ でペインを横に分割する
bind _ split-window -v -c '#{pane_current_path}'

# Shift + 上下左右でペインを移動できるようにする。
bind -n S-up select-pane -U
bind -n S-down select-pane -D
bind -n S-left select-pane -L
bind -n S-right select-pane -R

# マウス操作を有効にする
setw -g mouse

# 外観
set -g default-terminal "screen-256color"

# ステータスバーの表示
set -g status on

# ステータスバーの色を設定する
set -g status-fg green
set -g status-bg black

set -g status-right "[%Y/%m/%d %H:%M:%S]"

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

# ステータスバーを1秒毎に描画し直す
set -g status-interval 1

#フォーカスしているペインの設定
setw -g window-active-style bg=colour234
#フォーカスしていないペインの設定
setw -g window-style bg=colour240

# 下記の設定をしておいたほうがEscの効きがいいらしい
set -s escape-time 0

これでとりあえず、tmuxを操作することができますね。
自分の使いやすいように、画面分割すれば結構良い感じになります！

インスロール後、自分なりの結論

私はVSCodeみたいに、エディター部分とターミナル部分を1つの画面で表現したかったので、tmuxを使うことでより使いやすいエディタになったのかなと思います。Neovim+tmuxの環境で、いよいよReactの CRUDアプリを作成してみようかと思います。