Claude CodeのVS Code拡張機能を非エンジニア目線で解説。導入の流れ、グラフィカルパネル・サイドバイサイドdiff・@メンション・複数タブ並行会話などターミナル版との違い、CursorへのOpen VSX経由での導入、JetBrainsプラグイン（Beta）まで。最新は公式ドキュメントで確認する前提でまとめました。
VS CodeでClaude Codeを使うなら、公式のVS Code拡張機能が推奨の形です。グラフィカルなパネルで対話でき、変更はサイドバイサイドのdiffで確認、ファイルは@メンションで指定、タブを分ければ複数の会話を並行できます。要件はVS Code 1.98.0以上。CursorなどのフォークにもOpen VSX経由で入れられます。ターミナルで claude コマンドも使いたい場合は、別途CLIのインストールが必要です。
Claude Codeは「黒い画面（ターミナル）で使うもの」というイメージが強いですが、VS Codeの拡張機能を入れると、普段のエディタ画面の中で対話しながら使えます。ターミナルに抵抗がある人ほど、この形から入るのがおすすめです。
実体験メモ
非プログラマーの私は、最初ターミナルの真っ黒な画面に身構えていました。VS Codeの画面内でClaude Codeを使うと、どのファイルがどう変わるのかを目で見ながら進められるのが安心材料になります。特に差分（diff）が左右に並んで表示されるのは大きくて、「今の変更、何をしたの？」が一目で分かる。テキストの流れる画面で追うのとは、確認のしやすさが段違いでした。
VS Code拡張とは
Claude CodeのVS Code拡張は、VS Codeでの利用における公式推奨の形態です。ターミナル版（CLI）と同じClaude Codeを、エディタに統合された画面から使えます。
前提条件はひとつだけ押さえておきましょう。
- VS Code 1.98.0以上が必要
そもそもClaude Code自体が初めての方は、先に Claude Codeとは？ と Claude Codeの始め方 を読むと全体像がつかめます。
拡張機能の入れ方
導入はVS Codeの拡張機能（Extensions）ビューからClaude Code拡張をインストールする流れです。細かい手順や画面は更新されるため、最新のインストール手順は公式ドキュメントで確認してください。
導入時に知っておきたいポイントが2つあります。
- 拡張にはCLIが同梱されています。ただし、ターミナルで
claudeコマンドを使いたい場合は、別途CLIのインストールが必要です。 - CursorほかVS Codeフォークを使っている場合は、Open VSX経由で拡張を導入できます。
⚠️ 料金プランやログイン方法は本記事では扱いません。プラン選びは Claude Codeの料金 を、最新の条件は公式を確認してください。
拡張でできること
公式ドキュメントに挙げられている主な機能はこちらです。
| 機能 | 何がうれしいか |
|---|---|
| グラフィカルパネル | ターミナルではなく、エディタ内のパネルで対話できる |
| サイドバイサイドdiff | 変更前後が左右に並び、何が変わるか一目で分かる |
| @メンション | ファイルを @ で指定して、文脈として渡せる |
| プラン編集 | Claudeが立てた作業計画を、実行前に自分で編集できる |
| 複数タブの並行会話 | タブを分けて、別々の作業を同時に進められる |
| チェックポイント（rewind） | 作業の途中地点に巻き戻せる |
なかでも非プログラマーに効くのはサイドバイサイドdiffとプラン編集です。「実行される前に、何をするつもりか・何が変わるかを目で確認できる」ので、任せきりの不安が減ります。
🤖 依頼文づくりに迷ったら：目的を選んで穴埋めするだけでChatGPT・Claudeに効く指示文ができる AIプロンプトビルダー（無料・登録不要）をどうぞ。できた指示文をそのままパネルに貼って使えます。
ターミナル版（CLI）との違い
中身は同じClaude Codeなので、「できることが別物」というより操作感と確認のしやすさの違いです。
| 項目 | ターミナル版（CLI） | VS Code拡張 |
|---|---|---|
| 操作画面 | テキストベースのターミナル | エディタ内のグラフィカルパネル |
| 変更の確認 | ターミナル内の表示で確認 | サイドバイサイドのdiff表示 |
| ファイルの指定 | パスを書いて伝える | @メンションで指定 |
| 並行作業 | ターミナルを複数開いて対応 | 複数タブで並行会話 |
| 導入 | CLIのインストールが必要 | 拡張がCLIを同梱（ターミナルで claude を使うにはCLIを別途インストール） |
| 向いている人 | ターミナル中心の作業スタイル | VS Codeで目視確認しながら進めたい人 |
使い分けの目安はシンプルで、普段VS Codeで作業しているなら拡張、ターミナル操作に慣れていてそちらで完結したいならCLI、です。併用もできるので、どちらかに決め打ちする必要はありません。CLI・デスクトップ・Webなど利用形態の全体比較は Claude Codeの使い方比較 にまとめています。
Cursorなどのフォークで使う場合
CursorをはじめとするVS Codeのフォーク（派生エディタ）でも、Open VSX経由で拡張を導入できます。「Cursor派だからClaude Code拡張は使えない」ということはありません。
ただし、フォークごとの対応状況や導入手順は変わる可能性があるため、導入前に公式ドキュメントで最新を確認してください。
JetBrains系IDE（IntelliJ/PyCharmなど）はプラグイン【Beta】
IntelliJやPyCharmなどJetBrains系のIDEを使っている場合は、JetBrains向けプラグインがBeta提供されています。VS Code拡張とは仕組みが異なる点に注意してください。
- IDE内のターミナルでCLIを実行して接続する形（＝CLIのインストールが別途必須）
- IDE内でのdiff表示、選択範囲の共有、診断情報の共有に対応
Betaのため仕様が変わる可能性があります。JetBrainsユーザーは、導入前に公式ドキュメントの該当ページを確認するのが確実です。
まとめ
- VS CodeでClaude Codeを使うなら公式のVS Code拡張が推奨の形。要件はVS Code 1.98.0以上。
- できることはグラフィカルパネル・サイドバイサイドdiff・@メンション・プラン編集・複数タブ並行会話・チェックポイント（rewind）。実行前に目で確認できるのが非プログラマーへの一番の恩恵。
- 拡張はCLIを同梱するが、ターミナルで
claudeを使うにはCLIの別途インストールが必要。 - CursorなどのフォークにはOpen VSX経由で導入可。JetBrains系はプラグイン（Beta）で、IDE内ターミナルでCLIを実行して接続する方式。
- 画面や手順は更新が早いので、最新は必ず公式ドキュメントで確認する。
そもそもClaude Codeって何？という方は Claude Codeとは？、導入全般は Claude Codeの始め方 をどうぞ。
関連記事：Claude Codeの使い方比較 / Claude Codeでできること / Claude Codeのエラー対処法。カテゴリ一覧は AI活用・ノウハウ へ。
よくある質問（FAQ）
Claude CodeのVS Code拡張はCursorでも使えますか？
使えます。Cursorをはじめとする各VS Codeフォークには、Open VSX経由で拡張を導入できます。手順や対応状況は変わることがあるので、導入前に公式ドキュメントで最新を確認してください。
ターミナル版（CLI）とVS Code拡張、どちらを使えばいいですか？
VS Codeを普段使っているなら、公式が推奨するのは拡張機能での利用です。グラフィカルなパネル、サイドバイサイドのdiff表示、@メンションでのファイル指定、複数タブでの並行会話など、画面上で確認しながら進めやすいのが利点です。ターミナル中心の作業スタイルならCLIのままでも問題ありません。
VS Code拡張を入れれば、ターミナルのclaudeコマンドも使えるようになりますか？
拡張機能にはCLIが同梱されていますが、ターミナルで claude コマンドを使いたい場合は別途CLIのインストールが必要です。拡張とCLIは併用できるので、用途に応じて両方入れておくのも手です。
IntelliJやPyCharmなどJetBrains系のIDEでは使えますか？
JetBrains向けにはプラグインがBeta提供されています。仕組みはVS Code拡張と異なり、IDE内のターミナルでCLIを実行して接続する形で、CLIのインストールが別途必須です。IDE内でのdiff表示、選択範囲の共有、診断情報の共有などに対応します。Betaのため仕様は変わる可能性があり、最新は公式で確認してください。