Claude CodeをVS Codeで使うなら、公式の拡張機能を入れるのが基本です。エディターの中にClaudeとの会話パネルが開き、選んだコードをそのまま渡せます。Manualモードに切り替えれば、提案された変更を左右の差分で確かめてから受け入れられます。この記事では、拡張の導入から、選択範囲の渡し方、差分の採否、うまくいかなかったときの巻き戻しまでを、一つの流れとして説明します。
この記事は、2026年10月29日に確認したAnthropicの公式資料をもとに、編集部が手順と確認の考え方をまとめたものです。本文中の依頼文は説明用の例です。手順は公式資料に基づくもので、編集部が拡張を実際に操作して確かめた実測結果ではありません。機能の多くは拡張のバージョンによって使えるかどうかが変わるため、拡張機能の画面に出ているバージョンと照らし合わせてください。
Claude CodeのVS Code拡張とは：エディターの中で差分まで確かめる
VS Code拡張は、Claude Codeをグラフィカルなパネルとして使うための公式の拡張機能です。公式資料では、VS CodeでClaude Codeを使う推奨の方法と位置づけられています。パネルの中で、計画を受け入れる前にMarkdownの文書として読んでコメントする、選択範囲から行番号つきの参照を入れる、過去の会話を開く、複数の会話をタブやウィンドウで並べる、といった操作ができます。
拡張には、パネルで使うためのClaude Code本体が同梱されています。拡張機能の画面に出るバージョン番号は、この同梱されたClaude Codeのバージョンです。たとえば「v2.1.286以降が必要」と書かれた機能は、拡張も2.1.286以降である必要があります。本記事に出てくるバージョンの条件は、すべてこの番号のことです。詳しい仕様はVS Code拡張の公式資料にあります。
CursorなどほかのAIエディターとの比較はClaude CodeとCursorの比較、ターミナル版の導入はClaude Codeのインストール手順で扱っています。本記事は、VS Codeの中での使い方に絞ります。
VS Code拡張を入れる前の条件と導入手順
前提条件を確かめる
確認時点の公式資料では、VS Codeは1.94.0以降が必要です。アカウントは、ClaudeのPro、Max、Team、Enterpriseのいずれかの有料プラン、またはClaude Consoleのアカウントが使え、APIキーの用意は必須ではありません。Amazon BedrockやGoogle CloudのAgent Platformなどを経由して使う場合は、別の設定手順が案内されています。
パネルの開き方を知る
いちばん早いのは、エディター右上のツールバーにあるSparkアイコン（Claude Codeのマーク）をクリックする方法です。このアイコンは、ファイルを開いているときだけ表示されます。ほかの開き方は次のとおりです。
- アクティビティバー：左端のSparkアイコンから、セッションの一覧を開けます。
- コマンドパレット：「Claude Code」と入力し、「Open in New Tab」などを選びます。
- ステータスバー：ウィンドウ右下の「✻ Claude Code」をクリックします。ファイルを開いていなくても起動できます。
拡張を入れてサインインする
- 拡張機能の画面を開く。Macは
Cmd+Shift+X、Windows・LinuxはCtrl+Shift+Xで開き、「Claude Code」を検索してインストールします。 - 表示されなければ再読み込みする。入れた後に見当たらない場合は、VS Codeを再起動するか、コマンドパレットで「Developer: Reload Window」を実行します。
- パネルを開いてサインインする。前の項の方法でパネルを開くと、初回はサインイン画面が出ます。「Sign in」を押し、ブラウザーで認可を済ませます。終わると「Learn Claude Code」というチェックリストが表示されます。
公式資料によると、拡張はCursorのほか、VS Codeをもとにした一部のエディターにも入れられます。シェルでANTHROPIC_API_KEYを設定しているのにサインインを求められる場合は、VS Codeがシェルの環境変数を引き継いでいない可能性があります。ターミナルからcode .で起動するか、Claudeのアカウントでサインインします。
VS Codeで選択したコードやファイルをClaudeに渡す
VS Code拡張では、エディターで選択したテキストが自動でClaudeに渡ります。入力欄の下には選択中の行数が表示されます。何も選択していなくても、Claudeは今開いているファイルがどれかを把握し、入力欄にもその名前が表示されます。「この関数の役割を説明して」のように、選択した部分を指して質問できます。
渡す範囲をはっきりさせたいときは、選択した状態でMacはOption+K、Windows・LinuxはAlt+Kを押します。入力欄に@app.ts#5-10のような、ファイルのパスと行番号つきの参照が入ります。依頼文に範囲が残るので、あとで会話を読み返したときも、どこを対象にしたかが分かります。
@src/price.ts#12-30 の計算で、税込み価格が端数になる理由を説明してください。修正案があれば差分で示してください。まだ他のファイルは変更しないでください。このほか、@に続けてファイル名やフォルダー名の一部を入力すると、候補から選んで会話に加えられます（フォルダーは末尾に/を付けます）。統合ターミナルの出力は@terminal:ターミナル名（ターミナルのタブに表示される名前）で参照できます。画像はクリップボードから貼り付け、ファイルはShiftを押しながら入力欄へドラッグすると添付できます。
選択範囲や開いているファイルを自動で渡したくない場合は、VS Codeの設定で「Attach Selection」（v2.1.300以降）や「Attach Open File」（v2.1.271以降）をオフにします。その時だけ選択範囲を外したいなら、入力欄の行数の横にある「X」を押します。また、チャットパネルでは、files.excludeなどで除外したファイルや、Gitが無視するファイルを選択しても、既定ではその内容をClaudeへ渡さない仕組みがあります。ただしこれはチャットパネルだけの扱いで、統合ターミナルで動かすClaude Codeには、こうしたファイルで選択したテキストも渡ることがあります。渡したくないファイルは、Readの拒否ルールで守るよう公式資料は案内しています。
VS Codeで提案された差分を確かめて採否を決める
差分を自分で確かめたい場合に、最初に見るのは入力欄の下にある権限モードの表示です。公式資料によると、v2.1.283以降はAutoが最初のモードになっており、AutoやEdit automaticallyでは、Claudeは作業フォルダー内のほとんどのファイルを確認なしで編集します。1件ずつ採否を決めたい場合は、モードの表示をクリックしてManualへ切り替えます。
| モード | ファイル編集の扱い（公式資料の要約） | 向いている場面（編集部の目安） |
|---|---|---|
| Manual | 編集の前に左右の差分を示し、許可を求める | 初めての作業、変更を1件ずつ確かめたいとき |
| Plan | 計画を示し、承認されるまで変更しない | 大きめの修正の前に方針を確かめたいとき |
| Edit automatically | 確認なしで編集する | 内容に慣れていて、あとでまとめて見直すとき |
| Auto | 確認を求める代わりに、分類器が多くの操作を確かめて一部を止める | 任せる範囲と止まる条件を理解しているとき |
Manualでの採否の操作
Manualでは、Claudeがファイルを編集しようとすると、元の内容と提案された内容が左右に並んだ比較が開き、許可を求められます。受け入れる、断る、または「代わりにこうして」と指示する、のいずれかを選びます。受け入れる前に比較画面で提案の内容を自分で書き換えることもでき、その場合は書き換えたことがClaudeに伝わります。
v2.1.275以降は、比較画面の変更ごとに「Accept this change」「Reject this change」のボタンが出ます。断った変更は提案から取り除かれ、受け入れた変更は確認済みとして扱われます。ファイル全体をまとめて受け入れる・断る操作でも、確認は終わります。なお、変更が100か所を超える比較では変更ごとのボタンが出ないため、ファイル全体で判断します。同じ操作は、コマンドパレットの「Claude Code: Accept Change at Cursor」「Claude Code: Reject Change at Cursor」からも行えます。
新しい会話を常にManualで始めたい場合は、VS Codeのユーザー設定でclaudeCode.initialPermissionModeをmanual（defaultと同じ意味）にします。公式資料では、この設定はユーザー設定から読み込まれ、ワークスペースの設定は無視されると説明されています。
計画を先に読む
変更の範囲がまだ読めない作業では、Planで計画を先に出させると安全です。VS Codeでは計画がMarkdownの文書として開き、文中にコメントを書き込んでから実装に進ませられます。入力欄に/plan 依頼内容と書いてPlanへ切り替えることもできます（v2.1.280以降）。プランモード自体の考え方はプランモードの記事で詳しく説明しています。
チェックポイントで受け入れた変更を巻き戻す
受け入れたあとで「やはり前の状態に戻したい」と思ったときは、チェックポイントを使います。VS Code拡張はClaudeによるファイル編集を記録しており、会話のメッセージにマウスを重ねると巻き戻しのボタンが出ます。選べる操作は次の3つです。
- Fork conversation from here：コードの変更はそのままにして、このメッセージから会話を分岐させる。
- Rewind code to here：会話の履歴は残したまま、ファイルの変更をこの時点まで戻す。
- Fork conversation and rewind code：会話を分岐させ、ファイルの変更もこの時点まで戻す。
ただし、チェックポイントは万能ではありません。チェックポイントの公式資料によると、シェルのコマンドだけで変更されたファイルは記録されず、サブエージェントによる編集も多くの場合は巻き戻しの対象外です。こうした変更や、確実に元へ戻したい変更は、Gitで管理した上で戻します。編集部としては、Gitで管理しているフォルダーで作業を始め、確定した変更はClaudeに頼むか自分でコミットしておくことをおすすめします。チェックポイントは作業中のやり直し、Gitは確定した状態の保存、と役割を分けると混乱しにくくなります。
VS Code拡張とCLIの違いと切り替え
拡張に同梱されたClaude Codeは、拡張の画面から使うためのもので、claudeコマンドとしては使えません。統合ターミナルでも使いたい場合は、CLIを別にインストールします。CLIを統合ターミナルで動かすと、差分の表示やエラー情報の共有などでVS Codeと自動で連携します。外部のターミナルから使う場合は、Claude Codeの中で/ideを実行して接続します。
| 機能 | CLI | VS Code拡張 |
|---|---|---|
| コマンドとスキル | すべて | 一部（/で一覧を確認） |
| チェックポイント | 使える | 使える |
!でのBash実行 | 使える | 使えない |
| Tabでの補完 | 使える | 使えない |
拡張とCLIは会話の履歴を共有しています。拡張で始めた会話をターミナルで続けるには、claude --resumeで一覧から選びます。パネルではなくCLIと同じ画面で使いたい場合は、拡張の設定で「Use Terminal」をオンにします。許可ルールやhooks、MCPサーバーなどを書く~/.claude/settings.jsonは拡張とCLIで共通なので、settings.jsonの記事の内容がそのまま使えます。
拡張が動かないときの確認
- 拡張が入らない。VS Codeが1.94.0以降か、拡張を入れる権限があるかを確かめ、VS Code Marketplaceから直接入れることも試します。
- Sparkアイコンが出ない。ファイルを開いているか（フォルダーだけでは表示されない）、VS Codeのバージョン、再読み込み、ほかのAI系拡張との競合を確認します。ワークスペースが制限モード（Restricted Mode）のままだと拡張は動きません。右下のステータスバーやコマンドパレットからも開けます。
- macOSでCmd+Esc（エディターと入力欄のフォーカス切り替え）が効かない。macOS Tahoe以降は、システムのGame Overlayが同じキーを使っています。システム設定のキーボードショートカットでGame Overlayのチェックを外すか、拡張側のキーを割り当て直します。
- 「Not logged in · Please run /login」と表示される。通常はサインイン画面が自動で再表示されます。出なければ「Developer: Reload Window」を実行します。
- パネルが真っ白になる。拡張をv2.1.309以降に更新し、「Developer: Reload Window」を実行します。「Claude Code couldn’t load」と表示されたら、その手順に沿って確認し、解決しなければ「Claude Code: Show Logs」でログを確認します。
- Claudeが応答しない。ネットワークの接続、新しい会話での再試行、統合ターミナルのCLIで出るエラー表示を、順に確認します。
まとめ：VS Code拡張は「選択・差分・巻き戻し」の3つの操作から慣れる
最初は、Gitで管理している練習用のフォルダーを開き、Manualに切り替えてから、選択範囲をOption+K（Windows・LinuxはAlt+K）で渡して小さな修正を頼みます。比較画面で変更ごとに採否を決め、必要ならチェックポイントで戻します。この3つに慣れてから、Planでの計画確認やEdit automaticallyでの速い反復へ広げます。先に採否の基準を持っておくと、自動で進めた変更もあとから説明しやすくなります。
チームでClaude Codeを使う場合は、誰が差分を確認し、どの段階でコミットするかを決めておくと、品質がそろいます。業務に合わせた導入や確認の仕組みづくりは、PLaiのAI社員導入支援でも相談できます。
