Claude Code × VSCode 完全ガイド 2026 — CLI経験者が生産性を3倍にする実務ワークフロー
Claude Code VSCode拡張機能のインストールから実務活用まで。CLI版との違い、Subagent並列処理、MCP連携、Plan Modeでのコスト最適化を徹底解説。
エンジニアのゆとです。
Claude CodeをCLIで使い慣れたあと、VSCode拡張機能を試してみたら「あ、これ全然別物だ」と思った。
インライン差分レビュー、Plan Modeのマークダウン表示、複数タブ並列会話——CLIにはないUIの恩恵がある。一方でCLIにしかできないこともある。両方を使いこなして初めて「Claude Code完全活用」という状態になる。
この記事では、CLIをある程度使ってきた人向けに、VSCode拡張機能の実務ワークフローを整理した。インストール手順は軽めに、「CLIユーザーが最初に戸惑うポイント」「VSCodeだから可能な実務テクニック」「MCP連携とコスト最適化」を重点的に書く。
Claude Code VSCode拡張機能とは何か
2026年5月時点の最新状況
Claude Code VSCode拡張機能は、Claude Code CLIをVSCode上でGUIとして操作できる公式拡張機能だ。
2026年5月現在、Claude 3.5/3.7/4.x系モデルに対応しており、Anthropic APIだけでなくAmazon Bedrock、Google Vertex AI、Microsoft Foundryからも利用できる。拡張機能自体はCLIのバイナリを内包しているため、別途CLIをインストールする必要はない（ただしCLIの高度な機能を使いたい場合は、VSCode統合ターミナルから claude コマンドを使えばいい）。
VSCode以外でも、Cursor、Windsurf、Kiroといったフォーク版に対応しており、Open VSXレジストリからも入手できる。
CLI版と拡張機能の機能比較
CLIにしかない機能、拡張機能にしかない機能、共通の機能を整理する。
CLIのみで使える機能- 全コマンド体系（
/mcp add、/hooks、サブコマンド群） - MCP サーバーの追加（
claude mcp add） !バッシュショートカット（!lsでシェルコマンドをプレフィックスなしで実行）- タブ補完（ファイル名・コマンド名のシェル補完）
--worktreeフラグ（ターミナルから実行）
- Plan Modeでの計画書をマークダウン全画面で表示・コメント記入
- インライン差分レビュー（サイドバイサイドdiff + 承認/拒否UI）
@terminal:nameによるターミナル出力の直接参照- セッション履歴のGUI検索・再開
- Claude in Chromeとの
@browser連携 Option+Kによるファイル参照の@メンション挿入（選択テキスト付き）- URI ハンドラー（
vscode://anthropic.claude-code/open?prompt=...）
- チェックポイント（Fork / Rewind / Fork+Rewind）
- MCP サーバーの利用（
/mcpパネルで管理） - CLAUDE.md、設定ファイル（
~/.claude/settings.json）の共有 - セッション履歴の共有（
claude --resumeで双方向継続可能）
インストールと初期セットアップ
前提条件
- VS Code 1.98.0 以上（Help → About で確認）
- Anthropicアカウント（初回起動時にサインイン）
- サードパーティプロバイダー利用の場合は別途設定が必要（後述）
なお、CLIをすでにインストール済みであっても、拡張機能は独立して動作するため競合しない。
5分で完了するセットアップ手順
ステップ1: 拡張機能のインストールCmd+Shift+X（Mac）または Ctrl+Shift+X（Windows/Linux）で拡張機能ビューを開き、「Claude Code」で検索してインストールする。
直接インストールは以下のコマンドでも可能：
# macOS
open "vscode:extension/anthropic.claude-code"インストール後に拡張機能が表示されない場合は、コマンドパレット（Cmd+Shift+P）から「Developer: Reload Window」を実行する。
ファイルを開いた状態でエディタ右上のSparkアイコン（✦）をクリックする。ファイルが開いていないときはウィンドウ右下の「✱ Claude Code」ステータスバーをクリックすることでも開ける。
ステップ3: サインイン初回起動時にサインイン画面が表示される。「Sign in」をクリックしてブラウザで認証を完了する。
ANTHROPIC_API_KEY を環境変数に設定済みであっても、VSCodeがシェル環境を引き継いでいない場合はサインインが求められる。その場合はターミナルから code . でVSCodeを起動すると環境変数が正しく引き継がれる。
コマンドパレットから「Claude Code: Open Walkthrough」を実行すると、拡張機能の基本操作ガイドが開く。「Learn Claude Code」チェックリストを一通り確認しておくと、後で「あの機能どこにあったっけ」とならない。
サードパーティプロバイダー（Bedrock/Vertex）での設定
組織でAmazon BedrockやGoogle Vertex AIを経由してClaudeを使っている場合は、ログインプロンプトを無効にしてからプロバイダー設定を行う。
VS Code設定（Cmd+,）でExtensions → Claude Code を開き、「Disable Login Prompt」にチェックを入れる。その後、~/.claude/settings.json にプロバイダー設定を記載する（CLI と設定ファイルを共有するため、設定は一か所で済む）。
CLIユーザーが最初に知るべき3つの違い
Permission Modeの切替（Normal/Plan/Auto-accept）
CLIでは Shift+Tab でモードを循環させるが、VSCode拡張機能ではプロンプトボックス下部のモードインジケーターをクリックして切り替える。
| UIラベル | モード | 動作 |
|---|---|---|
| Ask before edits | default | 各操作ごとに確認 |
| Edit automatically | acceptEdits | ファイル編集を自動承認 |
| Plan mode | plan | 実行前に計画書を提示 |
| Auto mode | auto | 安全性チェッカーが監視しながら完全自動 |
| Bypass permissions | bypassPermissions | 全チェックをスキップ（サンドボックス専用） |
デフォルトのモードは設定から変更できる：
// VS Code settings.json
{
"claudeCode.initialPermissionMode": "plan"
}CLIで使い慣れている人が拡張機能に移行したとき最初に戸惑うのが、Plan Modeの挙動の違いだ。CLIのPlan Modeでは計画をターミナル内のテキストとして確認するが、VSCode拡張機能では計画書が全画面マークダウンとして表示される。計画書にインラインコメントで「この部分はやり直してほしい」と書いて返せる。大規模リファクタリングのレビューでは体験がCLIと比べ物にならないほど良い。
差分レビューのインライン表示
Claude がファイルを編集しようとすると、VSCode本来の差分ビューアーが開いてサイドバイサイドで変更内容が表示される。
ここで重要なのが、差分ビュー上で直接編集できるという点だ。Claudeが提案した変更の一部を修正してから「承認」することができる。この場合、Claudeは「ユーザーが変更を加えた」という情報を受け取るので、元のプロポーザルと最終ファイルが一致するとは仮定せずに作業を続ける。CLIの差分確認とは粒度が違う。
@メンション参照とコンテキスト共有
VSCode拡張機能での @ メンションはCLIとほぼ同じだが、キーボードショートカットが追加されている。
# エディタ上でテキストを選択した状態で
Option+K（Mac）/ Alt+K（Windows/Linux）
→ @ファイル名#行番号-行番号 の形式でプロンプトに挿入される@terminal:name を使うとターミナルの出力を直接参照できる。CI/CDのエラーログ、テスト出力、ビルドログをコピペなしでClaudeに読ませられる。
@terminal:bash エラーが出てる。修正案を出して複数ファイルを同時に渡したいときは、Shiftを押しながらファイルをプロンプトボックスにドラッグ&ドロップすると添付できる。
実務で差がつく5つのワークフロー
ワークフロー1: Plan Modeでの設計レビュー
「とりあえず実装して」とClaudeに投げる前に、Plan Modeで計画を立てさせる。これだけでトークン消費が大幅に変わる。
プロンプトボックスのモードを「Plan mode」に切り替えて依頼を投げると、Claudeはファイルを読んで変更箇所を探索し、「何をどの順番で変える」という計画書を作成して止まる。
# Plan modeで投げる依頼の例
認証モジュールをJWT方式からOAuth2.0に移行したい。
どのファイルを変更する必要があるか、依存関係も含めて調べてから計画を立てて計画書が開いたら：
- 変更内容を一通り読む
- 問題がある部分にインラインコメントを入れる（「この部分はスキップ」「この実装方針は変えて」など）
- 承認オプションを選択して実装フェーズへ
計画書の承認時に「Approve and accept edits」を選ぶとacceptEditsモードで実装が始まり、「Approve and review each edit」を選ぶとdefaultモードで1ファイルずつ確認しながら進む。タスクの重要度に応じて使い分ける。
ワークフロー2: 複数タブ並列開発
コマンドパレットで「Open in New Tab」または「Open in New Window」を実行すると、独立したClaudeセッションが追加される。
実務での使い方：
- メインタブ: フィーチャー開発（数百行の実装タスク）
- サブタブ1: テスト作成（メインタブが書いたコードに対してテストを並列で書かせる）
- サブタブ2: ドキュメント更新（API変更に合わせてREADMEやOpenAPI specを更新）
タブの状態はSparkアイコンの色で確認できる：
- 青い点：権限の確認待ち（アクションが必要）
- オレンジの点：バックグラウンドで完了した（確認していない）
複数タブ運用で気をつけるのは、同じファイルを別セッションで同時に触らないこと。これはCLIの並列実行と同じ問題だ。タスクを適切に分割して、各タブが触るファイルの領域が重ならないようにすると良い。
ワークフロー3: Git Worktreeとの組み合わせ（claude --worktree）
複数タブと並列開発の組み合わせで、さらに踏み込んだ方法がGit Worktreeとの併用だ。
VSCode拡張機能は「複数タブ」でコンテキストは独立するが、ファイルシステムは共有される。Claudeが別タブのセッションで同じファイルを触るとコンフリクトが起きる。
--worktree フラグを使うと、セッションごとに独立したワーキングディレクトリが生成される：
# VSCode統合ターミナルで実行
claude --worktree feature-authこれにより .claude/worktrees/feature-auth/ ディレクトリが作成され、独立したブランチ worktree-feature-auth で作業が始まる。メインの作業ディレクトリとはファイルが完全に分離されるため、並列で触っても安全だ。
.env などの gitignore 対象ファイルを worktree に自動コピーするには .worktreeinclude を使う：
# .worktreeinclude（プロジェクトルートに配置）
.env
.env.local
.env.test
config/secrets.jsonworktree を .gitignore に追加しておくと、メインの git status に余計なファイルが出てこない：
# .gitignore に追記
.claude/worktrees/worktree セッション終了時の挙動：コミット・未コミット変更がない場合は自動削除される。変更がある場合はClaudeが「保持するか削除するか」を聞いてくる。
記事が見つかりません:
ワークフロー4: @terminal参照でCI/CDログを読ませる
VSCode統合ターミナルの出力を @terminal:ターミナル名 で参照できる機能は、デバッグ作業で特に役立つ。
# テストが落ちたとき
@terminal:bash テストが落ちてる。原因を調べて修正案を出して
# ビルドエラーのとき
@terminal:bash ビルドエラーを修正して
# Docker起動ログを確認させたいとき
@terminal:docker このエラーの原因は何？ターミナル名はVSCode上のターミナルタブに表示されているラベルと一致する。複数ターミナルを使い分けているなら、タブの名前をわかりやすくリネームしておくと @ メンションが楽になる。
ワークフロー5: チェックポイントで安全にリファクタリング
チェックポイントはCLIにもある機能だが、VSCode拡張機能では会話メッセージにホバーするだけでボタンが現れるので操作が直感的だ。
会話の任意のメッセージにマウスを乗せると「巻き戻し」ボタンが出現し、3種類の操作ができる：
- Fork conversation from here: コードはそのままで会話を分岐（「ここからアプローチを変えたい」とき）
- Rewind code to here: 会話は保持しつつコードをこの時点まで戻す（「実装が迷走したので戻したい」とき）
- Fork conversation and rewind code: 両方を同時にリセット（「このメッセージから全部やり直したい」とき）
大規模リファクタリングをするとき、途中で方向が変わることはよくある。チェックポイントを使えば「あの段階に戻して別の手を試す」が安全にできる。
MCP連携で拡張する実践レシピ
MCPサーバーの追加はCLIから行い、管理はVSCodeの /mcp パネルで行う、という役割分担になっている。
Chrome連携（@browser）でフロントエンド開発を自動テスト
@browser はClaude in Chrome拡張機能（v1.0.36以上）が必要だ。Chromeウェブストアから「Claude」で検索してインストールし、ログイン済みの状態にしておく。
準備が整えばプロンプトボックスで直接使える：
@browser localhost:3000 を開いて、ログインフォームの動作確認して
@browser console のエラーログを確認してレポートして
@browser スマートフォン幅（375px）でレイアウトを確認して、崩れがあれば直してClaudeは @browser ツールを使う際に新しいタブを開く。Chromeのログイン状態を引き継ぐので、開発環境や認証が必要なAPIのテストもそのまま使える。
拡張機能のアタッチメントメニューから「browser」を選択することで、「特定のタブを開く」「ページのテキストを読む」などの細かいブラウザ操作ツールを指定することもできる。
GitHub MCPでPRレビューを自動化
GitHubのMCPサーバーはPersonal Access Token（PAT）を使って接続する。
# GitHub設定からfine-grained PATを生成しておく
# 必要なスコープ: リポジトリへのread/write
claude mcp add --transport http github https://api.githubcopilot.com/mcp/ \
--header "Authorization: Bearer YOUR_GITHUB_PAT"接続後、会話からGitHubの操作が自然言語でできる：
PR #456 をレビューして。特にセキュリティ面と型安全性を重点的に見て
このブランチの変更をもとにPRを作成して。説明文も書いて
自分にアサインされているオープンなIssueを一覧表示してPRを作成する際、Claudeは実際のコード変更を読んで説明文を書いてくれる。「この変更の背景と実装方針を含めたPR説明文を作って」と言えば、かなりの品質で仕上げてくる。
データベースMCP連携の具体的設定
PostgreSQLやMySQLのMCPサーバーを接続すると、自然言語でデータベースを操作できる。
# PostgreSQL（npxで@bytebase/dbhubを使う例）
claude mcp add --transport stdio db -- npx -y @bytebase/dbhub \
--dsn "postgresql://readonly_user:password@localhost:5432/mydb"接続後：
ordersテーブルのスキーマを教えて
今月の売上上位10商品を出して
usersテーブルに過去90日間ログインしていないユーザーはどのくらいいる？本番DBに接続する場合は読み取り専用ユーザーを使うこと。readonly_user のように権限を絞ったDBユーザーでDSNを構成するのが鉄則だ。Claudeが意図せず DELETE や DROP を実行しないよう、DB側でも制限をかけておく。
開発環境DBの場合は書き込み権限があっても問題ないが、その場合はdefaultモード（変更ごとに確認が入る）で使うのが安全だ。
コスト最適化 — Maxプランで月額内に収めるテクニック
Plan Mode活用でトークン消費を抑える
「とりあえず実装して、違ったら修正して」という進め方は、トークン的に最もコストが高い。
Claudeに広い範囲のコードを探索させ、実装まで走らせ、それが間違っていたら再度探索させる——この繰り返しが想定外のトークン消費につながる。
Plan Modeを使うと：
- 探索フェーズでClaudeが「どのファイルを変更するか」を調べる
- 計画書が出てきて、人間がレビューする
- 方向性を確認してから実装に入る
計画書の確認で「そのアプローチは違う」と気づけば、大量の実装トークンを消費せずに方向修正できる。特に大規模な変更や見知らぬコードベースを触るときはPlan Modeを挟むことをすすめる。
Effort Level（/effort）でモデルの思考深度を調整
/effort コマンドでClaudeの思考深度を調整できる。これはトークン消費と品質のトレードオフだ。
/effort low → 思考量を抑える（簡単な修正タスクに）
/effort normal → デフォルト
/effort high → 深く考える（設計・アーキテクチャ判断に）単純なリネーム作業や定型的なコード生成なら /effort low で十分なことが多い。複雑な設計の意思決定には /effort high を使う。
セッション内でタスクに合わせてこまめに切り替えるのが最も効率的だ。
記事が見つかりません:
コンテキスト管理（/compact）の最適タイミング
VSCode拡張機能のプロンプトボックス下部にコンテキスト使用量のバーが表示される。これが70〜80%を超えてきたら手動 /compact を検討する。
/compact
# または、重点的に残したい情報を指定する
/compact APIの使い方とエラーハンドリングのパターンにフォーカスして自動compactが走ると、Claudeが「コンテキストを要約した」という通知が出る。自動で任せてもいいが、長いセッションで「ここまでの意思決定を忘れてほしくない」という場合は手動でcompact指示を出して何を残すかをコントロールする。
タスクが切り替わるタイミングで /clear して新しいセッションを始めるのも有効だ。「前のタスクの文脈を全部引き継ぎながら新しいことをやらせる」よりも、クリーンな状態で新しいコンテキストを作るほうがトークン効率が良い。
CLI版と拡張機能の使い分け判断フレームワーク
拡張機能が有利なケース
差分レビューを丁寧にやりたいとき大きな変更をClaudeに依頼して、1ファイルずつ変更内容を確認したいなら拡張機能が圧倒的に使いやすい。CLIのdiff表示はターミナル内テキストだが、VSCodeは本来のdiffビューアーが開くのでコードが読みやすい。
Plan Modeをフル活用したいとき前述の通り、VSCode拡張機能のPlan Modeはマークダウン全画面で計画書が開き、インラインコメントが書ける。CLIのPlan ModeはUIが単純なので、計画書を細かく編集したい場合は拡張機能の方が便利だ。
ブラウザと連携したフロントエンド開発@browser 機能はVSCode拡張機能（+ Claude in Chrome）専用だ。フロントエンドの動作確認やビジュアルデバッグを自動化したいなら拡張機能を使う。
複数タブで並列開発するとき、タスクの進行状況がSparkアイコンの色で視覚的にわかる。ターミナルを複数開くよりも状態管理がしやすい。
CLI版が有利なケース
MCP サーバーを追加・設定するときclaude mcp add はCLIのコマンドだ。拡張機能から /mcp パネルで管理はできるが、新しいサーバーを追加する場合はターミナルから実行する必要がある。
claude -p "プロンプト" でヘッドレス実行できるのはCLIのみ。GitHub ActionsやShellスクリプトからClaudeを呼び出す場合はCLIを使う。
CLIのタブ補完はファイル名もコマンドも効く。素早くコマンドを入力したいならCLIの方が指の動きが少ない。
! ショートカットでシェルコマンドをその場で実行したいとき
!git log --oneline -10 のように ! プレフィックスで任意のシェルコマンドを素早く実行できるのはCLIの特権だ。
併用パターン（拡張機能で作業+ターミナルでCLI）
実務で最もよく使うのはこの組み合わせだ。
- VSCode拡張機能で通常の開発作業をする（差分確認、Plan Mode、マルチタブ）
- MCP設定やスクリプト実行は統合ターミナルの
claudeコマンドで行う - セッション履歴は共有されているので、CLIで始めたセッションをVSCode拡張機能で続けることができる（
/resumeコマンド）
拡張機能のセッションをCLIで継続したい場合は：
# CLIでセッション一覧を出して選択する
claude --resumeトラブルシューティング
拡張機能が応答しない時
まず試すのは新しい会話を始めること（コマンドパレットから「New Conversation」）。それでも応答がない場合：
- ターミナルで
claudeを実行して詳細なエラーメッセージを確認する - ネットワーク接続を確認する（特に企業ネットワークではプロキシ設定が必要な場合がある）
- 「Developer: Reload Window」で拡張機能をリロードする
- VSCodeのバージョンを確認する（1.98.0以上が必要）
ターミナルでCLIが動くのに拡張機能が応答しない場合は、拡張機能がバンドルしているCLIバイナリのパスに問題があることがある。claudeCode.claudeProcessWrapper 設定で外部インストール済みの claude バイナリへのパスを指定すると解決することがある。
Cmd+Escが効かない（macOS Tahoe問題）
macOS Tahoe以降、システムの「Game Overlay」ショートカットが Cmd+Esc にデフォルトで割り当てられており、VSCodeへのキーが届かない。
解決方法：
- システム設定を開く
- キーボード → キーボードショートカット → ゲームコントローラー
- 「Game Overlay」のチェックを外す
または、VSCodeのキーボードショートカット設定（Cmd+K Cmd+S）で「Claude Code: Focus input」に別のキーを割り当てる。
サードパーティプロバイダー接続の注意点
Amazon Bedrock や Google Vertex AI から Claude Code を使っている場合、Auto Mode（自動権限チェッカー）は使えない。Auto Mode は Anthropic API 専用の機能だ。
また、MCP Tool Search（ツール定義の遅延ロード機能）も Vertex AI ではデフォルト無効になっている（プロキシ経由で tool_reference ブロックが通らないため）。Vertex AI を使っていてMCPサーバーのツールが認識されない場合は ENABLE_TOOL_SEARCH=true を環境変数に設定して強制的に有効にすることができるが、対応モデルバージョンの確認が必要だ。
よくある質問（FAQ）
Q. VSCode拡張機能とCLIはどちらを主に使えばいいですか？A. 日常的な開発作業は拡張機能をメインにして、MCPサーバーの設定やスクリプト実行はCLIを使う、という併用スタイルが最も効率的だと感じている。セッション履歴は共有されているので、途中で切り替えても会話の流れが途切れない。
Q. Claude CodeのVSCode拡張機能はCursorでも使えますか？A. 使える。Cursor、Windsurf、Kiroといった VSCode フォーク版に対応しており、Open VSXレジストリからもインストールできる。拡張機能マーケットプレイスで「Claude Code」を検索するか、claude コマンドを統合ターミナルで実行するかのどちらかで利用できる。
A. 変更できる。計画書を承認して実装が始まったあとでも、チェックポイントを使って特定のメッセージまで会話を巻き戻し（Fork）してから新しい方針を伝えることができる。メッセージにホバーすると「巻き戻し」ボタンが現れる。
Q. 複数のMCPサーバーを接続するとコンテキストが圧迫されませんか？A. MCP Tool Searchがデフォルトで有効になっているため、ツール定義はセッション開始時にすべてロードされず、Claudeが必要と判断したときに初めて定義が読み込まれる。接続しているMCPサーバーが多くても、最初からコンテキストを圧迫するわけではない。ただし、特定サーバーのツールを常にコンテキストに置きたい場合は alwaysLoad: true を.mcp.jsonに設定する。
@browser を使うにはどんな設定が必要ですか？
A. Chrome ウェブストアから「Claude」拡張機能（Claude in Chrome、バージョン1.0.36以上）をインストールしてサインインするだけでいい。VS Code 拡張機能側での追加設定は不要で、プロンプトボックスで @browser と入力した時点で利用可能になる。
A. Claude Codeパネル上部の「Session history」ボタンをクリックするとダイアログが開く。キーワード検索や「Today / Yesterday / Last 7 days」でのフィルタリングができ、任意のセッションをクリックして再開できる。Claude.ai の Web セッションを引き継ぐ場合は「Remote」タブを選択する（GitHubリポジトリを使ったセッションのみ）。
Q. 企業のVPNやプロキシ環境で使えますか？A. 使えるが、VSCodeがシェル環境のプロキシ設定を引き継いでいる必要がある。code . でターミナルからVSCodeを起動することでシェル環境を引き継ぐ。Amazon Bedrock や Google Vertex AI を経由する企業環境では、~/.claude/settings.json にプロバイダー設定を書いてログインプロンプトを無効にする方法が確実だ。
内部リンク
記事が見つかりません:
記事が見つかりません:
記事が見つかりません:
記事が見つかりません:
記事が見つかりません:
