VS Code をキーボードだけで操作する

Visual Studio Code をキーボード操作で効率的に使うためのショートカットキーのまとめです。 Vim/Neovim などのエディタに比べると、Visual Studio Code ではマウスを使いがちですが、慣れればほとんどの操作をキーボードだけで完結できます。 エディタ内での編集操作は Vim 拡張や Emacs キーバインドなど好みが分かれるため、ここでは主にペーン移動などの UI 操作に絞っています。

ファイル名で開く、シンボル名で開く

タブの切り替え

ペーンの移動、表示・非表示

カーソル下の関数の定義へジャンプ

カーソル位置にある関数や変数の定義にジャンプする場合は、F12 キーだけ覚えておけばなんとかなります。 個人的には Vim 拡張 を入れているので、gd (go to definition) をよく使います。

さらなる高みへ …… 独自のキーバインド

デフォルトのキーバインドに慣れてきたら、さらに自分好みにカスタマイズするのもオススメです。 次のようにしてキーバインド用の設定ファイル (keybindings.json) を開くことができます。

1. Cmd/Ctrl + Shift + P でコマンドパレットを開く
2. 基本設定: キーボード ショートカットを開く (JSON) (Preferences: Open Keyboard Shortcuts (JSON)) を選択する

下記は設定の一例です。

[
  // エクスプローラー内で新しいファイルを作成
  {
    "key": "cmd+n",
    "command": "explorer.newFile",
    "when": "explorerViewletVisible && filesExplorerFocus"
  },
  // エクスプローラー上で新しいフォルダーを作成
  {
    "key": "cmd+shift+n",
    "command": "explorer.newFolder",
    "when": "explorerViewletVisible && filesExplorerFocus"
  },
  // タブを左に移動（Chrome のショートカットと合わせる）
  {
    "key": "ctrl+shift+pageup",
    "command": "workbench.action.moveEditorLeftInGroup"
  },
  // タブを右に移動（Chrome のショートカットと合わせる）
  {
    "key": "ctrl+shift+pagedown",
    "command": "workbench.action.moveEditorRightInGroup"
  }
]

このファイルを直接編集してもよいですし、Cmd + K → Cmd + S で開くキーバインド一覧画面からも設定可能です。

UI 上の特定のボタンを右クリックして「キーバインドの構成」を選択すると、そのボタン用のキーバインドを確認＆設定できます。 マウス操作で頻繁に押しているボタンがあれば、ショートカットキーを割り当てておくと便利です。

関連記事

• VS Code で YAML ファイルをソートする（YAML Sort 拡張）
• VS Code で Python 用のフォーマッター (Black) を使う
• VS Code の Explorer で特定のファイルやディレクトリを非表示にする (files.exclude)
• VS Code のフォーマッターで自動整形する (editor.formatOnSave)
• VS Code の設定ファイルの場所 (settings.json)
• MongoDB for VS Code で Azure Cosmos DB を操作する
• EditorConfig でコーディングスタイルを統一する