vim + tmuxでVSCodeっぽい開発環境を作る

vim + tmuxでVSCodeっぽい開発環境を作る

MicrosoftのVisual Studio Code(以下VSCode)には期待していて何度かエディタの乗り換えにトライしてるんだけど、今回もあえなく失敗してしまった。でもその度に改善アイデアを得ては自分の環境に取り入れている。定期的に色んなエディタを試して良いとこ取りをするのは、結構いいかもしれない。

自分は基本的にvimとtmuxを併用してターミナルで作業をしている。本稿ではVSCodeの特徴を軸に自分のvimとtmuxの設定をシェアしたい。説明はtmuxとvimの基本を知っていることを前提とする。以下概要：

• VSCodeっぽい画面分割
• VSCodeっぽいファイラ
• VSCodeっぽいエラー表示
• (VSCodeっぽくない) プロジェクトごとにtmuxタブを開く

VSCodeでは画面下にターミナルを表示できるのが便利だと思ったので真似した。tmuxで上下7:3で分割している。上段でvimを起動して、下段でコンパイルなどをする。下段は更に３つに垂直分割する事が多い。この画面分割をコマンド一発で出来るように以下のようなシェルスクリプトにしている：

<span id="5331" class="qg ot io qc b gz qh qi m qj qk">#!/bin/bash<br></br>tmux split-window -v -p 30<br></br>tmux split-window -h -p 66<br></br>tmux split-window -h -p 50</span>

VSCodeでは画面下のターミナルをトグル(表示/非表示)出来る。邪魔な時は非表示に出来るのが便利。tmuxではズーム機能で同じことができる。上段にフォーカスがあたっている時に -z を入力すると、上段のウインドウが最大化する。つまり下段が非表示になる。この機能はすごく便利で、下段でやるとシェルが最大化するのでログをじっくり眺めたい時などによくやる。

-z</code> を入力すると、上段のウインドウが最大化する。つまり下段が非表示になる。この機能はすごく便利で、下段でやるとシェルが最大化するのでログをじっくり眺めたい時などによくやる。</p><p id="0009" class="pw-post-body-paragraph np nq io nr b ns nt nu nv nw nx ny nz go oa ob oc gr od oe of gu og oh oi oj hp bk">一方、vim側の画面分割は以下のようにキーをマップしている：</p><pre class="pp pq pr ps pt qb qc qd qe aj qf bk"><span id="499f" class="qg ot io qc b gz qh qi m qj qk">" Split window<br></br>nmap ss :split<Return><C-w>w<br></br>nmap sv :vsplit<Return><C-w>w<br></br>" Move window<br></br>nmap <Space> <C-w>w<br></br>map s<left> <C-w>h<br></br>map s<up> <C-w>k<br></br>map s<down> <C-w>j<br></br>map s<right> <C-w>l<br></br>map sh <C-w>h<br></br>map sk <C-w>k<br></br>map sj <C-w>j<br></br>map sl <C-w>l<br></br>" Resize window<br></br>nmap <C-w><left> <C-w><<br></br>nmap <C-w><right> <C-w>><br></br>nmap <C-w><up> <C-w>+<br></br>nmap <C-w><down> <C-w>-</span>

一方、vim側の画面分割は以下のようにキーをマップしている：

ss で水平分割、 sv で垂直分割。 s でウインドウの移動など。vimのウインドウ分割機能はとても優秀で、縦に横に無限に分割できる。他のエディタになかなか移行できない理由の一つ。

ファイルツリーは個人的に要らないので表示していない。画面をめいっぱい編集画面として使いたいから。vimfilerを適宜立ち上げて使っている。以下のように sfキーで任意のウインドウで起動できる。

VSCodeではMaterial Icon Themeでファイルアイコンをいい感じに表示できるのがかっこいい。上記の通り、vimでも vim-devicons を使えばファイラにアイコンを表示できる。

vimfilerの設定内容は以下のとおり：

<span id="879d" class="qg ot io qc b gz qh qi m qj qk">nmap sf :VimFilerBufferDir<Return><br></br>nmap sF :VimFilerExplorer -find<Return><br></br>nmap sb :Unite buffer<Return><br></br>let g:vimfiler_as_default_explorer = 1<br></br>let g:vimfiler_safe_mode_by_default = 0<br></br>let g:vimfiler_enable_auto_cd = 0<br></br>let g:vimfiler_tree_leaf_icon = ''<br></br>let g:vimfiler_tree_opened_icon = '▾'<br></br>let g:vimfiler_tree_closed_icon = '▸'<br></br>let g:vimfiler_marked_file_icon = '✓'</span>

gr で開いているディレクトリを起点としてファイルの中身を検索できる。かなり多用してる。

VSCodeではLintエラーとかを、ファイルを保存しなくても非同期的にチェックしてくれる。いちいち待たされないのが良い。これはvimではAleを使って実現する。

で次のエラーにジャンプできる。キーマップは以下のとおり：

<span id="c151" class="qg ot io qc b gz qh qi m qj qk">nmap <silent> <C-k> <Plug>(ale_previous_wrap)<br></br>nmap <silent> <C-j> <Plug>(ale_next_wrap)</span>

エラー一覧を表示したい時は :lopen で。

自分はInkdropというMarkdownエディタを作っていて、サーバサイドからデスクトップやモバイルアプリまで同時に複数のプロジェクトを開いて開発することが多い。自分はプロジェクトごとにtmuxでタブを開いて、それに名前を付けて管理している。こんな感じ：

-, でタブ(ウインドウ)の名前を変更できる。面倒だけどこまめに変更してやると迷わなくて済む。

-,</code> でタブ(ウインドウ)の名前を変更できる。面倒だけどこまめに変更してやると迷わなくて済む。</p><p id="85df" class="pw-post-body-paragraph np nq io nr b ns nt nu nv nw nx ny nz go oa ob oc gr od oe of gu og oh oi oj hp bk">VSCodeだとプロジェクトごとにウインドウを開くことになるので、どれがどのプロジェクトか分からなくなる。仮想デスクトップは嫌いなので解決にならない。この辺が今後改善されると嬉しい。</p><p id="889b" class="pw-post-body-paragraph np nq io nr b ns nt nu nv nw nx ny nz go oa ob oc gr od oe of gu og oh oi oj hp bk"><code class="cx ql qm qn qc b"><prefix>-o</code> でウインドウのカレントディレクトリを開くように設定している。これでFinderで作業したい時にすぐ開ける。</p><pre class="pp pq pr ps pt qb qc qd qe aj qf bk"><span id="243b" class="qg ot io qc b gz qh qi m qj qk"># Open current directory<br></br>bind o run-shell "open #{pane_current_path}"</span>

VSCodeだとプロジェクトごとにウインドウを開くことになるので、どれがどのプロジェクトか分からなくなる。仮想デスクトップは嫌いなので解決にならない。この辺が今後改善されると嬉しい。

-o でウインドウのカレントディレクトリを開くように設定している。これでFinderで作業したい時にすぐ開ける。

開発環境は見直すたびに新しい発見があって面白い。キリが無いのでこの辺で。