Claude Code for VS Codeとは、Anthropicのエージェント型コーディング支援「Claude Code」をVisual Studio Codeに統合する拡張機能です。
提案→差分レビュー→許可の流れで安全に編集でき、@メンションや/コマンドで文脈・操作を制御できます。
本記事では導入要件、基本の使い方、CLI版との違い、料金の考え方まで解説します。
Claude Code for VS Codeとは
Claude Code for VS Codeは、Anthropicのエージェント型コーディング支援「Claude Code」をVS Codeに統合する拡張機能です。IDEと統合されたことで、より多くの開発者にとって利用しやすい形式となりました。
ターミナル操作中心であったClaude Code CLIとの違いを踏まえつつ、Claude Code for VS Codeの使いどころや導入のための要件について説明します。
一般提供（GA）版Claude Code for VS Codeのポイント
Claude Code for VS Codeは、Anthropicが提供するエージェント型コーディング支援ツール「Claude Code」を、Visual Studio Code上で直接利用できるようにする拡張機能です。
ターミナル操作を前提としていたClaude Codeを、IDEで使用できるようにすることで、AIによる変更を視覚的に確認しながら開発を進められます。
Claude Code for VS Codeは単なるコード補完ではなく、「計画の提示 → 変更案の確認 → 実行判断」を人間と協調しながら進める開発プロセスが特徴です。自然言語で目標やタスクを伝えると、Claudeはその内容をもとに実行計画（Plan）を立て、必要なコード編集や操作を提案します。
Claudeによる変更は自動的に適用されるのではなく、人間による確認・承認を経て変更が行われるものです。AIが主体的に動きつつも、最終判断は人間が行うことで安全性が保たれる仕組みとなっています。
またClaude Code for VS CodeではIDEで完結するシームレスな体験も特徴的です。
コード生成・修正、差分レビュー、会話形式でのやりとり等をすべてVisual Studio Code内で行えるため、ツールを切り替える必要がありません。ボタンによるモード切り替えやファイルの差分表示等、IDEならではのUIも活かしてスムーズな開発体験を提供します。
【比較表】Claude Code for VS CodeとClaude Code CLIの違い
Claude Codeはもともとターミナル上で利用するCLIツールとして提供されており、そのIDE版として位置づけられるのがClaude Code for VS Codeです。両者はClaude Codeを利用する点では共通していますが、操作方法と利用できる機能が異なります。
Claude Code CLIは、スクリプトや自動化処理からClaude Codeを呼び出したい場合や、IDEに依存しない環境での利用に最適です。一方、Claude Code for VS Codeはエディタと密接に連携しているため、どのファイルを対象に、どの変更が行われるのかを視覚的に把握しながら作業したいケースに向いています。
なお、VS Code拡張ではClaude Code CLIのすべての機能が利用できるわけではありません。それぞれ利用できる機能は以下の通りです。
| 機能 | Claude Code for VS Code | Claude Code CLI |
|---|---|---|
| コマンドとskills | サブセットが使用可能 （利用可能なコマンドは /で確認） | すべて |
| MCPサーバー設定 | 直接の設定は不可 （CLI経由で設定、拡張機能で使用可能） | 使用可能 |
| チェックポイント | 使用可 | |
! bash ショートカット | 使用不可 | |
| タブ補完 | 使用不可 |
表のとおり、Claude Code for VS CodeではVS CodeのターミナルからCLI版の一部のコマンド（claudeコマンド）を実行できます。つまり、Claude Code for VS CodeはIDE上での操作を重視しつつ、補助的なCLI操作も可能な設計になっているのです。
Claude Codeの詳細については以下の記事もご確認ください。
Claude Code for VS Codeの活用が向いているケース/向いていないケース
IDE統合が特徴となるClaude Code for VS Codeは、変更内容を理解・確認しながら安全にAIを活用したい場合の利用が向いています。
具体的には既存コードのリファクタリング・テストコードの補完・ドキュメント整備など、「差分を確認したうえで判断が必要」となる作業で特に有効です。実際にドキュメントを変更する前に変更内容の大まかな方針を確認できるため、意図しない変更を防ぎやすい仕組みとなっています。
一方で自動実行を前提とした運用や、人間のレビューを挟まずに変更を適用する使い方には向いていません。Claude Code for VS Codeには、Claude Codeによる変更を自動で承認するモードもありますが、基本的には手動での承認・レビューが推奨されています。
| 項目 | タスクの性質 |
|---|---|
| 向いているケース | 変更を確認しながら進めたい GUIで変更内容を確認したい |
| 向いていないケース | 人間の確認なしで変更を適用したい Visual Studio Codeに未対応の機能を利用したい |
つまりClaude Code for VS Codeは「AIにすべて任せる」のではなく、人間によるチェックを前提に開発を補助するツールとして位置づけられます。
Claude Code for VS Codeの導入要件
Claude Code for VS Codeを利用するための条件は以下の通りです。
- Visual Studio Code 1.98.0 以上
- Anthropicアカウント、またはClaude Codeが利用可能なサードパーティプロバイダーのアカウント
Claude Code for VS CodeはVisual Studio Codeの拡張機能として利用するため、指定されたバージョン以上のVisual Studio Codeの利用が前提になります。
Claude Code for VS Codeの利用には、Claude Codeが利用可能なアカウントによるサインインも必要です。基本的にはAnthropicアカウントでサインインしますが、環境によってはAmazon BedrockやGoogle Vertex AIなど、サードパーティプロバイダー経由での利用も可能です。
サインイン後、Visual Studio Code内でClaude Codeパネルが有効化され、Claude Code for VS Codeを利用開始できます。
Claude Code for VS Codeの使い方｜セットアップから基本の使い方まで
Claude Code for VS Codeを使い始めるためには、Visual Studio CodeとClaude Codeでの設定が必要です。
各々のセットアップに加え、Claude Code for VS Code起動後の基本的な操作について、実際の画面スクリーンショットを示しながら解説します。
VS Code拡張機能のインストール手順
Claude Code for VS Codeは、Visual Studio CodeのExtension Marketplaceから通常の拡張機能と同様にインストール可能です。具体的な操作手順は以下の通りです。
Visual Studio Codeがパソコンにインストールされていない場合は、利用中のOSに合わせて以下よりインストールします。
Webブラウザにvscode:extension/anthropic.claude-codeを入力し、「Visual Studio Codeを開く」をクリックします。
Claude Code for VS Codeのインストール画面が表示されるので、「Install」ボタンをクリックします。
以上の手順により、利用中のVisual Studio CodeへClaude Code for VS Codeがインストールされます。
Claude Codeのサインイン
Claude Code for VS Codeを利用するためには、Claude Codeが利用可能なアカウントでのサインインが必要です。今回は、Anthropicアカウントを使ったサインイン方法を紹介します。
Visual Studio Code上でSparkアイコンをクリックし、Claude Code for VS Codeパネルを起動します。起動するとサインインの選択肢が表示されるので、サインイン可能な方法をクリックします。
今回はサブスクリプションを購入しているアカウントでサインインするため、「Claude.ai Subscription」をクリックしました。
STEP1でサインイン済みのWebブラウザ上で、Claude Code接続の承認画面が表示されるので、「承認する」をクリックします。
Webブラウザ上に表示されるAuthentication Codeをコピーし、Visual Studio Codeの入力欄に入力します。
以上の手順により、Visual Studio CodeでClaude Code for VS Codeが利用可能になります。
基本フロー｜タスク依頼→提案→差分レビュー→許可/修正まで
Claude Code for VS Codeの利用は、「タスク依頼→提案→差分レビュー→許可/修正」というプロセスが基本的な流れになります。
実際の操作画面は以下の通りです。
編集するファイルを開き、Visual Studio Code画面右上に表示されるSparkアイコンをクリックします。
Visual Studio Code画面右にClaude Code for VS Codeパネルが表示されるので、右下のプロンプトボックスにプロンプト（指示）を入力し、「↑」ボタンをクリックします。
プロンプトを入力すると、以下のとおり変更内容が提案されます。ファイルの変更内容は、差分が分かるように表示されるので、内容を確認します。
変更内容に問題がなければ、「Yes」ボタンをクリックして変更を許可します。変更内容の見直しが必要な場合は、「Tell Claude what to do instead」と表示されているテキストボックスに修正の指示を入力します。
「タスク依頼→提案→差分レビュー→許可/修正」の基本プロセスは上記の通りです。
上記の手順で変更を受け入れると、変更内容が実際にソースコードファイルに反映されます。また、Claude Code for VS Codeの画面でも変更内容のサマリーが確認可能です。
Claude Code for VS Codeの活用ポイント｜安全なワークフローの実現
Claude Code for VS Codeでは単にコードを生成するだけではなく、人間によるレビュー範囲や参照するコンテキストの明示等の細やかなカスタマイズが可能です。
実践的にClaude Code for VS Codeを使うための、プロンプトボックス・スラッシュコマンドの活用や@メンションの使い方を紹介します。
プロンプトボックスで許可モードを切り替え｜通常モード・自動受け入れモード・プランモード
Claude Code for VS Codeではプロンプトボックスから許可モードを切り替えることで、Claude Codeによる操作の自由度を制御できます。
現在、許可モードとして「Ask before edits（通常モード）」、「Edit automatically（自動受け入れモード）」、「Plan mode（プランモード）」を選択できます。
それぞれのモードの動作は以下の通りです。
- Ask before edits … Claudeによるドキュメントの変更ごとに人間の承認を求める
- Edit automatically … Claudeによるドキュメント変更が自動で行われる
- Plan mode … Claudeが実行前に「どのような変更を行うか」という計画（Plan）を提示し、その内容を確認・承認してからドキュメントの変更に進む。
許可モードはプロンプトの入力欄（プロンプトボックス）の左下をクリックすることで切り替わります。
スラッシュコマンドの活用（/usage,/compact等）
Claude Code for VS Codeでは、プロンプト入力欄（プロンプトボックス）で「/」から始まるコマンドを利用できます。
例えば/usageと入力することで、利用しているAnthropicアカウントの契約内容や現在の使用量が確認可能です。
実用的なコマンドとして、現在の会話コンテキストを要約・圧縮する/compactコマンドがあります。Claude Codeとの会話が長くなった際に不要な文脈を整理し、以降のドキュメント変更のクオリティを維持する目的で利用できます。
その他に利用可能なコマンドは、プロンプトボックスに /と入力することで確認可能です。
@メンションによるコンテキスト参照（ファイル・フォルダ・選択範囲）
Claude Code for VS Codeでは、@メンションを使ってClaudeに参照させるコンテキストを明示できます。具体的には、特定のファイル、特定のフォルダ、ファイル内のコード範囲が指定可能です。
特定のファイル/フォルダは @ファイル名または @フォルダ名 によって指定できます。
ファイル内のコード範囲は、@file.ts#10-30 のように@ファイル名#開始行番号-終了行番号によって参照させられます。
@メンションを使うことで、より意図したコンテキストに基づいた指示ができるため、Claude Codeによる編集の精度を高める効果が見込めます。
Claude Code for VS Codeのセキュリティとプライバシー
AIツールを利用する場合、セキュリティやプライバシー保護の観点から入力データの取り扱いの確認が重要です。Claude Code for VS Codeでは以下の通り、利用者が入力したデータのプライバシーが保護されることが明示されています。
コードはプライベートのままです。Claude Code はコードを処理して支援を提供しますが、モデルのトレーニングには使用しません。
出典：Claude Code docs
またClaude Code for VS Codeを安全に利用するために、リスクを軽減するための対策として以下のアプローチが紹介されています。
- 信頼できないコードで作業する場合は、Visual Studio CodeのRestricted Modeを使用
- 手動で承認を行う通常モード・プランモードを使用
- 変更を承認する前に変更内容を慎重に確認する
許可モードを適切に使い分け、人間によるレビューを行うことが安全な運用の前提となります。
Claude Code for VS Codeのトラブルシューティング
Claude Code for VS CodeはClaude CodeとVisual Studio Codeが統合されているため、うまく動作しない場合に原因の切り分けが難しい側面があります。
Claude Code for VS Codeを使用する場合によくある問題について、確認すべきポイントや対処方法を整理します。
Sparkアイコンが表示されない場合のチェックポイント
Claude Code for VS Codeでは、エディタ右上に表示されるSparkアイコンからClaude Codeパネルを開くことができます。状況によってはこのアイコンが表示されないことがありますが、その場合は以下の対応により解消されることがあります。
- フォルダではなく、ファイルを開いていることを確認
- Visual Studio Codeが指定のバージョン以上かを確認
- ワークスペース信頼が制限モードになっていないかを確認
- Visual Studio Codeを再起動
- 競合する拡張機能（Cline、Continue等）を無効化
Visual Studio Codeのバージョンは、Visual Studio Code画面上部の入力欄に>Help: About と入力すると以下の通り表示されます。
ワークスペース信頼のモードについては、 Visual Studio Code画面上部の入力欄に>Workspaces: Manage Workspace Trustと入力すると以下の通り確認できます。
Visual Studio Codeのバージョンやワークスペース信頼に問題がなく、ファイルを開いているにもかかわらずSparkアイコンが表示されない場合は、Visual Studio Codeの再起動や競合する拡張機能の無効化を試してください。
Claude Codeから応答がない場合のチェックポイント
Claude Code for VS Codeでプロンプトを送信しても応答がない場合は、以下の対応により解消されることがあります。
- インターネット接続の確認
- 新しい会話を開始
- CLIを試す
Claude Code for VS Codeを利用するためには、インターネット通信が必要です。
企業ネットワークやプロキシを利用している環境では、Claude Codeに接続できず応答されないケースがあります。そのため、利用中のネットワーク環境をまずは確認しましょう。
一時的な問題であれば新しい会話を始めることで、Claude Code for VS Codeを問題なく利用できることもあります。それでも問題が解決しない場合は、Visual Studio Codeのターミナルで claude を実行してより詳細なエラーメッセージが表示されるかどうかを確認してください。
Claude Code for VS Codeの料金体系｜サブスクリプションとAPI従量課金の違い
Claude Code for VS Codeを業務利用する場合、料金体系の理解も欠かせません。特に、Claude Codeの料金体系は大きくサブスクリプション購入とAPI課金に分かれており、利用状況によって適切な購入方法が異なります。
Claude Code for VS Code利用時のコスト構造と、Claude Codeの購入方法をどのように選択するべきかについてポイントをお伝えします。
【比較表】サブスクリプション/API料金の違いと判断ポイント
Claude Code for VS Codeを利用する際、支払い方法はサブスクリプション購入とAPI使用量に基づく従量課金の2種類があります。
サブスクリプションは、チャット経由でのClaude利用やClaude Code等を人が直接操作することを前提とした定額モデルです。一方、API課金はClaudeをアプリケーションやシステムから呼び出す形式での利用が想定されています。使用するモデル別に入力・出力トークン数あたりの料金が設定されており、消費したトークン数に応じて課金されるものです。
Claude Codeをどのように使用するのかと、コスト管理の難易度がサブスクリプションを購入するか、API課金で利用するかが判断ポイントとなります。
| 判断ポイント | サブスクリプション | API課金 |
|---|---|---|
| 操作主体 | 人がClaude Codeを直接操作 | システムがClaude Codeを呼び出す |
| 利用形式 | 対話形式 | 自動実行・バッチ処理 |
| 自動実行との相性 | 低い | 高い |
| コスト管理の難易度 | 低い （月額固定） | 高い |
| 向いている使用用途 | 人間が主導する開発 日常的な利用 | アプリやツールへの組み込み 利用量が変動する |
サブスクリプションプランの料金とメニューの違い
Claudeのサブスクリプションプランには、個人向けのPro・Maxプランとチーム向けのTeam・Enterpriseプランがあります。すべての有料プランでClaude Code for VS Codeが利用可能ですが、プランごとに使用制限が異なります。
それぞれのプランの料金は以下の通りです。
| 項目 | Pro | Max | Team | Enterprise | |
|---|---|---|---|---|---|
| プラン構成 | 単一 | 2ティア | 2シート | 個別契約 | |
| Claude Code for VS Code | 利用可 | 利用可 | Premiumのみ利用可 | Premium相当で利用可 | |
| 月額料金 | USD | $20 | $100 $200 | $25 $125 | 要問い合わせ |
| 円 | ¥3,100 | ¥15,500 ¥31,000 | ¥3,875 ¥19,375 | 非公開 | |
| 年額プラン （月相当） | $17 | なし | $20 $100 | 契約条件次第 | |
| 使用量 （セッション） | 基準 | Proの5～20倍 | Proの6.25倍 | 課金モデル次第 | |
| 使用制限の考え方 | 上限あり | 上限あり | 上限あり | 明確な上限なし 消費に応じ課金 | |
Claude Code for VS Codeの使用量と料金を踏まえて、適切なプランを選択しましょう。
API従量課金の考え方（コストシミュレーション付）
API従量課金の場合、使用するモデルごとに設定されているトークン単価をもとに、消費したトークン数に応じて支払金額が決定されます。
2026年2月時点では、Claude Code for VS Codeで使用できるモデルはClaude Opus4.6/Sonnet4.5/Haiku4.5の3種類です。
Claude Opus4.6/Sonnet4.5/Haiku4.5それぞれのトークンあたりの料金は以下の通りです。なお英語の場合は、目安として4文字前後で1トークンを消費します。
| モデル | 入力（100万トークン） | 出力（100万トークン） | ||
|---|---|---|---|---|
| USD | 円換算 | USD | 円換算 | |
| Claude Opus 4.6 | $5 | ¥775 | $25 | ¥3,875 |
| Claude Sonnet 4.5 | $3 | ¥465 | $15 | ¥2,325 |
| Claude Haiku 4.5 | $1 | ¥155 | $5 | ¥775 |
簡単なソースコードを修正する場合のコストシミュレーションは以下の通りです。
- シナリオ：Claude Opus 4.6を使用し、プロンプト100文字を入力、ソースコード5,000文字が出力される
- 消費トークン： 入力トークン25 、出力トークン1,250
- 料金：25 × ($5 / 1,000,000) + 1,250 × ($25 / 1,000,000) = $0.031375 ≒ ¥4.86
＝ 約5円
まとめ
Claude Code for VS CodeはVisual Studio Code上でClaude Codeを使い、人間が最終判断する開発フローを組み込める拡張機能です。
単純なコードの変更だけでなく、プロンプトボックスから許可モード（通常/Plan/自動承認）を切り替えたり、@メンションで参照するフォルダ・ファイルや行範囲を指定することで、より精度の高いコード支援を可能にします。
料金はサブスクリプション（Pro/Max/Team/Enterprise）とAPI従量課金の2種類があり、用途とコスト管理方針に応じて料金体系を選択します。Claude Code for VS Codeの具体的な操作手順を紹介していますので、まずはスモールスタートで試してみてはいかがでしょうか。