Claude CodeをVSCodeで使いたい——この記事では、拡張機能のインストールから設定、ターミナル版との使い分けまで、VSCodeユーザー向けに完全解説します。
Claude Code × VSCode｜2つの使い方
Claude CodeをVSCodeで使う方法は2つあります。
| 方法 | 概要 | おすすめの人 |
|---|---|---|
| ① 拡張機能 | サイドパネルでClaude Codeを操作。コード差分をインラインで確認 | エディタ内で完結したい人 |
| ② 統合ターミナル | VSCode内のターミナルでclaudeコマンドを実行 | ターミナル版と同じ操作感がほしい人 |
どちらもPro（月$20〜）以上が必要。無料プランでは使えない。→「料金ガイド」
VSCode 1.98.0以上が必要。公式ドキュメントに詳細な仕様がある。
方法①｜VSCode拡張機能のインストールと設定
Step 1: 拡張機能をインストール
- VSCodeを開く
Cmd+Shift+X（Mac）またはCtrl+Shift+X（Windows）で拡張機能パネルを開く- 「Claude Code」で検索
- 発行元が「Anthropic」の公式拡張機能をインストール（インストール数1,600万超）
Step 2: ログイン
サイドバーにClaude Codeのアイコンが表示されるので、クリックしてAnthropicアカウントでログインします。
Step 3: 使い始める
サイドパネルのチャット欄に自然言語で指示を入力するだけです。例：
> このファイルのバグを修正して
> テストを追加して
> この関数をリファクタリングして拡張機能の独自機能
VSCode拡張機能には、ターミナル版にはない独自の機能があります。
| 機能 | 説明 |
|---|---|
| インライン差分表示 | コード変更の提案をエディタ上でdiff形式で表示。Accept/Rejectで取捨選択 |
| ファイルコンテキスト | 現在開いているファイルを自動でコンテキストに含める |
| ワンクリック適用 | 提案されたコード変更をボタン1つで適用（作業時間が約30%短縮される体感） |
| エディタ連携 | 選択範囲をClaude Codeに送信可能 |
拡張機能の実際の使用感
拡張機能の最大の強みはインライン差分表示です。Claude Codeが「このコードをこう変えたい」と提案すると、エディタ上でGitのdiffのように変更箇所がハイライトされます。1行ずつ「Accept」か「Reject」を選べるので、コードの変更を細かくコントロールできます。
一方、ターミナル版では変更がテキストで表示され、Y/Nで一括承認する形。大量ファイルの一括修正にはターミナルの方が速いが、1ファイルの慎重な修正には拡張機能の方が安心。
@メンションでファイルを参照する
拡張機能の強力な機能が@メンション。プロンプトに@ファイル名と入力すると、そのファイルをコンテキストに含められる。あいまい一致にも対応。
# @メンションの使い方
> @auth.ts のバグを修正して # ファイル名であいまい一致
> @src/components/ のコンポーネントを一覧表示して # フォルダ指定（末尾スラッシュ）
> @app.ts#5-10 の5〜10行目を説明して # 行番号指定エディタでテキストを選択した状態でプロンプトを送ると、選択範囲が自動でコンテキストに含まれる。Option+K（Mac）/ Alt+K（Windows）で@メンション参照を挿入することもできる。
autoSave設定（必須）
Claude Codeはディスク上のファイルを直接読み書きするため、autoSave設定が必須。
// VSCode settings.json に追加
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}これがないと、Claude Codeが編集したファイルが保存されず、後続の操作で古い内容を読み込んでしまう問題が発生する。
実務では拡張機能をメイン（コードの読み書き）、ターミナルをサブ（Git操作・/batch・SSH）で使い分けています。同じVSCode内で切り替えるだけなので、ウィンドウを行き来する必要がない。
方法②｜VSCode統合ターミナルで使う
VSCodeのターミナルパネル（Ctrl+`）でclaudeコマンドを実行するだけです。ターミナル版と完全に同じ操作で、エディタとターミナルを並べて作業できます。
# VSCodeのターミナルで
cd ~/my-project
claude
> このプロジェクトのバグを修正してこの方法のメリットは、ターミナル版の全機能（/clear, /compact, /model, /batch等）がそのまま使えること。
重要: 拡張機能をインストールしても、ターミナルにclaudeコマンドは追加されない。統合ターミナルでclaudeを使うにはスタンドアロンCLIを別途インストールする必要がある。拡張機能はGUIパネル用のCLIをプライベートにバンドルしているが、それはターミナルのPATHには入らない。
# ターミナルでclaudeが使えない場合
# → スタンドアロンCLIをインストール
curl -fsSL https://claude.ai/install.sh | bash
# 外部ターミナルからVSCodeに接続する場合
claude
/ide # Claude Code内でVSCodeとの接続を確立拡張機能 ↔ CLI の会話共有
拡張機能で始めた会話をCLIで続行する方法:
# 拡張機能のセッションをターミナルで再開
claude --resume
# → インタラクティブピッカーでセッションを選択逆にCLIで始めた会話を拡張機能で続行するには、セッション履歴（パネル上部）から該当のセッションを選択する。
拡張機能 vs ターミナル版｜どっちを使うべき？
| 作業 | 拡張機能 | ターミナル版 | おすすめ |
|---|---|---|---|
| 1ファイルの修正 | ◎ インライン差分が便利 | ○ | 拡張機能 |
| コードレビュー | ◎ エディタで差分が見える | ○ | 拡張機能 |
| 大量ファイルの一括修正 | ○ | ◎ /batchが使える | ターミナル |
| Git操作（commit/PR） | ○ | ◎ | ターミナル |
| SSH先のサーバー作業 | △ | ◎ | ターミナル |
| CLAUDE.md/Skills設定 | ○ | ◎ /initが使える | ターミナル |
| MCP連携 | ○ | ◎ | ターミナル |
結論：両方使うのが最強。1ファイルの修正やレビューは拡張機能、大規模作業やGit操作はターミナル版。VSCode内で切り替えるだけです。
VSCode版の設定おすすめ
公式キーボードショートカット
| ショートカット | Mac | Windows/Linux | 機能 |
|---|---|---|---|
| フォーカス切替 | Cmd+Esc | Ctrl+Esc | エディタ↔Claude Code間のフォーカスを切替 |
| 新タブで開く | Cmd+Shift+Esc | Ctrl+Shift+Esc | 新しい会話をエディタタブとして開く |
| @メンション挿入 | Option+K | Alt+K | 現在のファイルと選択範囲への参照を挿入 |
| 閉じたセッション再開 | Cmd+Shift+T | Ctrl+Shift+T | 直前に閉じたClaudeセッションを再度開く |
Cursor と Claude Code の違い
「VSCodeでAI」というとCursorが有名ですが、Claude Code拡張機能とCursorは競合する位置づけです。
| 項目 | Claude Code（VSCode拡張） | Cursor |
|---|---|---|
| ベースエディタ | VSCode（そのまま） | VSCodeのフォーク |
| 使えるAIモデル | Claude（Opus/Sonnet） | 複数（Claude/GPT/Gemini等） |
| ターミナル操作 | ◎（統合ターミナルで完全対応） | △ |
| エージェント型実行 | ◎ | ○ |
| 月額料金 | $20〜（Anthropicプラン） | $20〜（Cursor独自プラン） |
| 既存VSCode設定の引継ぎ | そのまま使える | 一部移行が必要 |
既にVSCodeの設定を細かくカスタマイズしている人は、Claude Code拡張機能の方が移行コストゼロ。Cursorに乗り換えると設定の再構築が必要になる。ただしCursorのTab補完とCmd+Kは非常に強力なので、Claude Code拡張だけでは完全な代替にならない。多くの開発者はCursorにClaude Code拡張を入れて併用している。
拡張機能とCLIの機能比較
拡張機能（GUIパネル）とCLI（ターミナル版）では使える機能に差がある。公式ドキュメントの比較表をベースにまとめた:
| 機能 | 拡張機能（GUI） | CLI（ターミナル） |
|---|---|---|
| スラッシュコマンド | 一部対応（/で確認） | 全コマンド対応 |
| MCPサーバー追加 | ✗（CLIで追加→GUIで管理） | ◎（claude mcp add） |
| インライン差分表示 | ◎ | ✗ |
| @メンション | ◎ | ✗ |
| 複数タブ並行 | ◎ | ✗（別ターミナルで可能） |
| Plan Modeでの計画書編集 | ◎（Markdownで表示+コメント） | ○（テキスト表示のみ） |
| チェックポイント巻き戻し | ◎（ホバーでrewindボタン） | ◎（/rewindコマンド） |
| !bashショートカット | ✗ | ◎ |
| 会話履歴の共有 | 共有される（拡張機能の会話をCLIで--resumeで続行可能） | |
ポイント: 拡張機能とCLIは同じ会話履歴を共有する。拡張機能で始めた会話をターミナルでclaude --resumeで続行できるし、その逆も可能。使いやすい方を場面に応じて切り替えればよい。
詳しい比較は「Cursor vs Claude Code比較」をご覧ください。
VSCode版の生産性を上げる設定5つ
- サイドバーにピン留め — Claude Codeのアイコンを右クリック→「Always Show」で常にアクセス可能に
- エディタグループを分割 — 左にコード、右にClaude Codeパネルを並べて表示。
Cmd+（Mac）で分割 - Auto Save有効化（必須） — ファイル→設定→Auto Save→afterDelay。これがないとClaude Codeが古い内容を読み込む
- Git Lens拡張との併用 — Claude Codeがコミットした履歴をGit Lensで視覚的に確認
- ターミナルの位置を右パネルに — ターミナル版を右パネルに配置し、エディタとターミナルを横並びに
拡張機能の主要設定一覧
VSCode設定（Cmd+,）→ Extensions → Claude Codeで変更可能:
| 設定 | デフォルト | 説明 |
|---|---|---|
useTerminal | false | trueにするとGUIパネルの代わりにターミナルモードで起動 |
initialPermissionMode | default | 新しい会話の承認モード（default/plan/acceptEdits/bypassPermissions） |
autosave | true | Claude Codeが読み書きする前にファイルを自動保存 |
preferredLocation | panel | Claudeパネルの位置（sidebar/panel） |
useCtrlEnterToSend | false | EnterではなくCtrl+Enterでプロンプト送信 |
respectGitIgnore | true | .gitignoreパターンをファイル検索から除外 |
これらの設定は公式ドキュメントでさらに詳しく解説されている。
Plan Modeの活用
拡張機能でPlan Mode（計画モード）を使うと、Claude Codeが変更を実行する前に計画書をフルMarkdownで表示する。計画書にインラインコメントでフィードバックを書き込んでから実行を承認できるため、大きな変更を安全に進められる。
# Plan Modeの使い方
# 1. プロンプトボックス下部のモード指示器をクリック → "Plan" に切替
# 2. 指示を入力（例: 「認証システムをリファクタリングして」）
# 3. Claude Codeが計画書をMarkdownで表示
# 4. 計画書にインラインコメントで修正指示を追加
# 5. 「実行して」と指示すると実行開始Plan ModeはinitialPermissionMode設定で新規会話のデフォルトにもできる。プロダクション環境の修正では常にPlan Modeを使うことを推奨。
複数セッションの並行実行
コマンドパレット（Cmd+Shift+P）から「Open in New Tab」で新しい会話タブを開ける。各タブは独立した履歴とコンテキストを持つため、異なるタスクを並行して進められる。
例: タブ1でバグ修正、タブ2でドキュメント生成を同時進行。タブアイコンの色付きドットでステータスが分かる（青=許可待ち、オレンジ=完了通知）。
VSCode版でのGit操作
Claude Code拡張機能からGit操作を直接指示できる。コミット、PR作成、ブランチ操作がVSCode内で完結する。
# Git操作の例
> 今日の変更をコミットして。メッセージは日本語で。
> feature/auth ブランチを作成して、認証機能をそこに移動して
> このブランチからmainへのPRを作成してClaude Codeは変更内容を自動分析してコミットメッセージを生成する。PRのdescriptionも変更内容に基づいて自動生成される。VSCodeのSource Controlパネルと併用すると、変更の可視化とAIによるGit操作を組み合わせられる。
さらに--worktreeフラグでGit worktreeを活用すると、複数のタスクを独立したファイル状態で並行作業できる:
# Git worktreeで並列作業（ターミナル版）
claude --worktree feature-auth
# → 別のworktreeでfeature-auth ブランチの作業を開始
# → メインのworktreeには影響しない実際の開発フロー｜VSCode版の1日
| 時間 | 作業 | 使う方法 |
|---|---|---|
| 9:00 | PRのコードレビュー | 拡張機能（インライン差分で確認） |
| 10:00 | バグ修正 | 拡張機能（修正箇所をAccept/Reject） |
| 11:00 | 新機能の実装 | 拡張機能（コードを見ながら指示） |
| 12:00 | テスト作成 | 拡張機能（テストファイルを開いて指示） |
| 14:00 | 10ファイルの一括リファクタリング | ターミナル版（/batch） |
| 15:00 | コミット+PR作成 | ターミナル版 |
| 16:00 | 本番サーバーのログ確認 | ターミナル版（SSH経由） |
このように午前は拡張機能、午後はターミナル版という使い分けが自然にできる。
Chrome連携でブラウザテスト
Claude Code拡張機能はChromeブラウザとの連携もサポートしている。プロンプトに@browserと入力すると、WebアプリのテストやコンソールログのデバッグをVSCode内で完結できる。
# Chrome連携の使い方
> @browser localhost:3000 にアクセスしてコンソールエラーを確認して
> @browser ログインフォームのバリデーションをテストしてChrome拡張機能「Claude in Chrome」v1.0.36以上が必要。ブラウザのログイン状態を共有するため、既にサインインしているサイトにアクセスできる。フロントエンド開発者にとって、ブラウザとエディタを行き来する手間がなくなる。
VSCode版でよくある問題と対処法
| 問題 | 原因 | 対処法 |
|---|---|---|
| 拡張機能が見つからない | VSCode 1.98.0未満 | VSCodeを最新版にアップデート。Help→Aboutでバージョン確認 |
| ログインできない | ブラウザのポップアップブロック | ポップアップを許可してリトライ |
| レスポンスが遅い | 大きなプロジェクトでコンテキストが肥大 | /clearでリセット、または対象ファイルを絞る |
| 日本語が文字化けする | ファイルエンコーディングの不一致 | VSCode右下でUTF-8を選択 |
| 差分が表示されない | 拡張機能のバージョンが古い | 拡張機能をアップデート。コマンドパレット→Developer: Reload Windowで再読込 |
| Sparkアイコンが表示されない | ファイルが開かれていない | ファイルを1つ開くとエディタツールバーにアイコンが表示される。ステータスバー(右下)の「✱ Claude Code」からも開ける |
| macOSでCmd+Escが効かない | macOS Tahoeのゲームオーバーレイが競合 | システム設定→キーボード→ゲームコントローラー→ゲームオーバーレイのチェックを外す |
よくある質問
Q: VSCode拡張は無料で使えますか？
いいえ。拡張機能自体は無料ですが、使用にはAnthropicのPro（$20/月）以上が必要です。
Q: 日本語で使えますか？
はい。ターミナル版と同じく、日本語で指示すれば日本語で返ってきます。
Q: ターミナル版との同時利用はできますか？
はい。拡張機能とターミナル版は独立したセッションなので同時利用可能。ただし使用量は共有プール（Pro: 5時間枠）から消費される点に注意。→「Pro/Max比較」
Q: CursorにもClaude Code拡張を入れられる？
入れられる。CursorはVSCodeのフォークなので、同じ拡張機能がそのまま動作する。→「Cursor × Claude Code連携ガイド」
Q: 拡張機能版でMCPサーバーは使える？
使える。チャットパネルで/mcpと入力して管理。ただしMCPサーバーの追加は統合ターミナルでclaude mcp addを実行する必要がある。→「MCPサーバーとは？」「おすすめ20選」
まとめ｜VSCodeユーザーは拡張機能＋ターミナルの併用が最強
Claude CodeをVSCodeで使うなら、拡張機能（インライン差分・@メンション・Plan Mode）とターミナル版（大規模操作・/batch・Git自動化）の併用がベスト。
拡張機能の最大の利点は、インライン差分で変更を1行ずつAccept/Rejectできること。ターミナル版の最大の利点は、/batchでの並列処理と全スラッシュコマンドへのフルアクセス。両方を同じVSCode内で切り替えるだけなので、ツールを行き来する必要がない。
VSCode 1.98.0以上であること、autoSave設定がONであること、Proプラン（$20/月）以上であることの3つが前提条件。これさえ満たせば、5分でインストール→すぐに使い始められる。拡張機能はインストール数1,600万超の実績があり、安定性も十分。
Claude Codeの使い方は「使い方ガイド」（3-2-1ルール付き）、始め方は「始め方ガイド」、コマンドは「コマンド早見表」、Cursorとの比較は「Cursor比較」、CLAUDE.mdは「書き方ガイド」、料金は「料金ガイド」を参照。
参考文献・公式リソース
- VS Code で Claude Code を使用する（公式ドキュメント）
- Claude Code for VS Code（VS Code Marketplace）
- Claude Code 公式ドキュメント
- Anthropic 公式料金ページ
- Claude Code ベストプラクティス
