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 です。

VSCodeの拡張機能ビューに表示されたVSCodeVim

導入すると、画面下のステータスバーに「NORMAL」「INSERT」といった現在のモードが表示されます。hjkl での移動、dd での行削除、yy でのヤンクといった基本操作は、Vim とほぼ同じ感覚で使えます。

: を押せばEXモードに入ってファイル操作ができ、/ を押せば検索が始まります。Vim を普段使っている人が VSCode に移ってきたときの、いちばん大きな違和感を消してくれる拡張機能です。

一方で、VSCode 側の補完・デバッガ・Git連携・各種拡張機能はそのまま使えます。「Vim の操作性」と「VSCode の機能」を両方取る、という選択になります。

VSCodeにVimをインストールする3ステップ

結論:拡張機能ビューで「Vim」を検索してインストールし、適当なファイルを開くだけで完了です。再起動も設定ファイルの編集も必要ありません。

  1. メニューバーから 表示 > 拡張機能 をクリックする
  2. 検索ボックスに「Vim」と入力する
  3. 発行元が vscodevim のものを選んで「インストール」をクリックする

検索結果には Vim 関連の拡張機能が複数並びます。発行元が vscodevim であることを確認してからインストールしてください。

インストール後にファイルを開くと、ステータスバーに現在のモードが表示されます。下が NORMAL モードの状態です。

VSCodeのステータスバーにNORMALモードと表示されているところ

i を押して挿入モードに入ると、表示が INSERT に変わります。

VSCodeのステータスバーにINSERTモードと表示されているところ

この表示が切り替わり、hjkl で移動できていればインストールは完了です。キーバインドにこだわらないなら、ここで終わりにして構いません。

settings.jsonでキーバインドをカスタマイズする

結論:Vim 単体では vimrc に書いていた設定を、VSCodeVim では settings.json に書きます。設定名はすべて vim. で始まります。

settings.json の開き方は次のとおりです。

  1. メニューバーから Code > 設定 > 設定 をクリック
  2. 画面右上の「設定(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.disableExtensiontrue にします。人にペアプロで代わってもらう場面などで使えます。

入力が重いと感じたときの設定

結論:キー入力に遅延を感じる場合は、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つにまとめました。標準機能に置き換わって不要になったものもあるので、入れすぎていないか確認してみてください。

ABOUT ME
りん
このブログでは、Web開発やプログラミングに関する情報を中心に、私が日々感じたことや学んだことをシェアしています。技術と生活の両方を楽しめるブログを目指して、日常で触れた出来事や本、グルメの話題も取り入れています。気軽に覗いて、少しでも役立つ情報や楽しいひとときを見つけてもらえたら嬉しいです。