VSCodeでいい感じにVimを使うための設定

VSCodeでいい感じにVimを使うための設定

VSCodeを2年ほど使った後、私は同僚のVimmerに出会いました。
Vimmerと知るまでは、「手元がゆっくりで落ち着いて開発してる人だなー」という印象でしたが、全く違いました。
ホームポジションから動かさずに無駄なくコーディングするため、忙しく手元を動かす必要がなかったのです。

なんでわざわざVSCodeでVimなの?

本家のVimから出てくんなとか言われそうですが、Vimを知らずにVSCodeを使っていた私の視点からの所見では、VSCodeが人気だからです。

人気なので、拡張機能が充実しており、新しいものに対応した拡張機能もすぐに出てきます。

クロスプラットフォームでWindows、Mac、Linux、(そのうちWeb上でも)と、どこでも動作します。
Vimも大概OKですが、VSCodeは加えて様々な言語に対応します。
C#, Java, PHP, Python, Ruby, Go, JavaScript, TypeScript, Angular, Vue.js, React…上げればキリないぐらい、LanguageServerのおかげでIDEさながらの充実した支援が受けられます。

設定かんたん!(←大事)
Vimは自分色に染められるのが良いところですが、設定にとんでもなく時間が掛かります。というか、終りがありません。
VSCodeなら言語周りの設定は拡張機能入れれば完了します。
古参のVimmerには無縁でしょうが、肥大化したVimの設定に新規ユーザーはこれから足を踏み入れるでしょうか?

いろいろありますが、強いもの(VSCode)に乗っかってVimの操作性の恩恵だけ受けるのが、良い方法ではないかと思います。

Vim拡張機能をインストールしよう!

こいつです。黙ってインストールです。
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

設定しないと始まらない!

私の今のsetting.jsonに記載されているvim関連の設定値です。
細かい説明はしません。意味あっての設定値なので気になるものは調べてください。

// vim
"vim.easymotion": true,
"vim.sneak": true,
"vim.incsearch": true,
"vim.useSystemClipboard": true,
"vim.useCtrlKeys": true,
"vim.hlsearch": true,

// InsertMode時のキーバインディング "vim.insertModeKeyBindings": [ { "before": ["j", "j"], "after": ["<Esc>"]}
{ "before": ["<C-l>"], "after": ["<Right>"]} ],

// NormalMode時のキーバインディング "vim.normalModeKeyBindingsNonRecursive": [ { "before": ["<C-n>"],"after": ["g","b"]},
{ "before": ["<leader>", "f"], "after": ["<leader>", "<leader>", "f"]},
{ "before": ["<leader>", "F"], "after": ["<leader>", "<leader>", "F"]} ],

// VisualMode時のキーバインディング "vim.visualModeKeyBindingsNonRecursive": [ { "before": ["<C-n>"],"after": ["g","b"]},
{ "before": ["<leader>", "f"], "after": ["<leader>", "<leader>", "f"]},
{ "before": ["<leader>", "F"], "after": ["<leader>", "<leader>", "F"]} ], "vim.leader": "<space>", "vim.foldfix": true, "vim.highlightedyank.enable": true,
// "vim.handleKeys": {
// "<C-a>": false, // 全選択ショートカットを使用する
// "<C-f>": false, // VSCode標準検索を使用する
// },
"vim.visualstar": true, // 選択範囲を*/?で検索

とはいえ、重要なものだけはピックアップ

  • easymotionを有効にすると、leaderキー > leaderキー > f (F), sでソース内を自由自在にジャンプ
  • sneakを有効にすると、NormalModeでs > (二文字入力)でカーソル後方で該当する箇所にジャンプ
    「;」で次へ飛んでいける
    S > (二文字入力)すればカーソル前方の該当する箇所にジャンプ
  • incsearchは/検索時に該当箇所をハイライト
  • useCtrlKeysでCtrl関連のショートカット開放
  • j > jでInsertModeを抜けるキーバインディングは、ソースに関係ない文字を入れる(勝手に消えるけど)ので最初は気が引けて、何度かショートカット消してctrl + [などに慣れようと思ったけど駄目でした。だって押しやすいんです…
  • マルチカーソルはg > bからCtrl+nに変更。
    何回も押すのでワンキーのほうが便利です。
  • leaderキーのデフォルトは確か「\」
    慣れれば押しやすいとも言えなくはないけど、スペースでいいよね。
  • foldfixはソースコード内で折り畳んでいる行をVimカーソル(hjkl)で通過するとき、勝手にオープンしないようにする設定値、必須
  • highlightedyankはヤンクしたとき、ヤンク範囲が黄色くピコンと光る、わかりやすい。

キーボードショートカットの変更

こちらはキーバインドの変更です。
setting.jsonに記載するvim用のキーバインディングではなく、VSCodeのキーボードショートカットの変更です。

{
// 左のエディタに移動
"key": "ctrl+h",
"command": "workbench.action.previousEditor",
"when": "editorFocus && vim.mode == 'Normal'"
},
{
// 右のエディタに移動
"key": "ctrl+l",
"command": "workbench.action.nextEditor",
"when": "editorFocus && vim.mode == 'Normal'"
},
{
"key": "ctrl+p",
"command": "workbench.action.quickOpenNavigatePreviousInFilePicker",
"when": "inQuickOpen"
},
{
"key": "ctrl+n",
"command": "workbench.action.quickOpenNavigateNextInFilePicker",
"when": "inQuickOpen"
},
// サイドバーからの移動
{
"key": "ctrl+w l",
"command": "workbench.action.focusFirstEditorGroup",
"when": "!editorFocus"
},
// サイドバーからの移動
{
"key": "ctrl+w l",
"command": "workbench.action.navigateEditorGroups",
"when": "!editorFocus"
},
// 検索画面の選択のフォーカスを下へ移動
{
"key": "ctrl+n",
"command": "search.focus.nextInputBox",
"when": "inputBoxFocus && searchViewletVisible"
},

サイドバー間を移動するためのショートカットの追加と、
タブの切り替え(Ctrl+w, Ctrl+l)で行えるショートカットを追加します。
分割タブ間の移動は、VSCodeデフォルトのCtrl+1,2,3…で行います。
クイックオープン時のファイル展開やシンボル参照の候補をCtrl+P, Nで選択できるようにします。
確定はVSCode標準の動作で、ショートカットキーを離せば自動で確定されます。
検索画面の選択フォーカスを下へ移動するのは、Grep検索(Ctrl+Shift+G)を押した際、デフォルトでカーソルが検索フォームにセットされるので、それを検索結果にCtrl+nで移動できるようにします。
移動後は、jkで上下に移動します。

結局、使いやすいの?

ショートカット等は同じ操作に対してVSCode標準とVimのショートカットがそれぞれあったりして、正直わかりにくいところもあります。

ですが、便利なところも多くあります。
VSCodeは色々なエディタのいいとこ取りをしている感じで、ショートカットの動作が洗練されている印象があります。
マルチカーソル等も、Ctrl+Alt+{Up} or {Down}で行単位でカーソルを増やした後、その状態を維持したまま自由自在に動き回れます。
この辺りはVimでも似たような事は出来ますが、手数は多くなりがちで、直感的ではありません。

VSCode + Vimなので、VSCodeで洗練された操作のいくつかは、Vim拡張機能を入れていても動作します。
煩わしさを感じることもありますが、慣れで解決する範囲と見ました。
それ以上の拡張機能や言語を含めたメリットが上回ると判断しました。
生粋のVimmerの方にもVSCodeを少し使いこなしてから判断しても遅くはないはずです。

私は最初にVSCodeから入ったので、VSCode + Vimは使いやすいと思います。
VSCode単体でも困らない程度に使いやすいんですが、マスターしたときのスキルの上限でみたら、間違いなくVSCode + Vimです。

一緒に試してみませんか。
褒めてばかりですが、私自身4回ぐらいVim拡張機能をアンインストールしています。
乗り換えてすぐは間違いなくパフォーマンスガタ落ちです。
脳トレやってる気分になります。

確かに慣れないうちはVimなしでコーディングした方が早いんですが、
「Vimなら今の操作はもっと簡単だよな…」と悪魔の声が聞こえるようになってきます。

そのうち、無意識にciwとか押し始めます。
そうなれば、貴方もVimmerの仲間入りです。

Vimカテゴリの最新記事