Claude Code × VS Code：拡張機能のセットアップとパネルガイド
Visual Studio Code に公式の Claude Code 拡張機能をインストールし、サインインし、権限モードを選び、パネルで計画と差分レビューを行い、統合ターミナルで同じ CLI を動かす — 各ステップは公式ドキュメントで検証済み。
要点まとめ
- 拡張機能ビュー（Cmd+Shift+X）から Anthropic の「Claude Code」をインストール — 拡張機能 ID は anthropic.claude-code。VS Code 1.94.0 以上が必要で、Cursor や Open VSX でも公開されています。
- パネルは専用の CLI コピーを同梱します：claude を PATH に追加しません。VS Code の統合ターミナルで本物の CLI を使いたいなら、スタンドアロン版もインストールを — 両者は会話履歴を共有します。
- 権限モードはプロンプトボックスの下部にあります：Plan は読み取り専用の計画、Manual は編集ごとの承認、Auto は分類器がレビューする自律モード。Shift+Tab で切り替えられます。
- @メンションでファイルをコンテキストに引き込み（Option+K で行範囲リファレンスを挿入）、差分はサイドバイサイドで 1 変更ごとの Accept/Reject ボタンつき。/usage、/model、/mcp もパネル内でそのまま動きます。
Claude Code Full Course — Autonomous Goals, MCP, and VS Code Setup
チャンネル: freeCodeCamp.org1:21:37
VS Code — official documentation
公式ソース: code.claude.com/docs
Claude Code for VS Code — marketplace listing
公式ソース: marketplace.visualstudio.com
各ステップは公式の VS Code ドキュメントに対して検証しています。上の freeCodeCamp フルコースがスクリーンショットのビジュアルソースです。
スクリーンショットは各制作者に帰属し、該当タイムスタンプへ深リンクしています。顔出しフレームは使用していません。
VS Code で Claude Code をセットアップ、ステップごとに
パート 1 — インストールと接続
- 1
マーケットプレイスから拡張機能をインストール
拡張機能ビューを開き（Mac は Cmd+Shift+X、Windows/Linux は Ctrl+Shift+X）、「Claude Code」を検索して Anthropic が公開しているもの（ID：anthropic.claude-code）をインストールします。VS Code 1.94.0 以上と、有料の Claude プランまたは Console アカウントが必要です。出てこない場合は「Developer: Reload Window」を実行。
- 2
スパークアイコンを見つける
インストール後、エディタタブのツールバー（ファイルを開いているとき）とアクティビティバーに Claude Code のスパークアイコンが現れます。クリックしてパネルを開く — あるいはコマンドパレット（Cmd+Shift+P）で「Claude Code」と入力し「Open in New Tab」を選びます。ステータスバーの「✻ Claude Code」はファイルを開いていなくても使えます。
Claude Code のスパークアイコンはエディタタブのツールバーに — ワンクリックでファイルの隣にパネルが開きます。43:00 から視聴 - 3
サインイン：プラン、Console、API キー
パネル内で /login を実行し、経路を選びます：Claude サブスクリプション（Pro、Max、Team、Enterprise）、Console アカウント、または API キー。ブラウザが一度開いて認証すれば、パネルはモデルとプランを表示して迎えてくれます — 拡張機能用の別アカウントは不要です。
- 4
パネルを知る
Claude Code のセッションは VS Code の中に直接レンダリングされます — パネルでも、サイドバーでも、統合ターミナルでも、お好みで（preferredLocation 設定）。ウェルカムバナーにはアクティブなモデル、プラン、MCP サーバーの認証待ちなど注意が必要なものが表示されます。
最初の接触：ターミナルパネルの Claude Code ウェルカムバナー。Shift+Tab で plan モードを切り替え、/mcp の認証リマインダーも表示。17:00 から視聴
パート 2 — パネルで作業する
- 5
権限モードを選ぶ
モードインジケーターはプロンプトボックスの下部にあります。Plan はプランを承認するまで Claude を読み取り専用に保ち、Manual はファイル編集とほとんどのシェルコマンドの前に確認し、Auto は安全分類器がバックグラウンドでアクションをレビューします。Shift+Tab で切り替え、初期値は initialPermissionMode 設定で。
- 6
まず計画、質問にはインラインで回答
大きな変更は Plan モードから始めましょう：Claude が調査し、マークダウン文書のようにコメントできる計画を提示してきます。この録画ではさらに進んで、技術スタックについて選択式の質問を投げかけ、1 行も書く前に作成予定のファイルツリーをプレビューします。
Plan モードの実演：選択肢から選べるインタラクティブな質問と、Claude が作ろうとしているファイルのプレビュー。19:00 から視聴 - 7
Claude を正しいファイルへ向ける
@ と打てばファイルをあいまい検索でメンションでき、Option+K（Alt+K）を押せば @app.ts#5-10 のような行範囲リファレンスを挿入できます。エディタで選択した内容は自動的に Claude に見えていて、attachOpenFile はデフォルトで開いているファイルをプロンプトに添付します。
- 8
差分をレビューし、変更ごとに承認
Manual モードでは編集ごとにサイドバイサイドの差分が開き、ブロックごとに「Accept this change」「Reject this change」ボタンが付きます — あるハンクだけ残して隣を拒否、も自由です。「Claude Code: Accept Change at Cursor」とその Reject 版はコマンドパレットにあります。
- 9
思考を覗き見する
/ コマンドメニューから拡張思考をトグルすると、Claude の推論が回答の上に折りたたまれたブロックで現れます。判断の過程を監査したくなったら Ctrl+O で全展開 — コードレビューのセッションで便利です。
パート 3 — 調整する
- 10
セッション途中でモデルを切り替える
パネルのモデル名をクリックするか /model を実行して切り替えます — アーキテクチャには Opus Plan、日常の速さには Sonnet、小さな編集には Haiku。Effort レベルと Ultracode トグルも同じピッカーにあり、ターミナルの挙動と揃っています。
- 11
プロジェクト設定は .claude/settings.json に
設定ガイドの内容はそのままここでも通用します：パネルは ~/.claude/settings.json とプロジェクトの .claude/settings.json を読み、enabledPlugins のようなチーム共通のキーは後者に住みます。VS Code 固有の追加キー（initialPermissionMode、preferredLocation、autosave）も同じスキーマに乗ってきます。
VS Code でのプロジェクト設定：.claude/settings.json の enabledPlugins キーで公式プラグインをチーム全員に有効化。42:25 から視聴
拡張パネル vs 統合ターミナル vs 外部ターミナル
Claude Code には VS Code の 3 つの表面から届きます。履歴とログインは共有 — でも同じツールではありません：
- 1グラフィカルなパネル — クリックできる差分、変更ごとの accept/reject、モデルとモードのドロップダウン。編集のレビューと、ポインティングデバイスの流れを保つ作業に最適。
- 2統合ターミナルの CLI — フルコマンドセット：! bash ショートカット、Tab 補完、すべてのスラッシュコマンドとスキル。打つ方がクリックより速いパワーユーザーに最適。
- 3外部ターミナル + /ide — VS Code の外で claude を動かしても、差分と診断のためにエディタへ自動接続します。接続しないターミナルからは、Claude Code 内で /ide と打てばアタッチできます。
- 4拡張機能は専用の CLI を同梱するため、インストールしても claude は PATH に入りません — ターミナル体験も欲しければスタンドアロン版のインストールを。
- 5会話履歴はすべての表面で共有されています：どれからでも claude --resume すればパネルの会話を続きから再開でき、/ide がセッションのコンテキストをつなぎます。
経験則：レビューはパネル、操縦はターミナル。ほとんどの人は同じセッションで両方使うようになります — そのために設計されているからです。
拡張機能が動かない？応急処置
VS Code の Claude Code 拡張機能の問題は、この 5 つの修正でほぼ解決します：
- 1検索結果に拡張機能が出ない。VS Code のバージョン（1.94.0 以上）を確認し、「Developer: Reload Window」を実行。Microsoft マーケットプレイスが使えないビルドなら、Open VSX と Cursor のレジストリでも公開されています。
- 2統合ターミナルで claude が見つからない。拡張機能は PATH に触れずに専用 CLI を同梱します — スタンドアロンのインストールスクリプトを実行するか、パネルを使い続けてください。
- 3「2 MCP servers need authentication」バナー。パネルで /mcp を実行し、保留中のサーバーを承認 — プロジェクトの .mcp.json のサーバーはアカウントごとに明示的な OAuth が必要です。
- 4差分が出ない。モード次第です：Plan モードは差分しようの編集を生まず、bypass 系モードはプロンプトをスキップすることがあります。変更ごとのレビューには Manual（Shift+Tab）へ。
- 5アンインストール後に拡張機能が復活する。CLI は起動時に IDE 拡張を自動インストールします — /config で「Auto-install IDE extension」を切るか、環境変数 CLAUDE_CODE_IDE_SKIP_AUTO_INSTALL を設定してください。
それでも直らない？ターミナルで claude doctor、パネルで /status — この 2 つで壊れている部品が 1 画面で名指しされます。