VSCodeでVimをはじめてから半年間くらいたった体験記と設定など

挨拶

はじめまして、11月にABEJAの情シスに入社した世古です。
この記事はhttps://qiita.com/advent-calendar/2021/abeja の7日目の記事です。

入社したばかりでまだまだ社内のフローを覚えることも山ほどありますが、社内でお誘いいただきアドベントカレンダーに参加することにしました。
テーマは迷いましたがここ1年くらいで開発する上で一番やってよかった習慣がVimだったのでそれにしました。

なぜVimを学ぼうと思ったのか

もともとMacの標準機能でCtrl+FとかDなどで矢印キー使わないポリシーで開発していたのですが、
何か、もう少し、楽にならないもんかなぁ？と思っていた時に、プログラミング初学者の時に秒で挫折したVimが頭をよぎりました。
そんなこんなで色々調べていると、メルペイの方の開発ライブ実況でVim無双しているのをみてこれはヤバいなと思ってはじめました。
しかし、いきなりガチのVimエディターはハードル高そうだったのでVSCodeのプラグインでVimやらせてもらうことしました。
VSCode自体の入力補完やスニペットや他のプラグインとの連携など併せて利用できるのでこれだけでも十分でした。

Vimを習得するメリット

• 単純に開発が速くなる
• カーソルがある程度脳のイメージ通り動くので気持ちいい
• とにかくかっこいい

デメリット

• Vimキーバインドが設定されていないエディターだとちょっと嫌な気持ちになる
• Notionとか他のアプリでもVimコマンド使ってしまって変な文字打ってる
• 習得が面倒(慣れたら最高になります)

慣れるまでの期間

だいたい3週間くらいでだいぶ自然に使えるようになったかと思います。
はやめに習得したいので3つのルールを課せました

• なるべくマウスは使わない(ちょっと遠くに置いとく)
• コマンドを忘れたら作業を止めてでもコマンドを調べる
• やりたいことを最短で実現するコマンドを常に考えながら作業する

初日〜5日
本当にやりたいことが何一つできないし、消したらいけない文字消してしまったり、
コピペできないし(設定したらできるようになります)、かなり重めの足枷をつけられているような気持ちでした。
練習していたのは主にキーカーソル移動系と削除とコピペなどでした。

6日から14日
カーソル移動や簡単なキー操作はマスターしたので、他のキーも積極的に使い始める。
このあたりから毎朝今日覚えるキーを決めて無理やり使って体に染み込ませてました。
体感としてはこの頃には、Vim始める前と同じくらいの作業速度になったと思います。
大きな移動やVisualモードというものを意識的に使っていたと思います。
shift+V $ %で関数とか括弧で括られたブロックを全て選択など覚えて感動したりしてました。

15日から３週間経つころ
この頃から思考した通りカーソル動かしたり出来るようになったきがしました。
明らかにVim以前よりも作業速度が格段に上がっていたし、Vimを覚えなきゃとか訓練している感覚は一切なくなったと思いました。

それ以降は特別大きな変化はないので意識して使っていればだいたいそれくらいで身体が覚えるのかなと思いました。

半年使ってみて

個人的に行っている開発ではかなり重宝しているし、情シスでこれからGASを書くこと増えそうなので、ClaspとTypeScriptで安全にコードかけるのと、開発速度を上げることで別のことに時間使えるので結果的に習得しておいてよかったと言えます。
最初は地獄ですが時間対効果も高いと思うのでライトにプログラミングやってる方にもおすすめできるかとも思います。

最後に簡単にですが、導入方法と私が使っている設定と書いておきます。

おまけ

導入

VSCodeのプラグイン検索でVimと打てば一番最初に出てくると思います。

提供元

設定

VSCode Vimではsettings.jsonに好きな設定を書いていきます。

この実際に僕が使っている設定となりますが、この辺りは標準的な設定かもしれないです。

"vim.leader": "<space>",
"vim.useSystemClipboard":true, // クリップボードを共有するものこれが一番大事な気がします。
"vim.hlsearch": true,
"vim.easymotion":true,
"vim.easymotionKeys": "sdfghjkl",
"vim.visualstar": true,
"terminal.integrated.tabs.enabled": true

VimではないですがVim利用に伴いVSCodeのショートカットも変更しました。
これはkeybinding.jsonに記述します。

この設定によって以下の処理がキーボードから手を離さずに行えるようになります。

• クラスや関数の宣言箇所へ移動
• 実装箇所
• エディターのタブの左右移動
• エディターとターミナルの移動

[     // 実装箇所へ移動
      {
        "key": "ctrl+w ctrl+i",
        "command": "editor.action.goToImplementation",
        "when": "editorFocus"
      },
       // 宣言箇所へ移動
      {
        "key": "ctrl+w ctrl+d",
        "command": "editor.action.goToDeclaration",
        "when": "editorFocus"
      },
      // 左のタブへ移動
      {
        "key": "ctrl+w ctrl+h",
        "command": "workbench.action.previousEditor",
        "when": "editorFocus"
      },
			// 右のタブへ移動
      {
        "key": "ctrl+w ctrl+l",
        "command": "workbench.action.nextEditor",
        "when": "editorFocus && vim.mode == 'Normal'"
      },
    //----------------------------------------------------------
    // vscodeのeditorとterminal切り替え
    //----------------------------------------------------------
     {
      "key":"ctrl+;",
      "command": "workbench.action.terminal.focus",
      "when": "editorTextFocus"
    },
    {
      "key":"ctrl+;",
      "command": "workbench.action.focusFirstEditorGroup",
      "when": "terminalFocus"
    }
]

参考にしたもの