Claude CodeをVS Codeで使う方法｜拡張機能の導入・設定・使い方を解説

本記事では、VS Code版Claude Codeの特徴や導入方法、基本的な使い方を解説します。
Claude Codeの概要や基本操作を詳しく知りたい方は、以下の記事もあわせてご覧ください。

▼こちらもチェック▼

Claude Codeとは？できること・料金・始め方を初心者向けに解説 ▶ Claude Codeの使い方｜今からでもわかる基本操作・コマンド・便利機能 ▶

VS Code版Claude Codeの特徴

VS Code拡張機能とCLI版の違い

公式の「Claude Code for VS Code」を導入すると、VS Code内のパネルからClaude Codeを操作でき、編集中のコードやファイルを参照しながら指示を出せます。

CLI版がターミナルを中心に操作するのに対し、VS Code版ではコードとClaude Codeを同じ画面で確認できるため、視覚的に作業を進めやすい点が特徴です。

VS Code版Claude Codeを利用するメリット

VS Code版のメリットは、AIへの指示からコードの確認、変更内容のレビューまでをVS Code内で進められる点です。

コードの選択やファイル指定、差分確認などを利用できるため、Claude Codeによる変更内容を確認しながら開発を進められます。次章から、実際の導入方法と基本的な使い方を見ていきましょう。

Claude CodeをVS Codeに導入する方法

VS CodeとClaudeアカウントを準備する

VS Code版Claude Codeの利用には、VS Codeの事前インストールとAnthropicのClaudeアカウントが必要です。
まだ準備が整っていない場合は、先にインストールとアカウント登録を済ませておきましょう。

ただし、VS Code版は、CLI版と同様に無料プランでの利用ができない点に注意してください。

Claude Codeの公式拡張機能をインストールする

VS Codeを起動したら、画面左側にあるアクティビティバーから「拡張機能」を開きます。

検索欄に「Claude Code」と入力すると、Claude Codeに関連する拡張機能が表示されます。
その中から、公式のClaude Code拡張機能を選択し、「Install」をクリックします。

拡張機能をインストールすることで、VS Codeの画面上からClaude Codeを起動し、AIとの会話や開発作業を行えるようになります。

Claudeアカウントでログインする

拡張機能のインストールが完了したら、Claude Codeを起動します。
初回起動時にはサインイン画面が表示されるため、案内に従って利用するアカウントを認証してください。

既にClaude Codeを利用している場合でも、VS Code上で初めて利用する際には認証が必要になることがあります。
その場合も、表示される手順に従ってログインを完了させましょう。

Claude Codeのパネルを開く

ログインが完了すると、VS Code上からClaude Codeのパネルを開けるようになります。
画面右上に表示されるClaude Codeのアイコンをクリックすると、Claude Codeとの会話を行うパネルが表示されます。

パネルでは、通常のチャットサービスと同じように自然言語で指示を入力できます。
また、パネルをエディタの横に表示しておけば、Claude Codeとの会話を確認しながらコードを編集できます。

VS CodeでClaude Codeを使用する方法

選択したコードについて質問する

コードの確認中、処理内容が分からない箇所や、エラーが発生する原因について調べたくなるケースがあります。
そのような場合は、VS Codeのエディタ上で対象となるコードを選択し、そのコードについてClaude Codeに質問できます。

特定の関数や数行の処理を選択した状態で質問を入力すると、Claude Codeは選択したコードを参照しながら回答や修正案を提示します。
選択機能を利用することで、対象となるコードを指定しながらスムーズに質問できます。

また、処理内容を質問するだけでなく、バグの有無やパフォーマンス改善の余地について、レビューを依頼することもできます。

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

Claude Codeに特定のファイルやコードを参照させたい場合は、チャット内で「@」を利用して対象を指定できます。

例:
・@src/auth.ts の認証処理を確認して、セキュリティ上問題がありそうな部分を指摘してください
・@src/user.ts と @src/admin.ts の実装の違いを確認し、共通化できる処理を提案してください

@メンションを使って対象を明示的に指定すると、参照してほしいファイルを正確に伝えられます。
必要なコードだけに絞って作業を依頼できるのもポイントです。

コードの作成や修正を依頼する

Claude Codeでは、自然言語によってコードの作成や既存コードの修正を依頼できます。

例:
・ユーザーが入力したメールアドレスを検証する関数を追加してください
・この関数で例外が発生した場合にエラー処理を追加してください

より複雑な作業を依頼する場合は、「既存の関数名は変更しない」 「外部ライブラリは追加しない」 といったように、変更してほしい内容だけでなく守るべき条件も一緒に伝えると効果的です。
また、一度に大規模な変更を依頼するのではなく、作業を複数のステップに分けて進めると、AIがどのような変更を行うのかを把握しやすくなります。

インライン差分を確認して変更を反映する

AIによるコードの変更を行う際は、基本的に実行前の段階で承認が求められます。

VS Code版の場合、コードの変更内容をエディタ上で確認できるため、インライン差分などで比較しながら作業を進められます。
不要な変更や意図しない修正が含まれている場合は、変更を拒否して修正内容を見直せます。
また、変更内容を確認したあとに、続けて追加の指示を出すこともできます。

一見すると正しく見えるコードでも、独自の仕様や既存の設計方針と合わない場合があるため、差分を確認しながら必要な変更だけを反映するようにしましょう。

ターミナルの出力を共有する

ビルドエラーやテストの失敗時など、エラーメッセージを確認しながら問題を解決する必要があるケースもあります。
VS Code版では、ターミナルで発生した出力をClaude Codeとのやり取りに共有し、その内容について質問できます。

また、必要に応じて関連するコードや設定ファイルも共有すると、問題の原因をより詳しく調査しやすくなります。

例:
ターミナルでこのエラーが発生しています。@package.json と @src/index.ts を確認して原因を調べてください

エラー内容だけでは判断が難しい問題についても、ターミナルの出力とプロジェクト内のファイルを組み合わせることで、関連するコードを確認しながら調査を依頼できます。

VS Code版Claude Codeを便利に使う機能

VS Code版Claude Codeには、より計画的に開発を進めるための機能も用意されています。

Plan Modeの作業計画を確認・編集する

比較的大きな作業を依頼する場合、すぐにコードの変更を開始すると、意図していないファイルの変更や設計方針と合わない実装が行われたりする可能性があります。
そこで活躍するのが、「Plan Mode」です。

Plan Modeを利用すると、プロジェクト内の関連ファイルを確認しながら、実装前の調査や作業計画の作成を依頼できます。
利用者は、Claude Codeが作成した計画を確認し、必要に応じて追加の指示を出せます。

計画の段階で方向性を調整してから実装に進めば、「想定していた内容と違った」というズレを防げます。

セッション履歴から過去の会話を再開する

開発規模によっては、一度の作業ですべてを完了できるとは限りません。
その場合に役立つのが、過去のセッション履歴を利用する方法です。

セッション履歴を利用すると、以前Claude Codeと行った会話を確認し、過去のやり取りをもとに作業を再開できます。
以前の調査内容や指示を引き継いで作業を進めたい場合に便利な機能です。

ただし、過去のセッションを利用する場合でも、プロジェクトの状態は会話時点から変更されている可能性があります。
そのため、以前の会話内容だけを前提に作業を進めるのではなく、必要に応じて現在のコードやファイルの状態を確認することが重要です。

複数のセッションを並行して使用する

Claude Codeでは、作業内容に応じて複数のセッションを利用することも可能です。

すべての作業を一つの会話にまとめると、やり取りが長くなり、どの話題について話していたのか分かりにくくなることがあります。
そこで、作業ごとにセッションを分けると、それぞれの会話の内容を整理できます。

ただし、別々のセッションから異なる修正が行われると、変更内容が競合したり、修正が意図せず上書きされたりする可能性があります。
複数のセッションで同じファイルを同時に変更する場合には注意が必要です。

パネルの表示位置やショートカットを設定する

VS Code版の場合、開発環境に統合して利用できるため、作業しやすいように画面のレイアウトを調整できます。
パネルをエディタの横に配置すれば、コードを確認しながらAIとの会話を進められます。
また、画面の幅を広く使いたいときはパネルを非表示にするなど、状況に合わせた使い方ができます。

また、コマンドパレットやキーボードショートカットを利用することで、マウス操作を減らしながらClaude Codeを起動できる場合もあります。

頻繁にClaude Codeを利用する場合は、関連するコマンドを素早く実行できるようにしておくと便利です。

VS CodeでClaude Codeが動作しない場合の対処法

VS Code版を利用していると、拡張機能をインストールできない、アイコンが表示されない、ログインに失敗するといった問題が発生する場合があります。
ここでは、代表的なトラブルと基本的な対処法を紹介します。

Claude Code拡張機能をインストールできない場合

Claude Codeの拡張機能をインストールできない場合は、まずVS Codeが正常にインターネットへ接続できているか確認しましょう。
VS Codeの拡張機能はMarketplaceから取得するため、ネットワーク接続に問題がある場合や、プロキシ・ファイアウォールなどによってアクセスが制限されている場合は、インストールに失敗することがあります。

また、使用しているVS Codeのバージョンが古い場合、拡張機能の要件を満たしていない可能性もあります。
VS Codeを最新版に更新したあと、再度インストールを試してみましょう。

Claude Codeのアイコンやパネルが表示されない場合

拡張機能をインストールしたにもかかわらず、Claude Codeのアイコンやパネルが表示されない場合は、まず拡張機能が有効になっているか確認します。
拡張機能一覧からClaude Codeの詳細画面に進み、有効状態になっているかを確認してください。

また、拡張機能をインストールした直後は、VS Codeの再起動やウィンドウの再読み込みが必要になる場合があります。

Claudeアカウントにログインできない場合

Claude Codeへのログインが正常に完了しない場合は、まず使用しているClaudeアカウントが正しいか確認しましょう。
使いたいアカウントとは別のアカウントでログインしていたり、そのアカウントが利用できない状態になっていたりする可能性があります。

認証画面が開かない場合は、ブラウザのポップアップ設定や、認証ページへのアクセスがネットワークによって制限されていないか確認しましょう。
一度ログイン操作を中止し、VS Codeやブラウザを再起動してから再度認証を行う方法も有効です。

Claude Codeが応答しない場合

Claude Codeにメッセージを送信しても応答がない場合は、まずインターネット接続を確認します。
Claude CodeはAIモデルとの通信が必要になるため、ネットワーク接続が不安定な場合は、応答が遅くなったり、処理に失敗したりすることがあります。

また、一時的なサービス側の障害やメンテナンスが原因となっている可能性もあります。
この場合は、少し時間を置いてから再度試すか、サービスの稼働状況を確認しましょう。

ターミナルで「claude」コマンドを実行できない場合

ケースによっては、CLI版のClaude Codeをターミナルから使用する場合もあります。
このとき、「claude: command not found」などのエラーが表示される場合は、CLI版Claude Codeがインストールされていない、またはコマンドの実行ファイルにPATHが通っていない可能性があります。

まず、CLI版が正常にインストールされているか確認しましょう。
インストール済みなのにコマンドを認識できない場合は、環境変数の設定を確認してください。

また、VS Codeの統合ターミナルと、OS上で直接起動したターミナルでは、読み込まれる環境変数や設定ファイルが異なる場合があります。
OSのターミナルでは実行できるのにVS Code内では実行できない場合は、VS Codeを再起動してみましょう。
そのうえで、使用しているシェルの設定が統合ターミナルにも反映されているか確認してください。

まとめ

VS Code版は、編集中のコードを確認しながら質問したり、ファイルを指定して作業を依頼したりできるため、視覚的に作業を進めやすいです。
普段からVS Codeをよく利用するという方には、特におすすめの導入方法です。