背景

開発の速度を上げるためにキーボートから手を離さずにコードを書きたい！
VScodeのショートカットを使えばある程度は実現はできますがキーボードでの細かなページスクロールがどうしても実現できませんでした
色々迷いましたがVScodeにvimのプラグインを入れることで解決することにしました
vimの操作を覚える必要が出てきますがvimキーバインド + VScodeでより便利に開発出来ると思います

Neo Vimのプラグインもありますが今回は手軽に環境を整えたいのでvimプラグインを使います

ついでに僕が使っているvimのキーバインドとVScodeのコマンドも一緒に紹介させてもらいます

vimプラグインを導入するメリット

細かなページスクロールをすることができる
vimの苦手意識がなくなる
vimの便利なキーバインドを使うことができる
VScodeの便利な機能とvimの便利な機能を手軽に使える

vimプラグインを導入するデメリット

vim特有のモードを使わないといけない
少しカスタマイズが必要
コマンドを覚えるまで少し戸惑う

vimの設定ファイル

setting.jsonに追記することでvimのキーバインドもカスタムすることができます
僕の設定はこんな感じです

setting.json

{
    // インサートモードでjを2回押すとノーマルモードに戻る
    "vim.insertModeKeyBindings": [
        {
            "before": ["j", "j"],
            "after": ["<Esc>"]
        }
    ],
    // control + (h or l) で垂直に分割したファイルの左右に移動する
    "vim.normalModeKeyBindingsNonRecursive": [
        {
          "before": ["<C-h>"],
          "after": ["<C-W>", "h"]
        },
        {
          "before": ["<C-l>"],
          "after": ["<C-W>", "l"]
        }
    ],
　　　　　　　// 行番号を相対で表示する
    "editor.lineNumbers": "relative"
}

vimの便利キーバインド

キーボードでページをスクロール

vimのキーバインドを使ってキーボードで細かくスクロールすることができます
マウスでのスクロールと矢印キーの操作もできます
下記のコマンドでキーボードでのページスクロールは解決できます
特に僕が便利だと思うコマンドは「z z」です
このコマンドは書いてる行が画面上部または下部にある場合に前後のコードが見えなかったり、モニター下部が見辛い時に押すとフォーカスが当たってる行を画面中央まで持ってきてくれます

コマンド	説明
g g	ページトップへ移動
shift + g	ページエンドへ移動
control + f	1ページ下へ移動
control + b	1ページ上へ移動
control + u	1ページの半分だけ上へ移動
control + d	1ページの半分だけ下へ移動
control + e	1行下へ移動
control + y	1行上へ移動
z z	フォーカスしてる行を画面中央の持ってくる

定義元に移動する

コマンド	説明
g d	定義元に移動する

クラス名などの上でg dを押すと定義元にジャンプできます
vimの場合は設定する必要がありますが、設定なしで使うことができます

元の場所に戻る

コマンド	説明
control + o	1つ前にいた行に戻る

g dなどで定義元へジャンプした後に元々いた行に戻りたい場合はcontrol + oを押すと1つ前にいた行に戻ることができるので便利です

ダブルクオートの文字列を編集する

コマンド	説明
ci[囲んでいる文字列]	囲まれれた文字列を削除してインサートモードに入る

説明が難しいですがダブルクオートで囲まれた文字列の上にカーソルを合わせてci"を押すとダブルクオートの中身を削除してインサートモードに入ることができます

行番号を指定して移動する

コマンド	説明
行番号 g g	指定した行番号に移動する
行番号 k	相対行表示をしている場合はフォーカスしてる行から見て上部の行番号に移動する
行番号 j	相対行表示をしている場合はフォーカスしてる行から見て下部の行番号に移動する

移動したい行番号を押した後にg gを押すと入力した行に移動することができます
相対行表示をしている場合は少ない入力で指定した行に移動できます

ファイル内文字列検索

コマンド	説明
/ [検索する文字列]	ファイル内に指定した文字列があるか検索する
n	次の候補へ移動
N	前の候補へ移動

VScodeのccommand + fだとフォーカスが検索のウィンドウに奪われるんで少し不便ですが/を使うとフォーカスは奪われないのでスクロール、編集がそのまますることが出来るので便利です

VScodeの便利コマンド

サイドバーのエクスプローラーに移動する

コマンド	説明
shift + command + e	サイドバーのエクスプローラーに移動する

VScodeのサイドバーは項目が多いのでファイルツリーを見たい時に便利です

サイドバーの全ファイル内文字列検索をする

コマンド	説明
shift + command + f	サイドバーの検索に移動する

サイドバーの全ファイル検索に移動できる

ソース管理を開く

コマンド	説明
control + shift + g	サイドバーのソース管理に移動する

サイドバーのソース管理に移動できる

ターミナルを開く

コマンド	説明
command + j	ターミナルを開く

1回押すとターミナルを開いて、もう一度押すと閉じることができる

別のウィンドウに切り替える

コマンド	説明
control + w	別のウィンドウと切り替える

vmuxやscreenみたいにウィンドウを切り替えることができます
VScodeのデフォルトではcontrol + wで切り替えができますがvimプラグインをインストールするとvimキーバインドと干渉するのでVScodeのショートカットを変更しています
よければ押しやすいキーの組み合わせてショートカットを変更してみてください
ウィンドウの選択は　control + n, pで出来ます

最後に

VScodeを使うことで置換や全ファイル内文字列検索も簡単にできます
vimの基本的なキーバインドは使えるのでキーバインドを覚えて自分が使いやすいようにカスタムするとキーボードから手を離さずに楽しく開発できると思います
よければvimプラグインをインストールしてみてください

VScode + vimプラグインを使ってキーボードから手を離さずに開発する

背景