Claude Code×VS Code拡張機能｜インストール3ステップと使い方【2026年9月】

2026年3月17日

このトピックの全体像Claude Code 完全ガイド｜料金・使い方・法人導入の全体像はじめ方・学習の記事

公開日: 2026年3月17日最終更新: 2026年9月28日

執筆・編集：株式会社Nexa 編集部（下書きと機械検査はAI、公開前に人が確認）／約19分で読めます。公式ドキュメント・公式発表などの一次情報を確認したうえで執筆・更新しています。AIツールの仕様や料金は変わることがあるため、導入判断の前に各公式サイトの最新情報もご確認ください。記事の作り方と検査の方針

Claude CodeをVS Codeで使うには、公式拡張機能「Claude Code for VS Code」をインストールしてサインインします。作業は3ステップ、5分ほどで終わります。

要点1（必要なもの）: VS Code 1.94.0以上と、Claudeの有料プラン（Pro・Max・Team・Enterprise）またはClaude Consoleのアカウント。APIキーの設定は不要（2026年9月27日、公式ドキュメントで確認）
要点2（導入3ステップ）: 拡張ビュー（Cmd/Ctrl+Shift+X）で「Claude Code」を検索→発行元がAnthropicの拡張をインストール→スパークアイコンからパネルを開いてサインイン
要点3（使い方）: チャット欄に日本語で指示し、提案された変更を差分で確認して承認する。入力中の補完はGitHub Copilot、複数ファイルの変更はClaude Codeという併用もできる

対象: VS CodeでClaude Codeを使い始めたい方、拡張機能のインストール手順・設定・使い方を確認したい開発者・DX推進担当者

今日やること: VS Codeの拡張ビューで「Claude Code」を検索し、発行元がAnthropicの拡張をインストールする

この記事の著者

株式会社Nexa 代表取締役川島陸

一橋大学経済学部卒業後、フォーティエンスコンサルティング株式会社（旧株式会社クニエ）にて法人向けAI導入支援等を経験。独立後、AI系メディア運営やDify/n8nの導入支援を経て、株式会社Nexaを創業。法人向けAI研修・AI導入支援・AI関連メディア運営を手掛ける。

詳しく見る AI顧問の無料相談

Claude CodeをVS Codeで使う方法は、公式拡張機能「Claude Code for VS Code」（発行元: Anthropic）をインストールし、Claudeのアカウントでサインインすることです。Anthropicの公式ドキュメントでも、VS CodeでClaude Codeを使う場合はこの拡張機能が推奨されています。

導入前に確認する項目は次のとおりです（2026年9月27日、公式ドキュメントとVS Code Marketplaceで確認）。

項目	内容
拡張機能の正式名称	Claude Code for VS Code（拡張ID: anthropic.claude-code、発行元: Anthropic）
VS Codeのバージョン	1.94.0以上（公式ドキュメントの記載）。Marketplaceの説明欄は「1.98.0 or higher」と表記しているため、最新版へ更新しておくと確実
必要なアカウント	Claudeの有料プラン（Pro・Max・Team・Enterprise）またはClaude Consoleのアカウント。APIキーの設定は不要
料金	拡張機能のインストールは無料。利用には上記プランの料金、またはConsoleの従量課金がかかる
インストール数	2,600万件超（VS Code Marketplace）

手順は3ステップです。

VS Codeで拡張ビュー（MacはCmd+Shift+X、Windows/LinuxはCtrl+Shift+X）を開き、「Claude Code」を検索する
発行元がAnthropicの「Claude Code for VS Code」をインストールする
スパーク（✱）アイコンからClaude Codeのパネルを開き、「Sign in」を押してブラウザで認可する

画面ごとの詳しい流れと初期設定はインストール方法と初期設定で解説します。続けて、基本の使い方、CLI版との違い、GitHub Copilotと同じVS Codeで併用するときの使い分けを順に説明します。

図1: 検索・インストール・サインインの3段階で、作業は5分ほどで終わる

Claude CodeのVS Code拡張機能とは？必要なプランとCLIとの違い

Claude CodeのVS Code拡張機能とは、Anthropicが公式に提供するVisual Studio Code向けの拡張機能です。ターミナルで使うCLI版のClaude Codeを、VS Codeのチャットパネルからグラフィカルに操作できます。

VS Code Marketplaceでの正式名称は「Claude Code for VS Code」（拡張ID: anthropic.claude-code）で、総インストール数は2,600万件を超えています（2026年9月27日確認）。Cursorにも同じ拡張を直接インストールでき、そのほかのVS Code系エディタではOpen VSXレジストリから導入できます。

利用に必要なプランとVS Codeのバージョン

公式ドキュメントが前提条件として挙げているのは次の2点です。

VS Code 1.94.0以上
Anthropicのアカウント: Claudeの有料プラン（Pro・Max・Team・Enterprise）またはClaude Consoleのアカウント。APIキーの設定は不要

Claudeの無料プランは前提条件に含まれていません。Amazon Bedrock、Google Cloud、Microsoft Foundry経由でClaudeを利用している組織は、拡張機能の設定でサインイン画面を無効にし、各プロバイダーの設定を行う方法が公式に用意されています。

VS Code拡張機能で使えるようになる機能

拡張機能を導入すると、次の機能がVS Code上で直接利用できます。

機能	説明
チャットパネル	Claude Codeとの会話をVS Code内で実行。サイドバーやエディタのタブなど配置を選べる
インライン差分表示	コード変更をVS Codeのネイティブdiff viewerで確認
@メンション機能	ファイルや選択したコード範囲をプロンプトに指定
プランの確認・編集	Claudeが立てた計画を、実行前に確認して修正できる
チェックポイント	ファイル編集を記録し、特定時点に巻き戻し可能
複数会話タブ	複数のClaudeとの会話を別々のタブやウィンドウで管理
会話履歴の検索・再開	過去の会話をキーワード検索や時系列で探して再開

CLIとの違い（対応している操作・UI）

CLI版とVS Code拡張の違いを、公式ドキュメントの比較表をもとに整理します。

項目	CLI版（ターミナル）	VS Code拡張機能
操作環境	ターミナル	VS Code内のチャットパネル
コード変更の確認	ターミナル上で確認（VS Codeの統合ターミナルで動かすと差分ビューと連携）	差分ビューで変更前後を並べて確認
使えるコマンド・スキル	すべて	一部（「/」を入力して確認）
MCPサーバーの設定	対応	対応（チャットパネルで`/mcp`）
チェックポイント（巻き戻し）	対応	対応
「!」によるBashショートカット	対応	非対応
Tab補完	対応	非対応
複数作業	ターミナルを複数起動	タブやウィンドウで管理

CLI版はすべてのコマンドを使いたい場面や、サーバー上でのリモート作業に向いています。VS Code拡張は、日常のコーディング作業の中で差分を見ながら進めたい場合に向いています。拡張機能とCLIは会話履歴を共有しているため、拡張機能で始めた会話をターミナルのclaude --resumeで引き継ぐこともできます。

ポイント拡張機能はチャットパネル用にCLIを同梱していますが、ターミナルで使うclaudeコマンドは追加しません。VS Codeの統合ターミナルでCLI版も使う場合は、CLI版を別途インストールします。

インストール方法と初期設定（3ステップ・5分）

Claude Code VS Code拡張機能のインストールは、以下の3ステップで完了します。事前にVS Codeを1.94.0以上（できれば最新版）に更新し、Claudeの有料プランまたはClaude Consoleのアカウントを用意しておきます。

STEP 1: VS Code拡張機能ストアからインストール

VS Codeを開き、左サイドバーの拡張機能アイコン（四角形のアイコン）をクリックします。ショートカットはMacがCmd+Shift+X、Windows/LinuxがCtrl+Shift+Xです
検索ボックスに「Claude Code」と入力します
Anthropic公式の「Claude Code for VS Code」（発行元: Anthropic）を選択します
「インストール」ボタンをクリックします

注意似た名前の拡張機能が複数存在するため、必ず「Anthropic」が発行元のものを選択してください。発行元はインストール画面の「発行元」欄で確認できます。

インストール後に拡張機能が表示されない場合は、VS Codeを再起動するか、コマンドパレットから「Developer: Reload Window」を実行します。

STEP 2: Claude Codeにサインインする

インストール後、スパーク（✱）アイコンをクリックしてClaude Codeのパネルを開きます。アイコンは、ファイルを開いているときのエディタ右上（エディタツールバー）と、左側のアクティビティバーにあります。コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）で「Claude Code」と入力して開くこともできます。

初回はサインイン画面が表示されます。「Sign in」をクリックし、ブラウザで以下のいずれかのアカウントを認可します。

Claudeアカウント: Pro・Max・Team・Enterpriseプランのアカウントでサインイン（APIキーの設定は不要）
Claude Consoleアカウント: 従量課金で利用する場合はConsoleのアカウントでサインイン

サインインが完了すると、Claude Codeのチャットパネルが使えるようになり、基本操作を順に確認できるチェックリスト（Learn Claude Code）が表示されます。

STEP 3: チャットパネルで動作を確認する

チャット入力ボックスが表示されれば、設定完了です。テキストボックスに「Hello」と入力して送信し、応答があれば正常に連携できています。

なお、拡張機能はclaudeコマンドをターミナルに追加しません。VS Codeの統合ターミナルでCLI版も使いたい場合は、別途CLI版のインストールが必要です。

初期設定で見ておく項目

拡張機能の設定は、VS Codeの設定画面（Cmd+, / Ctrl+,）の「Extensions → Claude Code」で変更できます。最初に確認しておきたい項目は次のとおりです（既定値は公式ドキュメントの記載）。

設定名	既定値	内容
`preferredLocation`	panel	Claudeを開く場所。sidebar（右側のサイドバー）またはpanel（新しいタブ）
`initialPermissionMode`	未設定	新しい会話を始めるときの権限モード（default・plan・acceptEdits など）
`useCtrlEnterToSend`	false	送信キーをEnterからCtrl/Cmd+Enterに変える
`autosave`	true	Claudeが読み書きする前にファイルを自動保存する
`useTerminal`	false	チャットパネルの代わりにターミナル形式の画面で起動する

許可するコマンドやMCPサーバーなど、CLIと共通の設定は~/.claude/settings.jsonに保存されます。

スパークアイコンが表示されないときの確認点

公式ドキュメントのトラブルシューティングでは、次の順で確認するよう案内されています。

ファイルを開く（エディタ右上のアイコンは、フォルダを開いただけでは表示されない）
VS Codeのバージョンを確認する（Help → About）
VS Codeを再起動する、または「Developer: Reload Window」を実行する
他のAI拡張（Cline・Continueなど）を一時的に無効にして切り分ける
ワークスペースの信頼設定を確認する（制限モードでは拡張機能が動作しない）

使い方と主要機能5選｜VS Code連携で使えること

基本の使い方は、チャット欄に日本語で依頼を書き、Claudeが提案した変更を確認して承認する、という流れです。エディタでコードを選択していると、Claudeはその選択範囲を自動的に参照します。

変更をどこまで確認なしで進めるかは、プロンプト欄の下部に表示される権限モードで切り替えます。

Manual: ファイルの編集や多くのシェルコマンドの前に、許可を求める
Plan: 実行内容を計画として示し、承認を待ってから変更する
Edit automatically: 確認なしでファイルを編集する
Auto: 操作の大半を分類器が審査し、確認の回数を減らす

公式ドキュメント（英語版）によると、Claude Code v2.1.283以降はAutoが開始時の既定モードです。変更を1件ずつ確認しながら進めたい場合は、Manualに切り替えてください。

以下では、VS Code拡張機能の中でも特に業務効率化に役立つ機能を5つ紹介します。

インライン差分表示でコード変更を確認

Claude Codeがコードを変更・追加した際、VS Codeのネイティブdiff viewer（変更比較表示）が自動的に起動します。変更前後のコードを並べて確認でき、変更を受け入れるか拒否するかをクリック一つで選択できます。

この機能は、大規模なリファクタリングや複数ファイルにまたがる変更を行う場合に特に役立ちます。変更内容を把握しないまま進めるリスクを大幅に軽減できます。

@メンションでファイル・コードを指定

プロンプト入力時に「@」を使うと、ファイルやフォルダを指定してClaudeに伝えられます。VS Code拡張では、エディタで範囲選択した状態でAlt+K（MacはOption+K）を押すことで、選択した行範囲を含む@メンションが自動挿入されます。

活用例:– 「@src/utils.js の40〜60行目のエラーハンドリングを修正して」- 「@README.md を参照して、このコードのドキュメントを作成して」

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

VS Code拡張では、Claude Codeによるファイル編集がチェックポイントとして記録されます。会話内のメッセージにカーソルを合わせると巻き戻しボタンが表示され、「会話をここから分岐」「コードをここまで戻す」「会話を分岐してコードも戻す」の3つから選べます。

「Claude Codeに大量の変更を加えてもらったが、やっぱりやり直したい」という場面で役立ちます。会話の流れの中から戻したい時点を選べるため、直感的に巻き戻しができます。

複数会話タブで並行作業

VS Code拡張では、複数のClaudeとの会話を別々のタブで管理できます。例えば、「フロントエンドの実装」「APIの修正」「テストコードの作成」といった別々の作業を並行して進める場合に有効です。

また、パネル上部の「Session history」ボタンから過去の会話を検索・再開することもできます。キーワード検索のほか、時系列での一覧にも対応しています。

キーボードショートカット一覧

VS Code拡張では、作業スピードを高めるショートカットが用意されています。

ショートカット	動作
`Cmd/Ctrl + Esc`	エディタとClaudeパネルのフォーカス切り替え
`Cmd/Ctrl + Shift + Esc`	新しい会話をエディタのタブで開く
`Alt+K`（Option+K）	選択範囲を@メンションとして挿入
`Enter`	メッセージ送信
`Shift + Enter`	改行（送信せず）

AI導入に関するお困りごとは、株式会社NexaのAI顧問がサポートします。「何から始めればいいか分からない」という段階からご相談いただけます。

AI顧問の無料相談はこちら →

GitHub CopilotとClaude Codeの使い分け

VS CodeでAIコーディングツールを活用する際、「GitHub CopilotとClaude Code、どちらを使えばいいか」という疑問を持つ方は多くいます。結論として、両者は競合ではなく補完関係にあります。

GitHub Copilotの強み（リアルタイム補完・IDE統合）

GitHub Copilotは、コードを書きながらリアルタイムで次のコードを提案するインライン補完に強みがあります。

項目	GitHub Copilot
主な用途	タイピング中のインライン補完
動作方式	IDE常駐型（常に補完候補を表示）
得意な作業	関数・メソッドの補完、コメントからのコード生成
価格	個人向けはFree（$0）、Pro $10/月、Pro+ $39/月、Max $100/月（2026年9月27日確認）

コードを書きながら自動的に提案が表示されるため、学習コストが低く、素早くオンボードできるのが特徴です。

Claude Codeの強み（大規模変更・自律型エージェント）

Claude Codeは、複数ファイルにまたがる大規模な変更や、「このコードベース全体をリファクタリングして」という自律的な作業指示に強みがあります。

項目	Claude Code
主な用途	複数ファイルの変更、コードベース全体の理解
動作方式	自律型エージェント（計画→実行）
得意な作業	リファクタリング、テスト生成、バグ調査
コンテキスト	利用するモデルにより最大100万トークン

100万トークンのコンテキストウィンドウに対応したモデルでは、多数のファイルにわたる変更も1つの会話で扱いやすくなります。コードベースの広い範囲を読み込んでから変更する作業に向いています。

図2: 入力中の補完はGitHub Copilot、大規模な変更や調査はClaude Codeに任せる

組み合わせて使う方法

実際の開発現場では、次のような使い分けが効果的です。

作業	推奨ツール
コードを書きながらの補完	GitHub Copilot
関数やクラスの新規作成	GitHub Copilot or Claude Code
大規模リファクタリング	Claude Code
バグの調査・修正	Claude Code
テストコードの一括生成	Claude Code
コードレビューのフィードバック	Claude Code
定型的なボイラープレート	GitHub Copilot

Anthropicの公式ドキュメント（VS Code連携ページ）に、GitHub Copilotとの併用を禁じる記述はありません。同じVS Codeに両方を入れ、目的に応じて切り替えながら使えます。さらにGitHub Copilotの料金ページでは、Pro+とMaxのプランに「Claude（Anthropic）やOpenAI Codexなどサードパーティのコーディングエージェントへのタスク委任（プレビュー）」が含まれると記載されています。FreeとProのプランには含まれません（2026年9月27日確認）。

注意点として、Anthropic公式のトラブルシューティングでは、Claude Codeのアイコンが表示されない場合に他のAI拡張（Cline・Continueなど）を一時的に無効化して切り分ける手順が案内されています。併用中に不具合が出たときは、拡張同士の競合を疑ってください。

非エンジニアでもVS Code + Claude Codeは使えるか

結論として、非エンジニアでもVS Code + Claude Codeは活用できます。プログラミングの知識がなくても、日本語で指示するだけで多くの作業を自動化できるためです。

VS Codeのインストールから始める

非エンジニアの方は、まずVS Code本体のインストールから始めましょう。

VS Code公式サイトから無料でダウンロード
インストーラーを実行（Windowsの場合はUser Installerを選択）
日本語言語パック（「Japanese Language Pack for Visual Studio Code」）をインストール
Claude Code拡張機能を導入（前述の手順参照）

VS Code自体は無料で使えます。Claude Codeの利用にはClaudeの有料プラン（Pro・Max・Team・Enterprise）またはClaude Consoleのアカウントが必要です。

図3: VS Code本体は無料で、日本語言語パックを入れてから拡張機能を導入する

日本語で指示するだけで動く

Claude Code VS Code拡張では、日本語での指示が問題なく動作します。英語でのプロンプトは不要です。

非エンジニアが試せる日本語指示の例:– 「このExcelのデータを読み込んで、月別の集計表を作るPythonスクリプトを作って」- 「このHTMLファイルのデザインを整えて、テーブルのスタイルを見やすくして」- 「このCSVを読み込んで、重複データを除いて新しいファイルに保存するコードを書いて」

Claude Codeが必要なコードを自動生成し、VS Code上でインライン差分で確認・適用できます。

非エンジニアにおすすめの活用シーン3選

シーン	活用方法	効果
データ集計の自動化	CSVや表データの集計・整形スクリプト生成	手作業の集計をスクリプトに置き換えられる
ドキュメント生成	コードからREADMEやマニュアルを自動作成	ドキュメント作成工数を削減
Webスクレイピング	定期的な情報収集スクリプトの作成	情報収集・競合調査を自動化

よくある質問

Q. Claude Code VS Code拡張機能は無料で使えますか？

拡張機能のインストール自体は無料です。ただし、Claude Codeの利用にはClaudeの有料プラン（Pro・Max・Team・Enterprise）またはClaude Consoleアカウントでの従量課金が必要です。公式ドキュメントの前提条件に、Claudeの無料プランは含まれていません（2026年9月27日確認）。

Q. CLIとVS Code拡張、どちらを使えばいいですか？

普段VS Codeを使用している場合は、VS Code拡張の利用を推奨します。公式ドキュメントでも、VS CodeでClaude Codeを使う方法として拡張機能が推奨されています。すべてのコマンドを使いたい場合や、サーバーやリモート環境での作業、特定の自動化ワークフローを組む場合はCLI版が適しています。

なお、両者は会話履歴を共有しており、同一プロジェクトで並行して使用することも可能です。

Q. VS Codeのターミナルでclaudeコマンド（CLI）は使えますか？

使えますが、CLI版の別途インストールが必要です。拡張機能はチャットパネル用のCLIを同梱しているものの、claudeコマンドをターミナルのPATHには追加しません。CLI版をインストールしたうえでVS Codeの統合ターミナルからclaudeを実行すると、差分表示などがVS Codeと自動で連携します。

Q. Claude CodeはVS Codeでコード補完（インライン補完）もできますか？

Claude CodeのVS Code拡張は、チャットで指示を出して変更を提案・実行してもらう形式のツールです。公式ドキュメントのVS Code連携ページには、入力中に候補を表示するインライン補完の機能は記載されていません（2026年9月27日確認）。入力中の補完が必要な場合は、GitHub Copilotなどの補完ツールと併用します。

Q. VS Code拡張で使うモデルは選べますか？

選べます。プロンプト欄の下部に表示されているモデル名をクリックするか、「/」で開くコマンドメニューから「Switch model…」を選ぶと、会話の途中でもモデルを切り替えられます。

Q. GitHub Copilotと同時に使えますか？

はい、同じVS CodeにGitHub CopilotとClaude Codeの両方を入れて使えます。Anthropicの公式ドキュメント（VS Code連携ページ）に、GitHub Copilotとの併用を禁じる記述はありません。入力中の補完はCopilot、複数ファイルにまたがる変更や調査はClaude Code、という使い分けが基本です。なお、GitHub Copilotの料金ページでは、Pro+とMaxのプランにClaudeなどサードパーティのコーディングエージェントへのタスク委任（プレビュー）が含まれています（2026年9月27日確認）。

Q. チェックポイント機能はどう使いますか？

Claude Codeがファイルを編集すると、自動的にチェックポイントが記録されます。VS Code拡張では、会話内のメッセージにカーソルを合わせると巻き戻し（Rewind）ボタンが表示されます。「Rewind code to here（この時点までコードを戻す）」を選ぶと、会話履歴は残したままファイルの変更だけをその時点に戻せます。

Q. VS Codeの推奨バージョンは？

公式ドキュメントの前提条件はVS Code 1.94.0以上です。一方、VS Code Marketplaceの説明欄には「VS Code 1.98.0 or higher」と記載されています（いずれも2026年9月27日確認）。古いバージョンを使用している場合は、最新版にアップデートしてから拡張機能をインストールしてください。

＼ AI活用の「次の一手」を一緒に考えませんか／

AI顧問の無料相談はこちら