VS Codeでキーバインドを変更する方法｜ショートカットを自分好みにカスタマイズ

「このショートカット、もっと押しやすいキーに変えたい」
「普段使っているエディタと同じキー操作にしたい」
「よく使う機能にショートカットが割り当てられていない」
「他のアプリケーションと操作を統一したい」

プログラミングやテキスト編集では、キーボードショートカットの効率性が作業速度に大きく影響します。VS Codeの標準キーバインドは汎用的に設計されていますが、個人の作業スタイルや手の大きさ、慣れ親しんだ操作方法に合わせてカスタマイズすることで、さらに快適な開発環境を構築できます。

そんなときに便利なのが、Visual Studio Code（VS Code）のキーバインド（ショートカット）変更機能です。

VS Codeはショートカットをとても柔軟に変更できるので、自分の作業スタイルに合わせてキー操作を最適化できます。さらに、条件付きキーバインドや複数コマンドの連続実行など、高度なカスタマイズも可能です。

この記事では、VS Codeでキーバインドを変更する基本の方法から、実践的なカスタマイズ例、トラブルシューティングまで、初心者向けにわかりやすく詳しく解説します。

キーバインドの基本概念

キーバインドとは

キーバインド（Key Binding）とは、特定のキーの組み合わせと、実行したいコマンドを関連付ける設定のことです。例えば、Ctrl + Sを押したときに「ファイルを保存」というコマンドが実行されるような仕組みです。

VS Codeのキーバインドシステム

VS Codeのキーバインドシステムには以下の特徴があります：

• 階層的な優先度：ユーザー設定 > デフォルト設定
• 条件付き実行：特定の状況でのみ有効なキーバインド
• コマンドチェーン：複数のコマンドを順次実行
• 競合検出：同じキーに複数のコマンドが割り当てられた場合の警告

キーバインドを変更する基本方法

キーボードショートカット設定画面を開く

ショートカットキー

Windows・Linux

Ctrl + K → Ctrl + S

macOS

Cmd + K → Cmd + S

（Ctrl + Kを押してからCtrl + Sを押す2段階操作）

メニューからの起動

1. ファイルメニューをクリック
2. 基本設定 → キーボードショートカットを選択

コマンドパレットからの起動

Ctrl + Shift + P → "Keyboard Shortcuts" で検索

設定画面の基本操作

画面の構成

キーボードショートカット設定画面は以下の要素で構成されています：

要素	説明
検索バー	コマンド名やキーバインドで検索
コマンド一覧	利用可能なすべてのコマンド
現在のキー	各コマンドに割り当てられているキー
ソース	デフォルト設定かユーザー設定かを表示

基本的な変更手順

1. コマンドを検索
   • 検索バーにコマンド名を入力（例：format、comment）
   • 関連するコマンドが一覧に表示される
2. キーバインドを変更
   • 変更したいコマンドの行をダブルクリック
   • キー入力待ち状態になる
   • 新しいキーの組み合わせを押す
   • Enterキーで確定
3. 変更の確認
   • 新しいキーバインドが正しく設定されているか確認
   • 競合がないかチェック

検索機能の活用

コマンド名での検索

format          # フォーマット関連のコマンド
comment         # コメント関連のコマンド
debug           # デバッグ関連のコマンド
terminal        # ターミナル関連のコマンド

キーバインドでの検索

既存のキーバインドを確認したい場合：

ctrl+s          # Ctrl+Sに割り当てられたコマンド
cmd+shift+p     # Cmd+Shift+Pに割り当てられたコマンド

条件での絞り込み

• @source:user – ユーザーが変更した設定のみ
• @source:default – デフォルト設定のみ
• @source:extension – 拡張機能が追加した設定のみ

よく使うカスタマイズ例

基本的な編集操作

フォーマット機能のショートカット変更

デフォルト：Shift + Alt + F 変更例：Ctrl + Alt + F

変更手順：

1. 検索欄に「Format Document」と入力
2. 該当するコマンドをダブルクリック
3. Ctrl + Alt + Fを押してEnter

理由：Shift + Alt + Fは押しにくいため、より快適なキーに変更

行コメントのショートカット追加

デフォルト：Ctrl + / 追加例：Ctrl + ;

{
  "key": "ctrl+;",
  "command": "editor.action.commentLine"
}

行の複製

デフォルト：Shift + Alt + Down 変更例：Ctrl + D

{
  "key": "ctrl+d",
  "command": "editor.action.copyLinesDownAction"
}

ナビゲーション関連

タブ切り替えの改善

デフォルト：Ctrl + Tab 変更例：Ctrl + 1,2,3...で直接タブへ移動

[
  {
    "key": "ctrl+1",
    "command": "workbench.action.openEditorAtIndex1"
  },
  {
    "key": "ctrl+2",
    "command": "workbench.action.openEditorAtIndex2"
  }
]

エクスプローラーへの素早いアクセス

{
  "key": "ctrl+shift+e",
  "command": "workbench.view.explorer"
}

ターミナルの表示切り替え

{
  "key": "ctrl+`",
  "command": "workbench.action.terminal.toggleTerminal"
}

開発効率向上のためのカスタマイズ

定義への移動とジャンプバック

[
  {
    "key": "f12",
    "command": "editor.action.revealDefinition"
  },
  {
    "key": "shift+f12",
    "command": "workbench.action.navigateBack"
  }
]

検索・置換の強化

[
  {
    "key": "ctrl+h",
    "command": "editor.action.startFindReplaceAction"
  },
  {
    "key": "ctrl+shift+f",
    "command": "workbench.view.search"
  }
]

クイック修正とリファクタリング

[
  {
    "key": "ctrl+.",
    "command": "editor.action.quickFix"
  },
  {
    "key": "f2",
    "command": "editor.action.rename"
  }
]

JSONで直接編集する高度な方法

keybindings.jsonファイルの開き方

GUI経由での開き方

1. キーボードショートカット設定画面を開く
2. 右上の「{} Open Keyboard Shortcuts (JSON)」アイコンをクリック

コマンドパレット経由

Ctrl + Shift + P → "Preferences: Open Keyboard Shortcuts (JSON)"

JSON設定の基本構文

基本的な構文

[
  {
    "key": "キーの組み合わせ",
    "command": "実行するコマンド",
    "when": "実行条件（オプション）"
  }
]

キーの表記方法

表記	意味
ctrl+s	Ctrl + S
cmd+shift+p	Cmd + Shift + P（Mac）
alt+enter	Alt + Enter
f1	F1キー
escape	Escapeキー
space	スペースキー

条件付きキーバインド

エディタがフォーカスされている時のみ

{
  "key": "ctrl+enter",
  "command": "editor.action.insertLineAfter",
  "when": "editorTextFocus"
}

特定の言語ファイルでのみ

{
  "key": "ctrl+r",
  "command": "python.execInTerminal",
  "when": "editorLangId == python"
}

デバッグ中のみ

{
  "key": "f10",
  "command": "workbench.action.debug.stepOver",
  "when": "debugState == 'stopped'"
}

複数コマンドの連続実行

マクロ機能的な使用

{
  "key": "ctrl+shift+s",
  "command": "runCommands",
  "args": {
    "commands": [
      "editor.action.formatDocument",
      "workbench.action.files.save",
      "workbench.action.closeActiveEditor"
    ]
  }
}

条件分岐のあるコマンド

{
  "key": "ctrl+alt+n",
  "command": "runCommands",
  "args": {
    "commands": [
      "workbench.action.files.newUntitledFile",
      "editor.action.changeLanguageMode"
    ]
  }
}

実践的なカスタマイズ事例

Web開発者向けのカスタマイズ

HTML/CSS開発の効率化

[
  {
    "key": "ctrl+alt+h",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorTextFocus && editorLangId == html"
  },
  {
    "key": "ctrl+alt+c",
    "command": "extension.colorHighlight",
    "when": "editorLangId == css"
  }
]

JavaScript/TypeScript開発

[
  {
    "key": "ctrl+alt+i",
    "command": "editor.action.organizeImports",
    "when": "editorLangId == typescript || editorLangId == javascript"
  },
  {
    "key": "ctrl+alt+r",
    "command": "typescript.restartTsServer"
  }
]

データ分析・Python開発者向け

Jupyter Notebook連携

[
  {
    "key": "ctrl+enter",
    "command": "jupyter.execSelectionInteractive",
    "when": "editorLangId == python"
  },
  {
    "key": "shift+enter",
    "command": "jupyter.runcurrentcell",
    "when": "editorLangId == python"
  }
]

デバッグ効率化

[
  {
    "key": "ctrl+alt+d",
    "command": "workbench.action.debug.start",
    "when": "editorLangId == python"
  },
  {
    "key": "ctrl+alt+b",
    "command": "editor.debug.action.toggleBreakpoint"
  }
]

マークダウン・ドキュメント作成者向け

マークダウン編集の強化

[
  {
    "key": "ctrl+b",
    "command": "editor.action.insertSnippet",
    "args": {
      "snippet": "**${TM_SELECTED_TEXT}**"
    },
    "when": "editorLangId == markdown"
  },
  {
    "key": "ctrl+i",
    "command": "editor.action.insertSnippet",
    "args": {
      "snippet": "*${TM_SELECTED_TEXT}*"
    },
    "when": "editorLangId == markdown"
  }
]

プレビューとエクスポート

[
  {
    "key": "ctrl+shift+v",
    "command": "markdown.showPreviewToSide",
    "when": "editorLangId == markdown"
  },
  {
    "key": "ctrl+k ctrl+v",
    "command": "markdown.showPreview",
    "when": "editorLangId == markdown"
  }
]

他エディタからの移行支援

Vim風キーバインド

基本的な移動

[
  {
    "key": "ctrl+h",
    "command": "cursorLeft",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+j",
    "command": "cursorDown",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+k",
    "command": "cursorUp",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+l",
    "command": "cursorRight",
    "when": "editorTextFocus"
  }
]

Vim風の編集操作

[
  {
    "key": "ctrl+d",
    "command": "editor.action.deleteLines",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+y",
    "command": "editor.action.copyLinesDownAction",
    "when": "editorTextFocus"
  }
]

Emacs風キーバインド

カーソル移動とファイル操作

[
  {
    "key": "ctrl+a",
    "command": "cursorHome",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+e",
    "command": "cursorEnd",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+f",
    "command": "cursorRight",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+b",
    "command": "cursorLeft",
    "when": "editorTextFocus"
  }
]

Sublime Text風キーバインド

マルチカーソルと検索

[
  {
    "key": "ctrl+d",
    "command": "editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus"
  },
  {
    "key": "ctrl+shift+l",
    "command": "editor.action.selectHighlights",
    "when": "editorFocus"
  }
]

トラブルシューティング

よくある問題と解決方法

キーバインドが効かない

症状：設定したキーバインドが動作しない

原因と解決法：

1. 競合の確認 検索バーに設定したキー（例: ctrl+d）を入力 → 複数のコマンドに割り当てられていないか確認
2. when条件の確認 { "key": "ctrl+d", "command": "editor.action.deleteLines", "when": "editorTextFocus" // この条件が適切か確認 }
3. JSON構文の確認 // 正しい構文 [ { "key": "ctrl+d", "command": "editor.action.deleteLines" } ] // 間違った構文（最後のカンマ） [ { "key": "ctrl+d", "command": "editor.action.deleteLines", // 最後にカンマは不要 } ]

拡張機能とのキーバインド競合

症状：拡張機能をインストール後、既存のキーバインドが動作しない

解決法：

1. 競合の特定 @source:extension で拡張機能のキーバインドを確認
2. 優先度の調整 { "key": "ctrl+shift+f", "command": "-extension.command", // 拡張機能のコマンドを無効化 }, { "key": "ctrl+shift+f", "command": "workbench.view.search" // 標準コマンドを優先 }

設定が保存されない

症状：キーバインドを設定しても再起動後に元に戻る

解決法：

1. ファイルの書き込み権限確認
2. 設定同期の確認 Settings Sync が有効な場合、他のデバイスと同期される
3. ワークスペース設定との競合 プロジェクト固有の設定が優先される場合がある

デバッグとテスト

キーバインドの動作確認

1. コマンドパレットでの確認 Ctrl + Shift + P → コマンド名で検索 → キーバインドが正しく表示されるか確認
2. ログでの確認 Developer: Toggle Keyboard Shortcuts Troubleshooting → キー入力時の詳細ログを確認

テスト環境での検証

// 一時的なテスト用キーバインド
{
  "key": "ctrl+shift+t",
  "command": "workbench.action.terminal.new",
  "when": "!terminalFocus"
}

効率的なキーバインド設計

設計原則

人間工学的な考慮

1. 手の自然な位置を考慮
   • ホームポジションから近いキーを優先
   • 左右の手のバランスを考慮
2. 押しやすいキーの組み合わせ
   • 同じ手で同時に押しにくい組み合わせを避ける
   • モディファイアキー（Ctrl, Alt, Shift）の適切な使用
3. 論理的なグルーピング
   • 関連する機能は似たキーバインドに
   • 頻度の高い操作は押しやすいキーに

カテゴリ別の割り当て戦略

カテゴリ	推奨キー範囲	例
ファイル操作	Ctrl + アルファベット	Ctrl+S（保存）、Ctrl+O（開く）
編集操作	Ctrl + 記号キー	Ctrl+/（コメント）、Ctrl+;（独自操作）
ナビゲーション	F キー、矢印キー	F12（定義へ移動）、Ctrl+矢印
デバッグ	F5-F12	F5（実行）、F9（ブレークポイント）
拡張機能	Ctrl+Alt+	Ctrl+Alt+F（フォーマット）

メンテナンスとドキュメント化

設定のコメント化

[
  // 編集効率化
  {
    "key": "ctrl+d",
    "command": "editor.action.deleteLines",
    "when": "editorTextFocus"
  },
  
  // デバッグ関連
  {
    "key": "ctrl+alt+d",
    "command": "workbench.action.debug.start"
  }
]

設定のバックアップ

# 設定ファイルのバックアップ
cp ~/.config/Code/User/keybindings.json ~/keybindings-backup.json

チーム共有のための標準化

// team-keybindings.json
// プロジェクト固有のキーバインド設定
[
  {
    "key": "ctrl+shift+b",
    "command": "workbench.action.tasks.build"
  }
]

まとめ

VS Codeのキーバインドカスタマイズは、開発効率を大幅に向上させる強力な機能です。

主要なポイント

基本的な変更方法

• GUI設定：Ctrl + K → Ctrl + Sで設定画面を開く
• 直接編集：keybindings.jsonで詳細な設定
• 段階的なカスタマイズ：少しずつ自分好みに調整

効果的なカスタマイズ

• よく使う機能に押しやすいキーを割り当て
• 作業フローに合わせた連続操作の設定
• 他エディタからの移行支援

トラブル対応

• 競合の解決：複数のコマンドが同じキーに割り当てられた場合
• 条件指定：特定の状況でのみ有効なキーバインド
• デバッグ機能：設定が正しく動作しているかの確認