結論: Claude Code VS Code拡張は、CLIの全機能をGUI化したもので、インライン差分表示・@メンション・プラン承認フローにより、ターミナル操作なしでAI支援コーディングを完結できます。
この記事の要点:
- 要点1: VS Code 1.98.0以上が必要。インストールはマーケットプレイスから1クリック
- 要点2: @メンションでファイル・フォルダを指定してClaude Codeに文脈を渡せる
- 要点3: チェックポイント機能で変更を巻き戻せる。CLI版との主要機能差はTab補完と!コマンドのみ
対象読者: VS Codeユーザーでいよいよ Claude Code を導入したいエンジニア・開発者
読了後にできること: Claude Code VS Code拡張を設定し、@メンションを使った効率的な開発フローを今日から実践できる
「Claude CodeってターミナルとVS Codeどっちで使うのが正解？」
研修でよく聞かれます。正直に言うと、どちらでも同じことはできます。でもVS Code拡張の方が断然直感的で、「Claudeが提案した変更を見てから承認する」という流れが非常にスムーズなんです。
先日、ある製造業の研修先でClaude CodeのVS Code拡張を実際に使ってもらったところ、「コードのdiffが一目でわかるのがありがたい」「ターミナルに切り替えなくていいのが楽」という声が多数上がりました。初めてAIコーディングアシスタントを使う方にとっては、GUIがある方が圧倒的に入りやすいですね。
この記事では、Claude Code VS Code拡張のインストールから設定・ショートカットまで全部解説します。CLI版との使い分け方も含めて、コピペで使えるコマンドつきで紹介しますね。
まず5分で動かす：最速セットアップ
まずは動かしてみましょう。
# ステップ1: VS Codeのターミナルから一発インストール
code --install-extension anthropic.claude-code
# または VS Code内で Cmd+Shift+X（Mac）/ Ctrl+Shift+X（Win）を押して
# 「Claude Code」で検索 → インストール
# ステップ2: インストール確認後、VS Codeを再起動
# （エディタ右上に稲妻（スパーク）アイコンが出ればOK）
# ステップ3: アイコンをクリック → Anthropicアカウントでログイン
これだけです。5分以内に使い始められます。Claude Codeのインストールがまだの方は先にClaude Codeインストール完全ガイドでCLI本体をインストールしてください。
AIエージェントの活用全般についてはAIエージェント導入完全ガイドも参考にどうぞ。
VS Code拡張の5つの主要機能
機能1：スパークアイコンからのインラインチャット
エディタ右上のスパーク（稲妻）アイコンをクリックするとClaudeのチャットパネルが開きます。ファイルを開いた状態でアイコンをクリックすると、そのファイルの内容がClaude Codeに自動で渡されます。
# よく使うプロンプト例（VS Code拡張でそのまま使える）
この関数のバグを修正してください。
不足している情報があれば最初に質問してください。
# @メンションでファイルを指定
@src/auth.ts の認証ロジックを説明してください
# 選択範囲に対して
（コードを選択した状態で）
このコードをTypeScriptに変換してください
機能2：@メンションでファイル・フォルダを指定
VS Code拡張の大きな特徴が@メンション機能です。@を入力するとファイル名・フォルダ名の候補が出て、Claude Codeに必要なコンテキストだけを渡せます。
# ファイル指定（fuzzy matchで部分一致OK）
@auth を修正してください # auth.js, AuthService.tsなどにマッチ
# フォルダ指定（末尾に / をつける）
@src/components/ の構成を説明してください
# ページ範囲指定（大きなPDFを読む場合）
@spec.pdf のページ1-10のAPIエンドポイントをリストアップしてください
個人的に一番便利だと感じるのが、コードを選択した状態でOption+K（Mac）/ Alt+K（Win/Linux）を押す操作です。選択行のファイルパスと行番号が自動で@メンション形式（例: @app.ts#5-10）で挿入されます。「このコードの5行目から10行目を見て」と伝えるのが一瞬で終わります。
機能3：差分（diff）表示と承認フロー
Claude Codeがファイルを変更する際、変更前後のdiffをサイドバイサイドで表示してから承認を求めます。「承認」「拒否」「別の指示を出す」の3択で応答できます。
# 権限モードの切り替え
# プロンプトボックス下部のモードインジケーターをクリック
# デフォルト（Normal）: 各操作前に承認確認
# Plan モード: 変更前に計画を確認してから実行
# Auto-accept: 承認なしに自動編集（注意して使用）
研修先のエンジニアに一番好評だったのがこのdiff表示です。「何が変わったかひと目でわかる。ブラインドで変更されるより断然安心」という声をいただきました。初めてAIコーディングツールを使う方には特に有効です。
機能4：チェックポイント（変更の巻き戻し）
VS Code拡張では、会話の途中でClaude Codeが行った変更を任意の時点に巻き戻せるチェックポイント機能があります。
# 使い方
# メッセージにカーソルを合わせると「巻き戻しボタン」が表示される
# 3つのオプション:
# 1. Fork conversation from here: 会話を分岐（コード変更は保持）
# 2. Rewind code to here: コードだけ巻き戻す（会話は残す）
# 3. Fork conversation and rewind code: 両方やり直す
「やっぱり変更を元に戻したい」という場面で非常に助かります。GitのブランチをAI会話に持ち込んだイメージで、試行錯誤がしやすくなります。
機能5：会話履歴の管理と継続
# 過去の会話に戻る
# パネル上部のドロップダウンで会話履歴を検索・選択
# CLIで同じ会話を継続
claude --resume # 会話一覧が表示されて選択できる
# リモートセッションの取り込み（Claude.ai Webで開始した会話をVS Codeに）
# パネル → Past Conversations → Remote タブ
VS Code拡張の設定項目一覧
settings.json（VS Code設定）の主要設定
// VS Code設定（Cmd+, → Extensions → Claude Code）
{
// 新規会話のデフォルトモード
"claudeCode.initialPermissionMode": "plan", // "default" | "plan" | "acceptEdits" | "auto"
// パネルの表示位置
"claudeCode.preferredLocation": "panel", // "sidebar" | "panel"
// Enter送信 vs Ctrl+Enter送信
"claudeCode.useCtrlEnterToSend": false,
// ファイル保存（Claudeが読む前に自動保存）
"claudeCode.autosave": true,
// .gitignoreパターンをファイル検索から除外
"claudeCode.respectGitIgnore": true,
// ターミナルモードで開く（GUIパネルの代わりに）
"claudeCode.useTerminal": false
}
~/.claude/settings.json（Claude Code共通設定）の主要設定
こちらはCLI版とVS Code拡張で共有される設定ファイルです。
// ~/.claude/settings.json
{
"$schema": "https://json.schemastore.org/claude-code-settings.json",
// 更新チャンネル
"autoUpdatesChannel": "stable",
// 環境変数
"env": {
"DISABLE_AUTOUPDATER": "0" // "1"で自動更新を無効化
},
// 許可するコマンド（bash実行の事前承認）
"allowedTools": [
"Bash(git status)",
"Bash(npm run test)"
]
}
ショートカットキー一覧
| 操作 | Mac | Windows/Linux | 説明 |
|---|---|---|---|
| Claudeパネルを開く | （スパークアイコンをクリック） | （スパークアイコンをクリック） | エディタ右上に表示 |
| フォーカスを切り替え | Cmd+Esc | Ctrl+Esc | エディタ⇔Claudeを切り替え |
| 新規タブで開く | Cmd+Shift+Esc | Ctrl+Shift+Esc | 新しい会話をタブで開く |
| 新しい会話 | Cmd+N | Ctrl+N | Claudeフォーカス時のみ |
| @メンション挿入 | Option+K | Alt+K | 現在のファイル+選択行を参照 |
| コマンドメニュー | /（スラッシュ） | /（スラッシュ） | モデル切替・設定等 |
| コマンドパレット | Cmd+Shift+P → “Claude Code” | Ctrl+Shift+P → “Claude Code” | 全コマンド一覧 |
CLI版との違い・使い分け方
| 機能 | VS Code拡張 | CLI（ターミナル） |
|---|---|---|
| Diff表示（変更確認） | ✅ ネイティブUI | △ テキスト表示 |
| @メンション | ✅ GUI補完あり | ✅ テキスト入力 |
| チェックポイント | ✅ | ✅ |
| Tab補完 | ❌ | ✅ |
| !コマンド（シェル実行） | ❌ | ✅ |
| 全コマンド (/コマンド) | △ サブセットのみ | ✅ 全部使える |
| MCPサーバー設定 | △ 既存サーバー管理のみ | ✅ 追加・設定可能 |
結論として、日常的なコード編集・レビューはVS Code拡張が便利で、自動化スクリプトの実行やMCP設定変更はCLIが向いています。どちらも会話履歴を共有しているので、途中で切り替えも可能です。
JetBrains版との比較
| 項目 | VS Code拡張 | JetBrains拡張 |
|---|---|---|
| 対応IDE | VS Code、Cursor | IntelliJ IDEA、PyCharm、WebStorm等 |
| 機能セット | 同等 | 同等 |
| UI品質 | 優秀 | 優秀 |
| 言語サポート | 全言語 | Java/Kotlin/Python等で言語特化機能あり |
| おすすめ対象 | フロントエンド・フルスタック | Javaバックエンド・Androidアプリ |
おすすめ設定テンプレート（コピペで使える）
個人開発向け設定
// ~/.claude/settings.json（個人開発向け）
{
"$schema": "https://json.schemastore.org/claude-code-settings.json",
"autoUpdatesChannel": "latest",
"allowedTools": [
"Bash(git *)",
"Bash(npm run *)"
]
}
// VS Code settings.json に追加
{
"claudeCode.initialPermissionMode": "default",
"claudeCode.autosave": true
}
チーム開発向け設定
// .claude/settings.json（プロジェクトルートに配置・チームで共有）
{
"$schema": "https://json.schemastore.org/claude-code-settings.json",
"autoUpdatesChannel": "stable",
"allowedTools": [
"Bash(git status)",
"Bash(git diff)",
"Bash(npm run test)",
"Bash(npm run lint)"
]
}
// VS Code settings.json（チーム向け推奨）
{
"claudeCode.initialPermissionMode": "plan", // 変更前に計画確認を必須に
"claudeCode.respectGitIgnore": true,
"claudeCode.autosave": true
}
【要注意】VS Code拡張の失敗パターン4選
失敗1：VS Codeのバージョンが古い
# ❌ よくある問題: スパークアイコンが表示されない
# 原因: VS Code 1.97以下はサポート対象外
# ✅ 解決策: バージョン確認
# Help → About でバージョン確認
# 1.98.0未満なら更新: Help → Check for Updates
失敗2：ファイルを開かずにアイコンをクリック
# ❌ 「スパークアイコンが見えない！」
# 原因: フォルダを開いただけで、ファイルを開いていない
# ✅ 解決策: ファイルをひとつ開いてからアイコンをクリック
# または: Cmd+Shift+P → "Claude Code: Open in New Tab" でも開ける
# または: ステータスバー右下の「✱ Claude Code」をクリック（ファイル不要）
失敗3：Auto-acceptモードを誤って常時使用
# ❌ よくある失敗: 常にAuto-acceptにして大量変更を一気に適用
# 結果: 意図しない変更が大量に入り、戻すのが大変
# ✅ 推奨:
# - 通常作業はデフォルト（Normal）モード
# - 信頼できる単純タスクのみAuto-accept
# - Enterpriseプランのチームのみ Bypass permissions を使用
失敗4：MCPサーバーの設定をVS Code設定UIだけで完結しようとする
# ❌ VS Code拡張の設定UIはMCPサーバーの追加ができない（管理のみ）
# ✅ 正しい手順:
# 1. VS Codeの統合ターミナルでCLIを使ってMCPサーバーを追加
claude mcp add --transport http github https://api.githubcopilot.com/mcp/
# 2. その後 /mcp コマンドで VS Code拡張側から管理・有効化
VS Code拡張でよく使うプロンプト集10選
VS Code拡張に慣れてきたら、以下のプロンプトを試してみてください。@メンション形式と組み合わせると効果的です。
コード理解・説明系
# 選択したコードの説明
このコードが何をしているか、5歳でもわかるように説明してください
# アーキテクチャの把握
@src/ フォルダ全体の設計思想と、主要コンポーネントの関係を図解してください
# 依存関係の把握
@package.json で使われているパッケージのうち、特に重要なものを説明してください
コード改善系
# パフォーマンス改善
@src/api/users.ts のAPIレスポンス速度を改善してください。
改善の根拠（どのくらい改善するか）も説明してください。
仮定した点は必ず明記してください。
# TypeScript化
@src/utils/helpers.js をTypeScriptに変換してください。
型定義は厳密にしてください（anyは使わない）
# エラーハンドリング追加
@src/services/payment.ts のエラーハンドリングを改善してください。
ユーザーに見せるエラーメッセージと、ログに残す詳細エラーを分けてください
テスト・品質向上系
# テスト生成
@src/components/LoginForm.tsx のユニットテストをReact Testing Libraryで書いてください
エッジケースも含めて網羅してください。不足情報があれば質問してください。
# コードレビュー
今回のPRの変更内容を確認して、潜在的なバグとセキュリティリスクを指摘してください
# リファクタリング
@src/pages/Dashboard.tsx が肥大化しています。コンポーネント分割の方針を提案してください
ドキュメント系
# JSDoc自動生成
@src/lib/api-client.ts の全関数にJSDocコメントを追加してください
# README更新
プロジェクトのREADMEを最新の状態に更新してください。
セットアップ手順と主要機能の説明を含めてください
これらのプロンプトは顧問先のエンジニアチームで実際に使っているものです。特に「@メンション + パフォーマンス改善」の組み合わせは、コードの文脈をClaude Codeに正確に渡せるので品質が高い提案が返ってきます。
Chrome拡張との連携（VS Code独自機能）
VS Code拡張固有の便利機能として、Chromeと連携してブラウザ操作をAIに委任できます。
# ChromeにClaude拡張をインストール後、VS Codeから指示
@browser go to localhost:3000 and check the console for errors
# ローカル開発中のWebアプリのデバッグに便利
@browser fill in the login form and submit
よくある質問（FAQ）
Q: VS Code拡張とCLIは同時に使えますか？
A: はい。両方使えますし、会話履歴も共有されます。VSCode内のターミナルで claude と打てばCLI版が起動し、同じ会話を続けられます。
Q: 複数人のチームで使うとき、それぞれが別々のAnthropicアカウントが必要ですか？
A: 個人プランならそれぞれのアカウントが必要です。Teamプランなら管理コンソールで一元管理できます。
Q: VS Code拡張はCursorでも使えますか？
A: はい。Cursorにも同じ拡張（anthropic.claude-code）をインストールして使えます。
Q: 会社のProxy経由でも使えますか？
A: ~/.claude/settings.json で HTTPS_PROXY 環境変数を設定することで、Proxy経由での使用が可能です。
まとめ：今日から始める3つのアクション
- 今日やること: VS Codeに Claude Code拡張をインストールして、Option+K（@メンション）を試してみる
- 今週中: settings.jsonに推奨設定を追加し、チームで共有する設定を整備する
- 今月中: チェックポイント機能を活用して、AI支援コーディングのワークフローを確立する
次回予告: 次の記事では「Claude Code企業導入のステップ」をテーマに、Team/Enterpriseプランの管理機能やSSO設定、全社展開の進め方を詳しく解説します。
参考・出典
- Use Claude Code in VS Code — Claude Code公式ドキュメント（参照日: 2026-03-27）
- Claude Code for VS Code — Visual Studio Marketplace（参照日: 2026-03-27）
- Settings — Claude Code公式ドキュメント（参照日: 2026-03-27）
著者: 佐藤傑（さとう・すぐる）
株式会社Uravation代表取締役。早稲田大学法学部在学中に生成AIの可能性に魅了され、X（@SuguruKun_ai）フォロワー約10万人。100社以上の企業向けAI研修・導入支援を展開。著書『AIエージェント仕事術』（SBクリエイティブ）。SoftBank IT連載7回執筆（NewsPicks最大1,125ピックス）。
Claude Code活用のサポートをご希望の方は、Claude Coachingからお気軽にご相談ください。ご質問はお問い合わせフォームからもどうぞ。なお、VS Code拡張を使い始める前に、Claude Codeのインストールが完了していることをご確認ください。インストール手順の詳細はClaude Codeインストール完全ガイドをご覧ください。企業全体でのClaude Code展開については、Claude Code企業導入ガイドもあわせてご参考ください。VS Code拡張の設定をチームで統一することが、全社展開の第一歩になります。
