Visual Studio Code（VS Code）は豊富なショートカットを提供していますが、デフォルト設定のままでは効率的でない場合があります。この記事では、覚えておくべき基本ショートカットから、作業効率を向上させるカスタマイズ方法まで包括的に解説します。

基本ショートカット（覚えておきたいもの）

エディタ操作の基本

  • 設定: Cmd + ,（コンマ）
  • コマンドパレット: Shift + Cmd + P
  • コードの整形: Shift + Alt + F
  • 指定行に移動: Cmd + G
  • サジェストを表示: Cmd + Space

ファイル操作

  • Undo: Cmd + Z
  • Copy: Cmd + C
  • Cut: Cmd + X
  • Paste: Cmd + V

検索・置換

  • 検索: Cmd + F
  • 置換: Cmd + H（※カスタマイズ推奨）

拡張機能

  • Auto Close Tag: </（自動的にタグを閉じる）

カスタムショートカットの設定方針

効率的な開発環境を構築するため、以下の方針でショートカットをカスタマイズします。

1. クロスプラットフォーム対応

MacとWindowsで統一されたショートカットを使用し、プラットフォーム間での作業効率を向上させます。

2. 体系的なキー配置

  • Emmet系: Alt + Ctrl + * で統一
  • 保存系: Ctrl + S 系列
  • インデント系: Ctrl + [ / Ctrl + ]
  • テキスト変換系: Alt + Ctrl + C/L/U

3. 競合回避

システムレベルのショートカットとの競合を避け、確実に機能するよう設定します。

keybindings.json の設定

VS Codeのキーバインドをカスタマイズするには、keybindings.json ファイルを編集します。

ファイルへのアクセス方法

  1. コマンドパレット（Shift + Cmd + P）を開く
  2. "Preferences: Open Keyboard Shortcuts (JSON)" を検索
  3. ファイルが開かれるので、以下の設定を追加

推奨設定

[
  // タブ機能の強化
  {
    "key": "tab",
    "command": "tab",
    "when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus"
  },
  {
    "key": "shift+space",
    "command": "tab",
    "when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus"
  },
  
  // Emmet展開
  {
    "key": "tab",
    "command": "editor.emmet.action.expandAbbreviation",
    "when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorReadonly && !editorTabMovesFocus"
  },
  
  // コード補完
  {
    "key": "tab",
    "command": "inlineCompletion.commit",
    "when": "inlineCompletionVisible && !editorTabMovesFocus"
  },
  {
    "key": "tab",
    "command": "acceptSelectedSuggestion",
    "when": "suggestWidgetVisible && textInputFocus"
  },
  
  // ファイル保存（統一化）
  {
    "key": "ctrl+s",
    "command": "workbench.action.files.save",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+s",
    "command": "workbench.action.files.saveAs",
    "when": "editorTextFocus"
  },
  
  // インデント操作
  {
    "key": "ctrl+]",
    "command": "editor.action.indentLines",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+[",
    "command": "editor.action.outdentLines",
    "when": "editorTextFocus && !editorReadonly"
  },
  
  // エディタ分割
  {
    "key": "alt+ctrl+2",
    "command": "workbench.action.splitEditorRight"
  },
  
  // テキスト変換
  {
    "key": "alt+ctrl+c",
    "command": "editor.action.transformToTitlecase",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+ctrl+l",
    "command": "editor.action.transformToLowercase",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+ctrl+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorTextFocus"
  },
  
  // 履歴クリア
  {
    "key": "shift+ctrl+r",
    "command": "workbench.action.clearEditorHistory",
    "when": "editorFocus"
  }
]

Emmet ショートカットの体系化

Emmetは HTML/CSS の記述を効率化する強力な機能です。統一された体系で覚えやすくカスタマイズします。

基本操作

  • 数学演算: Alt + Ctrl + Y
  • 画像サイズ更新: Alt + Ctrl + I（I = Image）
  • マッチングペアへ移動: Alt + Ctrl + →

タグ操作

  • タグ削除: Alt + Ctrl + T（T = Tag）
  • タグ更新: Shift + Alt + Ctrl + T

選択・整形

  • Balance（選択拡張）: Alt + Ctrl + A（A = All選択系）
  • 任意タグで囲む: Shift + Alt + Ctrl + A
  • 行の結合: Alt + Ctrl + F（F = Format系）

数値操作（便利な拡張）

  • 1増加/減少: Alt + Ctrl + ,/.
  • 10増加/減少: Shift + Ctrl + ,/.
  • 0.1増加/減少: Shift + Ctrl + Alt + ,/.

settings.json での併用設定

キーバインドと合わせて、settings.json でも以下の設定を行うことを推奨します。

{
  "keyboard.dispatch": "keyCode",
  "editor.formatOnPaste": false,
  "editor.autoClosingQuotes": "never",
  "emmet.triggerExpansionOnTab": true
}

トラブルシューティング

よくある問題と解決策

問題: Tabキーがアプリケーション切り替えになってしまう
解決: "keyboard.dispatch": "keyCode" を settings.json に追加

問題: ショートカットが効かない
解決: システムレベルのショートカットとの競合を確認し、代替キーを設定

問題: Emmetが展開されない
解決: emmet.triggerExpansionOnTab の設定を確認

VS Codeのショートカットを体系的にカスタマイズすることで、開発効率を大幅に向上させることができます。この設定により、プラットフォームに依存しない一貫した開発環境を構築し、より快適なコーディング体験を実現できます。