VSCodeでいい感じにVimを使うための設定 (Windows)

VSCodeでいい感じにVimを使うための設定 (Windows)

VSCodeを2年ほど使った後、私は同僚のVimmerに出会いました。
Vimmerと知るまでは、「手元がゆっくりで落ち着いて開発してる人だなー」という印象でしたが、全く違いました。
ホームポジションから動かさずに無駄なくコーディングするため、忙しく手元を動かす必要がなかったのです。

なんでわざわざVSCodeでVimなの?

本家のVimから出てくんなとか言われそうですが、Vimを知らずにVSCodeを使っていた私の視点からの所見では、VSCodeが人気だからです。

人気なので、拡張機能が充実しており、新しいものに対応した拡張機能もすぐに出てきます。

クロスプラットフォームでWindows、Mac、Linux、(そのうちWeb上でも)と、どこでも動作します。
Vimも大概OKですが、VSCodeは加えて様々な言語に対応します。
C#, Java, PHP, Python, Ruby, Go, JavaScript, TypeScript, Angular, Vue.js, React…上げればキリないぐらい、LanguageServerのおかげでIDEさながらの充実した支援が受けられます。

設定かんたん!(←大事)
Vimは自分色に染められるのが良いところですが、設定にとんでもなく時間が掛かります。というか、終りがありません。
VSCodeなら言語周りの設定は拡張機能入れれば完了します。
古参のVimmerには無縁でしょうが、肥大化したVimの設定に新規ユーザーはこれから足を踏み入れるでしょうか?

いろいろありますが、強いもの(VSCode)に乗っかってVimの操作性の恩恵だけ受けるのが、良い方法ではないかと思います。

Vim拡張機能をインストールしよう!

こいつです。黙ってインストールです。
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

設定しないと始まらない!

私の今のsetting.jsonに記載されているvim関連の設定値です。
細かい説明はしません。意味あっての設定値なので気になるものは調べてください。

    // vim
    "vim.camelCaseMotion.enable": true, // leaer->オペレータでCamel単位で選択
    "vim.easymotion": true, // 文字列カーソルジャンプ拡張機能
    "vim.easymotionKeys": "asdfghjklwertuiop", // easymotionの候補キーを設定
    "vim.easymotionMarkerFontFamily": "Myrica M", // easymotionのフォントを変更
    "vim.foldfix": true, // 折りたたみ箇所を開かないように変更
    "vim.gdefault": true, // replaceコマンドの/gオプションを省略
    "vim.highlightedyank.enable": true, // camelCaseMotionを有効化
    "vim.hlsearch": true, // 検索マッチ箇所をハイライト
    "vim.ignorecase": true, // ignorecaseを有効化
    "vim.incsearch": true, // incsearchを有効化
    "vim.leader": "<space>", // leaderキーを設定
    "vim.sneak": true, // s[S]から二文字で該当箇所へジャンプ
    "vim.sneakUseIgnorecaseAndSmartcase": true, // sneak時にignorecase, smartcase設定を使用
    "vim.useCtrlKeys": true, // Ctrlキー拡張を有効化
    "vim.useSystemClipboard": true, // クリップボードを使用
    "vim.visualstar": true, // visualstarを有効化
    "vim.insertModeKeyBindings": [
        // Normalモードへ
        { "before": ["j", "k"], "after": ["<ESC>"] },
    ],
    "vim.normalModeKeyBindingsNonRecursive": [
        // カーソル位置の単語をマルチカーソルで選択
        { "before": [ "<C-n>" ], "after": [ "g", "b" ] },
        { "before": [ "<C-k>" ], "commands": [ "acceptSelectedSuggestion" ] },
        // 前のタブを表示
        { "before": [ "g", "r" ], "after": [ "g", "T" ] },
        // ハイライトクリア
        { "before": [ "<leader>", "\/" ], "commands": [ ":noh" ] },
        // ファイル保存
        { "before": [ "<leader>", "w" ], "commands": [ ":w" ] },
        // プレビュー表示を開いたままにする
        { "before": [ "<leader>", "k" ], "commands": [ "workbench.action.keepEditor" ] },
        // サイドバーの開閉
        { "before": [ "<leader>", "b" ], "commands": [ "workbench.action.toggleSidebarVisibility" ] },
        // 新規ファイル
        { "before": [ "<leader>", "n" ], "commands": [ "workbench.action.files.newUntitledFile" ] },
        // クイックオープンを開く
        { "before": [ "<leader>", "p" ], "commands": [ "workbench.action.quickOpen" ] },
        // ファイル内シンボル検索
        { "before": [ "<leader>", "o" ], "commands": [ "workbench.action.gotoSymbol" ] },
        // ワークスペース内シンボル検索
        { "before": [ "<leader>", "t" ], "commands": [ "workbench.action.showAllSymbols" ] },
        // ファイルエクスプローラーを選択
        { "before": [ "<leader>", "e" ], "commands": [ "workbench.view.explorer" ] },
        // 変数の型定義を参照
        { "before": [ "<leader>", "g", "d" ], "commands": [ "editor.action.goToTypeDefinition" ] },
        // 変数の参照箇所の表示
        { "before": [ "g", "f" ], "commands": [ "editor.action.referenceSearch.trigger" ] },
        // 現在のタブ以外を閉じる
        { "before": [ "<C-w>", "<C-o>" ], "commands": [ ":tabo" ] },
        // 保存&閉じる
        { "before": ["Z", "Z"], "commands": [ ":wq" ] },
        // 前のタブを表示
        { "before": ["C-h"], "commands": [ "workbench.action.previousEditor" ] },
        // 次のタブを表示
        { "before": ["C-l"], "commands": [ "workbench.action.nextEditor" ] },
        // 前に戻る
        { "before": ["C-o"], "commands": [ "workbench.action.navigateBack" ] },
        // 次に進む
        { "before": ["C-i"], "commands": [ "workbench.action.navigateForward" ] },
        // パネルの開閉
        { "before": ["C-j"], "commands": [ "workbench.action.togglePanel" ] },
        // 上移動
        { "before": ["K"], "after": ["5", "k"] },
        // 下移動
        { "before": ["J"], "after": ["5", "j"] },
        // タブを左に移動
        { "before": ["<leader>", "<"], "commands": [ ":tabm -1" ] },
        // タブを右に移動
        { "before": ["<leader>", ">"], "commands": [ ":tabm +1" ] },
    ],
    "vim.visualModeKeyBindingsNonRecursive": [
        // カーソル位置の単語をマルチカーソルで選択
        { "before": [ "<C-n>" ], "after": [ "g", "b" ] },
        // 上移動
        { "before": ["K"], "after": ["5", "k"] },
        // 下移動
        { "before": ["J"], "after": ["5", "j"] },
    ],

キーボードショートカットの変更

こちらはキーバインドの変更です。
setting.jsonに記載するvim用のキーバインディングではなく、VSCodeのキーボードショートカットの変更です。

// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
    {
        "key": "ctrl+oem_comma", // setting.jsonを開く
        "command": "workbench.action.openSettingsJson"
    },
    {
        "key": "f6", // デバッグをカーソル位置まで進めて止める
        "command": "-workbench.action.debug.pause",
        "when": "inDebugMode"
    },
    {
        "key": "f6", // デバッグをカーソル位置まで進めて止める
        "command": "editor.debug.action.runToCursor"
    },
    {
        "key": "ctrl+p", // クイックオープン時の次ファイル選択 (デフォルト削除)
        "command": "-workbench.action.quickOpenNavigateNextInFilePicker",
        "when": "inFilesPicker && inQuickOpen"
    },
    {
        "key": "ctrl+shift+p", // クイックオープン時の前ファイル選択 (デフォルト削除)
        "command": "-workbench.action.quickOpenNavigatePreviousInFilePicker",
        "when": "inFilesPicker && inQuickOpen"
    },
    {
        "key": "ctrl+n", // クイックオープン時の次ファイル選択
        "command": "workbench.action.quickOpenNavigateNextInFilePicker",
        "when": "inFilesPicker && inQuickOpen"
    },
    {
        "key": "ctrl+p", // クイックオープン時の前ファイル選択
        "command": "workbench.action.quickOpenNavigatePreviousInFilePicker",
        "when": "inFilesPicker && inQuickOpen"
    }
]

ファイルやシンボルを検索するクイックオープン内でファイルを選択する場合、MacではCtrl+p (上に移動), Ctrl+n (下に移動)で上下に移動できますが、Windowsの場合はVSCode デフォルトのCtrl+p (上に移動), Ctrl+Shift+p (下に移動)のままです。
上記の設定値を追加して、割り当てキーを変更します。

結局、使いやすいの?

ショートカット等は同じ操作に対してVSCode標準とVimのショートカットがそれぞれあったりして、正直わかりにくいところもあります。

ですが、便利なところも多くあります。
VSCodeは色々なエディタのいいとこ取りをしている感じで、ショートカットの動作が洗練されている印象があります。
マルチカーソル等も、Ctrl+Alt+{Up} or {Down}で行単位でカーソルを増やした後、その状態を維持したまま自由自在に動き回れます。
この辺りはVimでも似たような事は出来ますが、手数は多くなりがちで、直感的ではありません。

VSCode + Vimなので、VSCodeで洗練された操作のいくつかは、Vim拡張機能を入れていても動作します。
煩わしさを感じることもありますが、慣れで解決する範囲と見ました。
それ以上の拡張機能や言語を含めたメリットが上回ると判断しました。
生粋のVimmerの方にもVSCodeを少し使いこなしてから判断しても遅くはないはずです。

私は最初にVSCodeから入ったので、VSCode + Vimは使いやすいと思います。
VSCode単体でも困らない程度に使いやすいんですが、マスターしたときのスキルの上限でみたら、間違いなくVSCode + Vimです。

一緒に試してみませんか。
褒めてばかりですが、私自身4回ぐらいVim拡張機能をアンインストールしています。
乗り換えてすぐは間違いなくパフォーマンスガタ落ちです。
脳トレやってる気分になります。

確かに慣れないうちはVimなしでコーディングした方が早いんですが、
「Vimなら今の操作はもっと簡単だよな…」と悪魔の声が聞こえるようになってきます。

そのうち、無意識にciwとか押し始めます。
そうなれば、貴方もVimmerの仲間入りです。

Vimカテゴリの最新記事