Claude Codeをターミナルで使い始めたばかりで、VS Code等のエディタとちゃんと連携できてない人向け
VS CodeやCursorでHugoの.mdを編集している最中に、エディタで選択した範囲をターミナルのClaude Codeにそのまま渡したいとき。または、ターミナル単体で動かしていたClaude CodeをIDEと双方向連携モードに切り替えたいときに叩く。IDEの統合ターミナル内で claude を起動した場合は自動接続なので、このコマンドは不要。
ターミナルで claude を起動して使い始めたばかりの頃、エディタで開いているファイルの「ここのリゾット手順、もうちょっと滑らかにして」と頼みたいのに、結局ファイル名と行番号を手で打って渡している、という体験になります。/ide はこの距離を一発で詰めるためのスラッシュコマンドです。叩くと、外で動いている claude プロセスとVS CodeやJetBrains側のClaude Code拡張が双方向に握手して、エディタの選択範囲・カーソル位置・エラー情報がそのままClaude Code側に流れ込む状態に切り替わります。
「外のターミナルで claude を起動してから、エディタとつなぐ」ための専用スイッチ、と思っておけば外しません。
噛み砕くと
イメージとしては、ターミナルとエディタの間に細い水道管を1本通す作業に近いです。/ide を叩く前は、ターミナル側のClaude Codeはエディタの中身を一切知りません。叩くと、Claude CodeがIDE側に立ち上がっている小さなサーバーを見つけ出して、そこに能動的に接続しに行きます。
つながった後は、エディタで risotto.md の3行目を選択しておくだけで、ターミナル側から「いまカーソル当ててる部分を直して」と言える状態になります。逆向きの流れもあります。ターミナル側でファイルを書き換えようとすると、エディタの差分ビューに変更案がパッと開き、そこで承認・却下できます。
これがあるとないとで、料理ブログを直すときの往復回数が全然違います。
大事な前提: IDE側にClaude Code拡張が入っていないと、そもそも接続先が無い
/ide は「もう用意されている接続先につなぎに行く」コマンドであって、接続先そのものを作るコマンドではありません。VS Code系の場合はVS Code、Cursor、Windsurf、VSCodiumのいずれかにMarketplaceから、JetBrains系の場合はIntelliJ、PyCharm、WebStorm、PhpStorm、GoLand、Android StudioのいずれかにJetBrains Marketplaceから、Claude Code拡張を先に入れておく必要があります。
拡張が入っていない状態で /ide を叩くと、Claude Code側に「No available IDEs detected」というメッセージが返ってきます。つなぎに行ける相手が見当たらない、という意味です。これが大半の初回エラーの正体です。
「料理ブログ cooking-blog」を例に、実際の手順を見る
Hugo製の料理ブログ ~/projects/cooking-blog をローカルに持っている状況を例にします。VS Codeで content/posts/risotto.md を開きながら、隣の外部ターミナルでClaude Codeを動かしたい、という設定です。
ステップ1: VS Code側にClaude Code拡張を入れる
VS Codeを開いて Cmd+Shift+X（Macの場合）または Ctrl+Shift+X（Windowsの場合）で拡張機能の画面を開き、「Claude Code」を検索してインストールします。インストール後に1度ウィンドウをリロードします。コマンドパレットから「Developer: Reload Window」を選ぶのが楽です。
これで「接続先のサーバー」がVS Code側に立ち上がる準備が整います。
ステップ2: 料理ブログのフォルダをVS Codeで開く
VS Codeのメニューから File > Open Folder で ~/projects/cooking-blog を開きます。サイドバーで content/posts/risotto.md をクリックして開きます。/ide が握手しに行く相手は「いまVS Codeで開いているプロジェクト」なので、ここで開くフォルダがズレているとClaude Codeも別の場所を見に行ってしまいます。
ステップ3: 外部ターミナルでClaude Codeを起動する
VS Codeの統合ターミナルではなく、別アプリのターミナルを開きます。ITerm2、Windows Terminal、何でも構いません。そこで次を打ちます。
$ cd ~/projects/cooking-blog
$ claudeClaude Codeのプロンプトが立ち上がります。この時点ではまだVS Codeとはつながっていません。試しに「いま開いてるファイルって何？」と聞いても、エディタの選択範囲は見えません。
ステップ4: /ide を叩いて接続する
そのままClaude Codeのプロンプトで次を入力します。
> /ide接続候補のIDEが複数ある場合は選択肢が出るので、いま開いているVS Codeを選びます。1つしかなければそのまま自動でつながります。接続が確立するとClaude Codeのステータス行に接続済みの表示が出ます。
ステップ5: VS Codeで選択した範囲をClaude Codeに渡す
risotto.md で「米を炒める手順」の段落をマウスで選択します。3〜8行目あたりの範囲です。そのままClaude Codeのプロンプトに戻って、次のように頼みます。
> 選択している部分の手順を、初心者向けに書き直して。各工程に「ここを失敗しがち」の一言を足してClaude Codeはエディタ側のカーソル位置と選択範囲を読み取って、その3〜8行を対象に書き直し案を作ってきます。ここで「@」を使わずに「選択している部分」と日本語で指せるのが、/ide が効いている状態の証拠です。
ステップ6: 差分をVS Code側の画面で承認する
Claude Codeが risotto.md を書き換える提案を出すと、ターミナルの中ではなくVS Codeの差分ビューに「変更前 / 変更後」が並んで開きます。読みやすい方で見比べて、納得すれば承認、修正したい部分があればその場で書き直してから承認、という流れになります。
ここで初心者がよく勘違いするのは、「/ide を叩いた瞬間からVS Codeの中身がClaude Codeに丸見えになる」と思ってしまう点です。実際は選択した範囲・カーソル位置・Problemsパネルの診断情報が共有されるだけで、開いていない他のファイルが勝手に読まれるわけではありません。プライバシー面でも安心です。
つまり /ide は何をしてくれるのか
- やってくれる: 外部ターミナルで動かしているClaude Codeと、開いているVS CodeやJetBrains系IDEの双方向接続を確立する。選択範囲・カーソル位置・診断エラーがClaude Code側に流れる
- やってくれる: ファイル書き換え時に、ターミナルのテキスト差分ではなくIDEの差分ビューで変更を見せる。これは
/configの diff tool 設定がautoのときの動作 - やってくれない: 拡張機能のインストール、IDEの起動、プロジェクトフォルダを開く操作。接続先の準備は人間側でやる
- 意味が薄い場面: IDEの統合ターミナル内で
claudeを起動した場合。すでに自動接続済みなので/ideを叩いても接続済みステータスを確認するくらいの意味しかない
使いどころ3シナリオ（具体題材で再現）
シナリオ1: 料理ブログのMarkdown記事を、VS Codeで眺めながらClaude Codeに直してもらいたい
冒頭の cooking-blog の例がそのまま当てはまります。記事ファイル risotto.md をVS Codeで開いて、書き換えたい段落だけ選択する。外のターミナルで claude を起動して /ide を叩く。「選択した段落を、初心者向けに3つの工程に分け直して」とだけ頼めば、Claude Codeはその段落だけを書き換え対象として認識します。ファイル名や行番号を毎回コピーする手間が消えます。
シナリオ2: JetBrains系IDEで動かしているプロジェクトに、外部ターミナルから合流したい
PyCharmで料理ブログのHugoテーマを編集している最中、外のターミナルでClaude Codeに「シーフードカテゴリのテンプレートだけ別レイアウトに作り変えて」と頼みたい、という場面です。JetBrains Marketplaceから「Claude Code」プラグインを入れてPyCharmを再起動した後、外部ターミナルで claude を起動して /ide。これでPyCharm側で出ている警告やエラー一覧の中身もClaude Codeに渡る状態になります。リファクタの提案がエラー駆動で動かせるので精度が変わります。
シナリオ3: 接続が切れた / 別のIDEに切り替えたいとき
VS Codeを再起動した、別のプロジェクトをCursorで開き直した、Windsurfと同時起動していて間違ったIDEにつないでしまった、という場面。もう一度 /ide を叩き直せば、接続候補の一覧が出てきて選び直せます。「切断」専用のサブコマンドは無く、再度の /ide 実行か、IDE側の拡張パネルから明示的に disconnect する方法のどちらかで対応します。
初心者が踏みやすい落とし穴
- IDE側の拡張を入れる前に
/ideを叩いている。接続先がそもそも立ち上がっていないので「No available IDEs detected」が返るだけ。先にVS Code MarketplaceかJetBrains Marketplaceから拡張を入れて、ウィンドウを1度再読み込みする - IDEの統合ターミナル内で
claudeを起動しているのに/ideも叩く。統合ターミナルでの起動は自動接続なので/ideは不要。叩いても害は無いが、初心者が「接続できた感」を求めて何度も叩いて混乱する原因になる - JetBrains系で別途プラグインが要ることを忘れている。VS Code拡張とJetBrainsプラグインは別物で、JetBrains側はJetBrains Marketplaceから入れる必要がある。VS Code Marketplaceにある拡張をIntelliJに入れようとしても入らない
- WSL2上のターミナルから、Windows側のJetBrains IDEにつなごうとして失敗する。WSL2はNAT構成のせいで「No available IDEs detected」が出やすい。Windowsファイアウォールに WSL2 サブネット向けの通信許可を入れるか、
.wslconfigでnetworkingMode=mirroredに切り替えると通る - JetBrains Remote Development で、ローカル側にだけプラグインを入れて満足する。Remote Developmentではリモートホスト側にプラグインを入れないと意味が無い。Settings → Plugin (Host) でホスト側にインストールする
- 複数IDEが立ち上がっていて、間違った方につながる。
/ideを叩いた時に出る候補一覧から、対象のプロジェクトが開いている方を選ぶ。後から気づいたら/ideを叩き直して選び直す - 差分がIDEに出ず、ターミナルのテキスト差分のままになる。接続自体は成功していても、Claude Code側の
/configで diff tool がterminal固定になっていると、差分はターミナルに出続ける。/configからautoに切り替える
書き方
/ideやってみるとこうなる
入力
/ide出力例
Connected to VS Code (cooking-blog)
以降、VS Codeで選択している範囲やカーソル位置がClaude Codeに自動で渡る状態になる。ファイル書き換え提案はVS Codeの差分ビューに表示される。このページに出てきた言葉
- スラッシュコマンド
- Claude Codeの会話画面で、行の先頭に「/」をつけて叩く特別な命令。普通の文章メッセージとは区別して処理される
- ターミナル
- 黒い画面で文字のコマンドを打ち込む画面。Windowsだと「コマンドプロンプト」「PowerShell」、Macだと「ターミナル」アプリ
- エディタ
- 文章を書いたり書き換えたりするためのアプリ。Windowsの「メモ帳」、Macの「テキストエディット」、VS Code、vim、nano など
- 拡張機能（拡張）
- エディタにあとから機能を足すための追加プログラム。Claude Codeの場合、VS CodeとJetBrains系IDE向けに公式の拡張が配布されている
- IDE
- コードを書くためのアプリの分類名。エディタ＋ファイル管理＋デバッグ用機能などが1つにまとまったタイプを指す。VS CodeやIntelliJはこれに当たる
- Marketplace
- エディタ用の拡張機能を配布している公式ストア。VS CodeにはVS Code Marketplace、JetBrains系にはJetBrains Marketplaceがある
- 統合ターミナル
- VS CodeやJetBrains系IDEの中に組み込まれている、エディタと一体化した黒い画面
- Problemsパネル / 診断情報
- VS Codeの下部にある、シンタックスエラーやlintの警告が一覧で並ぶ画面。<code>/ide</code> 接続中は、ここの内容もClaude Codeに渡る
- 差分ビュー
- 「変更前」と「変更後」を左右に並べて比較表示する画面。Claude Codeはファイル書き換え時にここで承認を求める
- 双方向接続
- ターミナル→IDE、IDE→ターミナル の両方向で情報が流れる状態
- WSL2
- Windows上でLinux環境を動かすための仕組みの第2世代版。仮想マシンに近い構成で、Windows本体とはネットワークが分かれて見える