Claude Code VS Code拡張機能の使い方 — インストール手順とCLI・JetBrainsとの違い
Claude CodeのVS Code拡張機能の入れ方と使い方をまとめます。CursorなどVS Codeフォークへの導入、ターミナルCLIとの機能差、JetBrainsプラグインとの違いも比較表で確認できます。
Claude CodeのVS Code拡張機能とは
Claude CodeのVS Code拡張機能とは、AIコーディングエージェントのClaude CodeをVS Codeのパネル上でグラフィカルに操作できる公式拡張です。公式ドキュメントはこれを「VS CodeでClaude Codeを使用する推奨方法」と位置付けており、ターミナル中心だったClaude Codeをチャットパネルと差分ビューで扱えるようになります。
できることはターミナル版と地続きです。Claudeが提案した編集を差分で確認してから受け入れる、ファイルを@メンションで指定する、実行前のプランを確認・編集する、複数の会話をタブで並行して進める、といった操作がエディタを離れずに完結します。拡張機能にはCLI(コマンドラインインターフェース)本体が同梱されているため、CLIを別途インストールしていなくても統合ターミナルから claude コマンドを使えるのも特徴です。
前提条件
必要なものは2つだけです。VS Code 1.98.0以上と、サインインに使うAnthropicアカウントがあれば始められます。
- VS Code 1.98.0以上(Help → Aboutでバージョンを確認できます)
- Claudeサブスクリプション(Pro / Max / Team / Enterprise)、またはClaude Console(プリペイドクレジット付きAPIアクセス)のアカウント
アカウントは拡張機能を初めて開いたときのサインインで使います。Amazon BedrockやGoogle Vertex AIといったサードパーティプロバイダー経由でClaudeを利用している組織では、サインインの代わりにプロバイダー設定を行う流れになります(設定は ~/.claude/settings.json でCLIと共有されます)。
インストール手順
インストールは拡張機能ビューで検索するだけです。CLIのセットアップが先に済んでいる必要はありません。
手順1: 拡張機能ビューで「Claude Code」を検索する
Cmd+Shift+X(Mac)または Ctrl+Shift+X(Windows/Linux)で拡張機能ビューを開き、「Claude Code」を検索してインストールをクリックします。発行元がAnthropicの anthropic.claude-code が対象です。インストール後に拡張機能が表示されない場合は、VS Codeを再起動するか、コマンドパレットから「Developer: Reload Window」を実行します。
手順2: パネルを開いてサインインする
インストール後、パネルを初めて開くとサインイン画面が表示されます。「Sign in」をクリックし、ブラウザで認可を完了すれば準備完了です。サインイン後には「Learn Claude Code」というオンボーディングのチェックリストが表示され、基本操作をその場で試せます。
CursorなどVS Codeフォークに入れる場合
拡張機能はVS Code本体だけでなく、VS Codeから派生したエディタでも動きます。Cursorには公式のインストールリンクが用意されており、Devin DesktopやKiroといった他のフォークにも導入できます。エディタの拡張機能ビューで見つからない場合はOpen VSXレジストリから取得します。それでもインストールできないエディタでは、統合ターミナルで claude を実行すればCLIとして利用可能です。CursorのAI機能との比較や乗り換えの観点はCursorからClaude Codeへの移行ガイドで扱っています。
基本の使い方
操作の起点は✱(Spark)アイコンです。開く・尋ねる・差分を確認する、の3ステップが基本サイクルになります。
パネルの開き方
Claude Codeを開く方法は4つあります。最速はエディタ右上の✱アイコンのクリックです(ファイルを開いているときだけ表示されます)。ほかに、左のアクティビティバーの✱アイコンからセッション一覧を開く、コマンドパレットで「Claude Code」と入力する、ウィンドウ右下のステータスバーの「✱ Claude Code」をクリックする、という導線があります。パネルはドラッグで右サイドバー・左サイドバー・エディタタブのどこにでも配置でき、位置は記憶されます。
ファイルを@メンションで指定する
プロンプトで @ に続けてファイル名やフォルダ名を入力すると、Claudeがその内容を読んだ上で回答します。あいまい一致に対応しているので部分的な名前でも見つかります。エディタでテキストを選択した状態なら、Option+K(Mac)/ Alt+K(Windows/Linux)で @app.ts#5-10 のような行番号付き参照をプロンプトに挿入できます。Shiftを押しながらファイルをプロンプトボックスへドラッグして添付する方法も使えます。
許可モードとPlanモード
プロンプトボックス下部のモード表示をクリックすると、Claudeの動き方を切り替えられます。通常モードでは各アクションの前に許可を求め、Planモードでは変更前に実行計画を提示して承認を待ちます。Planモードのプランはマークダウン文書として自動的に開き、インラインコメントでフィードバックを書き込んでから開始させることが可能です。自動受け入れモードにすると許可なしで編集が進みます。既定のモードはVS Code設定の claudeCode.initialPermissionMode で変更できます(default / plan / acceptEdits / bypassPermissions)。
編集の確認とチェックポイント
Claudeがファイルを編集するときは、元のコードと提案の並列比較が表示され、受け入れ・拒否・別の指示を選べます。受け入れる前に差分ビュー上で提案内容を直接手直しすることもでき、その場合はClaudeに変更が通知されます。
編集のやり直しにはチェックポイント機能があります。メッセージにマウスを乗せると巻き戻しボタンが現れ、「会話だけ分岐する」「コードだけ巻き戻す」「両方戻す」の3択から選べます。エージェントに大きめの変更を任せるときの安全網になります。
会話履歴とWeb版セッションの再開
パネル上部の「Session history」から過去の会話をキーワードや時間で探して再開できます。Web版のClaude Code(claude.ai)で開始したリモートセッションも、履歴ダイアログのRemoteタブからダウンロードしてローカルで続行可能です(Claude.aiサブスクリプションでのサインインが必要で、対象はGitHubリポジトリで開始したWebセッションのみ)。
主要ショートカットは次のとおりです。
| 操作 | Mac | Windows/Linux |
|---|---|---|
| エディタとClaudeのフォーカス切替 | MacCmd+Esc | Windows/LinuxCtrl+Esc |
| 新しいタブで会話を開く | MacCmd+Shift+Esc | Windows/LinuxCtrl+Shift+Esc |
| @メンション参照を挿入 | MacOption+K | Windows/LinuxAlt+K |
| 閉じたセッションタブを再び開く | MacCmd+Shift+T | Windows/LinuxCtrl+Shift+T |
拡張機能のVS Code設定(主なもの)
VS Code設定(Cmd+, / Ctrl+,)のExtensions → Claude Codeで拡張機能の挙動を変更できます。
| 設定 | 既定値 | 内容 |
|---|---|---|
| useTerminal | 既定値false | 内容GUIパネルの代わりにターミナルモードで起動 |
| initialPermissionMode | 既定値default | 内容新しい会話の許可モードの既定値 |
| preferredLocation | 既定値panel | 内容パネルの初期位置(sidebar / panel) |
| autosave | 既定値true | 内容Claudeの読み書き前にファイルを自動保存 |
| respectGitIgnore | 既定値true | 内容ファイル検索で.gitignoreパターンを除外 |
許可ルールやhooks、環境変数など拡張とCLIに共通する設定は ~/.claude/settings.json 側に書きます。
ターミナルCLIと拡張機能はどう違うか
結論から言うと、両者は「同じClaude Codeの別インターフェース」です。会話履歴・~/.claude/settings.json の設定・プラグインは拡張とCLIで共有されるため、どちらか一方に囲い込まれる関係ではありません。一部の機能はCLIだけにあり、必要なときだけ統合ターミナルに降りる使い分けになります。
| 機能 | CLI | VS Code拡張機能 |
|---|---|---|
| コマンドとスキル | CLIすべて利用可 | VS Code拡張機能サブセット(/ 入力で一覧表示) |
| MCPサーバー | CLI追加・管理とも可 | VS Code拡張機能追加はCLI経由、管理は /mcp から可 |
| チェックポイント | CLI対応 | VS Code拡張機能対応 |
! によるbashショートカット | CLI対応 | VS Code拡張機能非対応 |
| タブ補完 | CLI対応 | VS Code拡張機能非対応 |
CLIを使いたくなったら、統合ターミナル(Ctrl+` / Cmd+`)で claude を実行します。拡張機能が動いているVS Code内であれば、CLIから差分表示や診断共有などのIDE統合が自動で有効になります。外部ターミナルから接続する場合はClaude Code内で /ide を実行する流れです。
会話の行き来も自由です。拡張機能で始めた会話をCLIで続けるには、ターミナルで次を実行して対話的に選択します。
claude --resumeなおCLIを単体でインストールする場合は、macOS / Linux / WSLでは次のコマンドが使えます(Windowsを含むOS別の詳細はClaude Codeのインストール手順を参照してください)。
curl -fsSL https://claude.ai/install.sh | bashWindowsの場合はPowerShellで irm https://claude.ai/install.ps1 | iex を実行するか、winget install Anthropic.ClaudeCode でも導入できます。HomebrewユーザーはmacOSで brew install --cask claude-code という選択肢もあります(Homebrew・WinGet経由は自動更新されないため、定期的なupgradeが必要です)。
MCP(Model Context Protocol)サーバーで外部ツールを繋ぐ場合は、追加だけ統合ターミナルの claude mcp add で行い、有効化・無効化やOAuth認証の管理はチャットパネルの /mcp から行えます。サーバーの選び方や設定例はMCP実用ガイドにまとめています。共有設定の全体像はsettings.jsonの設定ガイドが参考になります。
JetBrainsプラグインとの違い
VS Code拡張機能とJetBrainsプラグインは設計が異なります。VS Code版はGUIチャットパネルが主役なのに対し、JetBrains版はIDE内のターミナルでCLIを動かし、そこにdiff表示や選択コンテキスト共有などのIDE統合を加える構成です。
| 観点 | VS Code拡張機能 | JetBrainsプラグイン |
|---|---|---|
| インターフェース | VS Code拡張機能GUIチャットパネル(ターミナルモードも選択可) | JetBrainsプラグインターミナルベース(CLIを実行) |
| 対応エディタ | VS Code拡張機能VS Code 1.98.0以上、Cursor等のフォーク | JetBrainsプラグインIntelliJ IDEA / PyCharm / WebStorm / Android Studio / PhpStorm / GoLandなど |
| CLI本体 | VS Code拡張機能拡張機能に同梱 | JetBrainsプラグイン別途インストールが必要 |
| 差分表示 | VS Code拡張機能パネル内+VS Codeのネイティブ差分 | JetBrainsプラグインIDEのdiffビューアに表示 |
| ファイル参照の挿入 | VS Code拡張機能Option+K / Alt+K | JetBrainsプラグインCmd+Option+K / Alt+Ctrl+K |
JetBrains版はJetBrainsマーケットプレイスの「Claude Code [Beta]」プラグインをインストールし、IDEを再起動して使います。IDEの統合ターミナルから claude を実行すれば、diffビューイング・選択範囲の自動共有・lintエラーなどの診断共有が有効になります。diffをIDE側に表示するかターミナルに留めるかは /config のdiffツール設定(auto / terminal)で切り替え可能です。リモート開発ではプラグインをローカルではなくリモートホスト側にインストールする点に注意が必要です。
どちらが良いかは主に使っているIDEで決まりますが、「プランをドキュメントとして開いてコメントを書き込む」「会話をタブで並行させる」といったGUI前提の体験はVS Code版だけのものです。JetBrains版は普段のIDEを変えずにClaude Codeを呼び出せることに価値があります。
よくあるつまずき
導入時に詰まりやすいポイントは3つです。いずれも公式ドキュメントに対処が明記されています。
Sparkアイコンが表示されない
エディタツールバーの✱アイコンはファイルを開いているときにしか表示されません。フォルダを開いただけでは出ない仕様です。それでも見つからない場合は、VS Codeのバージョン(1.98.0以上)を確認し、「Developer: Reload Window」で再読み込みします。ClineやContinueなど他のAI拡張機能との競合や、Restricted Mode(制限モード)のワークスペースでも動かないことがあります。ファイルを開かずに起動したいときは、右下ステータスバーの「✱ Claude Code」が常に使えます。
macOSでCmd+Escが効かない
macOS Tahoe以降では、システムのゲームオーバーレイ機能が Cmd+Esc を既定で奪うため、フォーカス切替が動かないことがあります。システム設定 → キーボード → キーボードショートカット → ゲームコントローラーでゲームオーバーレイのチェックを外すか、VS Codeのキーボードショートカットエディタで「Claude Code: Focus input」を別のキーに割り当て直すと解消します。
サインインを何度も求められる
シェルに ANTHROPIC_API_KEY を設定しているのにサインインを求められる場合、VS Codeがシェル環境を継承していない可能性があります。ターミナルから code . でVS Codeを起動すると環境変数が引き継がれます。「Not logged in · Please run /login」と表示されたときは、サインイン画面が自動的に再表示されるのを待ち、出てこなければウィンドウを再読み込みします。これ以外の起動・認証トラブルはClaude Codeでよくあるエラーの対処ガイドで症状別に確認できます。
よくある質問
VS Code拡張機能は無料で使えますか?
拡張機能そのものに追加料金はありません。ただしClaude Codeの利用にはClaudeサブスクリプション(Pro / Max / Team / Enterprise)またはClaude Consoleのアカウントが必要で、拡張機能からの利用量もそのプランの枠を消費します。プラン使用状況はプロンプトボックスの /usage で確認できます。
CLIを先にインストールしておく必要はありますか?
不要です。拡張機能にCLIが同梱されており、インストール後は統合ターミナルから claude コマンドをそのまま実行できます。逆にJetBrainsプラグインはCLI本体を別途インストールする前提です。
Cursorなど他のエディタでも動きますか?
動きます。Cursorには公式のインストールリンクがあり、Devin DesktopやKiroなどのVS Codeフォークにも導入できます。拡張機能ビューで見つからない場合はOpen VSXレジストリから取得し、それも難しいエディタでは統合ターミナルでCLIを使う方法が案内されています。
拡張機能で始めた会話をCLIで続けられますか?
できます。会話履歴は拡張機能とCLIで共有されており、ターミナルで claude --resume を実行すると過去の会話を検索して選択できるピッカーが開きます。設定(~/.claude/settings.json)やプラグインも双方から同じものが参照されます。
まとめ
VS CodeでClaude Codeを使うなら、公式拡張機能を入れるのが出発点です。拡張機能ビューで検索してサインインするだけで始められ、CLIが同梱されているため追加のセットアップは要りません。差分確認・Planモード・チェックポイントといったGUIならではの安全網を使いつつ、! ショートカットやタブ補完などCLI固有の機能が欲しい場面だけ統合ターミナルに降りる、という二刀流が現実的な使い方です。JetBrainsユーザーにはターミナルベースのプラグインが同等のIDE統合を提供します。コマンド体系や全体像を押さえたい場合はClaude Code完全ガイドが次の一歩になります。