Claude Code VS Code拡張機能の完全ガイド：インストールから使いこなしまで【2026年最新】

室谷代表取締役

今回はClaude Code VS Code拡張機能の話をしましょう。これ、.AI（ドットエーアイ）コミュニティでもかなり話題になっていて・・・拡張機能が出たことでターミナル苦手な人にもかなり届くようになったんですよね。

テキトー教師DotAI 認定講師

そうなんですよ。講座でもずっと「ターミナルで操作するのがハードル高い」って声が多かったんですが、VS Code拡張機能が出てから「あ、これなら使えます」って言う受講生さんが一気に増えました。

インストール数が890万を超えてますからね、現時点で。

室谷代表取締役

890万は数字としてすごいですよね。でも実は拡張機能を入れてもうまく使えていない人がかなり多いんですよ。

「インストールしたけど結局ターミナルのほうが速い」みたいな。本記事では、VS Code拡張機能の正しい使い方と、CLIとの違い・使い分けまで全部整理します。

テキトー教師DotAI 認定講師

前回の記事でClaude Codeのインストール方法全般を扱いましたが、今回はVS Codeに特化してもっと深掘りしていきます。「拡張機能（extension）の設定どうするの」「MCPはVS Codeからでも使えるの」というところまで答えていきますよ。

Claude Code VS Code拡張機能とは

Claude Code VS Code拡張機能の公式ドキュメント（Anthropic公式サイトより）

室谷代表取締役

まず基本から確認しましょう。Claude Codeって元々CLIツールとして出てきたんですが、VS Code拡張機能はそれをGUIで使えるようにしたものですよね。

テキトー教師DotAI 認定講師

そうですね。整理すると、こういう構造です。

Claude Code自体はコード編集AIエージェントで、VS Code拡張機能はそのGUIフロントエンドになります。従来のCLI（ターミナルで claude と打って使う方法）は変わらず使えて、拡張機能はそれと並行して存在する形です。

室谷代表取締役

重要なのは「拡張機能を入れるとCLIが不要になる」わけじゃないんですよね。拡張機能の中にCLIが内包されているので、VS Codeのターミナルから claude コマンドも普通に使えます。

テキトー教師DotAI 認定講師

ここ、コミュニティのメンバーさんが誤解しやすいポイントです。「どっちかを選ぶ」ではなく「拡張機能でも、ターミナルのCLIでも、両方使える」が正解です。

室谷代表取締役

拡張機能ならではのメリットを言うと・・・

ファイルのdiff（差分）をVS Code標準のdiffビューアで見られる
テキストを選択した状態でClaudeに聞ける（コードの一部だけ渡せる）
Plan Modeで実行前にClaudeの計画を確認できる
チェックポイント機能で変更を巻き戻せる
タブで複数会話を並列実行できる

テキトー教師DotAI 認定講師

逆にCLIのほうが得意なことも公式ドキュメントにはっきり書いてあって。!bash ショートカット、タブ補完、一部のCLI専用コマンドはターミナルでしか動きません。

用途に応じて使い分けるのがベストです。

Claude Code VS Code拡張機能のインストール方法

Claude Code for VS Code - VS Codeマーケットプレイスの公式ページ（VS Code Marketplaceより）

室谷代表取締役

インストール自体は難しくないですね。VS Codeの拡張機能マーケットプレイスで「Claude Code」と検索すれば一発です。

テキトー教師DotAI 認定講師

注意点が1つあります。インストールするにはVS Codeのバージョンが1.98.0以上である必要があります。

古いバージョンを使っている人は先にVS Code自体をアップデートしてください。

室谷代表取締役

VS Codeのバージョン確認はメニューバーの「ヘルプ → バージョン情報」でできます。Windows・Mac・Linuxどれでも同じ方法でインストールできます。

Cursor（VSCodeベースの別IDE）にも同じ拡張機能を入れられます。

テキトー教師DotAI 認定講師

Cursorに入れる場合の注意点として、マーケットプレイスが若干違うので「Install for Cursor」のリンクから入れるほうが確実です。公式ドキュメントにも両方のリンクが載っています。

インストール手順

VS Code拡張機能のインストール手順をまとめると:

VS Codeを開いて Cmd+Shift+X（Mac）または Ctrl+Shift+X（Windows/Linux）で拡張機能ビューを開く
検索欄に「Claude Code」と入力
Anthropic発行の「Claude Code」を選んで「インストール」をクリック
インストール後、VS Codeを再起動（または Ctrl+Shift+P → 「Developer: Reload Window」）

bash

# VS CodeマーケットプレイスのURL
# https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code

室谷代表取締役

インストール後にアイコンが表示されない場合は、まずファイルを1つ開いてみてください。VS Codeのエディタツールバー（右上）に表示されるSparkアイコン（✱）は、ファイルが開いていないと出てこない仕様になっています。

テキトー教師DotAI 認定講師

これでハマった受講生さんが結構いました（笑）。ファイルを開かずにアイコンを探して「拡張機能が壊れてる！」って焦るパターンですね。

Activityバー（左サイドバー）のSparkアイコンは常に表示されているので、そちらから開くのが確実です。

Windows固有の注意点

室谷代表取締役

Windowsで使う場合、ネイティブのWSL（Windows Subsystem for Linux）環境が推奨されているんですよ。Claude Codeはnode.jsベースのツールなので、WSL2が安定しやすいです。

テキトー教師DotAI 認定講師

WSL2にUbuntuを入れてそこにnodeをインストールするのが定番の流れです。VS Codeには「Remote - WSL」拡張機能もあるので、WSL内のプロジェクトをVS Codeから快適に操作できます。

室谷代表取締役

ただし2026年現在、VS Code拡張機能自体はWindowsネイティブ環境でも動くので、CLIのフル機能が必要でなければ、拡張機能だけならWindowsでも普通に動きます。

テキトー教師DotAI 認定講師

WSLが使えない環境（会社の制約等）でもVS Code拡張機能だけなら使えるケースが多いですね。まず試してみて、問題があればWSL環境を整えるという順番でもいいと思います。

Claude Code VS Code拡張機能の基本的な使い方

室谷代表取締役

インストールができたら次は使い方ですね。最初に開いたとき、オンボーディングチェックリストが出てきます。

テキトー教師DotAI 認定講師

あれ、丁寧に作ってあるんですけど読み飛ばす人が多いんですよね（笑）。「Show me」ってボタンを押せば各機能を体験できるので、初めて使う人は一通りやってみることをおすすめします。

室谷代表取締役

Claudeパネルの開き方は何通りかあります。

エディタツールバー（右上）のSparkアイコン（ファイル開いているとき）
Activityバー（左サイドバー）のSparkアイコン（常に表示）
コマンドパレット（Cmd+Shift+P）→「Claude Code: Open in New Tab」
ステータスバー（右下）の「✱ Claude Code」

テキトー教師DotAI 認定講師

私個人的には右サイドバーにドッキングするのが一番使いやすいですね。「コーディングしながら横でClaudeに話しかける」感覚になります。

Claudeパネルはドラッグ&ドロップでどこにでも移動できます。

プロンプトボックスの使い方

室谷代表取締役

プロンプトボックスには知っておくと便利な機能がいくつかあります。まず / を押すとコマンドメニューが開きます。

コマンド	内容
`/model`	使用するモデルを変更
`/compact`	コンテキストウィンドウを手動圧縮
`/remote-control`	リモートコントロールセッション開始
`/mcp`	MCPサーバー管理
`/plugins`	プラグイン管理
`/usage`	使用量確認

テキトー教師DotAI 認定講師

/ メニューを知らずに使っている人が多いんですよ。これを覚えるだけで使い勝手がかなり変わります。

室谷代表取締役

プロンプトボックスの下にはコンテキスト使用量のインジケーターも表示されています。コンテキストウィンドウがどのくらい埋まっているか一目でわかります。

あと Shift+Enter で改行できます。これ地味に便利で・・・

テキトー教師DotAI 認定講師

マルチライン入力、教えると「え、それできたんですか」って必ず言われますね（笑）。長いプロンプトを書くときに重宝します。

@メンションでファイルを参照する

室谷代表取締役

@メンション機能が拡張機能の目玉機能の1つですね。@ を入力してファイル名を打つと、そのファイルをコンテキストとして渡せます。

テキトー教師DotAI 認定講師

ファジーマッチ対応なので、完全なファイル名でなくても近い名前で検索されます。「@auth」と入力すると auth.js、AuthService.ts、auth/index.ts みたいなものが候補に出てきます。

室谷代表取締役

フォルダを丸ごと渡すときはフォルダ名の後ろに / を付けると認識されます。@src/components/ みたいに。

テキトー教師DotAI 認定講師

エディタ上でコードを選択した状態だと、Claude側に「何行選択されているか」が自動で表示されます。Option+K（Mac）/ Alt+K（Windows/Linux）を押すと、選択している行番号付きの@メンション参照がプロンプトに自動挿入されます。

コードレビューや特定の関数だけ直してほしいときに使いやすいです。

室谷代表取締役

ファイルをドラッグ&ドロップして添付することもできます。Shiftを押しながらドラッグすると添付になります。

PDFも読み込めて、大きなPDFの場合はページ範囲指定もできます。

テキトー教師DotAI 認定講師

この@メンション系の機能、ターミナルのCLIにはない拡張機能ならではの操作感ですよね。「この関数だけ見て」という粒度でClaudeに渡せるのは大きいです。

Permission Mode（パーミッションモード）

室谷代表取締役

拡張機能を使ってて最初に戸惑うのが、Claudeが何かアクションを起こすたびに「許可する？」って聞いてくるやつですよね。

テキトー教師DotAI 認定講師

これはパーミッションモードの設定で変えられます。3つあって、整理するとこんな感じです。

モード	動作
normal（デフォルト）	アクションごとに許可を求める
plan	先に計画を提示、承認後に実行
auto-accept	自動的に編集を実行（確認なし）

室谷代表取締役

Plan Modeが個人的に一番好きなんですよね。「まずClaudeに何をするか考えさせて、それをMarkdownドキュメントで見て、コメントを書いて、GOサインを出す」という流れです。

複雑な変更をする前に「本当にこれでいいか」確認できるのでミスが減ります。

テキトー教師DotAI 認定講師

講座でもPlan Modeを推奨しています。特に大きめのリファクタリングや機能追加を頼むときは、先にPlanを見てから実行するほうが安全です。

計画ドキュメントにインラインでコメントも書けるので、「この部分の方針を変えて」って伝えやすいです。

室谷代表取締役

プロンプトボックスの下部にあるモードインジケーターをクリックするだけで切り替えられます。デフォルト設定は VS Code設定の claudeCode.initialPermissionMode で変えられます。

テキトー教師DotAI 認定講師

auto-acceptはTeam/Enterprise/APIプランかつClaude Sonnet 4.6またはOpus 4.6を使っている場合のみ利用できるオプションです。全員がフルに使えるわけではないですね。

チェックポイント機能で変更を巻き戻す

室谷代表取締役

チェックポイント機能、これ地味に便利ですよ。Claude Codeって基本的に「やってみて、結果を見て、気に入らなければ戻す」の繰り返しなんですが・・・

テキトー教師DotAI 認定講師

巻き戻しができないと怖くてClaude Codeに大きい変更を任せられないですよね。チェックポイントはそれを解決してくれます。

室谷代表取締役

拡張機能では会話の各メッセージにマウスを乗せると巻き戻しボタンが出てきます。3つのオプションがあります。

Fork conversation from here: そのメッセージから新しい会話ブランチを開始（コード変更はそのまま）
Rewind code to here: そのポイントまでファイルの変更を巻き戻す（会話履歴はそのまま）
Fork conversation and rewind code: 会話もコードも両方そのポイントまで戻す

テキトー教師DotAI 認定講師

「あ、この方向じゃなかった」と気づいたときに使えます。実験的に色々やって、気に入った方向を選ぶ使い方ができます。

Gitのブランチみたいな感覚ですね。

室谷代表取締役

ただし、ターミナルで実行したコマンドの影響（データベースの変更等）は巻き戻せないので注意が必要です。あくまでファイルの変更のみです。

テキトー教師DotAI 認定講師

この制約、最初に伝えておかないとハマりますね。「コードは戻ったのにDBのデータは変わったまま」という状況が起きます。

破壊的な操作をClaudeに頼む前は、自分でDBのバックアップを取っておくのが安全です。

複数会話の並列実行

室谷代表取締役

タブで複数会話を並列実行できるのも拡張機能の強みです。コマンドパレットで「Claude Code: Open in New Tab」か「Open in New Window」で新しい会話を開けます。

テキトー教師DotAI 認定講師

並列で走らせるときのステータス表示が便利ですよね。Sparkアイコンに小さいドットが付いて状態を示してくれます。

室谷代表取締役

青いドットが「許可待ち」、オレンジのドットが「Claudeが作業を完了してバックグラウンドで終わった状態」です。作業を頼んで別のことをしながら、完了したら確認するという使い方ができます。

テキトー教師DotAI 認定講師

MYUUUではどんな並列作業をしていますか？

室谷代表取締役

うちのエンジニアは「フロントエンドの実装をタブAで、バックエンドのAPIをタブBで」みたいな並列作業をしています。Gitのワークツリー機能と組み合わせると、それぞれ独立したブランチで並列作業できて効率が上がります。

Claude Code VS Code拡張機能とMCPの連携・設定

室谷代表取締役

MCPについて聞かれることが多いですね。「VS Code拡張機能からでもMCPが使えますか？」って。

テキトー教師DotAI 認定講師

答えは「使えます」です。ただし、MCPサーバーの追加はVS Code内のGUIからはできなくて、ターミナルのCLIから設定します。

室谷代表取締役

設定の流れはこうです。まずVS Code内蔵ターミナルを開いて、CLIコマンドでMCPサーバーを追加します。

bash

# MCPサーバーを追加する例（GitHub MCP）
claude mcp add --transport http github https://api.githubcopilot.com/mcp/

テキトー教師DotAI 認定講師

追加したら、Claude Codeのチャットパネルで /mcp と入力するとMCP管理ダイアログが開きます。ここでサーバーの有効・無効の切り替え、再接続、OAuth認証管理ができます。

室谷代表取締役

MCPの設定は ~/.claude/settings.json に保存されます。このファイルはVS Code拡張機能とCLIで共有されているので、CLIで設定したMCPが拡張機能でも使えるし、その逆もOKです。

テキトー教師DotAI 認定講師

.AI（ドットエーアイ）のコミュニティでもMCP関連の話題がよく出ます。「どのMCPサーバーがおすすめ？」というと、GitHub、Slack、NotionのMCPが実務では特に使われています。

MCPの詳しい使い方については「Claude CodeでMCPを使いこなす完全ガイド」の記事もご参照ください。

VS Code設定（settings.json）でClaude Codeをカスタマイズ

室谷代表取締役

~/.claude/settings.json とは別に、VS Code自体の設定（Claude Code: Extension Settings）もあります。ここで拡張機能の動作を細かく調整できます。

テキトー教師DotAI 認定講師

よく使う設定をまとめると。

設定項目	デフォルト	内容
`selectedModel`	default	使用するモデル
`useTerminal`	false	ターミナルモードで開く
`initialPermissionMode`	default	権限モードのデフォルト
`preferredLocation`	panel	パネルの場所（sidebar/panel）
`autosave`	true	読み書き前に自動保存
`useCtrlEnterToSend`	false	Ctrl+Enterで送信

室谷代表取締役

~/.claude/settings.json に "$schema": "https://json.schemastore.org/claude-code-settings.json" を追加すると、設定項目のオートコンプリートと入力補完が効くようになります。これ知っておくと設定が楽になりますよ。

テキトー教師DotAI 認定講師

環境変数も拡張機能の設定で渡せます。environmentVariables の設定に書けばClaude Codeプロセスにその環境変数が渡ります。

ただし他のメンバーと共有する場合は ~/.claude/settings.json に書くほうが良いですね。

室谷代表取締役

チーム開発の場合はプロジェクト内の .claude/settings.json に書くとリポジトリで共有できます。ただしAPIキーなどの機密情報はプロジェクト設定に書かないように注意です。

Claude Code VS Code拡張機能は無料で使えるか？料金・プランを解説

室谷代表取締役

よく聞かれるのが「VS Code拡張機能は無料ですか？」という質問です。答えをちゃんと整理しましょう。

テキトー教師DotAI 認定講師

まず拡張機能自体はVS Codeマーケットプレイスから無料でインストールできます。ただし使うにはClaudeのアカウントと有料プランが必要です。

室谷代表取締役

料金プランで言うと、こういう構造になっています。

プラン	月額	Claude Code利用
Free	$0	利用不可
Pro	$20（年払い$17/月）	利用可能
Max 5x	$100	Pro比5倍の使用量
Max 20x	$200	Pro比20倍の使用量
Team	要問い合わせ	利用可能
Enterprise	要問い合わせ	利用可能

テキトー教師DotAI 認定講師

コミュニティのメンバーさんでよく出る質問が「Freeプランでは使えないの？」というものです。現在のFreeプランではClaude Code自体が利用できないので、少なくともProプランが必要です。

室谷代表取締役

ProでもMax 5xとMaxでは使用量が全然違います。MYUUUのエンジニアだと毎日ガッツリ使うのでMax 5xや20xを使っている人が多いですね。

ただ始めるならProで十分です。どんな規模の作業をするかによります。

テキトー教師DotAI 認定講師

「VS Code 拡張機能の料金」という意味では、拡張機能ファイル自体は無料です。課金されるのはClaude Codeの利用分で、Claude.aiのサブスクリプション費用ということになります。

室谷代表取締役

「もっと安く使いたい」という話になると、Amazon BedrockやGoogle Vertex AIなどのクラウドプロバイダーを通じてAPI課金で使う方法もあります。使った分だけ課金されるので、使用量が少ない人には向いているかもしれません。

VS Code拡張機能の設定でも、サードパーティプロバイダーを使うように設定できます。

VS Code拡張機能 vs. Claude Code CLI：使い分けはこうする

VS Code拡張機能とターミナルCLIの関係：共有される設定・会話履歴・MCPサーバー

室谷代表取締役

拡張機能とCLI、どちらを使うべきかという質問も多いんですよね。

テキトー教師DotAI 認定講師

公式ドキュメントには機能比較表があります。整理するとこうなります。

機能	CLI	VS Code拡張機能
コマンド・スキル	全て利用可能	一部（/メニューで確認）
MCPサーバー設定	フル対応	追加はCLI経由、管理は可能
チェックポイント	対応	対応
!bashショートカット	対応	非対応
タブ補完	対応	非対応

室谷代表取締役

VS Code拡張機能が向いているケース：

GUI操作が好き、ターミナルに抵抗がある
diff（差分）をビジュアルで確認したい
Plan Modeで変更前に計画をレビューしたい
コードを選択しながらClaudeに指示したい
複数の会話タブを並列で動かしたい

テキトー教師DotAI 認定講師

CLIが向いているケース：

サーバー上やSSH接続先で作業する
!bash ショートカット等のCLI専用機能を使いたい
スクリプトからClaude Codeを自動実行する
タブ補完を使いたい
CI/CDパイプラインに組み込む

室谷代表取締役

実際の話をすると・・・私はVS Code拡張機能とターミナルの両方を使っています。普段のコーディングは拡張機能、スクリプト的な操作やサーバー上の作業はCLIという感じで自然に使い分けています。

テキトー教師DotAI 認定講師

拡張機能とCLIは会話履歴を共有しているので、後から切り替えることもできます。拡張機能で始めた会話をCLIで続ける場合は claude --resume でCLIを起動して選択できます。

逆も同じです。

室谷代表取締役

設定（~/.claude/settings.json）もMCPの設定も共有です。「拡張機能で設定したのにCLIに反映されない」ということはないので、安心して使い分けできます。

よくある質問・トラブルシューティング

室谷代表取締役

トラブルシューティングも整理しておきましょう。よくある問題から順番に。

テキトー教師DotAI 認定講師

ダントツ多いのは「Sparkアイコンが見当たらない」という問い合わせです。

室谷代表取締役

ファイルを開かないとエディタツールバーに表示されない仕様が原因がほとんどです。ファイルを1つ開けば出てきます。

それでも出ない場合はVS Codeのバージョン確認と再起動です。

テキトー教師DotAI 認定講師

VS Codeのバージョンが1.98.0未満だと拡張機能がインストールできません。まずVS Codeのアップデートが先です。

室谷代表取締役

「Claude Codeが応答しない」はネット接続の確認が第一ステップです。次に新しい会話を始めてみる。

それでもダメなら claude コマンドをターミナルから実行して、より詳細なエラーメッセージを確認する、という手順です。

テキトー教師DotAI 認定講師

拡張機能を完全にリセットしたい場合は、アンインストール後に以下を実行すると設定も含めて消せます。

bash

rm -rf ~/.vscode/globalStorage/anthropic.claude-code

室谷代表取締役

Cline、Continue、GitHub Copilotなどの他のAI拡張機能と競合することがあります。一時的に他の拡張機能を無効にして動作確認するのがトラブルシューティングの定番です。

VS CodeのRestricted Mode（制限モード）でも動かないので、信頼済みワークスペースかどうかも確認してください。

テキトー教師DotAI 認定講師

「AnthropicのAPIキーはどこに入れればいい？」という質問も多いですね。Claude.aiのサブスクリプション（Pro/Max等）を使う場合はAPIキーは不要で、サインインするだけで使えます。

APIキーが必要なのはAnthropicコンソール経由でAPI課金する場合です。

室谷代表取締役

この2つのルートが混在しているので混乱しやすいですね。「Claude.aiにサブスクしているならAPIキーなし」「APIキーがある人はコンソール経由」という整理で覚えておくと良いです。

まとめ：VS Code拡張機能でClaude Codeをフル活用しよう

室谷代表取締役

まとめましょう。VS Code拡張機能のポイントをおさらいすると・・・

テキトー教師DotAI 認定講師

インストールはVS Code 1.98.0以上があれば簡単です。使い方でいうと、Plan Modeと@メンション機能を最初に覚えると一気に使いやすくなります。

室谷代表取締役

料金的にはProプラン（月$20、年払いなら$17/月）から使えます。Freeプランでは利用できないので注意です。

テキトー教師DotAI 認定講師

CLIと拡張機能はどちらかを選ぶものではなく、両方を状況に応じて使い分けるものです。設定と会話履歴が共有されているのでシームレスに行き来できます。

室谷代表取締役

MCP連携もVS Code拡張機能から完全に使えます。CLIで追加設定してから /mcp で管理するという流れを覚えておくと良いですよ。

テキトー教師DotAI 認定講師

次のステップとしては、実際に使いながら自分に合った設定を見つけていくことですね。まずPlan Modeからスタートして、使い慣れてきたらパーミッションモードを調整していくのが無難だと思います。

Claude Codeの詳しい使い方はAnthropic公式ドキュメントも参考にしてください。

Claude Code VS Code拡張機能の完全ガイド：インストールから使いこなしまで【2026年最新】