この記事の結論
Claude Code は VS Code 拡張機能と JetBrains プラグインを通じて、ターミナルだけでなくエディタ上でも使えます。VS Code 系では公式拡張がチャットパネル・差分プレビュー・@メンションを備えたネイティブ GUI を提供し、JetBrains 系では CLI を IDE 側の差分ビューアと連携させる構成になっています。本記事は2026年6月時点の公式 docs（code.claude.com）に沿って、導入・接続・操作・つまずき対処までを実装者視点でまとめます。
- 要点1: VS Code（および Cursor などのフォーク）は拡張機能で GUI 化、JetBrains はプラグインで CLI を IDE 連携させる、と構成が異なる。
- 要点2: どちらも「差分を IDE のネイティブ差分ビューアで表示」「選択範囲・開いているファイルを自動でコンテキスト共有」が共通の主力機能。
- 要点3: 拡張・プラグインは CLI を置き換えるものではなく、CLI と会話履歴・設定（
~/.claude/settings.json）を共有して同居する。
対象読者: ターミナル版 Claude Code は触ったことがあり、これからエディタ上で常用したい開発者・PM。今日できること: 自分の IDE に拡張/プラグインを入れ、差分プレビューと選択範囲連携を有効化するところまで。
前提：IDE統合は「CLIの置き換え」ではなく「同居」
最初に勘違いを潰しておきます。Claude Code の IDE 統合は、ターミナル版（CLI）を捨ててエディタ専用版に乗り換える、という話ではありません。公式ドキュメントの整理に従うと、構成は IDE 系統で2通りに分かれます。
- VS Code 系（VS Code / Cursor / その他フォーク）: 公式拡張機能が「グラフィカルなチャットパネル」を提供する。拡張機能にはCLIバイナリも同梱されており、統合ターミナルから
claudeも叩ける。 - JetBrains 系（IntelliJ IDEA / PyCharm / WebStorm など）: プラグインが「CLI を IDE と連携させる」役割を担う。チャットそのものは統合ターミナルで動く
claudeが本体で、プラグインが差分表示・選択範囲共有・診断共有を IDE 側に橋渡しする。
重要なのは、拡張・プラグインと CLI が 会話履歴と設定を共有する点です。VS Code 拡張で始めた会話は、統合ターミナルで claude --resume を実行すれば CLI 側で続けられます。設定面でも、許可コマンド・環境変数・フック・MCP サーバーといった共有設定は ~/.claude/settings.json に書き、拡張・CLI 双方から読まれます。つまり「IDE で操作するか、ターミナルで操作するか」はあくまで入口の違いで、裏側のセッションは地続きです。
この記事の後半でも触れますが、CLI 限定機能（! による bash ショートカット、Tab 補完、フルセットのスラッシュコマンド等）が必要になったら、VS Code の統合ターミナルで claude を起動すればよい、という逃げ道が常に残っています。エディタ GUI とターミナルを行き来できる前提で読み進めてください。
VS Code拡張のインストールと初回サインイン
VS Code（および Cursor などのフォーク）では、公式拡張機能を入れるのが推奨ルートです。前提条件は VS Code 1.98.0 以上と、Anthropic アカウント（初回起動時にサインイン）です。Amazon Bedrock や Google Vertex AI などのサードパーティプロバイダ経由の場合は、後述の通りログイン挙動が変わります。
インストールから初回操作までの手順は次の通りです。
- VS Code で
Cmd+Shift+X（Mac）/Ctrl+Shift+X（Windows・Linux）を押して拡張機能ビューを開く。 - 「Claude Code」で検索し、Install をクリックする。Cursor や Kiro などのフォークでも同様に検索でき、不可なら Open VSX レジストリ経由でも入る。
- インストール後に拡張が現れない場合は、VS Code を再起動するか、コマンドパレットから Developer: Reload Window を実行する。
- ファイルを開いた状態でエディタ右上の Spark アイコン（Claude Code を示すアイコン）をクリックしてパネルを開く。アイコンが見当たらない場合は、ウィンドウ右下ステータスバーの「✱ Claude Code」からでも開ける（ファイル未オープンでも動作する）。
- 初回はサインイン画面が出るので Sign in を押し、ブラウザで認可を完了する。
パネルを開く入口は複数あります。常時アクセスしたいなら、左サイドバー（アクティビティバー）の Spark アイコンからセッション一覧を開く方法、コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）で「Claude Code」と打って Open in New Tab 等を選ぶ方法が使えます。パネル自体はドラッグで右サイドバー・左サイドバー・エディタ領域のどこにでも再配置でき、配置は記憶されます。
ハマりやすいのが、シェルに ANTHROPIC_API_KEY を設定しているのにサインインを求められるケースです。これは VS Code がシェル環境変数を継承していないのが原因なので、ターミナルから code . で VS Code を起動して環境を引き継がせるか、素直に Claude アカウントでサインインするのが手っ取り早い対処です。
エディタ内での起動・差分プレビュー・選択範囲の連携
サインインが済んだら、エディタ上での実際の操作感を押さえます。ここが「ターミナルだけで使うのと何が違うのか」の核心です。
差分は side-by-side で見て、その場で直せる
Claude がファイルを編集しようとすると、元のコードと提案された変更を 横並び（side-by-side）で比較表示し、許可を求めてきます。承認・却下・別の指示のいずれかを返せます。地味に効くのが、差分ビュー上で提案内容を直接編集してから承認できる点です。あなたが手で直すと、Claude には「ユーザーが変更した」と伝わるので、Claude は元の提案どおりにファイルが書き込まれたと勝手に仮定しなくなります。レビューしながら微修正する、というエディタ的なワークフローがそのまま回せます。
選択範囲は自動で見える、@メンションで範囲を固定する
エディタでテキストを選択すると、Claude はその選択範囲を自動的にコンテキストとして受け取ります。プロンプトボックスのフッターに「選択行数」が表示され、選択を Claude から見せたくないときは選択インジケータ（目に斜線のアイコン）をクリックで隠せます。
選択範囲をプロンプトに @メンション参照として明示的に差し込むには、Option+K（Mac）/ Alt+K（Windows・Linux）を使います。これで @app.ts#5-10 のように「ファイルパス＋行番号」付きの参照がプロンプトに挿入されます。ファイル・フォルダ全体を渡したいときは @ に続けてファイル名を打てばよく、あいまい一致（fuzzy matching）に対応しているので部分入力でも候補が出ます。フォルダは末尾にスラッシュを付けて @src/components/ のように指定します。
機微なファイル（例: .env）を一切渡したくない場合は、そのパスに対して Read の deny ルールを設定します。マッチした deny ルールがあると、選択テキストだけでなく「このファイルを開いている」という通知自体も Claude に届かなくなります。
Plan モードと許可モードの切り替え
プロンプトボックス下部のモードインジケータをクリックすると許可モードを切り替えられます。通常モードは各アクション前に許可を求め、Plan モードは「何をするか」を先に提示して承認を待ち、auto-accept モードは確認なしで編集します。VS Code 拡張では Plan の内容がフルのマークダウン文書として開き、インラインコメントで実行前にフィードバックを書き込めます。新規会話の既定モードは VS Code 設定の claudeCode.initialPermissionMode で指定できます。
JetBrainsプラグインのインストールと接続
IntelliJ IDEA・PyCharm・Android Studio・WebStorm・PhpStorm・GoLand といった主要な JetBrains IDE では、専用プラグインを使います。VS Code 系と違い、チャット本体は統合ターミナルで動く claudeで、プラグインが差分表示・選択範囲共有・診断共有を IDE 側に連携させる構成です。Claude Code 本体（CLI）を別途インストールしておく必要があります。
導入手順は次の通りです。
- JetBrains マーケットプレイスから「Claude Code [Beta]」プラグインを検索してインストールする。
- インストール後、IDE を完全に再起動する（一度で反映されないことがあり、複数回必要な場合もある）。
- IDE の統合ターミナルから
claudeを実行する。これで統合機能がすべて有効になる。 - 外部ターミナルから起動した Claude Code を JetBrains IDE につなぎたい場合は、Claude Code 内で
/ideコマンドを実行する。
エディタから素早く開くには Cmd+Esc（Mac）/ Ctrl+Esc（Windows・Linux）が使えます。ファイル参照を挿入するショートカットは VS Code とキーが異なり、Cmd+Option+K（Mac）/ Alt+Ctrl+K（Linux・Windows）で @src/auth.ts#L1-99 のような参照を差し込めます。lint・構文エラーなどの診断は作業中に自動で Claude に共有されます。
差分を IDE 側で出す設定
差分をターミナルではなく IDE のネイティブ差分ビューアで見るには、Claude Code の設定を変更します。
claudeを起動する。/configコマンドを入力する。- diff tool を
autoに設定すると IDE で差分が表示され、terminalにするとターミナル内表示のままになる。
プラグイン側の設定は Settings → Tools → Claude Code [Beta] から行います。ここで Claude コマンドのパス（claude や /usr/local/bin/claude、npx @anthropic-ai/claude-code など）を指定できます。WSL ユーザーは Claude コマンドに、次のように WSL 経由でログインシェルを起動する形式を設定するのが定石です（Ubuntu は自分のディストリビューション名に置換）。
wsl -d Ubuntu -- bash -lic "claude"ターミナル版との違いと使い分け
「結局どっちで操作すべきか」を判断するために、VS Code 拡張（GUI）と CLI の機能差を押さえておきます。公式ドキュメントは、一部機能が CLI 限定であることを明記しています。
- スラッシュコマンド・スキル: CLI は全コマンドが使えるが、VS Code 拡張は
/を打って表示されるサブセットのみ。 - MCP サーバー設定: CLI は完全対応。拡張は部分対応で、サーバーの追加は CLI（
claude mcp add）で行い、既存サーバーの管理はチャットパネルの/mcpで行う。 - チェックポイント（rewind）: CLI・VS Code 拡張ともに対応。メッセージにホバーして rewind ボタンから、会話の分岐・コードの巻き戻し・両方を選べる。
!bash ショートカット / Tab 補完: CLI のみ。拡張では使えない。
使い分けの実践指針はシンプルです。レビューしながら少しずつ進める作業（差分を見て承認、選択範囲を渡して質問、Plan にインラインコメント）は GUI が圧倒的に快適です。一方、細かいスラッシュコマンドを多用する作業や、! でその場の bash を回したいときは CLI が速い。両者は会話履歴を共有するので、GUI で始めて行き詰まったら統合ターミナルで claude --resume に切り替える、という往復が成立します。
なお、CLI 派でも IDE 連携の恩恵は受けられます。VS Code の統合ターミナル（Ctrl+` / Cmd+`）で claude を起動すれば、差分は VS Code のネイティブ差分ビューアで開き、診断共有も自動で効きます。外部ターミナルから使っている場合は、Claude Code 内で /ide を実行すれば VS Code に接続できます。GUI チャットを使わなくても「差分は IDE で見る」だけは取り込める、ということです。
ファイル参照とコンテキスト共有の実務
IDE 統合の価値の半分は、コンテキストを渡す手間が減ることにあります。日常的に使う渡し方を整理します。
- 選択範囲を渡す: エディタで選択するだけで自動共有。固定したいときは
Option+K（VS Code）/Cmd+Option+K（JetBrains）で行番号付き参照を挿入。 - ファイル・フォルダを渡す:
@ファイル名であいまい一致、フォルダは末尾スラッシュ。Shift を押しながらファイルをプロンプトボックスにドラッグすると添付として追加できる（添付の X で除外）。 - ターミナル出力を渡す: VS Code 拡張では
@terminal:名前でターミナルの出力（コマンド結果・エラー・ログ）をコピペなしで参照できる。 - 大きな PDF: 全体ではなく「1ページだけ」「1〜10ページ」「3ページ目以降」のように範囲指定で読ませられる。
拡張が有効なとき、VS Code 内部では「ide」という名前の MCP サーバーがローカルで動いています。CLI はこれに自動接続して、差分を VS Code のネイティブ差分ビューアで開き、選択範囲を @ メンション用に読み、Jupyter ノートブック作業時にはセル実行を VS Code に依頼します。このサーバーは 127.0.0.1 のランダムな高位ポートにバインドされ、外部マシンからは到達できません。認証トークンは ~/.claude/ide/ 配下のロックファイルに 0600 権限で書かれ、VS Code を動かしているユーザーだけが読めます。組織で PreToolUse フックを使って MCP ツールを allowlist している場合は、この ide サーバーの存在を意識しておく必要があります。モデルに見えるツールは診断取得（mcp__ide__getDiagnostics）とノートブックのコード実行（mcp__ide__executeCode）の2つで、後者は実行のたびに VS Code 内の確認ダイアログ（Execute / Cancel）が必ず挟まります。
よくあるつまずきと対処
導入時・運用時に遭遇しやすい問題を、公式トラブルシューティングに沿って整理します。
VS Code: Spark アイコンが出ない
Spark アイコンはファイルを開いているときにエディタ右上に出ます。出ない場合のチェック順は次の通りです。
- ファイルを開く（フォルダを開いているだけでは不十分）。
- VS Code のバージョンを確認（1.98.0 以上が必要、Help → About）。
- Developer: Reload Window で再読み込みする。
- Cline や Continue など競合しうる AI 拡張を一時的に無効化する。
- ワークスペースの信頼（Restricted Mode では動作しない）を確認する。
それでも見えなければ、右下ステータスバーの「✱ Claude Code」やコマンドパレットからも開けます。
VS Code: macOS で Cmd+Esc が効かない
macOS Tahoe 以降では、システムの Game Overlay ショートカットが既定で Cmd+Esc に割り当てられており、VS Code に届く前に横取りします。System Settings → Keyboard → Keyboard Shortcuts → Game Controllers で Game Overlay のチェックを外すか、VS Code のキーボードショートカットエディタ（Cmd+K Cmd+S）で「Claude Code: Focus input」を別キーに割り当て直してください。
JetBrains: 「No available IDEs detected」と出る
claude 実行時にこのメッセージが出る場合は、プラグインが有効か、IDE を完全に再起動したか、統合ターミナルから起動しているか、を確認します。Remote Development を使っているなら、プラグインはローカルのクライアントではなくリモートホスト側（Settings → Plugin (Host)）に入れる必要があります。WSL2 ユーザーでこのエラーが出る場合は、WSL2 の NAT ネットワークか Windows Firewall が WSL2 と IDE の通信をブロックしているのが典型原因です。WSL 内で hostname -I を実行してサブネット（例: 172.21.0.0/16）を確認し、管理者権限の PowerShell で WSL2 のサブネットを許可するルールを追加します。
New-NetFirewallRule -DisplayName "Allow WSL2 Internal Traffic" -Direction Inbound -Protocol TCP -Action Allow -RemoteAddress 172.21.0.0/16 -LocalAddress 172.21.0.0/16あるいは Windows 11 22H2 以降なら、Windows ユーザーディレクトリの .wslconfig にミラーモードを設定し、wsl --shutdown で再起動する方法もあります。
[wsl2]
networkingMode=mirroredJetBrains: ESC キーで中断できない
JetBrains のターミナルで ESC が Claude Code の処理中断に効かないことがあります。Settings → Tools → Terminal で「Move focus to the editor with Escape」のチェックを外すか、「Configure terminal keybindings」から「Switch focus to Editor」のショートカットを削除すれば、ESC が中断として正しく機能するようになります。
JetBrains: アイコンを押すと「command not found」
まず claude --version でインストールを確認し、プラグイン設定（Settings → Tools → Claude Code [Beta]）で Claude コマンドのパスを設定します。WSL ユーザーは前述の wsl -d ... 形式を指定してください。
共通: auto-edit の安全性
auto-edit 権限を有効にすると、Claude は VS Code / JetBrains が自動実行しうる設定ファイル（settings.json や tasks.json 等）を書き換えられます。信頼できないコードを扱うときは、VS Code の Restricted Mode を使う、auto-accept ではなく手動承認モードにする、変更を必ず目視レビューしてから承認する、といった運用で risk を下げてください。
導入を一段深く進めるには
IDE 統合をきっかけに Claude Code を本格運用へ持っていくなら、エディタ操作と並行して「設定の作り込み」「並列開発」「チーム展開」を整えていくのが近道です。Uravation では、Claude Code の社内導入・個別指導を通じて、こうしたエディタ統合からプロジェクト運用までの定着を支援しています。まずは自分の主力エディタで差分プレビューと選択範囲連携を有効化し、日々のレビュー負荷を下げるところから始めてみてください。
関連する実装ガイドも合わせてどうぞ。基礎から実践テクニックを体系的に押さえたい方はClaude Code 実践テクニック完全ガイドを、フロントエンド開発でエディタ統合を活かしたい方はReact/Next.js 爆速フロント開発ガイドを、大きな変更を安全に進める Plan モードの使い方はClaude Code Plan Mode 実践ガイドを参照してください。
