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

TAKUYA
週休7日で働きたい
6 min readOct 19, 2017

--

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

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

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

VSCodeっぽい画面分割

普段の開発画面 (iTerm)、いつもは最大化している

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

#!/bin/bash
tmux split-window -v -p 30
tmux split-window -h -p 66
tmux split-window -h -p 50

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

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

" Split window
nmap ss :split<Return><C-w>w
nmap sv :vsplit<Return><C-w>w
" Move window
nmap <Space> <C-w>w
map s<left> <C-w>h
map s<up> <C-w>k
map s<down> <C-w>j
map s<right> <C-w>l
map sh <C-w>h
map sk <C-w>k
map sj <C-w>j
map sl <C-w>l
" Resize window
nmap <C-w><left> <C-w><
nmap <C-w><right> <C-w>>
nmap <C-w><up> <C-w>+
nmap <C-w><down> <C-w>-

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

VSCodeっぽいファイラ

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

vimfiler

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

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

nmap sf :VimFilerBufferDir<Return>
nmap sF :VimFilerExplorer -find<Return>
nmap sb :Unite buffer<Return>
let g:vimfiler_as_default_explorer = 1
let g:vimfiler_safe_mode_by_default = 0
let g:vimfiler_enable_auto_cd = 0
let g:vimfiler_tree_leaf_icon = ''
let g:vimfiler_tree_opened_icon = '▾'
let g:vimfiler_tree_closed_icon = '▸'
let g:vimfiler_marked_file_icon = '✓'

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

VSCodeっぽいエラー表示

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

<C-j> で次のエラーにジャンプできる。キーマップは以下のとおり:

nmap <silent> <C-k> <Plug>(ale_previous_wrap)
nmap <silent> <C-j> <Plug>(ale_next_wrap)

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

プロジェクトごとにtmuxタブを開く

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

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

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

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

# Open current directory
bind o run-shell "open #{pane_current_path}"

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

--

--