kick the base

好きな映画、音楽、マンガ、プログラム、デザイン、3DCG、ゲームのこと。

Vim風VS Codeカスタマイズ詳細

前回、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を設定ファイルに書くことによって機能がオンになります。(デフォルトではオフ)

使い方の流れを軽く以下に。

  1. 機能を呼び出すにはリーダーキーを2回押せばOK。ぼくは"vim.leader": "<space>"としているので、スペースキーを2回押すとモーション待機状態となります。
  2. モーションで対象範囲を指定します。まずはsだけ覚えておけば良いんじゃないでしょうか。
  3. 検索したい文字列の頭文字を入力することで対象にラベルが貼られます。
  4. ラベルをタイプするとカーソル移動完了!

なんだか文字にするとややこしいですが、やってみると非常に直感的です。動画で見てみましょう。(わかりやすくするために普通の検索と比べてみます)

前方検索

下記画像の通り、29行目のwにカーソルを持っていきたいとします。

f:id:kickbase:20171011210119j:plain

単純に検索をすればこうなりますね。

f:id:kickbase:20171011203125g:plain

  1. /で検索開始
  2. wキーを入力
  3. nキーで候補を移動
  4. 動画では行き過ぎちゃったのでNキーで戻っています

候補が多いとタイプが多くなりますね。

easymotion (search character)

f:id:kickbase:20171011203138g:plain

  1. Spaceキーを2回入力
  2. 一文字検索モーションであるsキーを入力
  3. wキーを入力
  4. ラベルをタイプ(ここではlkと続けて入力)

ラベルによって目標に直接飛べるのが良いところです。

もちろん普通の検索をすべて置き換えるものではないので、平行して使っていくと良いと思います。

ちなみに"vim.easymotionKeys": "sdfghjkl"のところはラベルで使う文字を決めるオプションです。お好みでホームポジションから近い文字を選んでおくといいでしょう。

元々検索にヒットしたワードにハイライトを付ける設定にしてたんですが、easymotionを使用するとおかしな挙動になったのでハイライトはオフにしました。設定としては"vim.hlsearch": falseの部分ですね。

モーション一覧

一文字検索と前方絞り込み検索が個人的におすすめです。リーダー3連打はさすがに使わんでしょうw

モーション 機能
<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のエミュレータも入ってます。太っ腹!これもよく使うところを動画でご紹介。

カーソル下のテキストを囲むオブジェクトを変更

ダブルクォーテーションからカギ括弧に変更する例。

f:id:kickbase:20171011202926g:plain

カーソル下のテキストを囲むオブジェクトを削除

カーソル下のカギ括弧を削除する例。

f:id:kickbase:20171011202917g:plain

選択範囲を任意のオブジェクトで囲む

普通にダブルクォーテーションで囲む例。

f:id:kickbase:20171011202905g:plain

少し特殊な<small> ... </small>タグで囲む例。

f:id:kickbase:20171011203004g:plain

モーション一覧

モーション 機能
d s <削除したいオブジェクト> カーソル下のテキストを囲むオブジェクトを削除
c s <現在のオブジェクト> <変更したいオブジェクト> カーソル下のテキストを囲むオブジェクトを変更
S <囲みたいオブジェクト> 選択範囲を任意のオブジェクトで囲む

vim-commentary

コメントのトグルをしてくれるvim-commentaryも入ってます。VEXも対応してくれててGood。

選択範囲にラインコメントを追加・解除

f:id:kickbase:20171011202911g:plain

選択範囲にブロックコメントを追加・解除

f:id:kickbase:20171011202932g:plain

モーション一覧

モーション 機能
g c <CR> カーソルがある行にラインコメントを追加・解除
g C 選択範囲にブロックコメントを追加・解除

まとめ

本家Vimと比べてしまうと見劣りするところもありますが、プラグインをひとつ入れるだけでこれだけ多機能な環境を提供してくれるのは素晴らしいんじゃないでしょうか。

エディタのカスタマイズはこれくらいにして、VEX書きまくるぞい!