皆さんはコーディングをする時、どんなエディタを使われているでしょうか？
僕は以前、「Vimってめちゃくちゃカッコいい！」という憧れからNeovimに挑戦したことがあります。…が、あえなく挫折。
今回は、そんな僕が行き着いた、VS Codeで「Vimみたいなマウスを使わない操作」を無理のない範囲で、実現するための設定をご紹介します！
そもそも、なんでvim？
VS Codeでちょっと悩みが…
冒頭で『 Vimってめちゃくちゃカッコいい！ 』とお話ししましたが、まずは『 なぜ一度VS Codeから離れたのか 』、その理由からご説明します。
皆さんは普段、どのようなエディタを使われているでしょうか。
VS Code、Cursor、Zed、あるいはNotepad++など…。
多くの方は、これらのエディタを一度は触れたことがあるかと思います。
僕自身、「コーディングをするなら、とりあえずVS Code！」というスタイルで、ずっとVS Codeを使い続けていました。
しかし、使うなかで悩みがありました。
それは、『 マウスを使う頻度が多すぎる ！』。
画面を切り替えたり、特定の行に移動したりするたびに、いちいちキーボードから手を離してマウスを握る。その動作が次第に億劫に感じるようになりました。
理由はズバリ、『 腕が疲れる！！ 』これです。
長時間コーディングをしていると、タイピングだけでも手や腕を酷使します。そこにマウスへの持ち替えという動作が加わることで、蓄積された疲労がじわじわとダメージを与えてくる為です。
それ以外にも、一度マウスを握ることで、考えていることと操作がワンテンポ遅れてしまうことが、ストレスの原因になっていました。
vimにした理由と挫折の経緯
そんなわけで、前述した悩みを解決する為に、キーボードだけでほぼすべての操作が完結するエディタを探し始めることに。
そこで見つけたのが『 Neovim 』でした！
最初に目にした時の第一印象は、「めちゃカッコイイ！！」。
実際に触ってみると、キーボードから動かずに操作が完結する感覚は満足感がありました。
しかし、膨大なショートカットが覚えられず、結局途中でマウスに手が伸びてしまったり、操作を思い出すためにかえって疲れるようになってしまいました…。
（もちろん、使いこなせれば最高の相棒になるエディタだとは感じたのですが！）
結局、使い慣れた VS Code に戻ることになりました。
とはいえ、キーボード完結の良さを知ってしまった身にはやはり辛いものがあります。
「Vimの拡張機能も試してみたけれど、どうもしっくりこない…」
そこで、「それなら、VS Codeを自分好みにキーバインドを設定しよう！」という結論に至りました。
VS Codeキーバイン設定
前置きが長くなりましたが、ここからやっと本題の『 VS Codeキーバインド設定 』です。
重視したこと：
- マウスを極力使わずに操作が出来ること
- Neovim便利な機能を取り入れること
- VS Code標準のキーバインドはなるべく書き換えず、共存させること
- 最低限必要な機能に絞ること
これらを重視しながらGeminiと作ってみました！
お忙しい方はこちらから（クリックすると開きます！コピペどうぞ！）
// =================================================================
// 1. エリア切り替え
// =================================================================
{ "key": "alt+j", "command": "workbench.action.terminal.focus" },
{ "key": "alt+k", "command": "workbench.action.focusActiveEditorGroup" },
{ "key": "alt+b", "command": "workbench.view.explorer" },
// =================================================================
// 2. タブ切り替え
// =================================================================
{ "key": "alt+p", "command": "workbench.action.nextEditor" },
{ "key": "alt+o", "command": "workbench.action.previousEditor" },
{ "key": "alt+w", "command": "workbench.action.closeActiveEditor" },
// =================================================================
// 3. ナビゲーション
// =================================================================
{
"key": "alt+d",
"command": "editor.action.revealDefinition",
"when": "editorTextFocus",
},
{ "key": "alt+s", "command": "workbench.action.navigateBack" },
{ "key": "alt+f", "command": "workbench.action.navigateForward" },
// =================================================================
// 4. アシスト
// =================================================================
{
"key": "alt+i",
"command": "editor.action.showHover",
"when": "editorTextFocus",
},
// =================================================================
// 5. ファイルツリー（サイドバー）内での操作
// =================================================================
{
"key": "j",
"command": "list.focusDown",
"when": "listFocus && !inputFocus",
},
{
"key": "k",
"command": "list.focusUp",
"when": "listFocus && !inputFocus",
},
{
"key": "a",
"command": "explorer.newFile",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus",
},
{
"key": "shift+a",
"command": "explorer.newFolder",
"when": "explorerViewletVisible && filesExplorerFocus && !inputFocus",
},- VS Codeを開く
- Ctrl + Shift + Pを押す
- 『 キーボード 』と入力
- 基本設定: キーボード ショートカットを開く (JSON)を押す
- 開いたjsonファイルに設定を記述する
エリア切り替え
- Alt + J: ターミナルへ移動
{ “key”: “alt+j”, “command”: “workbench.action.terminal.focus” }, - Alt + K: エディタへ戻る
{ “key”: “alt+k”, “command”: “workbench.action.focusActiveEditorGroup” }, - Alt + B: サイドバー（ファイルツリー）へ移動
{ “key”: “alt+b”, “command”: “workbench.view.explorer” },
タブ切り替え
- Alt + P: 右側のタブへ
{ “key”: “alt+p”, “command”: “workbench.action.nextEditor” }, - Alt + O: 左側のタブへ
{ “key”: “alt+o”, “command”: “workbench.action.previousEditor” }, - Alt + W: タブを閉じる
{ “key”: “alt+w”, “command”: “workbench.action.closeActiveEditor” },
ナビゲーション
- Alt + D: 定義へジャンプ
{ “key”: “alt+d”, “command”: “editor.action.revealDefinition”, “when”: “editorTextFocus”, }, - Alt + S: 前の場所に戻る (戻る：定義ジャンプから帰還する)
{ “key”: “alt+s”, “command”: “workbench.action.navigateBack” }, - Alt + F: 次の場所へ進む
{ “key”: “alt+f”, “command”: “workbench.action.navigateForward” },
アシスト
- Alt + I: 型情報・ホバー表示
{ “key”: “alt+i”, “command”: “editor.action.showHover”, “when”: “editorTextFocus”, },
ファイルツリー（サイドバー）内での操作
- フォーカスダウン
{ “key”: “j”, “command”: “list.focusDown”, “when”: “listFocus && !inputFocus” }, - フォーカスアップ
{ “key”: “k”, “command”: “list.focusUp”, “when”: “listFocus && !inputFocus”, }, - ファイルの作成
{ “key”: “a”, “command”: “explorer.newFile”, “when”: “explorerViewletVisible && filesExplorerFocus && !inputFocus”, }, - フォルダの作成
{ “key”: “shift+a”, “command”: “explorer.newFolder”, “when”: “explorerViewletVisible && filesExplorerFocus && !inputFocus”, },
さいごに
今回は僕が使っているVS Codeのキーバインド設定でした！
いかがでしたでしょうか？
実はこの記事を書いている途中、あまりに内容が薄かったので、この設定にたどり着くきっかけとなったNeovimのエピソードを登場させてみました！
ホントに、Neovimを自在に使いこなしている方々には尊敬です…！僕はどうしてもあの膨大なキー設定に馴染むことができず、挫折してしまったので（苦笑）。
Neovimについては、また別の機会に詳しくお話ししようと思っていますので、気長にお待ちいただけると嬉しいです！
この記事が、『 マウス脱却 』を願う誰かの助けに少しでもなれば幸いです。
最後までお読み頂き、ありがとうございました！
次は何をいじくり回しましょうか？お楽しみに！
コメント