背景

この連載では、Claude Codeの公式ドキュメントを1ページずつ読み解いていきます。公式ドキュメントは情報が網羅されている分、「結局どの機能を、どんな場面で使えばいいのか」は自分で考える必要があり、読むのに意外と時間がかかります。そこで、私が実務で使うために読み込んだ内容を「使う場面→実例コード」の順に整理して残していくことにしました。専門家の解説というより、一次情報を読んだ記録です。推測や動作を確認していない部分には、その都度そう書きます。

一言でいうと何か

Claude Code の VS Code 拡張機能を導入・設定するページです。IDE に統合されたネイティブなグラフィカル UI を提供し、VS Code で Claude Code を使う推奨方法とされています。プランを受け入れる前に確認・編集する、編集を自動受理する、選択範囲を行番号付きで @ メンションする、会話履歴にアクセスする、複数会話を別タブ/別ウィンドウで開く、といったことができます。Cursor や Devin Desktop・Kiro などの VS Code フォークにも入ります。

どういう場面で役立つか

VS Code(や Cursor)の中で、GUI の AI コーディング支援を使いたいとき。並べて表示される差分で提案を確認してから受理でき、選択したコードは自動的に共有され、@file.ts#5-10 のように行範囲を指定して質問できます。

CLI と設定・履歴を共有しつつ IDE 内で完結させたいとき。拡張機能と CLI は ~/.claude/settings.json や会話履歴を共有し、拡張の会話は claude --resume で CLI に引き継げます。

Chrome 連携・プラグイン管理・git 操作を IDE から行いたいとき。@browser でブラウザ自動化、/plugins で GUI のプラグイン管理、コミット/PR 作成などを拡張内で扱えます。

不要・向かないケース：一部機能は CLI のみで、! の bash ショートカット・タブ補完・全コマンド/スキルは拡張では使えません(拡張はサブセット)。これらが要るなら統合ターミナルで claude を実行します。ターミナル中心のワークフローが好みなら、拡張のターミナルモードや CLI を使うほうが向きます。なお拡張はチャットパネル用に CLI のプライベートコピーを同梱しますが、ターミナルで claude を打つには別途スタンドアロン CLI のインストールが必要です(拡張は claude を PATH に追加しません)。

導入と主要機能の実例

前提と導入

必要なのは VS Code 1.98.0 以上と、有料 Claude サブスクリプション(Pro/Max/Team/Enterprise)または Claude Console アカウントで、API キーは不要です(サードパーティプロバイダー利用時は別手順)。導入は vscode:extension/anthropic.claude-code のリンク、または拡張ビュー(Cmd/Ctrl+Shift+X)で「Claude Code」を検索してインストールします(フォークや Open VSX からも可)。導入後は、ファイルを開くとエディタ右上に出る Spark アイコン、左のアクティビティバー、コマンドパレット、右下ステータスバーの「✱ Claude Code」から Claude パネルを開き、初回はブラウザでサインインします。

プロンプトボックスと権限モード

プロンプトボックス下部のモード指示器で権限モードを切り替えられ、既定は claudeCode.initialPermissionMode で設定します。Manual(編集・多くのシェルコマンド前に確認)、Plan(実行内容を説明し承認待ち。VS Code はプランをフル Markdown ドキュメントとして開き、インラインコメントでフィードバックできる)、Edit automatically(確認なしで編集)があります。/ でコマンドメニューが開き、ファイル添付・モデル切替・拡張思考・/usage・/remote-control などや、MCP・フック・メモリ・権限・プラグインへのアクセスが得られます。コンテキスト使用量の指示器が出て、必要に応じて自動コンパクトか /compact を実行します。拡張思考はコマンドメニューでオンにでき、Ctrl+O で思考ブロックを一括開閉、Shift+Enter で改行します。

ファイル参照と会話の再開

@ に続けてファイル/フォルダ名を打つと(あいまい一致対応)、その内容を読ませられます。

> Explain the logic in @auth (fuzzy matches auth.js, AuthService.ts, etc.)
> What's in @src/components/ (include a trailing slash for folders)

エディタで選択したテキストは自動的に共有され、フッターに選択行数が出ます。Option+K/Alt+K でパスと行番号付きの @app.ts#5-10 を挿入でき、選択指示器のクリックで表示/非表示を切り替えられます。過去の会話は上部の Session history から検索・再開でき、Web 上の Claude Code のリモートセッション(GitHub リポジトリで開始した Web セッション)も、claude.ai サブスクリプションでサインインしていれば Remote タブからダウンロードしてローカル続行できます(変更は claude.ai に同期されません)。/usage でアカウントと使用状況(セッション/週の使用バー、消費の内訳、スキル/サブエージェント/プラグイン/MCP 別の属性)を確認できます。

ワークフローのカスタマイズと Chrome 連携

Claude パネルはドラッグでセカンダリサイドバー・プライマリサイドバー・エディタ領域に再配置でき、コマンドパレットの Open in New Tab/Open in New Window で複数会話を並行できます(タブの色ドットは、青=許可待ち、オレンジ=非表示中に完了)。CLI スタイルが好みなら claudeCode.useTerminal でターミナルモードにできます。ブラウザ自動化は @browser に続けて指示します。

@browser go to localhost:3000 and check the console for errors

これには Claude in Chrome 拡張(1.0.36 以上)が必要で、詳細は第40回(chrome)を参照してください。プラグインは /plugins で GUI 管理でき(インストールスコープはユーザー/プロジェクト/ローカル)、内部的に CLI と同じコマンドを使うため CLI とも相互利用できます。

git 操作と worktree

git 統合により、コミット・PR 作成・ブランチ横断を自然文で頼めます。

> commit my changes with a descriptive message
> create a pr for this feature
> summarize the changes I've made to the auth module

並列タスクには --worktree(-w)で独立した worktree を使います。

claude --worktree feature-auth

各 worktree は git 履歴を共有しつつ独立したファイル状態を保ち、複数の Claude インスタンスが干渉しないようにします。

CLI との関係と MCP

拡張と CLI は同じ会話履歴を共有し、拡張の会話は統合ターミナルで claude --resume を実行して続行できます。プロンプトで @terminal:name によりターミナル出力を参照でき、チェックポイント(メッセージ上の巻き戻しボタンでフォーク/コード巻き戻し)にも対応します。MCP サーバーの追加は統合ターミナルで claude mcp add を使います。

claude mcp add --transport http github https://api.githubcopilot.com/mcp/ \
  --header "Authorization: Bearer YOUR_GITHUB_PAT"

追加後はチャットパネルの /mcp で有効化/無効化・再接続・OAuth 管理ができます。なお拡張がアクティブなときは ide という組み込み MCP サーバーがローカルで動き、CLI がネイティブ差分ビューアで diff を開いたり、@ 用に選択を読んだり、Jupyter のセル実行を依頼したりする仕組みになっています(モデルに見えるのは mcp__ide__getDiagnostics と mcp__ide__executeCode の2つで、後者は毎回ネイティブ確認を挟みます)。

設定とトラブルシューティングの要点

設定は2種類あり、VS Code の拡張機能設定(useTerminal・initialPermissionMode・autosave・allowDangerouslySkipPermissions など)は IDE 内の挙動を、~/.claude/settings.json の Claude Code 設定(許可コマンド・環境変数・フック・MCP)は拡張と CLI で共有される部分を制御します。ショートカットはコマンドパレットで「Claude Code」を検索して確認でき、Cmd/Ctrl+Esc でエディタと Claude のフォーカスを切り替えます。サードパーティプロバイダー利用時はログインプロンプトを無効化して各プロバイダーのガイドに従います。よくある不具合として、Spark アイコンが出ないときはファイルを開く・バージョン確認・リロード・競合拡張の無効化・ワークスペース信頼を確認し、macOS Tahoe 以降で Cmd+Esc が効かないのはゲームオーバーレイのショートカット競合、応答しないときは接続確認・新規会話・CLI での再現確認、が案内されています。個別の手順は公式ページを参照してください。

まとめ

VS Code 拡張機能は、IDE 内に統合された Claude Code のグラフィカル UI で、プラン確認・インライン差分・@ メンション・会話履歴・複数会話を提供します。前提は VS Code 1.98.0 以上と有料サブスク/Console アカウントで、パネルは自由に再配置でき、@browser の Chrome 連携、/plugins のプラグイン管理、コミット/PR や claude --worktree の git 操作を扱えます。拡張と CLI は設定・履歴を共有し、! bash・タブ補完・全コマンドなど CLI のみの機能は統合ターミナルの claude で補う、という住み分けを押さえておくとよいでしょう。

次回は、残る連携・自動化系の未執筆ページ(Channels、/goal、Agent SDK など)、あるいは長く保留している引き継ぎ課題(第5回欠番の補完・第1/2回の照合)に着手する予定です。

---

この記事は執筆時点の公式ドキュメントに基づいています。最新の情報は必ず公式ドキュメントをご確認ください。