Claude Code VS Code 拡張機能は、エディタを Claude の一等席インターフェースに変える。インライン差分レビュー、選択範囲と連動した @メンション、診断情報を読む組み込み MCPサーバー、そしてどの編集も巻き戻せるチェックポイントシステム——この記事ではそれぞれの機能を整理する。
インストール
必要環境:VS Code 1.98.0 以上。有料 Claude プランまたは Console アカウント(APIキー不要)。
インストール:
または拡張機能ビュー(Cmd+Shift+X)を開いて「Claude Code」を検索。
拡張機能はチャットパネル用に専用 CLI を内包している。統合ターミナルで claude を使いたい場合は スタンドアロン CLI を別途インストールする。拡張機能はPATHへの追加を行わない。
パネルを開く
Claude Code を開く3つの方法:
- エディタツールバーの Spark アイコン — ファイルを開いている時に右上に表示される。最速。
- ステータスバー — 右下の
✱ Claude Codeをクリック。ファイルを開いていなくても使える。 - コマンドパレット —
Cmd+Shift+P→ 「Claude Code」と入力。
パネルはセカンダリサイドバー(右側)にドラッグすると、コード編集中も常時表示できて便利だ。
@メンションとファイル参照
プロンプトに @ を入力してファイルやフォルダを参照する。ファジーマッチ対応で部分名でも補完が効く:
@auth # auth.js、AuthService.ts などにマッチ
@src/components/ # フォルダ参照(末尾スラッシュ推奨)
選択範囲の自動認識。 エディタでテキストを選択すると、Claude は自動でその内容を受け取る。プロンプト下部に選択行数が表示される。Option+K(Mac)/ Alt+K(Win/Linux)を押すと @app.ts#5-10 形式の @メンションが挿入される。
フッターの目アイコンをクリックすると選択範囲の送信をオン/オフできる。.env のような機密ファイルを常時除外したい場合は、そのパスに対して Read 拒否ルールを設定する。
ファイルを Shift を押しながらプロンプトボックスにドラッグしても添付できる。
IDE MCPサーバー
拡張機能が有効な間、ランダムポートの 127.0.0.1 でローカル MCPサーバーが起動する。CLI はこれに自動接続し、以下の用途に使う:
- VS Code のネイティブ差分ビューアで差分を開く
- @メンション用の現在の選択範囲を読む
- Jupyter ノートブックのセルを実行させる
このサーバーは ide という名前で /mcp の一覧には表示されない(設定項目がないため)。組織で PreToolUse フックを使う場合は、以下の2つのツールを把握しておく必要がある。
mcp__ide__getDiagnostics
VS Code の Problems パネルにあるエラーと警告を返す。ファイル単位でスコープ指定も可能。読み取り専用。
TypeScript エラーや ESLint 警告を手動でコピーせずに Claude に渡せる:
> auth.ts の TypeScript エラーを修正して
Claude が内部で mcp__ide__getDiagnostics を呼び出し、診断情報を読んで修正を適用する。
mcp__ide__executeCode
アクティブな Jupyter ノートブックのカーネルで Python コードを実行する。書き込み操作——必ず確認を求める。
呼び出しのたびに、コードがノートブック末尾に新しいセルとして挿入され、Execute か Cancel を選ぶ Quick Pick が表示される。無音実行はしない。アクティブなノートブックがない、Jupyter 拡張機能が未インストール、カーネルが Python でない場合は実行を拒否する。
チャットパネルの /mcp 管理
プロンプトに /mcp と入力すると MCPサーバー管理ダイアログが開く:
- 設定済みサーバーの接続状態を確認
- ワンクリックで有効/無効を切り替え
- 失敗したサーバーを再接続
- OAuth 認証の管理
MCPサーバーを追加するには、統合ターミナルで CLI を使う:
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ \
--header "Authorization: Bearer YOUR_GITHUB_PAT"
プランモードとパーミッションモード
プロンプトボックス下部のモードインジケーターをクリックして切り替える:
- 通常モード — アクションごとに許可を求める
- プランモード — Claude がマークダウン文書として計画を説明し、実行前にインラインコメントでフィードバックできる
- 自動承認 — Claude が確認なしで編集を行う
デフォルトモードは VS Code 設定の claudeCode.initialPermissionMode で設定できる。
チェックポイントと Rewind
拡張機能はチェックポイントに対応している。Claude のすべてのファイル編集が追跡され、任意の状態に巻き戻せる。
会話の任意のメッセージにカーソルを合わせると rewind ボタンが表示される。3つの選択肢:
- Fork conversation from here — このメッセージから新しい会話ブランチを作成、コード変更はそのまま
- Rewind code to here — ファイルをこの時点に戻す、会話履歴はそのまま
- Fork conversation and rewind code — 両方同時に実行
6つのオプションがある完全な /rewind コマンド(summarize オプション含む)は、統合ターミナルの CLI で実行できる。詳細は チェックポイントガイド を参照。
キーボードショートカット
| コマンド | Mac | Win/Linux |
|---|---|---|
| エディタ ↔ Claude のフォーカス切替 | Cmd+Esc | Ctrl+Esc |
| 新しい会話 | Cmd+N | Ctrl+N |
| 新しいタブで開く | Cmd+Shift+Esc | Ctrl+Shift+Esc |
| 閉じたセッションを再開 | Cmd+Shift+T | Ctrl+Shift+T |
| 選択範囲の @メンションを挿入 | Option+K | Alt+K |
macOS Tahoe での注意: システムの Game Overlay が Cmd+Esc をデフォルトで取り込む。システム設定 → キーボード → キーボードショートカット → Game Controllers → Game Overlay のチェックを外すと解放される。
複数の会話
コマンドパレットから Open in New Tab または Open in New Window で追加の会話を開ける。それぞれ独立した履歴とコンテキストを持つ。
Spark アイコンの状態ドット:青 = 許可確認待ち、オレンジ = タブ非表示中に Claude が完了。
設定リファレンス
Extensions → Claude Code の主要設定:
| 設定 | デフォルト | 説明 |
|---|---|---|
useTerminal | false | グラフィカルパネルの代わりにターミナルモードを使用 |
initialPermissionMode | default | 新しい会話のデフォルトパーミッションモード |
autosave | true | Claude がファイルを読み書きする前に自動保存 |
preferredLocation | panel | Claude を開く場所: sidebar または panel |
respectGitIgnore | true | ファイル検索から .gitignore パターンを除外 |
settings.json に JSON Schema を追加するとオートコンプリートが有効になる:
{
"$schema": "https://json.schemastore.org/claude-code-settings.json"
}
Claude Code パターンをもっと見る
Claude Code のルール、設定、パターンのコレクションはギャラリーで確認できる。