👨‍💻

VS Codeをマウス無しで操作するためのショートカットキーを考えてみた

2024/02/14に公開

はじめに

VScodeをマウスなしで操作できるようになるために、日々試行錯誤している者です。

ショートカットキー自体は大量にあって一度に全て覚えるのは大変で、特に画面遷移系のショートカットキーは最初中々覚えられなかったので、備忘も兼ねてまとめておきます。

⌘+Cでコピー、 ⌘+Dで複数選択といった、コーディング時の定番ショートカットは真っ先に習得すると思うので、個人的についマウスを使いがちなショートカットキー(特に要素を遷移する時のキー)に絞ってまとめました。

キーボード ショートカットで自分好みのキーを割り当てられるよう、各操作の横に()でコマンドIDも記載しておきます。デフォルト設定のものや筆者個人の設定もありますが、どれも使い慣れるととても快適になるキーを厳選してまとめたので、参考になれば幸いです。(筆者はUSキーボードを使用しております)

ビューの切り替えとナビゲーション

VSCode内の異なるビュー間で移動するためのショートカットキー
コードを書きながら、ファイルを移動したり、ソース管理をする時に便利です

コマンド名 コマンド コマンドID
アクティビティバーへの移動 ⌘ + ` workbench.action.focusActivityBar
サイドバーへの移動 ⌘ + 1 workbench.action.focusSideBar
エディターへの移動 ⌘ + 0 workbench.action.focusFirstEditorGroup
サイドバーの表示/非表示の切り替え ⌘ + b workbench.action.toggleSidebarVisibility
ターミナルの表示/非表示の切り替え ⌘ + j workbench.action.togglePanel
直近開いたファイルを表示 ⌘ + p workbench.action.quickOpen
コマンドパレットを表示 ⌘ + shift + p workbench.action.showCommands

エディターの操作

エディター内でのファイルやテキストの編集に関連するショートカットキー
コーディング時に、ファイル間を移動したり、複数ウィンドウに分割するときに便利です

コマンド名 コマンド コマンドID
エディター内で、右隣のエディターに移動 ⌘ + Shift + ] workbench.action.nextEditor
エディター内で、左隣のエディターに移動 ⌘ + Shift + [ workbench.action.previousEditor
エディターを閉じる ⌘ + w workbench.action.closeActiveEditor
エディターを分割する ⌘ + \ workbench.action.splitEditor
分割したエディターで右に移動する Ctrl + ] workbench.action.focusRightGroup
分割したエディターで左に移動する Ctrl + [ workbench.action.focusLeftGroup

カスタマイズ設定

各操作を自分の使いやすいキーに割り当てることができます。
検索窓にキーを割り当てたい操作を入力して、キーバインドが設定できます。
(キーはわかるけど操作名がわからない場合は、何か一つ適当なコマンドをクリックし、既に使用しているキーバインドをクリックするとその操作に飛べます)

コマンド名 コマンド
キーボード ショートカット ⌘ + K → ⌘ + S

まとめ

はじめのうちはショートカットを覚えずに直感的に使いやすいマウス操作をしていましたが、これらの操作に慣れるとキーボードから手を離さず操作できるので快適です。一気に覚えるのは大変だと思うので、今日から一つずつでもショートカットを実際に取り入れてみてください。

以下に視覚的に理解できるようにスクリーンショットも乗せておきます。

最後まで読んでいただきありがとうございました。

Discussion