サイトアイコン Lonely Mobiler

VSCode でも Vim 風に操作する拡張機能 VSCodeVim

ryomatsu

最近はプログラムを書く際に VSCode を利用しているが、10年以上慣れ親しんだ Vim のキーバインドから離れる事はできず VSCode でも Vim 風のキーバインドで利用できる VSCodeVim 拡張機能を利用して作業している。

VSCodeVim/Vim: Vim for Visual Studio Code

この拡張機能を導入するとエディタが Vim っぽくなる。

ステータスバーに表示されているように INSERT, NORMAL といったモードの概念が追加され hjkl で移動を始めとする各種 Vim のキーバインドが利用できるようになる。

: から EX モードに移行しファイルの操作も可能になるし、/ から検索も可能だ。

標準のままでもかなり Vim っぽく利用できるが、設定を自分好みに変更すればより使いやすくなる。

VSCodeVim の設定

VSCodeVim の各種動作設定は settings.json に記述することで変更可能だ。例えば以下のような感じに記述できる。

{
	// システムのクリップボードを利用する
	"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": "\\"
	// キーバインドの設定
	// 以下の例は実際には使ってないが参考として記述しておく。
	"vim.insertModeKeyBindings": [
		{
			"before": ["j", "j"],
			"after": ["<Esc>"]
		}
	]
}

キーバインドの設定は vim.insertModeKeyBindings, vim.normalModeKeyBindings, vim.visualModeKeyBindings, が用意されており、それぞれインサートモード、ノーマルモード、ヴィジュアルモードのキーバインドを編集できる。

利用できる Vim プラグイン

VSCodeVim は単にエディタを Vim 風に操作できるだけでなく、以下の人気プラグインもエミュレートしてくれる。

vim-airline

vim-airline/vim-airline: lean & mean status/tabline for vim that's light as air

ステータスバーがかっこよくなるやつ。VSCode では色を変更できる。以下のような感じでモード毎の色を指定可能だ。

"vim.statusBarColorControl": true,
    "vim.statusBarColors.normal": ["#8FBCBB", "#434C5E"],
    "vim.statusBarColors.insert": "#BF616A",
    "vim.statusBarColors.visual": "#B48EAD",
    "vim.statusBarColors.visualline": "#B48EAD",
    "vim.statusBarColors.visualblock": "#A3BE8C",
    "vim.statusBarColors.replace": "#D08770",

現段階では性能の問題があるらしい。

vim-easymotion

easymotion/vim-easymotion: Vim motions on speed!

エディタ内を高速に動き回れるプラグイン。例えば <leader><leader> s 「検索文字」と入力すると検索文字のところにマーカーが付き、マーカーのキーを入力することで該当場所へカーソルをジャンプできる。

カーソルキーなどを何度も打つことなく目的の場所へジャンプできるため、使いこなせると効率よくエディタ内を移動できる。単純な検索だけでなく、

といった感じでエディタ内の様々な場所へ移動できる。

この機能を頻繁に使うなら leader キーをデフォルトの \ から別の場所へ変更したほうが良いかも。

vim-surround

tpope/vim-surround: surround.vim: quoting/parenthesizing made simple

" や [ といった記号などで囲われている語句に対して操作できるプラグイン。

例えば "test" という文字列があったとして、cs"' と入力すると 'test' に変更できる。地味に便利。

vim-commentary

tpope/vim-commentary: commentary.vim: comment stuff out

コメントアウトを簡単に操作するプラグイン。VSCode では gc でラインコメント、gC でブロックコメントを切り替えられる。これも地味に便利。

vim-indent-object

michaeljsmith/vim-indent-object: Vim plugin that defines a new text object representing lines of code at the same indent level. Useful for python/vim scripts, etc.

インデントされたブロックを扱うのに便利なプラグイン。例えばブロック内で vii と入力するとブロック内を選択できる。viI とするとブロックの外側も含めて選択可能だ。

vim-sneak

justinmk/vim-sneak: The missing motion for Vim

これもカーソル移動が捗るプラグイン。Vim 本来の f によるジャンプ機能に似ているがこちらはファイル全体を対象としている。

例えば、sco と入力するとファイル内の co と書かれた場所へジャンプし、; で次の co に移動する。

CamelCaseMotion

bkad/CamelCaseMotion: A vim script to provide CamelCase motion through words (fork of inkarkat's camelcasemotion script)

CamelCase や snake_case な文字列内で移動するのに便利なプラグイン。通常 Vim では w などで単語単位に移動できるが、その際 CamelCase などで書かれたものは一つの単語として認識されてしまうため、単語内でカーソル移動できない。

CamelCaseMotion が有効になっていると <leader>w などで CamelCase や snake_case 内でも単語を認識して移動できるようになる。

Input Method

インサートモード終了時に自動的に IME を変更してくれる日本人にとっては非常にうれしい機能と思いきや、無効にするんじゃなくて IME が切り替わっちゃうのでどうかなという感じ。

この機能を利用するには別途 im-select.exe が必要なのでインストールしよう。

daipeihust/im-select: Switch your input method from terminal

Windows であれば以下のような感じに設定を記述する。

"vim.autoSwitchInputMethod.enable": true,
    "vim.autoSwitchInputMethod.defaultIM": "1033",
    "vim.autoSwitchInputMethod.obtainIMCmd": "C:\\apps\\im-select.exe",
    "vim.autoSwitchInputMethod.switchIMCmd": "C:\\apps\\im-select.exe {im}"

こうすると ESC 押したらノーマルモードに入ると同時に英語キーボードに切り替わる。im-select.exe じゃなくて別の何か使ったら日本語入力だけを無効かできたりしないだろうか。

IME 側の設定で ESC や ctrl-[ を押したら IME を無効にするみたいなキーバインドを設定したほうが楽かもしれない。

まとめ

このような感じでただ Vim のキーバインドとモードの概念が利用できるだけでなく、様々なプラグインも良い感じに取り入れてくれて非常に使いやすい。VSCode が気になるけど Vim のキーバインドじゃないと嫌だなーとか思っているなら試してみると良いと思う。

Sponsored Link
モバイルバージョンを終了