VSCodeでVimを使う方法|導入手順とsettings.jsonのカスタマイズ
VSCodeでもVimのキーバインドを使いたい、でもVSCodeの補完や拡張機能は手放したくない。そういうときに使うのが拡張機能「Vim」(VSCodeVim)です。
結論から書くと、拡張機能ビューで「Vim」を検索してインストールするだけで、NORMAL・INSERTのモード切り替えと hjkl 移動がそのまま使えるようになります。設定ファイルを書く必要はありません。
私は VS Code 1.135.0(macOS)で VSCodeVim 1.32.4 を使っていますが、settings.json に vim.* の設定はひとつも書いていません。既定のままで不便を感じていないからです。この記事では、導入の3ステップと、こだわりたい人向けのカスタマイズ方法を分けて書きます。
VSCodeVimとは何ができる拡張機能か
結論:VSCodeVim は、VSCode のエディタ上で Vim のキーバインドとモードを再現する拡張機能です。発行元は vscodevim、拡張機能IDは vscodevim.vim です。
導入すると、画面下のステータスバーに「NORMAL」「INSERT」といった現在のモードが表示されます。hjkl での移動、dd での行削除、yy でのヤンクといった基本操作は、Vim とほぼ同じ感覚で使えます。
: を押せばEXモードに入ってファイル操作ができ、/ を押せば検索が始まります。Vim を普段使っている人が VSCode に移ってきたときの、いちばん大きな違和感を消してくれる拡張機能です。
一方で、VSCode 側の補完・デバッガ・Git連携・各種拡張機能はそのまま使えます。「Vim の操作性」と「VSCode の機能」を両方取る、という選択になります。
VSCodeにVimをインストールする3ステップ
結論:拡張機能ビューで「Vim」を検索してインストールし、適当なファイルを開くだけで完了です。再起動も設定ファイルの編集も必要ありません。
- メニューバーから 表示 > 拡張機能 をクリックする
- 検索ボックスに「Vim」と入力する
- 発行元が vscodevim のものを選んで「インストール」をクリックする
検索結果には Vim 関連の拡張機能が複数並びます。発行元が vscodevim であることを確認してからインストールしてください。
インストール後にファイルを開くと、ステータスバーに現在のモードが表示されます。下が NORMAL モードの状態です。
i を押して挿入モードに入ると、表示が INSERT に変わります。
この表示が切り替わり、hjkl で移動できていればインストールは完了です。キーバインドにこだわらないなら、ここで終わりにして構いません。
settings.jsonでキーバインドをカスタマイズする
結論:Vim 単体では vimrc に書いていた設定を、VSCodeVim では settings.json に書きます。設定名はすべて vim. で始まります。
settings.json の開き方は次のとおりです。
- メニューバーから Code > 設定 > 設定 をクリック
- 画面右上の「設定(JSON)を開く」アイコンをクリック
キーバインドの設定は vim.insertModeKeyBindings / vim.normalModeKeyBindings / vim.visualModeKeyBindings の3つが用意されていて、それぞれインサートモード・ノーマルモード・ヴィジュアルモードのキー割り当てを変更できます。
たとえば次のように書きます。
{
// システムのクリップボードを利用する
"vim.useSystemClipboard": true,
// 検索にマッチしたテキストをハイライトする
"vim.hlsearch": true,
// easymotion を有効にする
"vim.easymotion": true,
// ビジュアルモードで * や # で検索
"vim.visualstar": true,
// 検索時に大文字小文字を無視する
"vim.ignorecase": true,
// インクリメンタルサーチ
"vim.incsearch": true,
// CamelCaseMotion を有効にする
"vim.camelCaseMotion.enable": true,
// leader キーを \ にする
"vim.leader": "\\",
// インサートモードで jj を Esc にする
"vim.insertModeKeyBindings": [
{
"before": ["j", "j"],
"after": ["<Esc>"]
}
]
}
上の設定はすべて VSCodeVim 1.32.4 で有効な設定名です。JSON なので、行末のカンマの付け忘れがあると設定ファイル全体が読み込まれなくなります。保存したあとに設定が効いていないと感じたら、まず JSON の構文エラーを疑ってください。
VSCodeのショートカットとぶつかったときの対処
結論:VSCodeVim が Ctrl 系のキーを奪ってしまう場合は、vim.handleKeys で個別に VSCode 側へ返せます。
VSCodeVim は Vim の操作を再現するため、Ctrl+f(Vim では1画面下へスクロール)などを横取りします。VSCode 標準の検索として使いたい場合は、次のように書きます。
{
"vim.handleKeys": {
"<C-f>": false,
"<C-a>": false
}
}
false を指定したキーだけが VSCode 側の動作に戻ります。全部を無効化する必要はないので、実際に困ったキーから1つずつ足していくのが確実です。
Vim の操作を一時的にまるごと止めたいときは vim.disableExtension を true にします。人にペアプロで代わってもらう場面などで使えます。
入力が重いと感じたときの設定
結論:キー入力に遅延を感じる場合は、extensions.experimental.affinity で VSCodeVim を別プロセスに切り出すと改善することがあります。
{
"extensions.experimental.affinity": {
"vscodevim.vim": 1
}
}
これは VSCodeVim の公式ドキュメントが性能改善策として案内している設定です。拡張機能を多く入れている環境ほど効果が出やすい設定になります。
エミュレートされるVimプラグインは9つ
結論:VSCodeVim は、キーバインドの再現だけでなく、よく使われる Vim プラグインの動作もエミュレートします。1.32.4 時点では9つです。
▼VSCodeVimがエミュレートするプラグイン
| プラグイン | できること |
|---|---|
| vim-airline | モードに応じてステータスバーの色を変える |
| vim-easymotion | 画面内の任意の位置へ数キーで飛ぶ |
| vim-surround | 囲み文字(クォート・カッコ・タグ)を足す・変える・消す |
| vim-commentary | 行やブロックをコメントアウトする |
| vim-indent-object | インデントの深さを単位として選択する |
| vim-sneak | 2文字を指定して前後にジャンプする |
| CamelCaseMotion | キャメルケースの単語を区切りとして移動する |
| Input Method | モード切り替えに合わせて入力メソッドを切り替える |
| ReplaceWithRegister | レジスタの内容で対象を置き換える |
どれも初期状態では無効なものが多いので、使いたいものだけ settings.json で有効にしてください。日本語入力を使う人にとっては Input Method の設定が効きます。NORMAL モードへ戻ったときに自動で英数入力へ切り替わるので、Esc のあとに入力モードを直す手間が消えます。
VSCodeVimを入れる前に決めておくとよいこと
結論:まず既定のまま1週間使ってみて、それでも足りない設定だけを settings.json に足すのがおすすめです。
Vim の設定は際限なく積み上がります。私は vimrc をそれなりに書いていた時期がありましたが、VSCode 側では結局ひとつも設定を書かないまま使っています。VSCode の補完やジャンプ機能が、Vim プラグインでやっていたことの多くを先に埋めてくれるからです。
ターミナル側の Vim も併用するなら、MacにHomebrewとVimをインストールする手順もあわせてどうぞ。エディタとターミナルで同じキー操作に揃えておくと、行き来したときの事故が減ります。
VSCode をまだ日本語表示にしていない場合は、VSCodeを日本語化する方法から先に済ませておくと、この記事の「表示 > 拡張機能」といったメニュー名がそのまま一致します。拡張機能そのものの取捨選択は、VSCodeのおすすめ拡張機能7つにまとめました。標準機能に置き換わって不要になったものもあるので、入れすぎていないか確認してみてください。