Claude CodeをVS Codeで使う方法｜拡張機能のインストール・使い方・設定

「Claude Codeを使いたいが、黒い画面（ターミナル）は慣れていない」「いつも使っているVS Codeの中で、AIにコードを直してもらいたい」と考えている方は多いのではないでしょうか。

Claude Codeには、VS Code（Visual Studio Code）の拡張機能があります。拡張機能を入れると、VS Codeの画面の横にClaudeとのチャット欄が開き、ファイルを指定して質問したり、Claudeが提案した変更を見比べてから取り込んだりできます。Anthropicの公式ドキュメントでも、VS CodeでClaude Codeを使うときのおすすめの方法とされています。

この記事では、VS Code版を使うために必要なもの、インストールとログインの手順、基本の使い方、便利な機能、ショートカットと設定、うまく動かないときの対処までを順に解説します。内容は2026年10月15日時点の公式ドキュメントをもとにしています。拡張機能は更新が多いので、画面の細かな表示は変わることがあります。

VS Code版Claude Codeとは

Claude Codeは、Anthropic社のAI「Claude」に、プログラムを読ませたり、書かせたり、直させたりする道具です。もともとはターミナルで動く道具（CLI）として始まりましたが、いまはVS Codeの拡張機能、デスクトップアプリ、Web版など、いくつかの使い方があります。

拡張機能でできること

VS Code版は、ターミナル版のClaude Codeを、VS Codeの画面で操作できるようにしたものです。公式ドキュメントでは、次のようなことができると紹介されています。

• Claudeが立てた作業の計画を、取りかかる前に確認・修正する
• Claudeが提案した変更を、元のコードと左右に並べて見比べてから取り込む
• エディタで選んだ範囲や、特定のファイルを指定して質問する
• 過去の会話の続きから再開する
• 複数の会話を、別々のタブやウィンドウで同時に進める

ターミナルのコマンドを覚えなくても、ボタンやメニューで操作できるのが大きな利点です。プログラミングに詳しくない方が、社内ツールの小さな修正やWebサイトの更新をClaudeに頼むときにも使いやすい形です。

ターミナル版との違い

VS Code版とターミナル版は、中身は同じClaude Codeです。設定ファイル（~/.claude/settings.json）や会話の履歴も共通で、片方で始めた会話をもう片方で続けられます。ただし、一部の機能はターミナル版にしかありません。

ふだんはVS Code版を使い、ターミナル版にしかない機能が必要なときだけ、VS Codeの中のターミナルでclaudeを起動する、という使い分けができます。

必要なもの

Claudeの無料プランでは、Claude Codeは使えません。まず試すなら、月20ドルのProが入り口になります。会社のAWSやGoogle Cloudを通してClaudeを使っている場合は、そちらの設定で使う方法もあります（後で説明します）。VS Codeのバージョンは、メニューの「Help」→「About」で確認できます。

インストール手順

拡張機能のインストールは、VS Codeの中で数クリックで終わります。

1. 拡張機能の画面を開くVS CodeでCmd+Shift+X（Mac）またはCtrl+Shift+X（Windows・Linux）を押すと、左側に拡張機能の一覧が開きます。
2. 「Claude Code」で検索する検索欄に「Claude Code」と入力します。提供元が「Anthropic」になっているものを選んでください（拡張機能のIDはanthropic.claude-code）。
3. インストールする「Install」をクリックします。数秒でインストールが終わります。
4. 表示されなければ再読み込みするインストール後にアイコンが出てこない場合は、VS Codeを再起動するか、コマンドパレット（Cmd+Shift+P／Ctrl+Shift+P）で「Developer: Reload Window」を実行します。

名前の似た拡張機能もあるため、提供元がAnthropicであることを必ず確認しましょう。公式のMarketplaceのページから入れることもできます。

拡張機能のバージョンの数字は、中に入っているClaude Codeのバージョンと同じです。新しい機能の中には「Claude Code v2.1.2xx以降が必要」といった条件があるので、拡張機能はこまめに更新しておくと、記事の説明どおりに使えます。

Cursorなどほかのエディタ

VS Codeをもとにした別のエディタでも使えます。公式ドキュメントでは、CursorのほかDevin DesktopやKiroなどでも、拡張機能の画面で「Claude Code」と検索すれば入れられると案内されています。Open VSXという拡張機能の配布サイトからも入手できます。拡張機能を入れられないエディタでは、ターミナル版をインストールして、そのエディタのターミナルでclaudeを起動します。

ログインと最初の設定

インストールが終わったら、Claude Codeの画面を開いてログインします。

1. Claude Codeの画面を開くファイルを1つ開くと、エディタの右上に「Spark」と呼ばれるClaude Codeのアイコンが表示されます。これをクリックすると、Claudeの画面が開きます。ファイルを開いていないときは、ウィンドウ右下のステータスバーにある「✻ Claude Code」をクリックしても開けます。
2. ログインする初めて開くとログイン画面が出ます。「Sign in」をクリックすると、ブラウザが開くので、Claudeのアカウントでログインして承認します。
3. 使い方のチェックリストを見るログインすると「Learn Claude Code」というチェックリストが表示されます。各項目の「Show me」を押すと、基本の操作を順に試せます。不要ならXで閉じられます。
4. 最初の質問を送る入力欄に「このフォルダの中身を説明して」などと書いて送ります。Claudeが開いているフォルダを読み、答えてくれます。

左端のアクティビティバー（縦に並んだアイコンの列）にもSparkのアイコンが常に表示されていて、ここからは会話の一覧を開けます。コマンドパレットで「Claude Code」と入力し、「Open in New Tab」などを選んで開く方法もあります。

なお、ターミナルでAPIキー（ANTHROPIC_API_KEY）を設定しているのにログイン画面が出る場合は、VS Codeがターミナルの設定を引き継いでいない可能性があります。ターミナルからcode .でVS Codeを起動するか、Claudeのアカウントでログインしてください。

権限モードを選ぶ

Claude Codeは、ファイルを書き換えたり、コマンドを実行したりできます。どこまで確認なしで任せるかを決めるのが「権限モード」です。入力欄の下にいまのモードが表示されていて、クリックすると切り替えられます。

公式ドキュメントでは、新しいバージョン（v2.1.283以降）では、最初のモードはAutoとされています。慣れないうちは、Manualにして、Claudeが何をしようとしているかを1つずつ確認しながら使うのがおすすめです。

画面の位置を変える

Claudeの画面は、タブやタイトルの部分をドラッグして好きな場所に動かせます。右側のサイドバー（セカンダリサイドバー）に置けば、コードを書きながらClaudeを常に表示しておけます。左のサイドバーや、ファイルと並ぶタブとして開くこともできます。一度決めた位置は覚えておいてくれます。

基本の使い方

ここからは、ふだんの作業で使う基本の操作を紹介します。

質問する・作業を頼む

入力欄に、日本語でそのまま書いて送ります。「この関数が何をしているか説明して」「ログインできない不具合を直して」「お問い合わせフォームに電話番号の欄を足して」のように、やってほしいことを具体的に書くほど、狙いどおりの結果になりやすくなります。改行したいときはShift+Enterを押します。

最初に試したい依頼の例

何を頼めばよいか迷ったら、次のような依頼から試すと、Claude Codeでできることがつかみやすくなります。

最初は「説明して」「調べて」のような、ファイルを書き換えない依頼から始めると安心です。慣れてきたら、小さな修正を頼み、比較画面で変更を確認する流れを覚えていきましょう。

ファイルやフォルダを指定する

入力欄で@に続けてファイル名やフォルダ名を入力すると、Claudeにそのファイルを読ませられます。名前の一部だけでも候補が出るので、@authと入力すれば、auth.jsやAuthService.tsなどが候補に表示されます。フォルダを指定するときは、@src/components/のように最後に「/」を付けます。

また、Claudeは、エディタでいま開いているファイルの名前も自動で受け取ります。入力欄にもそのファイル名が表示されます。

選択した範囲を渡す

エディタでコードを選択すると、Claudeはその範囲を自動で読み取ります。入力欄の下に、何行を選択しているかが表示されます。さらにOption+K（Mac）／Alt+K（Windows・Linux）を押すと、@app.ts#5-10のような「ファイル名と行番号」の指定が入力欄に入ります。「この5〜10行目をもっと短く書いて」のように、場所を正確に伝えたいときに便利です。

選択した範囲を渡したくないときは、表示の横のXをクリックします。なお、.gitignoreなどで除外しているファイルでは、選択した中身は渡されず、ファイルの場所だけが伝わる仕組みになっています。

画像やファイルを添付する

画面のスクリーンショットなどの画像は、コピーして入力欄に貼り付けるだけで添付できます。ファイルは、Shiftキーを押しながら入力欄にドラッグします。「このデザインの見本のとおりにボタンを直して」と画像を添えて頼む、といった使い方ができます。

変更を確認して取り込む

Manualモードでは、Claudeがファイルを書き換えようとすると、元のコードと変更後のコードが左右に並んだ比較画面が開き、許可を求められます。内容を見て、取り込む・取り込まない・別の指示を出す、のいずれかを選びます。比較画面の中で自分で書き直してから取り込むこともでき、その場合はClaudeにも「人が修正した」と伝わります。

変更が多いときは、変更ごとに表示される「Accept this change」「Reject this change」のボタンで、1か所ずつ取り込むかどうかを決められます（変更が100か所を超える場合はファイル全体で判断します）。

計画モードで進め方を確かめる

大きめの作業を頼むときは、Planモードが役に立ちます。Planモードでは、Claudeがまず「何を、どの順番で、どう変えるか」の計画を書き、VS Codeがその計画を文書として開きます。計画の気になる部分にコメントを書き込んでから承認すると、その指示を反映して作業が始まります。

入力欄で/planと入力してもPlanモードに切り替わります。/plan ログインの不具合を直してのように続けて書けば、切り替えと同時にその作業の計画づくりが始まります。

モデルを切り替える

入力欄の下に表示されているモデル名をクリックすると、使うモデルを選べます。/modelと入力しても同じ画面が開きます。モデルによっては、考える量（Effort）もここで変えられます。Pro・Max・Team・Enterpriseでは、初期設定のモデルはOpus 5.5です。速さを重視したい簡単な作業ではSonnetに切り替えると、使用量も抑えられます。

便利な機能

基本の操作に慣れたら、次の機能も使ってみてください。作業の安全性と効率が上がります。

チェックポイントで巻き戻す

Claudeが行ったファイルの変更は記録されていて、前の状態に戻せます。会話の中のメッセージにマウスを合わせると巻き戻しのボタンが出て、次の3つから選べます。

「思っていた方向と違う修正をされた」ときも、この機能ですぐに元に戻せます。ただし、大事な作業の前には、Gitでコミットしておくなど、別の方法でも元に戻せるようにしておくと安心です。

過去の会話を再開する

Claudeの画面の上にある「Session history」ボタンから、過去の会話の一覧を開けます。キーワードで探したり、日付でたどったりでき、クリックするとその会話の続きから再開できます。新しい会話には、最初のメッセージをもとにした題名が自動で付きます。マウスを合わせると、題名の変更やアーカイブもできます。

VS Code版とターミナル版は会話の履歴を共有しているので、ターミナルでclaude --resumeを実行すれば、VS Codeで始めた会話をターミナルで続けることもできます。

複数の会話を同時に進める

コマンドパレットの「Open in New Tab」や「Open in New Window」で、別の会話を開けます。会話ごとに履歴は分かれているので、「片方で不具合を直しながら、もう片方で説明書を書かせる」といった並行作業ができます。タブのアイコンに青い点が付いたら許可待ち、オレンジの点は見ていない間に作業が終わったという合図です。

会話の一覧を整理する

会話が増えてきたら、アクティビティバーの会話の一覧でグループにまとめられます。会話を右クリックして新しいグループを作るか、既存のグループに移します。Cmd（WindowsはCtrl）を押しながらクリックすれば、複数の会話をまとめて動かせます。グループはフォルダごとに保存され、再読み込みしても残ります。

一覧の上にある「Active」をオンにすると、返事待ち・作業中・未読の会話だけに絞り込めます。じょうごのアイコンからは「Needs input（入力待ち）」「Working（作業中）」「Completed（完了）」などの状態で絞り込めます。14日間使わなかった会話は、初期設定で自動的にアーカイブされます。

ターミナルの出力を見せる

エラーの内容をClaudeに伝えたいときは、コピーして貼り付けなくても、@terminal:名前と書けば、そのターミナルに出ている内容をClaudeが読めます（名前はターミナルの題名）。「@terminal:zsh のエラーを直して」のように使います。

Gitのコミットやプルリクエスト

Claudeは、変更内容をもとにコミットのメッセージを書いてコミットしたり、プルリクエスト（変更の取り込み依頼）を作ったりもできます。「変更をコミットして」「この機能のプルリクエストを作って」と頼むだけで、実際の変更内容から説明文を作ってくれます。

ブラウザを操作させる

Chromeの拡張機能「Claude in Chrome」（バージョン1.0.36以降）を入れておくと、VS Codeから離れずに、Claudeにブラウザを操作させられます。入力欄に@browserと書いて、続けてやってほしいことを書きます。たとえば「@browser localhost:3000を開いて、コンソールにエラーが出ていないか確認して」と頼むと、作ったWebページを実際に開いて確かめてくれます。

Claudeはブラウザのログイン状態を共有するので、すでにログインしているサイトにもアクセスできます。便利な反面、社内システムなど大事なサイトにログインしたまま使うと、意図しない操作が起きる可能性もあります。慣れないうちは、確認が必要な操作で許可を求める設定のまま使いましょう。

外部の道具とつなぐ（MCP）

MCP（Model Context Protocol）は、Claudeを外部の道具やデータベース、サービスとつなぐ仕組みです。VS Code版では、入力欄に/mcpと入力すると管理画面が開き、つなぐ先（MCPサーバー）の追加・削除、有効・無効の切り替え、再接続、ログインの管理ができます。VS Codeのターミナルでclaude mcp addを使って追加することもでき、どちらで追加しても同じ設定に保存されます。

たとえばGitHubとつないでおけば、「プルリクエスト#456を確認して」と頼むだけで、Claudeがその内容を読んでレビューしてくれます。追加したら、新しい会話で/mcpを開き、「Connected」と表示されるかを確かめてください。「Failed」なら、ログイン情報などの設定を見直します。

プラグインを入れる

プラグインは、スキルやコマンド、MCPサーバーなどをまとめて追加できるパッケージです。入力欄で/pluginsと入力すると「Manage plugins」の画面が開き、入っているプラグインのオン・オフ、追加できるプラグインの検索とインストールができます。インストールするときは、次の3つから使う範囲を選びます。

チームで同じ道具を使いたいときは「Install for this project」、まず自分で試したいときは「Install locally」を選ぶと、ほかのメンバーに影響を与えずに済みます。

Web版の作業をVS Codeで続ける

claude.aiのWeb版で動かしたClaude Codeの作業（クラウドの作業）も、VS Codeで続きから開けます。「Session history」を開くと「Local」と「Web」の2つのタブがあり、「Web」を選ぶとWeb版の作業が一覧で表示されます。Claudeのプラン（Claude.ai Subscription）でログインしている場合に使える機能です。開くと会話の履歴がVS Codeに複製され、VS Codeで続けた内容はWeb版には反映されません。

使用量を確認する

入力欄で/usageと入力すると、ログイン中のアカウントと使用量が表示されます。Claudeのプランでログインしている場合は、5時間ごとや週ごとの上限に対してどれくらい使ったか、いつ回復するかが分かります。どの機能が使用量を多く使っているかの内訳も表示されるので、上限によく達する場合は確認してみてください。

入力欄には、いまの会話がClaudeの読める量（コンテキスト）のどれくらいを使っているかも表示されます。会話が長くなると自動で要約されますが、/compactで自分から要約させることもできます。

ショートカットと設定

よく使うショートカットを表にまとめました。コマンドパレットで「Claude Code」と入力すると、ほかのコマンドも一覧で確認できます。

コマンドメニューでできること

入力欄で/を入力するか、/のボタンを押すと、コマンドメニューが開きます。ファイルの添付、モデルの切り替え、考える時間（Extended thinking）のオン・オフのほか、「Customize」の欄からClaude Codeの細かな設定を画面で確認・変更できます。

特に「Instructions」は、使い始めたら早めに整えておきたい項目です。CLAUDE.mdに「回答は日本語で」「このフォルダは触らない」「テストを実行してから終える」などを書いておくと、毎回同じ説明をしなくても、プロジェクトに合った動きをしてくれます。

拡張機能の設定

設定は、Cmd+,（Mac）／Ctrl+,（Windows・Linux）で開き、「Extensions」→「Claude Code」から変えられます。入力欄で/を入力して「General config…」を選んでも開けます。よく使う設定は次のとおりです。

日本語を入力するとき、変換の確定でEnterを押して意図せず送信してしまう場合は、useCtrlEnterToSendをオンにすると防げます。

許可するコマンドやつなぐ外部の道具（MCPサーバー）など、Claude Code自体の設定は、~/.claude/settings.jsonに書きます。こちらはVS Code版とターミナル版で共通です。

うまく動かないとき

よくあるつまずきと、公式ドキュメントにある対処をまとめました。

安全に使うために

公式ドキュメントでは、Claude Codeはコードを処理しても、それをモデルの学習には使わないと案内されています。ただし、会社のコードを扱う場合は、契約しているプランのデータの扱いと、社内のルールを事前に確認しておきましょう。

あわせて、次の点を守ると、思わぬ変更や情報の漏れを防げます。

• 慣れないうちはManualモードで使い、変更を1つずつ確認する
• 大事な作業の前にはGitでコミットし、いつでも戻せるようにしておく
• パスワードやAPIキーが書かれたファイルは、.gitignoreや設定で読ませないようにする
• 他人から受け取ったコードは、VS Codeの制限モードで開いて確認してから使う

会社のクラウドを通して使う場合

会社でAmazon Bedrock、Google Cloud、Microsoft Foundryを通してClaudeを使っている場合は、Anthropicのアカウントでログインせずに使えます。拡張機能の設定で「Disable Login Prompt」にチェックを入れ、~/.claude/settings.jsonに各クラウドの設定を書きます。この場合、プランの使用量の表示など、Claudeのアカウントが必要な一部の機能は使えません。

アンインストールする

拡張機能の一覧（Cmd+Shift+X／Ctrl+Shift+X）で「Claude Code」を検索し、「Uninstall」をクリックします。ただし、VS Codeのターミナルでclaudeを起動すると、拡張機能が自動で入り直します。入れ直したくない場合は、ターミナル版の/configで「Auto-install IDE extension」をオフにします。

よくある質問

まとめ

VS Code版を使えば、ターミナルに慣れていない方でも、画面で確認しながらClaude Codeに作業を任せられます。まずは小さなフォルダで、ファイルの説明や簡単な修正から試してみてください。慣れてきたら、CLAUDE.mdにプロジェクトの決まりを書き、計画モードで少し大きな作業を任せていくと、使える場面が広がります。

社内でClaude Codeを使える人を増やしたい、社内ツールづくりに取り入れたいといった場合は、INTERCREATE JAPANのClaude Code・Codex導入支援でお手伝いしています。