「VS Codeっていろんな機能があるけど、どこから操作するの？」
「設定変更や便利なコマンドをもっと簡単に使いたい」
「マウスを使わずに、キーボードだけで効率的に作業したい」
VS Codeには数多くの便利な機能がありますが、メニューを探したり、設定画面を開いたりするのに時間がかかることがあります。
そんな時に活躍するのがコマンドパレットです。
コマンドパレットは、VS Codeの心臓部とも言える機能で、キーボードだけでほとんどすべての機能にアクセスできる超万能ツールです。
この機能をマスターすれば、開発効率が格段に向上し、よりスムーズなコーディング体験を得ることができます。
この記事では、VS Codeのコマンドパレットの基本的な使い方から、実践的な活用方法まで、初心者にも分かりやすく詳しく解説します。
コマンドパレットの基本概念
コマンドパレットとは
概要と特徴
コマンドパレットは、VS Codeの中央制御センターのような機能です。画面上部に現れる検索ボックスに、実行したい操作を文字で入力することで、様々な機能を呼び出すことができます。
主な利点
- 効率性: マウス操作が不要でキーボードのみで完結
- 統一性: すべての機能が一箇所からアクセス可能
- 発見性: 知らなかった機能を偶然発見できる
- 速度: メニューを探すより圧倒的に高速
VS Code開発における重要性
現代の開発では、コーディング以外にも多くの作業があります：
- ファイルの検索と移動
- Git操作
- 拡張機能の管理
- デバッグ設定
- プロジェクト設定の変更
コマンドパレットを使えば、これらすべてをキーボードだけで効率的に処理できます。
コマンドパレットの種類
VS Codeには実は複数のパレット機能があります：
1. コマンドパレット（>付き）
> Format Document
> Reload Window
> Git: Commit
機能やアクションを実行するためのパレット
2. ファイル検索パレット（何も付かない）
src/components/Header.js
README.md
package.json
ファイルを素早く見つけて開くためのパレット
3. シンボル検索パレット（@付き）
@function
@class
@variable
現在のファイル内の関数やクラスにジャンプするためのパレット
4. ワークスペースシンボル検索（#付き）
#MyClass
#calculateTotal
#UserInterface
プロジェクト全体のシンボルを検索するためのパレット
コマンドパレットの基本操作
開き方と基本ショートカット
基本のショートカットキー
Windows/Linux
Ctrl + Shift + P
macOS
Cmd + Shift + P
ファイル検索（クイックオープン）
Windows/Linux
Ctrl + P
macOS
Cmd + P
パレットの使い方
基本的な操作フロー
1. ショートカットキーでパレットを開く
2. 実行したいコマンドを入力（部分一致でOK）
3. 矢印キーまたはマウスで選択
4. Enterキーで実行
入力のコツ
- 部分一致: 「format」と入力すれば「Format Document」が候補に
- 大文字小文字無視: 「FORMAT」でも「format」でも同じ結果
- スペース区切り: 「open settings」で設定関連のコマンドが絞り込まれる
- 略語検索: 「fd」で「Format Document」を見つけることも可能
表示される情報の読み方
コマンド表示の構成
📝 Format Document Shift+Alt+F
🔧 Preferences: Open Settings (JSON)
🔄 Developer: Reload Window Ctrl+R
📂 File: Open Folder... Ctrl+K Ctrl+O
表示される内容：
- アイコン: コマンドの種類を表す絵文字や記号
- コマンド名: 実行される機能の正式名称
- ショートカット: そのコマンドに割り当てられたキーボードショートカット
よく使う基本コマンド集
ファイル・フォルダ操作
ファイル管理
| コマンド | 説明 | ショートカット |
|---|---|---|
File: New File | 新しいファイルを作成 | Ctrl+N |
File: Open File... | ファイルを開く | Ctrl+O |
File: Open Folder... | フォルダを開く | Ctrl+K Ctrl+O |
File: Save | ファイルを保存 | Ctrl+S |
File: Save All | すべてのファイルを保存 | Ctrl+K S |
File: Close Editor | 現在のエディタを閉じる | Ctrl+W |
ワークスペース管理
Workspaces: Add Folder to Workspace... # フォルダをワークスペースに追加
Workspaces: Save Workspace As... # ワークスペースを保存
Workspaces: Duplicate Workspace # ワークスペースを複製
エディタ機能
コード編集
| コマンド | 説明 | 活用場面 |
|---|---|---|
Format Document | ドキュメント全体をフォーマット | コード整理時 |
Format Selection | 選択範囲のみフォーマット | 部分的な修正時 |
Toggle Word Wrap | 行の折り返し表示を切り替え | 長い行の確認時 |
Toggle Line Comment | 行コメントの追加/削除 | デバッグ時 |
Sort Lines Ascending | 行を昇順で並び替え | データ整理時 |
検索・置換
Find in Files # プロジェクト全体で検索
Replace in Files # プロジェクト全体で置換
Find and Replace # 現在のファイルで検索・置換
Go to Line/Column... # 指定行にジャンプ
Go to Symbol in Workspace... # プロジェクト内のシンボル検索
表示・レイアウト
ビュー切り替え
View: Toggle Sidebar Visibility # サイドバーの表示/非表示
View: Toggle Panel # パネル（ターミナル等）の表示/非表示
View: Toggle Minimap # ミニマップの表示/非表示
View: Split Editor Right # エディタを右に分割
View: Close All Editors # すべてのエディタを閉じる
ズーム・表示設定
View: Zoom In # 表示を拡大
View: Zoom Out # 表示を縮小
View: Reset Zoom # ズームをリセット
View: Toggle Full Screen # フルスクリーン切り替え
設定・環境
設定管理
Preferences: Open Settings (UI) # 設定画面を開く
Preferences: Open Settings (JSON) # settings.jsonを開く
Preferences: Open Keyboard Shortcuts # キーボードショートカット設定
Preferences: Color Theme # カラーテーマ変更
Preferences: Configure Language Specific Settings # 言語別設定
拡張機能
Extensions: Install Extensions # 拡張機能のインストール
Extensions: Show Installed Extensions # インストール済み拡張機能表示
Extensions: Enable Extension # 拡張機能を有効化
Extensions: Disable Extension # 拡張機能を無効化
Extensions: Update All Extensions # すべての拡張機能を更新
ファイル検索とナビゲーション
クイックオープン（Ctrl+P）の活用
基本的なファイル検索
# ファイル名で検索
README.md
package.json
src/components/Header.js
# 部分一致検索
header # Header.jsやheader.cssが候補に
config # 設定ファイル群が候補に
test # テストファイル群が候補に
高度な検索テクニック
ワイルドカード検索
*.js # すべてのJavaScriptファイル
*.test.* # すべてのテストファイル
src/**/*.ts # srcフォルダ内のすべてのTypeScriptファイル
フォルダ指定検索
components/ # componentsフォルダ内のファイル
src/utils # src/utilsフォルダ内のファイル
docs/ # docsフォルダ内のファイル
シンボル検索（@マーク）
ファイル内シンボル検索
現在のファイルを開いた状態でCtrl+Shift+P→@を入力：
@function myFunction # 関数を検索
@class UserService # クラスを検索
@interface ApiResponse # インターフェースを検索（TypeScript）
@const API_BASE_URL # 定数を検索
言語別のシンボル例
JavaScript/TypeScript
@function calculateTotal
@class UserManager
@interface LoginRequest
@enum UserRole
@type CustomType
Python
@function process_data
@class DatabaseManager
@method __init__
@variable global_config
Java
@class MyController
@method processRequest
@field userName
@constructor MyController
ワークスペースシンボル検索（#マーク）
プロジェクト全体でのシンボル検索
#MyComponent # プロジェクト内のMyComponentを検索
#calculatePrice # calculatePrice関数を検索
#UserService # UserServiceクラスを検索
この機能は、大規模なプロジェクトで特定の関数やクラスがどこにあるかを素早く見つけるのに非常に便利です。
Git・バージョン管理
基本的なGit操作
日常的なGitコマンド
Git: Clone # リポジトリをクローン
Git: Initialize Repository # Gitリポジトリを初期化
Git: Add to .gitignore # .gitignoreに追加
Git: Stage All Changes # すべての変更をステージ
Git: Commit # コミット実行
Git: Commit All # すべてをコミット
Git: Push # プッシュ実行
Git: Pull # プル実行
ブランチ管理
Git: Create Branch... # 新しいブランチを作成
Git: Checkout to... # ブランチを切り替え
Git: Merge Branch... # ブランチをマージ
Git: Delete Branch... # ブランチを削除
Git: Rename Branch... # ブランチ名を変更
履歴・比較
Git: View History # コミット履歴を表示
Git: Compare with... # ファイル比較
Git: Show Git Output # Git出力を表示
Git: Refresh # Git状態を更新
高度なGit機能
スタッシュ操作
Git: Stash # 変更を一時保存
Git: Stash (Include Untracked) # 未追跡ファイルも含めてスタッシュ
Git: Pop Stash # スタッシュを復元
Git: Apply Stash # スタッシュを適用（保持）
Git: Drop Stash # スタッシュを削除
リベース・リセット
Git: Rebase Branch... # リベース実行
Git: Interactive Rebase # インタラクティブリベース
Git: Reset # リセット実行
Git: Clean # 未追跡ファイルを削除
デバッグ・実行
デバッグ機能
デバッグ開始・停止
Debug: Start Debugging # デバッグ開始
Debug: Start Without Debugging # デバッグなしで実行
Debug: Stop # デバッグ停止
Debug: Restart # デバッグ再開
Debug: Step Over # ステップオーバー
Debug: Step Into # ステップイン
Debug: Step Out # ステップアウト
ブレークポイント管理
Debug: Toggle Breakpoint # ブレークポイント切り替え
Debug: Remove All Breakpoints # すべてのブレークポイントを削除
Debug: Enable All Breakpoints # すべてのブレークポイントを有効化
Debug: Disable All Breakpoints # すべてのブレークポイントを無効化
タスク実行
ビルド・タスク
Tasks: Run Task # タスクを実行
Tasks: Run Build Task # ビルドタスクを実行
Tasks: Run Test Task # テストタスクを実行
Tasks: Terminate Task # タスクを終了
Tasks: Configure Task # タスクを設定
開発者向け高度コマンド
開発ツール
リロード・再起動
Developer: Reload Window # ウィンドウをリロード
Developer: Restart Extension Host # 拡張機能ホストを再起動
Developer: Toggle Developer Tools # 開発者ツールを開く
Developer: Show Running Extensions # 実行中の拡張機能を表示
パフォーマンス・診断
Developer: Startup Performance # 起動パフォーマンスを表示
Developer: Process Explorer # プロセス情報を表示
Developer: Open Logs Folder # ログフォルダを開く
Developer: Set Log Level # ログレベルを設定
ワークスペース管理
ワークスペース操作
Workspaces: Duplicate Workspace # ワークスペースを複製
Workspaces: Remove Folder from Workspace # フォルダをワークスペースから削除
Workspaces: Add Folder to Workspace # フォルダをワークスペースに追加
カスタマイズとショートカット設定
コマンドへのショートカット割り当て
キーバインド設定の開き方
Preferences: Open Keyboard Shortcuts # GUI設定画面
Preferences: Open Keyboard Shortcuts (JSON) # keybindings.json
カスタムショートカットの例
keybindings.jsonでの設定例：
[
{
"key": "ctrl+shift+f",
"command": "editor.action.formatDocument"
},
{
"key": "ctrl+shift+r",
"command": "workbench.action.reloadWindow"
},
{
"key": "ctrl+shift+t",
"command": "workbench.action.terminal.toggleTerminal"
},
{
"key": "ctrl+shift+g",
"command": "workbench.view.scm"
}
]
よく使うコマンドのショートカット化
推奨ショートカット設定
[
// Git操作
{
"key": "ctrl+g ctrl+c",
"command": "git.commit"
},
{
"key": "ctrl+g ctrl+p",
"command": "git.push"
},
{
"key": "ctrl+g ctrl+l",
"command": "git.pull"
},
// ファイル操作
{
"key": "ctrl+shift+n",
"command": "explorer.newFile"
},
{
"key": "ctrl+shift+alt+n",
"command": "explorer.newFolder"
},
// 表示切り替え
{
"key": "ctrl+shift+e",
"command": "workbench.view.explorer"
},
{
"key": "ctrl+shift+d",
"command": "workbench.view.debug"
}
]
コマンドエイリアスの作成
タスクとしてのコマンド登録
.vscode/tasks.jsonでよく使うコマンドをタスク化：
{
"version": "2.0.0",
"tasks": [
{
"label": "Quick Format and Save",
"type": "shell",
"command": "code",
"args": [
"--command", "editor.action.formatDocument",
"--command", "workbench.action.files.save"
],
"group": "build"
},
{
"label": "Git Commit All",
"type": "shell",
"command": "git",
"args": ["add", ".", "&&", "git", "commit"],
"group": "build"
}
]
}
実践的な活用例
日常的な開発ワークフロー
朝の開発開始時
1. Ctrl+Shift+P → "Git: Pull" # 最新コードを取得
2. Ctrl+P → プロジェクト内のファイルを開く # 作業ファイルを開く
3. Ctrl+Shift+P → "Tasks: Run Task" # 開発サーバー起動
コーディング中
1. Ctrl+Shift+P → "Format Document" # コード整形
2. Ctrl+Shift+P → "Toggle Word Wrap" # 長い行の確認
3. @ → 関数名 # ファイル内の関数にジャンプ
4. # → クラス名 # プロジェクト内のクラスを検索
コミット前の確認
1. Ctrl+Shift+P → "Format Document" # 最終フォーマット
2. Ctrl+Shift+P → "Git: Stage All Changes" # 変更をステージ
3. Ctrl+Shift+P → "Git: Commit" # コミット実行
トラブルシューティング時
パフォーマンス問題
1. Developer: Restart Extension Host # 拡張機能リセット
2. Developer: Reload Window # ウィンドウリロード
3. Developer: Show Running Extensions # 重い拡張機能を特定
設定問題
1. Preferences: Open Settings (JSON) # 設定ファイル確認
2. Developer: Toggle Developer Tools # ブラウザ開発者ツール
3. Developer: Open Logs Folder # ログファイル確認
チーム開発での活用
共通作業の効率化
プロジェクト設定の共有
.vscode/tasks.jsonでチーム共通のコマンドを定義：
{
"version": "2.0.0",
"tasks": [
{
"label": "Team: Setup Environment",
"type": "shell",
"command": "npm install && npm run setup",
"group": "build"
},
{
"label": "Team: Run Tests",
"type": "shell",
"command": "npm test",
"group": "test"
},
{
"label": "Team: Deploy to Staging",
"type": "shell",
"command": "npm run deploy:staging",
"group": "build"
}
]
}
推奨拡張機能の管理
.vscode/extensions.jsonで必要な拡張機能を定義：
{
"recommendations": [
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss",
"ms-python.python",
"ms-vscode.vscode-typescript-next"
]
}
チームメンバーはExtensions: Show Recommended Extensionsで一括インストール可能。
コードレビュー効率化
レビュー前の準備
1. Format Document # コード整形
2. Git: Stage All Changes # 変更をステージ
3. Sort Lines Ascending # import文の整理
4. Organize Imports # 不要importの削除
トラブルシューティング
よくある問題と解決方法
コマンドパレットが表示されない
原因1：ショートカットキーの競合
確認方法：
Help: Report Issue → "keyboard shortcut" で報告
解決方法：
// keybindings.json で再設定
[
{
"key": "ctrl+shift+p",
"command": "workbench.action.showCommands"
}
]
原因2：拡張機能の干渉
解決方法：
1. Developer: Restart Extension Host
2. セーフモードで起動: code --disable-extensions
3. 問題のある拡張機能を特定・無効化
コマンドが見つからない
拡張機能の未インストール
一部のコマンドは特定の拡張機能に依存します：
Git: Commit → Git拡張機能（標準搭載）
Python: Run File → Python拡張機能
ESLint: Fix → ESLint拡張機能
コマンド名の変更
VS Codeのアップデートでコマンド名が変更されることがあります：
旧: "Extension: Install Extension"
新: "Extensions: Install Extensions"
動作が重い
パフォーマンス改善
1. Developer: Show Running Extensions # 重い拡張機能を確認
2. Preferences: Open Settings (JSON) # 以下を設定
{
"search.followSymlinks": false,
"files.watcherExclude": {
"**/node_modules/**": true,
"**/.git/**": true
}
}
まとめ
VS Codeのコマンドパレットは、開発効率を劇的に向上させる強力な機能です。
習得のポイント
- 基本ショートカットの習得
Ctrl+Shift+P: コマンド実行Ctrl+P: ファイル検索@: ファイル内シンボル検索#: ワークスペースシンボル検索
- よく使うコマンドの暗記
- Format Document
- Reload Window
- Git操作コマンド
- 設定系コマンド
- 段階的な習得
- まずは基本機能から
- 徐々に高度な機能を習得
- カスタマイズで自分仕様に
開発効率向上のメリット
- 時間短縮: マウス操作の削減
- 集中力維持: キーボードから手を離さない
- 機能発見: 知らなかった機能との出会い
- 一貫性: すべての操作が統一された方法で可能
コメント