Claude Code VSCode拡張｜インストールと差分

Claude Code VSCode拡張｜インストールと差分

Claude Code VS Code 拡張とは

Claude Code の VS Code 拡張は、Anthropic が提供する エージェント型コーディング支援 を IDE 内にネイティブ統合する公式拡張です。ターミナルで claude を起動する CLI 方式に加え、グラフィカルなチャットパネル、side-by-side diff、@-mention によるファイル参照、権限モードの切り替え など、VS Code ユーザー向けの操作系をまとめて提供します。

公式ドキュメント Use Claude Code in VS Code では、VS Code で Claude Code を使う場合 拡張の利用が推奨 と明記されています。本記事はその公式情報を軸に、インストールから CLI との差分、Cursor への導入、つまずきの回避までを整理します。macOS 中心の全体像は セットアップ完全ガイド を、Windows 固有の注意は Windows 導入記事 を参照してください。

前提環境

拡張は チャットパネル用に CLI を同梱 しますが、統合ターミナルで claude と打つには Overview の native install 等で standalone CLI を入れる必要があります。この二層構造は後述の「拡張 vs CLI」で詳述します。

インストール手順

VS Code からインストール

1. Cmd+Shift+X（Mac）または Ctrl+Shift+X（Windows/Linux）で Extensions を開く
2. 「Claude Code」 を検索し Install
3. 表示されない場合は Developer: Reload Window を Command Palette から実行

公式ページの Install for VS Code リンクからも直接インストールできます。Open VSX 経由の VS Code フォーク（Devin Desktop、Kiro 等）でも同様に検索可能です。拡張が入らない環境では、CLI を入れて統合ターミナルから claude を使う代替経路が公式に案内されています。

Cursor へのインストール

VS Code ドキュメント には Install for Cursor リンクもあり、Cursor でも同じ拡張を導入できます。Cursor 固有の Agent 機能（Cmd+I 等）とは別系統の Anthropic 公式拡張である点を理解しておくと混乱しません。

API キー利用時の起動方法

シェルに ANTHROPIC_API_KEY を設定しているのに拡張がサインインを求める場合、VS Code がシェル環境を継承していない可能性があります。公式は code . でターミナルから VS Code を起動 し環境変数を継承するか、Claude アカウントでサインインするよう案内しています。

# リポジトリ直下で VS Code を起動（環境変数を継承）
code .

拡張の基本操作：Spark アイコンとパネル

VS Code 全体で Spark アイコン が Claude Code の目印です。

初回はブラウザで Sign in が必要です。Not logged in · Please run /login と出たら、Command Palette から Developer: Reload Window でサインイン画面を再表示できます。

@-mention と Option+K / Alt+K

Claude Code 拡張の強みの一つが @-mention です。プロンプトで @ の後にファイル名やフォルダ名を入力すると、該当コンテンツをコンテキストに取り込めます。ファジーマッチに対応しているため、@auth のように部分名でも auth.js や AuthService.ts を候補にできます。

> @src/components/ の構成を説明して
> @auth.ts のエラーハンドリングをレビューして

エディタで範囲選択している場合、Claude は選択行を自動認識します。Option+K（Mac）/ Alt+K（Windows/Linux）を押すと、現在ファイルのパスと行番号付き参照（例: @app.ts#5-10）をプロンプトに挿入できます。大きな PDF については「ページ 3–10 だけ読んで」などページ指定も可能です（公式ドキュメント記載）。

side-by-side diff と編集レビュー

Claude がファイルを編集しようとすると、元ファイルと提案変更の side-by-side 比較 が表示され、許可を求めます。Accept / Reject のほか、diff ビュー上で提案内容を直接編集してから Accept することもできます。その場合 Claude には「ユーザーが変更を加えた」旨が伝わり、元の提案とファイル内容が一致しない前提で会話が続きます。

このフローは CLI の diff 連携と思想は同じですが、拡張では グラフィカルなレビュー UI が標準です。権限モードを Edit automatically にすると、都度の確認なしに編集が進みます（後述）。

権限モード：Manual / Plan / Edit automatically

プロンプトボックス下部の モードインジケータ から、セッションごとの権限挙動を切り替えられます。デフォルトは VS Code 設定 claudeCode.initialPermissionMode（既定 default）に従います。

設定例（VS Code の settings.json）:

{
  "claudeCode.initialPermissionMode": "plan"
}

bypassPermissions はサンドボックス等の特殊環境向けで、設定 allowDangerouslySkipPermissions が必要です。日常開発では Manual または Plan から始め、慣れた範囲で Edit automatically に上げるのが安全です。詳細は 権限モード記事 も参照してください。

VS Code 拡張 vs standalone CLI

公式の比較表（VS Code extension vs. CLI）は次のとおりです。

拡張を入れても PATH に claude は追加されません。 統合ターミナル（Ctrl+` / Cmd+`）で claude mcp add や claude --resume を使うには、Overview のインストール手順で standalone CLI を入れてください。外部ターミナルから使う場合は、Claude Code 内で /ide を実行して VS Code と接続します。

Checkpoints（拡張）

拡張でも checkpoints が使え、メッセージにホバーすると rewind ボタンが現れます。

• Fork conversation from here: 会話を分岐（コード変更は維持）
• Rewind code to here: この時点までファイルを巻き戻し（会話履歴は維持）
• Fork conversation and rewind code: 分岐＋コード巻き戻し

CLI 専用機能が必要なときだけターミナルに切り替える、という使い分けが現実的です。

設定の二層構造

拡張の設定は次の2系統に分かれます。

1. VS Code 拡張設定（Cmd+, → Extensions → Claude Code）
2. ~/.claude/settings.json（CLI と共有：allowed commands、hooks、MCP 等）

よく触る拡張設定:

settings.json には "$schema": "https://json.schemastore.org/claude-code-settings.json" を付けると補完が効きます。

プラグインと MCP（拡張 UI）

プロンプトで /plugins を入力すると、プラグインの GUI 管理が開きます。Marketplace の追加、Install scope（user / project / local）の選択などが可能で、CLI の plugin コマンドと設定は共有されます。MCP は / メニューの Customize からも触れますが、新規 MCP サーバーの追加は CLI 経由 が基本です（MCP 入門 参照）。

よくあるつまずき

FAQ

Q. VS Code 拡張だけで Claude Code は完結しますか。 チャットパネルと diff レビューは拡張だけで足ります。ただしターミナルでの claude、全コマンド・Skills、一部 MCP 操作、Tab 補完、! ショートカットは CLI が必要です。

Q. 最低バージョンはいくつですか。 公式要件は VS Code 1.94.0 以上 です。古い VS Code では拡張がインストールできない、または機能が制限される可能性があります。

Q. Cursor にも同じ拡張を入れられますか。 はい。公式に Install for Cursor が用意されています。Cursor 標準の AI 機能と併用する場合、どちらを主エージェントにするかを決めておくと設定がぶれません。

Q. Manual / Plan / Edit automatically はどう選べばよいですか。 初めてのリポジトリでは Manual または Plan を推奨します。テスト済みの定型的な修正だけ Edit automatically に上げると、意図しない大規模変更を防げます。

Q. Option+K / Alt+K が効きません。 エディタにフォーカスがある状態で押してください。Claude パネルにフォーカスがあるときは Insert @-Mention Reference 用のショートカット挙動が異なります。Command Palette から同名コマンドも確認できます。

Q. 料金は別途かかりますか。 拡張自体に追加料金はありません。Claude Code は Pro 以上のサブスクまたは API 従量が必要です。料金記事 を参照してください。

関連記事

• Claude Code セットアップ完全ガイド
• Claude CodeをWindowsで使う｜導入とWSL選択
• Claude Code料金｜Pro・Max・APIの違いと目安
• Claude Code の権限モード

手順は code.claude.com/docs/en/vs-code の更新に追随します。インストール前に最新版を確認してください。

最終確認日: 2026-07-23