前回、Houdini: VEXをカスタマイズしたVS Codeで書くという記事でVS CodeのVimキーバインド設定について書きましたが、Vimキーバインドを提供してくれるvscodevimというプラグインが想像以上に良かったのでもう少し細かく見ていきたいと思います。
もちろん本家Vimにはカスタマイズ性能でかないませんが、プラグイン一個入れるだけでこれだけできるのはちょっとびっくりだったので備忘も兼ねて記しておきます。これ以上はあんまりいじらないんじゃないかな、と思ってます。
執筆時の環境
- Windows10 Pro
- VS Code 1.17.0
VS Codeの設定(キーボード設定)
まずはkeybindings.json全文を載せておきましょう。ここから該当箇所を細かく見ていくこととします。
フォントの設定
特に難しいことはしてませんが、指定方法を忘れがちなので。
"editor.fontFamily": "Ricty Diminished", "editor.fontSize": 15,
vim-easymotion
これが本記事のメインになります。まずは該当箇所を抜き出しておきましょう。
"vim.hlsearch": false, "vim.leader": "<space>", "vim.easymotion": true, "vim.easymotionKeys": "sdfghjkl",
本プラグイン(vscodevim)を導入するとeasymotion機能が付いてきます。このeasymotionとはなんぞやというと、テキストエディタ上の任意の場所に少ないキータイプでカーソルを移動させてくれる機能です。Hit a Hintっていうやつですね。
"vim.easymotion": trueを設定ファイルに書くことによって機能がオンになります。（デフォルトではオフ）
使い方の流れを軽く以下に。
- 機能を呼び出すにはリーダーキーを2回押せばOK。ぼくは
"vim.leader": "<space>"としているので、スペースキーを2回押すとモーション待機状態となります。 - モーションで対象範囲を指定します。まずは
sだけ覚えておけば良いんじゃないでしょうか。 - 検索したい文字列の頭文字を入力することで対象にラベルが貼られます。
- ラベルをタイプするとカーソル移動完了！
なんだか文字にするとややこしいですが、やってみると非常に直感的です。動画で見てみましょう。(わかりやすくするために普通の検索と比べてみます）
前方検索
下記画像の通り、29行目のwにカーソルを持っていきたいとします。
単純に検索をすればこうなりますね。
/で検索開始wキーを入力nキーで候補を移動- 動画では行き過ぎちゃったので
Nキーで戻っています
候補が多いとタイプが多くなりますね。
easymotion (search character)
Spaceキーを2回入力- 一文字検索モーションである
sキーを入力 wキーを入力- ラベルをタイプ（ここでは
l、kと続けて入力)
ラベルによって目標に直接飛べるのが良いところです。
もちろん普通の検索をすべて置き換えるものではないので、平行して使っていくと良いと思います。
ちなみに"vim.easymotionKeys": "sdfghjkl"のところはラベルで使う文字を決めるオプションです。お好みでホームポジションから近い文字を選んでおくといいでしょう。
元々検索にヒットしたワードにハイライトを付ける設定にしてたんですが、easymotionを使用するとおかしな挙動になったのでハイライトはオフにしました。設定としては"vim.hlsearch": falseの部分ですね。
モーション一覧
一文字検索と前方絞り込み検索が個人的におすすめです。リーダー3連打はさすがに使わんでしょうｗ
| モーション | 機能 |
|---|---|
| <leader><leader> s <char> | 一文字検索 |
| <leader><leader> f <char> | 前方一文字検索 |
| <leader><leader> F <char> | 後方一文字検索 |
| <leader><leader> t <char> | 前方一文字検索後、手前にカーソルをセット |
| <leader><leader> T <char> | 後方一文字検索後、手前にカーソルをセット |
| <leader><leader> w | 前方単語先頭 |
| <leader><leader> b | 後方単語先頭 |
| <leader><leader> e | 前方単語末尾 |
| <leader><leader> ge | 後方単語末尾 |
| <leader><leader> j | 前方行頭 |
| <leader><leader> k | 後方行頭 |
| <leader><leader> / <char>... <CR> | 前方絞り込み検索 |
| <leader><leader><leader> bdt | 前方後方一文字検索後、手前にカーソルをセット |
| <leader><leader><leader> bdw | 前方後方単語先頭 |
| <leader><leader><leader> bde | 前方後方単語末尾 |
| <leader><leader><leader> bdjk | 前方後方行頭 |
vim-surround
なんとsurround.vimのエミュレータも入ってます。太っ腹！これもよく使うところを動画でご紹介。
カーソル下のテキストを囲むオブジェクトを変更
ダブルクォーテーションからカギ括弧に変更する例。
カーソル下のテキストを囲むオブジェクトを削除
カーソル下のカギ括弧を削除する例。
選択範囲を任意のオブジェクトで囲む
普通にダブルクォーテーションで囲む例。
少し特殊な<small> ... </small>タグで囲む例。
モーション一覧
| モーション | 機能 |
|---|---|
| d s <削除したいオブジェクト> | カーソル下のテキストを囲むオブジェクトを削除 |
| c s <現在のオブジェクト> <変更したいオブジェクト> | カーソル下のテキストを囲むオブジェクトを変更 |
| S <囲みたいオブジェクト> | 選択範囲を任意のオブジェクトで囲む |
vim-commentary
コメントのトグルをしてくれるvim-commentaryも入ってます。VEXも対応してくれててGood。
選択範囲にラインコメントを追加・解除
選択範囲にブロックコメントを追加・解除
モーション一覧
| モーション | 機能 |
|---|---|
| g c <CR> | カーソルがある行にラインコメントを追加・解除 |
| g C | 選択範囲にブロックコメントを追加・解除 |
まとめ
本家Vimと比べてしまうと見劣りするところもありますが、プラグインをひとつ入れるだけでこれだけ多機能な環境を提供してくれるのは素晴らしいんじゃないでしょうか。
エディタのカスタマイズはこれくらいにして、VEX書きまくるぞい！
