Claude Code in VS Code 拡張完全マスター — @-mention・チェックポイント・Plan モード活用

Claude Code を VS Code 内のグラフィカルパネルで使うと、CLI 単体では味わえない体験がある。@-mention でファイル参照、サイドバイサイドの diff 承認、Checkpoint で巻き戻し、Plan モードでマークダウン編集。本稿は公式 VS Code 拡張ドキュメントを元に、生産性を引き出す機能と設定をまとめる。

インストールと前提

• VS Code 1.98.0 以上
• 拡張機能名: Claude Code（Anthropic 公式、`anthropic.claude-code`）
• Cursor / Windsurf / Kiro でも動作（Open VSX 経由）
• 拡張は CLI バイナリを内包しているので、別途 `npm install` 不要

インストール後、エディタ右上の Spark アイコン、または `Cmd+Shift+P` → "Claude Code" で起動。

知っておくべき機能

@-mention でファイル・行・端末を参照

• `@auth` → fuzzy match で `auth.js` / `AuthService.ts` 候補
• `@src/components/` → フォルダ全体
• `@file.ts#5-10` → 5〜10 行目だけ（`Option+K` / `Alt+K` で挿入）
• `@terminal:name` → ターミナルの出力をコピペなしで渡す
• `@browser` → Chrome 拡張連携で実ブラウザ操作

Checkpoints で巻き戻し

メッセージにホバーすると Rewind ボタン。3 つの選択肢：

• Fork conversation from here — 会話分岐、コード変更は維持
• Rewind code to here — コード変更を巻き戻し、会話は維持
• Fork conversation and rewind code — 両方リセット

「ちょっと試して、ダメなら戻る」がワンクリックで完結。

Plan モードがマークダウン編集できる

下部の permission mode 切替で Plan モードを選ぶと、計画が VS Code 内に full markdown として開き、直接コメントを書いて Claude にフィードバックできる。CLI の Plan mode より人間の介入が深い。

Remote Control: Web 版セッションを呼び戻す

Claude Code on the web で始めたセッションを VS Code 拡張に取り込める（Session history > Remote タブ）。Claude.ai サブスクで認証必要。

設定の場所