【VSCode】Vimプラグインを使って快適な開発環境を作る

tl;dr

拡張機能→「vim」を検索→インストール→ Control+Shift+p→Open Settings(JSON)→setting.jsonに好みの設定を記述

環境

出来るようになること

vscode統合開発環境として使いつつ、vimキーバインドをそのまま使用することが出来るようになります。 vimソースコードを書きたいけど、vscodeの便利さを手放したくないという人(今の自分)は使ってみてください!

Vimプラグインをインストール

vscode拡張機能をインストールすることで、自分好みにカスタマイズしていくことが可能です。 今回インストールするvimプラグインもその一つとなっています。
では、vimプラグインのインストールをしていきましょう。
f:id:bD4yv:20201018185426p:plain
たったこれだけです。いちおう文章でも説明しておきます。
1. 左サイドバーの拡張機能のタブを開く
2. 検索窓に「vim」を入れて検索
3. 一番上に出てくる拡張機能をクリック
4. インストールをクリック
何かしらのファイルを開いてみてください。h j k l等のvimの操作ができれば成功です。
次に、vimrcに相当する設定ファイルを見ていきましょう。

設定をカスタマイズする

VSCodeプラグインでも、vimrcのような設定ファイルからキーバインドのカスタマイズ等が可能です。 設定ファイルの開き方を見ていきましょう。
1. Control+Shift+pでコマンドパレットを起動
2. 「Open Settings JSON」と入力
3. 「Open Settings(JSON)」を実行
これで設定ファイルが開けました。自分のvimrcを再現する方法は各自で調べてみてください。
参考までに、僕の大好きな jj でノーマルモードに戻る設定を貼っておきます。

{
    "vim.insertModeKeyBindings": [
        {
            "before": [
                "j","j"
            ],
            "after": [
                "<Esc>"
            ]
        },
    ],
}

本編はこれで終わりですが、最後にvimvscodeを組合せた開発環境の良さについて語ってみます。

VSCode × Vimの可能性

僕は、vimの存在を知る以前はvscodeオンリーでソースコードを書いていました。 WindowsでもUbuntuでも安定して動作し、シンプルで使いやすいGUIが気に入っていました。 拡張機能でより良い環境を求めて気軽に改造していけるのもいいところだと思います。
vimでのコーディングが面白そうだなと感じ始めたときは、vimには無限の可能性を感じたもののUnixコマンドでのファイル管理等には煩わしさを感じていました。 右クリック→名前の変更 でファイル名を変更ができないのは少し面倒くさいと感じました。 vscode内でvimの操作を再現出来るとは知らず、vimの魅力をとるかvscodeの使いやすさをとるかでかなり悩んでいたのを記憶しています。
そんな僕にとって、お互いのいいとこ取りが出来る用なvimプラグインは素晴らしいものに感じられました。 僕がvscodeに頼らざるを得ないほど未熟だというだけかもしれませんが、今のところは現環境に大満足です。
vscodeの利便性(Dockerとの連携とかすごくいい!)を感じつつ、vimならではの良さを享受できていると思います。 とは言いつつも、まだまだvim修行が足りないと感じているので、悟りを開くまでには先が長そうです。
これからも、色々なところで「いいとこどり」を見つけていきたいと考えています。

最後までお読み頂き、ありがとうございました。