Claude Code × VSCode完全ガイド｜インストール・設定・拡張機能の使い方

AIコーディングアシスタントとしてClaude Codeを導入したものの、ターミナルとエディタを行き来する作業に煩わしさを感じている方は多いのではないでしょうか。コードを読み、修正し、差分を確認し、また指示を出す——この往復を繰り返すうちに、IDE内で完結できたらという思いは自然なものです。Claude CodeのVSCode拡張機能は、まさにその課題を解決するために設計されています。本記事では、インストールから設定、実践的な使い方まで、VSCode上でClaude Codeを最大限に活用するための情報を網羅的にお伝えします。Claude Codeの基本的な概要についてはClaude Codeとは？完全ガイドで詳しく解説していますので、まだご覧になっていない方はあわせてご参照ください。

Claude Code × VSCode連携の全体像

Claude CodeをVSCodeで使う方法は、大きく2つあります。1つはVSCodeの統合ターミナルからCLIとして claude コマンドを実行する方法、もう1つはAnthropicが公式に提供するVSCode拡張機能を導入する方法です。どちらもClaude Codeの機能を利用できますが、拡張機能を使うことでVSCodeのUIと深く統合された体験が得られます。

拡張機能の最大の特長は、Claude Codeが提案するコード変更をエディタ上でインラインの差分として表示し、Accept/Rejectで取捨選択できる点です。CLIでは変更がファイルに直接適用されるため、意図しない変更を見逃すリスクがありますが、拡張機能ではすべての変更を視覚的に確認してから反映できます。これだけでも導入する価値があると筆者は考えています。

技術的な仕組みとしては、VSCode拡張機能は内部でローカルのMCPサーバー（ide）を起動しています。このMCPサーバーがVSCodeのエディタAPIと連携することで、差分表示やファイル診断情報の取得、エディタ上のコンテキスト共有などを実現しています。ユーザーが意識する必要はありませんが、この仕組みを知っておくと、拡張機能がCLIよりも豊かなUI体験を提供できる理由が理解しやすくなります。

拡張機能のもう1つの利点は、会話をタブとして複数同時に管理できることです。たとえば、あるタブでリファクタリングの相談をしながら、別のタブでバグの調査を進めるといった使い方が可能です。CLIでは1つのターミナルセッションに1つの会話しか持てないため、複数の作業を並行して進める場面では拡張機能が圧倒的に便利です。

利用に必要な前提条件

VSCode拡張機能を使うには、以下の要件を満たす必要があります。

項目	要件
VSCodeバージョン	1.98.0以上
Anthropicアカウント	Claude Pro / Max / Team / Enterprise のいずれか
OS	macOS、Windows、Linux
Node.js	CLIを別途使う場合はNode.js 18以上が必要

無料プランではClaude Codeを利用できない点にご注意ください。ProプランまたはMaxプランへの加入が必要です。Team / Enterpriseプランでは組織全体での利用が可能で、管理者による設定の一括管理にも対応しています。

なお、VSCode互換のエディタであるCursorやWindsurfなどでも動作する場合がありますが、公式にサポートされているのはMicrosoft製のVSCodeのみです。互換エディタで問題が発生した場合はサポート対象外となるため、安定した利用を求めるなら正規のVSCodeを使うことをお勧めします。

VSCode拡張機能のインストールと初期設定

インストール手順

インストールは非常にシンプルです。以下の手順で数分で完了します。

VSCodeを開き、Cmd+Shift+X（macOS）または Ctrl+Shift+X（Windows/Linux）で拡張機能パネルを開く
検索バーに「Claude Code」と入力する
Anthropic公式の「Claude Code」拡張機能を選択し、「Install」をクリックする

または、以下のリンクから直接インストールすることもできます。

vscode:extension/anthropic.claude-code

このリンクをブラウザのアドレスバーに貼り付けると、VSCodeが自動的に起動してインストール画面が表示されます。

インストールが完了すると、サイドバーにClaude Codeのアイコンが追加されます。初回起動時にはAnthropicアカウントでのログインが求められるので、ブラウザで認証を完了してください。

注目すべき点として、VSCode拡張機能をインストールすると、統合ターミナルから claude コマンドも利用できるようになります。つまり、拡張機能1つでGUIとCLIの両方が使える状態になるということです。CLIを別途npmでインストールする必要がないため、セットアップの手間が省けます。

認証とログイン

初回起動時の認証フローについて、もう少し詳しく説明します。サイドバーのClaude Codeアイコンをクリックすると、パネルが開きログインを促す画面が表示されます。「Sign In」ボタンを押すとデフォルトのブラウザが起動し、Anthropicの認証ページが開きます。ここでClaude Pro/Max/Team/Enterpriseアカウントの認証情報を入力すると、VSCodeに自動的にリダイレクトされ認証が完了します。

企業のTeamやEnterpriseプランを使用している場合、SSO（シングルサインオン）経由での認証が必要なケースがあります。この場合も基本的な流れは同じですが、組織のIDプロバイダーを経由する分、ステップが1つ増えます。認証に失敗する場合は、組織の管理者にClaude Codeの利用が許可されているかを確認してください。

認証情報はローカルに安全に保存されるため、毎回ログインし直す必要はありません。ただし、トークンの有効期限が切れた場合は再認証が求められます。

初期設定の確認

インストール直後に確認しておきたい設定がいくつかあります。VSCodeの設定画面（Cmd+,）を開き、「Claude Code」で検索すると拡張機能固有の設定項目が表示されます。

最初に確認すべきは initialPermissionMode です。この設定は、Claude Codeがファイルの読み書きやコマンド実行を行う際の権限承認モードを制御します。

モード	説明	推奨場面
default	ファイル書き込みやコマンド実行時に都度確認を求める	初めて使う場合、慎重に進めたい場合
plan	変更計画の提案のみ行い、実行は手動で承認する	コードレビュー的な使い方をしたい場合
auto	安全と判断された操作を自動実行する	信頼できるプロジェクトで効率重視の場合

筆者の経験では、最初は default モードで始め、Claude Codeの挙動に慣れてきたら auto に切り替えるのが安全なアプローチです。ただし、auto モードでも破壊的な操作（git push --force など）は承認が求められるため、完全に制御不能になることはありません。

もう1つ重要な設定が useTerminal です。これを有効にすると、Claude Codeがターミナルコマンドを実行する際にVSCodeの統合ターミナルを使用します。コマンドの実行状況をターミナルパネルで直接確認できるため、何が実行されているのかの透明性が高まります。

autosave 設定も確認しておくとよいでしょう。これを有効にすると、Claude Codeが変更を加えたファイルが自動的に保存されます。差分を確認してからAcceptした後にわざわざ Cmd+S を押す手間がなくなりますが、一方で変更を受け入れた瞬間にファイルが保存されるため、ホットリロードが走る開発環境では意図しないタイミングでリロードが発生する可能性がある点に留意してください。

CLIモードとVSCode拡張の違い

Claude CodeをCLIとして使う場合と、VSCode拡張として使う場合では、利用できる機能に差があります。以下の表で主要な違いを整理します。

機能	CLI	VSCode拡張
対話的なコード生成・修正	対応	対応
インライン差分表示（Accept/Reject）	非対応	対応
複数会話のタブ管理	非対応	対応
Plan Mode	対応（Shift+Tab）	対応（Ctrl+G）
チェックポイント・巻き戻し	対応	対応
MCP設定	CLIで設定	CLIで設定（拡張からは設定不可）
スラッシュコマンド	全コマンド対応	サブセットのみ対応
ファイル@メンション	対応	対応（行番号指定も可能）
ブラウザ連携（@browser）	対応	対応
プラグイン管理（/plugins）	対応	対応
ヘッドレス実行（-p フラグ）	対応	非対応
CI/CDパイプライン統合	対応	非対応
カスタムシステムプロンプト	対応	対応

注目すべき点がいくつかあります。まず、MCP（Model Context Protocol）の設定はCLI経由でのみ行えます。VSCode拡張のUIからMCPサーバーを追加・編集することはできません。MCPサーバーを追加したい場合は、統合ターミナルから claude mcp add コマンドを実行してください。拡張機能がCLIを内包しているため、わざわざ別のターミナルを開く必要はありません。

次に、スラッシュコマンドについてです。CLIでは /init、/config、/mcp などすべてのコマンドが利用できますが、VSCode拡張では一部のコマンドのみ対応しています。ただし、日常的な開発作業で頻繁に使うコマンド（/clear、/compact など）は拡張でも利用可能なため、実用上の問題は少ないでしょう。

もう1つの重要な違いは、ヘッドレス実行です。CLIでは claude -p "テストを実行して" のように非対話的にClaude Codeを呼び出せるため、CI/CDパイプラインやシェルスクリプトに組み込めます。VSCode拡張はあくまでインタラクティブな利用を前提としているため、自動化シナリオにはCLIを使う必要があります。

どちらを使うべきか

結論として、筆者は「基本はVSCode拡張、自動化やスクリプティングにはCLI」という使い分けを推奨します。日常の開発ではインライン差分表示の恩恵が大きく、コード変更の確認が格段に効率的です。一方で、定型作業の自動化やCI/CDへの組み込みは、CLIの得意領域です。

幸いなことに、拡張機能をインストールすればCLIも同時に利用可能になるため、両方を場面に応じて切り替えるのが最も合理的なアプローチです。

実際の開発フローで考えてみましょう。日中のコーディング作業ではVSCode拡張を使い、インライン差分で変更を確認しながら進めます。その日の作業が終わったら、CLIのヘッドレスモードでテストを一括実行するスクリプトを走らせる。あるいは、PRのレビューコメントへの対応はVSCode拡張で行い、CIパイプラインでのコード品質チェックにはCLIを組み込む。このように、同じプロジェクト内でもシチュエーションに応じて最適なインターフェースを選べるのが、Claude Codeのアーキテクチャの優れた点です。

VSCode上での実践的な使い方

ここからは、VSCode拡張機能を使った具体的な作業フローを紹介します。Claude Codeの基本的な操作方法についてはClaude Code使い方ガイドでも解説していますので、あわせてご参照ください。

キーボードショートカットを覚える

VSCode拡張で効率的に作業するには、主要なキーボードショートカットを覚えることが不可欠です。以下のショートカットは日常的に使うものばかりなので、早い段階で手に馴染ませておくとよいでしょう。

ショートカット	動作
`Cmd+Esc`	エディタとClaude Codeパネルのフォーカスを切り替え
`Cmd+Shift+Esc`	新しい会話タブを開く
`Option+K`	@メンションを挿入（ファイルや行の参照）
`Shift+Enter`	入力欄で改行（複数行の入力）
`Ctrl+G`	Plan Modeの切り替え

とくに Cmd+Esc は頻繁に使います。コードを編集している途中でClaude Codeに質問したいとき、マウスでパネルをクリックする必要がなく、キーボードだけでフォーカスを移動できます。回答を確認した後に再度 Cmd+Esc を押せばエディタに戻れるため、思考の流れを中断せずに済みます。

Shift+Enter による複数行入力も重要です。Claude Codeへの指示が複雑になるほど、改行を使った構造化された指示のほうが精度の高い結果を得やすくなります。たとえば以下のような入力が可能です。

以下の要件でAPIエンドポイントを実装してください。

- パス: /api/users/:id
- メソッド: GET
- レスポンス: ユーザー情報のJSON
- エラー時は適切なHTTPステータスコードを返す
- バリデーションにはzodを使用する

@メンションでコンテキストを共有する

VSCode拡張ならではの強力な機能が、@メンションによるファイルや行の参照です。Option+K を押すと@メンションの入力モードに切り替わり、ファイル名を入力してコンテキストに含めることができます。

単なるファイル参照だけでなく、行番号を指定した参照も可能です。たとえば @src/utils/auth.ts#42 と入力すれば、そのファイルの42行目周辺のコードがClaude Codeに共有されます。「この関数のバグを直して」という曖昧な指示ではなく、「@src/utils/auth.ts#42 のバリデーション処理で、nullの場合にエラーが発生する問題を修正して」のように具体的に伝えることで、より正確な修正が得られます。

筆者が実務でよく使うパターンを紹介します。

@src/components/UserProfile.tsx と @src/hooks/useUser.ts を参考に、
@src/components/TeamProfile.tsx を新しく作成してください。
チーム名の表示とメンバー一覧の表示機能を含めてください。

このように複数のファイルを@メンションで参照することで、既存のコードスタイルやパターンをClaude Codeに理解させた上で新しいコードを生成できます。ゼロから指示するよりも、はるかに一貫性のあるコードが出力される傾向があります。

@メンションの活用でもう1つ実用的なパターンがあります。テストファイルを参照させることで、テストの書き方のスタイルを統一できます。

@tests/unit/auth.test.ts のテストスタイルに合わせて、
@src/utils/payment.ts のユニットテストを作成してください。
モック対象は外部APIの呼び出し部分のみとしてください。

このように既存のテストファイルを明示的に参照することで、assertionの書き方やdescribe/itの構造、モックの手法まで既存のパターンを踏襲したテストコードが生成されます。プロジェクト内でテストのスタイルがバラバラになる問題を防ぐ上で非常に有効な手法です。

インライン差分の活用

Claude Codeがコード変更を提案すると、VSCodeのエディタ上にインラインの差分が表示されます。変更箇所が赤（削除）と緑（追加）でハイライトされ、各変更に対してAcceptまたはRejectを選択できます。

この機能の便利なところは、変更を部分的に採用できる点です。Claude Codeが5箇所の変更を提案した場合、そのうち3箇所だけをAcceptし、残り2箇所はRejectするといった使い方ができます。CLIでは変更がファイルに直接書き込まれるため、このような選択的な採用は困難です。

実際の開発では、Claude Codeの提案が概ね正しいが一部だけ修正したい、という場面が頻繁にあります。たとえば、関数のリファクタリングを依頼した際に、ロジックの変更は正しいがエラーメッセージの文言だけ変えたい、といったケースです。インライン差分があれば、ロジック部分だけをAcceptし、エラーメッセージ部分はRejectした上で手動で修正する、という流れがスムーズに行えます。

Plan Modeで変更計画を確認する

Plan Mode（Ctrl+G で切り替え）は、Claude Codeに実際のコード変更を行わせる前に、変更計画を提示させるモードです。大規模なリファクタリングや、影響範囲が広い変更を行う前に有効です。

Plan Modeを有効にした状態で「このモジュールを関数コンポーネントに書き換えて」と指示すると、Claude Codeは実際のコード変更を行わず、どのファイルのどの部分をどのように変更するかの計画を提示します。計画に問題がなければ通常モードに戻して実行を指示し、問題があれば計画の段階で方針を修正できます。

筆者がPlan Modeを活用する典型的なシナリオは以下のとおりです。

10ファイル以上に影響するリファクタリング
データベーススキーマの変更を伴う作業
既存のテストが壊れる可能性がある変更
新しいアーキテクチャパターンの導入

いずれも、事前に計画を確認することで手戻りを大幅に減らせます。とくにチーム開発では、Plan Modeの出力をチームメンバーと共有して合意を取ってから実行する、という運用も効果的です。

チェックポイントと巻き戻し

Claude Codeには、作業のチェックポイントを自動的に記録し、問題が発生した場合に巻き戻す機能があります。VSCode拡張では、会話の中の任意の時点に巻き戻すことが可能です。

これはGitのコミットとは別のレイヤーで動作するもので、まだコミットしていない作業中の変更も巻き戻せます。Claude Codeに大きな変更を依頼して結果が期待どおりでなかった場合、チェックポイントに巻き戻してやり直すことができます。

筆者がとくに便利だと感じているのは、試行錯誤の中で「2つ前の状態がいちばん良かった」と気づいたときです。Gitであれば手動でstashやresetを駆使する必要がありますが、チェックポイント機能なら会話履歴のタイムラインから目的の時点をクリックするだけで復元できます。

Auto-accept Modeの活用

ある程度Claude Codeの出力に信頼が置けるようになったら、auto-accept modeの活用を検討してみてください。このモードを有効にすると、Claude Codeが提案する変更が自動的にAcceptされ、いちいち承認ボタンを押す手間がなくなります。

auto-accept modeが適しているのは、以下のような場面です。

テストコードの大量生成
定型的なCRUDコードの生成
既存コードへのコメント追加
コードフォーマットの統一

逆に、ビジネスロジックの変更や、セキュリティに関わる処理の修正では、auto-accept modeは無効にし、差分を1つずつ確認することを強く推奨します。

筆者のチームでは、auto-accept modeの利用ルールを以下のように定めています。テストコードやドキュメント生成のような低リスクの作業ではauto-acceptを有効にし、プロダクションコードの変更では必ず無効にする。このルールをCLAUDE.mdに明記しておくことで、チーム全体で一貫した運用が実現できています。

ブラウザ連携（@browser）

Claude Codeでは @browser を使ってブラウザの表示内容をコンテキストに含めることができます。たとえば開発サーバーで表示されているページのスクリーンショットをClaude Codeに共有し、「このUIのこの部分のスタイルを修正して」といった視覚的な指示が可能です。

Chrome拡張との連携により、開発者ツールのコンソールエラーやネットワークタブの情報もClaude Codeに共有できるため、デバッグ作業の効率が飛躍的に向上します。「画面にこのエラーが表示されている」とテキストで説明する代わりに、実際のエラー画面を直接共有できるわけです。

具体的な使用例として、CSSのレイアウト崩れの修正を挙げます。従来であれば「ヘッダーのナビゲーションが右にはみ出している」とテキストで説明し、さらにどの画面幅で発生するか、どの要素が原因かを調べて伝える必要がありました。@browserを使えば、問題が発生しているページのスクリーンショットをそのまま共有し、「この状態を修正して」と指示するだけで済みます。Claude Codeは画像から問題を視覚的に理解し、該当するCSSの修正を提案してくれます。

フロントエンド開発においてとくに威力を発揮する機能であり、デザイナーから共有されたスクリーンショットとの差異を指摘して修正を依頼する、というワークフローとも好相性です。

プラグイン管理（/plugins）

Claude Codeではプラグインによる機能拡張が可能です。VSCode拡張の会話パネルで /plugins コマンドを使うと、利用可能なプラグインの一覧表示やインストール、有効化・無効化を行えます。

プラグインはClaude Codeのコア機能を拡張するもので、たとえばプロジェクト固有のリンターとの連携や、特定のフレームワーク向けのコード生成テンプレートなどが提供されています。プロジェクトに必要なプラグインを適切に構成することで、Claude Codeの出力品質をさらに向上させることができます。

実践的なワークフロー例：機能追加の流れ

ここまで個別の機能を紹介してきましたが、実際の開発ではこれらを組み合わせて使います。典型的な機能追加の流れを1つ示します。

Plan Modeで設計を確認する: Ctrl+G でPlan Modeに切り替え、「ユーザープロフィール編集機能を追加したい」と指示する。Claude Codeが変更対象のファイルと修正方針を提示するので、チームメンバーと共有して合意を取る。
通常モードで実装を進める: Plan Modeを解除し、計画に沿って実装を指示する。@メンションで関連ファイルを参照しながら、段階的にコードを生成する。
インライン差分で変更を確認する: 各ファイルの変更内容をインライン差分で1つずつ確認し、問題があればRejectして修正指示を出す。
テストを生成する: 実装が完了したら、auto-accept modeを有効にしてテストコードを一括生成する。既存のテストファイルを@メンションで参照し、スタイルを統一する。
問題があればチェックポイントで巻き戻す: テスト実行で問題が見つかった場合、チェックポイントを使って適切な時点まで巻き戻し、別のアプローチで再実装する。

この一連の流れがVSCodeの1つのウィンドウ内で完結するのが、拡張機能の真価です。ターミナル、エディタ、差分ビューア、テストランナーをそれぞれ別のツールで開く必要がなく、Claude Codeとの対話を中心に据えた効率的な開発が実現します。

Claude Code Desktopアプリとの比較

Claude CodeにはVSCode拡張のほかに、スタンドアロンのデスクトップアプリケーションも提供されています。ここでは両者の違いを整理します。

観点	VSCode拡張	Desktopアプリ
IDE統合	VSCodeと深く統合	独立したアプリケーション
インライン差分	エディタ上で直接表示	アプリ内で表示
エディタ機能	VSCodeの全機能を利用可能	限定的
拡張機能の活用	VSCodeの他の拡張と併用可能	不可
ターミナル統合	VSCodeの統合ターミナルと連携	内蔵ターミナル
起動速度	VSCode起動後に利用可能	アプリ単体で起動
マルチプロジェクト	ワークスペースで管理	プロジェクトを切り替え
対象ユーザー	VSCodeを常用している開発者	IDE非依存で使いたい場合

筆者としては、日常的にVSCodeで開発している場合はVSCode拡張一択だと考えています。理由は明確で、エディタとの統合による作業効率の向上が圧倒的だからです。コードの編集、差分の確認、ターミナルでのコマンド実行がすべて1つのウィンドウ内で完結し、コンテキストスイッチのコストがほぼゼロになります。

一方、Desktopアプリが適しているのは以下のようなケースです。

JetBrains IDEやVim/Neovimなど、VSCode以外のエディタを主に使っている場合
コードを書くよりもClaude Codeとの対話（設計相談、技術調査など）が主目的の場合
複数のIDEをプロジェクトによって使い分けており、Claude Codeの環境を統一したい場合

また、VSCode拡張とDesktopアプリは同時に利用することも可能です。たとえば、コーディング作業はVSCode拡張で、技術調査やドキュメント作成はDesktopアプリで、という使い分けも現実的です。ただし、同じプロジェクトディレクトリで同時に実行すると競合が発生する可能性があるため、その点は注意が必要です。

JetBrains IDEユーザーへの補足

JetBrains IDE（IntelliJ IDEA、WebStormなど）を使っている方にとっては、現時点ではCLIまたはDesktopアプリが主な選択肢となります。JetBrains向けのClaude Code拡張は、本記事の執筆時点ではVSCode版ほどの機能は提供されていないため、VSCodeへの移行を検討するか、CLIベースでの運用が現実的です。

とはいえ、JetBrainsのターミナル機能は充実しているため、CLIとしてのClaude Codeを統合ターミナルから使う方法でも十分に生産性の向上は見込めます。

どの環境を選ぶべきか：判断フローチャート

最適な環境の選択に迷う方のために、判断の流れを整理します。

まず、メインのエディタがVSCodeかどうかを確認してください。VSCodeを日常的に使っている場合は、VSCode拡張が最善の選択です。インライン差分やタブ管理といったIDE統合の恩恵を最大限に受けられます。

次に、VSCode以外のエディタを使っている場合です。JetBrains IDEであれば、統合ターミナルからCLIを使う方法が実用的です。Vim/Neovimユーザーであれば、ターミナルでCLIを使うワークフローがエディタの思想とも合致するでしょう。

エディタに依存しない環境が欲しい場合や、コーディング以外の用途（技術調査、ドキュメント作成、設計相談など）が主目的の場合は、Desktopアプリが適しています。

最後に、CI/CDパイプラインへの組み込みやバッチ処理が必要な場合は、CLIのヘッドレスモード一択です。この用途ではGUIは不要であり、スクリプトから呼び出せるCLIの柔軟性が活きます。

まとめ

本記事では、Claude CodeをVSCodeで活用するための情報を、インストールからカスタマイズまで一通り解説しました。改めて要点を整理します。

導入のポイント

VSCode拡張は Cmd+Shift+X から「Claude Code」を検索してインストール
VS Code 1.98.0以上とClaude Pro/Max/Team/Enterpriseアカウントが必要
拡張をインストールすればCLIも同時に利用可能

日常的に活用すべき機能

インライン差分表示によるコード変更の視覚的確認
@メンションによるファイル・行番号の参照
Cmd+Esc によるエディタとClaude Codeパネルの高速切り替え
Plan Modeによる大規模変更の事前確認
チェックポイントによる安全な試行錯誤

設定の最適化

initialPermissionMode でプロジェクトに応じた権限レベルを設定
useTerminal でコマンド実行の透明性を確保
ワークスペースごとの設定でプロジェクト別の最適化を実現

Claude CodeのVSCode拡張は、AIコーディングアシスタントをIDE内でシームレスに利用するための現時点で最も洗練されたソリューションの1つです。CLIの柔軟性を維持しつつ、視覚的な差分確認やタブ管理といったGUIならではの利点を提供しており、日常の開発ワークフローに自然に組み込むことができます。

導入のハードルは低く、VSCodeの拡張機能パネルからインストールするだけで始められます。まずは小さなタスク——たとえばテストの生成やドキュメントコメントの追加——から試してみて、徐々にリファクタリングや機能実装といった本格的な作業にも活用範囲を広げていくのがスムーズな導入パスです。

筆者たちaduceでは、チーム全体でClaude CodeのVSCode拡張を標準ツールとして採用し、コードレビューの効率化や定型作業の自動化に活用しています。導入に関するご相談やAI活用に関するお問い合わせは、お問い合わせページからお気軽にご連絡ください。