Claude を VS Code で使う方法｜拡張機能の入れ方と起動手順

Claude Code for VS Code とは — 公式拡張で diff レビューが標準搭載

Claude Code for VS Code は Anthropic が公式に配信している VS Code 拡張機能で、CLI 版 Claude Code に ネイティブ GUI をかぶせたものです。Marketplace の提供元は Anthropic、現行バージョンは 2.1 系で、VS Code 1.98.0 以降を要件としています(公式ドキュメント)。

拡張をインストールすると CLI も同梱されるため、ターミナルで claude コマンドを叩く高度な用途にもそのまま接続できます。Anthropic 自身が 「VS Code で Claude Code を使う推奨経路」 と明記しており、Windsurf や Kiro など VS Code フォークでも同じ拡張が動作します。

Cursor 専用記事もありますが、本記事は 素の VS Code に絞ります。Cursor で使いたい場合は Claude を Cursor で使う を参照してください。

動作要件 — VS Code 1.98.0 以降と Anthropic アカウント

導入前に揃えておく前提は 2 つだけです。

1. VS Code 1.98.0 以降(Help → About で確認)
2. Anthropic アカウント(Pro / Max / Team / Enterprise いずれかのサブスクリプション、または Bedrock / Vertex AI / Microsoft Foundry 経由のプロバイダ設定)

無料の claude.ai アカウントでは認証が通らない点は Mac 版 CLI と同じです。料金プランは Claude 料金プラン で整理しています。Node.js を別途入れる必要はなく、拡張本体にバイナリが同梱されています(公式ドキュメント)。

インストール手順 — ワンクリックリンクと Extensions 検索の 2 経路

経路 A: ワンクリックリンクから入れる(最短)

公式ドキュメントに掲載されている VS Code 専用リンク vscode:extension/anthropic.claude-code をブラウザや VS Code のアドレスバーで開くと、Marketplace ページが立ち上がり Install ボタンが出ます。これが最も早い経路です。

経路 B: Extensions パネルで検索する

VS Code を開いたあと、以下の手順で導入します。

1. Cmd+Shift+X(Mac)または Ctrl+Shift+X(Windows / Linux)で Extensions 画面を開く
2. 検索ボックスに「Claude Code」と入力する
3. 提供元が Anthropic のものを選び、Install をクリックする
4. インストール後に Spark アイコンが出ない場合は Command Palette から「Developer: Reload Window」を実行する

VS Code フォーク(Windsurf・Kiro 等)で Marketplace が通らない場合は、Open VSX registry からも入手できます。

初回サインインと Spark アイコンの 4 つの起動経路

インストール後、最初に Claude Code パネルを開くと Sign in 画面が出ます。ボタンを押すとブラウザに飛び、Anthropic アカウントで認可を完了するとパネルに戻ります。Spark アイコン(✦)は拡張の起点で、以下 4 ヶ所から呼び出せます。

1. エディタ右上のツールバー — ファイルを開くと表示される最短アクセス
2. 左の Activity Bar の Spark アイコン — セッション履歴を一覧表示、常時可視
3. Command Palette(Cmd+Shift+P / Ctrl+Shift+P)で「Claude Code」を検索
4. 画面右下ステータスバーの「✱ Claude Code」 — ファイル未オープンでも有効

ANTHROPIC_API_KEY をシェルに設定しているのに毎回サインインを求められる場合は、ターミナルから code . で VS Code を起動する と環境変数を継承します(公式ドキュメント)。

主要機能 — diff レビュー・@-mention・プランモード・チェックポイント

ここからが拡張ならではの差別化機能です。

diff の事前レビュー: Claude がファイルを編集しようとすると、変更前後を side-by-side で表示し承認を求めます。差分画面で手直しすれば、その変更を Claude に伝達したうえで採用されます。

@-mention で context を絞り込む: プロンプト欄で @ファイル名 を打つと fuzzy match でファイルを引き、@app.ts#5-10 のように行範囲も渡せます。エディタで選択中のテキストは自動で context に含まれ、Option+K(Mac)/ Alt+K(Windows / Linux)で行番号付き @-mention を即挿入できます。

プランモード: プロンプト欄下部のモード切替で Plan を選ぶと、Claude が実装計画を Markdown で提示し、承認するまで実ファイルを書き換えません。暴走防止の鉄則機能で、コメントを書き込んでフィードバックも返せます。

チェックポイントによる巻き戻し: 会話の任意のメッセージにホバーすると Rewind ボタンが出て、「会話を分岐」「コードだけ戻す」「両方戻す」の 3 択で過去状態に戻せます。実装方針を試行錯誤するときに事故を減らせる仕組みです(公式ドキュメント)。

キーボードショートカット早見表

macOS Tahoe 以降で Cmd+Esc が反応しないのは、システムの Game Overlay ショートカットに食われているためで、Settings → Keyboard → Keyboard Shortcuts → Game Controllers の Game Overlay チェックを外せば復帰します。

CLI との使い分け — terminal で claude を叩くケース

拡張と CLI は 同じ会話履歴を共有 します。VS Code のタブで進めた会話を、内蔵ターミナルで claude --resume を叩けばそのまま続きから再開でき、/ide で再接続も可能です。

CLI 専用の機能(タブ補完、! から始まるシェルショートカット、MCP サーバの追加コマンド claude mcp add)は引き続きターミナル側で叩きます。逆に diff の GUI レビューやプランモードの Markdown コメントは拡張だけの体験です。両方を共存させ、面で見るときは拡張、ワンライナーは CLI という分担が現実解になります。

トラブルシューティング — Spark 出ない・サインイン繰り返し・拡張入らない

最後によくある詰まりどころを 3 件だけ。

1. Spark アイコンが出ない: ファイルを 1 つ開いて再確認、VS Code 1.98 以上を Help → About で確認、Cline などの競合 AI 拡張を一時無効化、Restricted Mode を解除
2. サインインが繰り返し出る: ターミナルから code . で起動して環境変数を継承、または Claude アカウントでブラウザサインイン
3. 拡張が入らない: VS Code フォーク(Windsurf 等)では Open VSX registry からインストール、または内蔵ターミナルで claude を直接実行

それでも解決しなければ、Developer: Reload Window を Command Palette から実行し、最後に GitHub Issues に詳細を添えて起票するのが Anthropic 推奨の窓口です。Claude Code 全体の入門は Claude Code 入門 と Claude Code Mac 入門 も合わせて読むと、CLI と拡張の関係が立体的に見えます。