Claude Code VSCode 拡張機能を使えば、エディタとターミナルを行き来する手間がゼロになります。VSCode のサイドパネルに Claude Code が統合されるため、コードを書きながらそのまま AI に相談できます。本記事では、拡張機能のインストールから便利なショートカットキー設定、CLI 版との使い分けまで、5分で完了する導入手順をわかりやすく解説します。また、Claude Codeの4つの利用形態を比較した記事も合わせて参考にしてみてください。
Claude Code VSCode 拡張機能のインストール方法
Claude Code VSCode 拡張機能は、VS Code の拡張機能マーケットプレイスから直接インストールできます。手順はとてもシンプルです。
インストール前の前提条件を確認する
まず、以下の要件を満たしているか確認してください。
- VS Code バージョン 1.98.0 以上（2025年2月アップデート以降）
- Anthropic アカウント（Claude Pro / Max / Team / Enterprise のいずれかのサブスクリプション）
なお、Claude Pro は月額 $20 から利用できます。インストール自体は無料ですが、使用には有効なサブスクリプションが必要です。
VS Code のバージョン確認は、メニューの「ヘルプ → バージョン情報」から行えます。1.98.0 未満の場合は、先にアップデートしてください。
拡張機能をインストールする手順
インストール手順は以下のとおりです。
- VS Code を起動する
- Mac では
Cmd+Shift+X、Windows/Linux ではCtrl+Shift+Xを押して拡張機能ビューを開く - 検索ボックスに「Claude Code」と入力する
- Anthropic が公開している公式拡張機能を選択する
- 「インストール」ボタンをクリックする
インストール後、拡張機能が表示されない場合は VS Code を再起動してください。または、コマンドパレットから「Developer: Reload Window」を実行すると解決することが多いです。
「Claude Code」で検索すると非公式の類似拡張機能も表示されます。必ず発行元が「Anthropic」になっているものを選んでインストールしてください。
サインインして使い始める
インストール後、初めて Claude Code パネルを開くと Anthropic アカウントへのサインインが求められます。画面の指示に従ってサインインを完了させれば、すぐに使い始められます。
基本的な使い方と操作画面の解説
Claude Code VSCode 拡張機能の基本的な使い方を説明します。操作画面はシンプルで、慣れればすぐに使いこなせます。
Claude Code パネルを開く
Claude Code を起動する方法は複数あります。状況に応じて使い分けると便利です。
- エディターツールバー（最速）: ファイルを開いた状態で、エディター右上の Spark アイコン（稲妻マーク）をクリックする
- コマンドパレット:
Cmd+Shift+P（Mac）/Ctrl+Shift+P（Windows/Linux）を押して「Claude Code」と入力し、オプションを選択する - ステータスバー: ウィンドウ右下の「✱ Claude Code」をクリックする（ファイルを開いていない状態でも使用可能）
プロンプトを送信して指示する
パネルが開いたら、チャット形式で Claude に指示を送れます。たとえば「このコードのバグを修正して」「テストを書いて」といった自然な日本語で指示できます。
特に便利なのが @-メンション 機能です。@ に続けてファイル名やフォルダ名を入力すると、Claude がそのファイルの内容を把握した上で回答してくれます。たとえば @auth.ts の処理を説明して のように使えます。
変更を確認して受け入れる
Claude がファイルを編集したい場合、変更前と変更後を並べた 差分表示（diff ビュー） で確認を求めてきます。内容を確認してから「受け入れる」か「拒否する」かを選べるため、意図しない変更を防げます。また、プロンプトボックス下部の 許可モード を切り替えることで、毎回確認するか自動で受け入れるかを選べます。
便利なショートカットキー設定
Claude Code VSCode 拡張機能には、作業効率を高めるショートカットキーが用意されています。主要なものを覚えておくと、操作がスムーズになります。
よく使うショートカット一覧
| コマンド | Mac | Windows/Linux | 説明 |
|---|---|---|---|
| フォーカス切り替え | Cmd+Esc | Ctrl+Esc | エディターと Claude パネル間のフォーカスを切り替える |
| 新しいタブで開く | Cmd+Shift+Esc | Ctrl+Shift+Esc | Claude を新しいエディタータブとして開く |
| 新しい会話を開始 | Cmd+N | Ctrl+N | 新しい会話を始める（Claude にフォーカスが必要） |
| @-メンション挿入 | Option+K | Alt+K | 現在のファイルと選択行の参照を挿入する |
送信キーのカスタマイズ
デフォルトでは Enter キーでプロンプトを送信します。改行と送信を誤って混同しやすい場合は、Ctrl/Cmd+Enter を送信キーに変更できます。
- VS Code 設定（Mac:
Cmd+,、Windows/Linux:Ctrl+,）を開く - 「Extensions → Claude Code」を選択する
- 「Use Ctrl Enter To Send」にチェックを入れる
複数行のテキストを入力したい場合は Shift+Enter で改行できます。
コマンドパレットでさらに多くの操作を行う
Cmd+Shift+P（Mac）/ Ctrl+Shift+P（Windows/Linux）でコマンドパレットを開き、「Claude Code」と入力すると、利用可能なすべての VS Code コマンドが一覧表示されます。ウォークスルーの起動やログの表示なども、ここから実行できます。
VSCode 版ならではの機能（インライン差分表示等）
Claude Code の VSCode 拡張機能には、CLI 版にはない GUI 専用の機能が搭載されています。とくに、コードレビューや編集確認のワークフローが大幅に改善されます。
インライン差分表示（diff ビュー）
Claude Code VSCode でコードを変更する際、変更前と変更後を並べた ビジュアルな diff ビュー を表示します。追加行は緑、削除行は赤でハイライトされるため、何が変わるのか一目で把握できます。
この diff ビューは VSCode のエディタービュー上で直接確認できます。そのため、コードの文脈を保ちながら変更内容を精査できるのが大きなメリットです。
チェックポイントと巻き戻し機能
VSCode 拡張機能には チェックポイント 機能があります。Claude が行ったファイル編集を記録しておき、後から特定の時点まで巻き戻せます。メッセージにカーソルを合わせると巻き戻しボタンが表示され、以下の3つのオプションから選べます。
- Fork conversation from here: 会話をその時点から分岐させる（コード変更はそのまま残る）
- Rewind code to here: コード変更をその時点まで元に戻す（会話履歴は保持）
- Fork conversation and rewind code: 会話とコード変更を両方その時点まで戻す
複数の会話をタブで並行管理
コマンドパレットから「Open in New Tab」または「Open in New Window」を選ぶと、複数の Claude セッションを同時に開けます。「機能Aの実装」と「バグBのデバッグ」を別タブで並行して進めることが可能です。
CLI版との使い分けガイド
Claude Code には VSCode 拡張機能版と CLI 版（ターミナル版）があります。Claude Codeのインストール方法の記事でも触れていますが、両者の特性を理解した上で使い分けると、作業効率がさらに上がります。
VSCode 拡張機能版が向いている場面
- コードの差分を視覚的に確認したい: diff ビューでどこが変わるか一目でわかる
- 初めて Claude Code を使う: GUI 操作のため学習コストが低い
- 複数のファイルを並行して編集する: 複数タブで複数セッションを管理できる
- チェックポイントを使って安心して試行錯誤したい: GUI から簡単に巻き戻せる
CLI 版が向いている場面
- ターミナル操作に慣れている: キーボードだけでテンポよく作業できる
- 前のメッセージを編集して会話を修正したい: Double-Esc でメッセージを編集し直せる
- bash コマンドをサクッと実行したい:
!プレフィックスで直接シェルコマンドを実行できる - タブ補完を活用したい: ファイル名や Claude コマンドのタブ補完が使える
両方を組み合わせて使う
実は、VSCode 拡張機能と CLI は 会話履歴を共有しています。VSCode の統合ターミナル（Mac: Cmd+`、Windows/Linux: Ctrl+`）で claude --resume を実行すると、過去の会話を選んで再開できます。また、CLAUDE.mdの書き方ガイドも活用することで、プロジェクト固有の設定を両環境で共通して使えます。
よくある質問とトラブルシューティング
Spark アイコンが表示されない
Spark アイコン（稲妻マーク）はファイルが開いていないと表示されません。以下の手順で確認してください。
- 何かファイルを開いているか確認する（フォルダーを開いているだけでは不十分）
- VS Code のバージョンが 1.98.0 以上か確認する
- コマンドパレットから「Developer: Reload Window」を実行する
- 他の AI 拡張機能（Cline、Continue など）を一時的に無効にしてみる
アイコンが見つからない場合は、ステータスバー（右下の「✱ Claude Code」）からも起動できます。
拡張機能がインストールできない / 動作しない
VS Code のバージョンが 1.98.0 未満の場合、拡張機能が正常に動作しません。先に VS Code を最新版にアップデートしてください。
また、VS Code の Restricted Mode（制限モード）が有効な場合も拡張機能が動作しません。ワークスペースを「信頼する」に設定してください。
Claude Code が応答しない・重い
- インターネット接続が安定しているか確認する
- 新しい会話を始める（
Cmd/Ctrl+N） - コンテキストウィンドウが大きくなっている場合は
/compactコマンドで圧縮する - それでも続く場合は、VSCode の統合ターミナルで
claudeを直接実行してエラーメッセージを確認する
まとめ
Claude Code VSCode 拡張機能の使い方を解説しました。ポイントを整理します。
- インストールには VS Code 1.98.0 以上と Claude Pro 以上のサブスクリプションが必要
- 拡張機能マーケットプレイスで「Claude Code」を検索し、Anthropic 公式のものをインストールする
- エディター右上の Spark アイコン（稲妻マーク）または
Cmd/Ctrl+Shift+Pで起動できる - @-メンション機能でファイルを参照しながら指示を出せる
Cmd/Ctrl+Escでエディターと Claude パネルのフォーカスを素早く切り替えられる- インライン diff ビューで変更箇所を視覚的に確認してから受け入れられる
- チェックポイント機能で特定の時点のコード状態まで巻き戻せる
- CLI 版と会話履歴を共有しており、用途に応じて使い分け・組み合わせが可能
Claude Code VSCode 拡張機能は、視覚的なインターフェースで AI 支援コーディングをスムーズに始めたい方に特におすすめです。ぜひ活用してみてください。
あわせて読みたいおすすめ書籍
Claude Codeをさらに深く使いこなしたい方には、以下の書籍がおすすめです。
コメント