Claude Code VS Code拡張機能

問題: Claude Codeのセッションを開くたびに別のペインが必要になります。エディタとターミナルを行き来し、ファイルパスを手動でコピーし、ウィンドウを切り替えるたびに作業の流れが途切れてしまいます。

クイックウィン: すべてをエディタに取り込みましょう。Ctrl+Shift+Xで拡張機能を開き、「Claude Code」と入力して、公式のAnthropicビルド（200万以上のインストール、認証済みパブリッシャー）を選択してください。

サイドバーのSparkアイコンをタップすると、ファイルの隣にClaude Codeセッションが開きます。プロンプト、diff、エディタがすべて同じペインに収まります。すでに200万人以上の開発者がこの方法で作業しています。

VS CodeでClaude Codeを使う理由

この拡張機能はすべてのターミナル機能をIDEレイアウトに取り込みます:

• 自律的な探索: Claudeがコードベースを独立して読み取り、書き込み、探索する
• リアルタイムdiff: 承認/拒否ボタン付きのインラインdiffで変更を確認
• サブエージェント: 複雑なマルチファイル操作に対して並列AIタスクを実行
• カスタムスラッシュコマンド: 拡張機能内でCLIコマンドに直接アクセス
• MCPサポート: ブラウザ自動化と検索にMCPサーバーを使用
• 拡張思考: 深い思考のためにClaudeの推論の可視性を切り替え
• プランモード: 変更を受け入れる前にClaudeのプランを確認して編集

最初に指定したプロジェクトは、Claudeがパッチを渡すのではなくワークスペース内で直接編集するため、より速く実行されます。

Claude Code拡張機能のインストール

VS Code Marketplace経由（推奨）:

1. VS Codeを開く
2. 拡張機能をクリック（Ctrl+Shift+X）
3. 「Claude Code」で検索
4. 公式のAnthropicの拡張機能をインストール（認証済みパブリッシャーバッジ）

要件: VS Code 1.98.0以上と以下のいずれか:

• Claude ProまたはMaxサブスクリプション
• TeamまたはEnterpriseプラン
• APIキー（従量制）

何か問題があればインストールガイドを参照してください。同じパッケージはVS Code単体だけでなく、Cursor、Windsurf、VSCodiumにも導入できます。

最初のセッションのセットアップ

SparkボタンをクリックしてVS Code内でClaude Codeを起動します。MacユーザーはCmd+Nで新しい会話を開き、WindowsユーザーはCtrl+Nを押します。

実際のものを作るようにClaudeに依頼しましょう:

Create a React component with useState hook for a counter

ライブdiffがエディタに表示されます。サイドバーを広げると、その中に3つのレイヤーが見えます:

1. ハイライトされた変更: Claudeが追加したいものを表示
2. 承認/拒否ボタン: diff レベルで対応
3. ファイルプレビュー: コミット前に確認

承認をクリックするとコードがワークスペースにすぐに反映されます。

調整したい場合は言えばOKです:

Add a reset button to the counter

Claudeが同じファイルに新しいdiffを表示します。承認するまで何も適用されません。設定の基本ガイドでは、ここからさらに有効にできる設定を説明しています。

設定オプション

拡張思考モード

プロンプトボックスの右下で拡張思考をオンにすると、編集が行われる前にClaudeの推論が可視化されます。追いにくいロジックに潜むバグを追いかけるときに便利です。

自動承認モード

自動承認は確認なしに変更を適用します。クリックなしで実装が実行されるのを見守れるほど、ワークフローへの信頼が積み重なったら使いましょう。

ファイル添付

ファイルをチャットウィンドウに直接ドロップするか、@メンションを活用しましょう:

@readme.md explain this project structure
@src/components/Header.tsx refactor to TypeScript generics

ワークスペースのコンテキストはすでに読み込まれています。追加設定は不要です。

複数セッション

すべてのワークスペースフォルダが独自のClaudeセッションをホストできます。マイクロサービスリポジトリに最適です。それぞれが別々のコンテキストを保持します。VS Code内で構造化されたマルチエージェント設定が必要なチームはClaudeFastのCode Kitを活用できます。計画を先に立ててから実行する18の専門エージェントが、並列セッションを調整しながら提供されます。エージェントワークフローのドキュメントにより深いパターンが記載されています。

VS Codeでのターミナル設定

VS Codeの統合ターミナルでShift+Enterがマルチラインプロンプトキーとして機能するには、小さな調整が必要です。Claude Codeセッション内から/terminal-setupを実行すると、キーバインディングが自動的に設定されます。手動編集不要です。

Option+Enterが好みの場合は、設定からProfiles、Keys、と進み、Left/Right Optionキーを「Esc+」に切り替えてください。

ターミナル設定のチュートリアルで知っておく価値のある追加の調整をすべてカバーしています。

Windows固有のキーバインディング

2つのWindowsデフォルトがMacのショートカットと異なります:

• Alt+V: 画像貼り付け（クリップボード貼り付けに予約されているCtrl+Vの代わり）
• Meta+M: VTモードのサポートがない古いNode.jsバージョン（24.2.0または22.17.0未満）での権限モード切り替え

どちらもデフォルト設定であり、keybindings設定ファイルから自由に変更できます。

拡張機能の自動インストールの制御

Claude Code CLIはVS Code内で実行されていることを検出すると、拡張機能が自動的にインストールされます。環境変数でブロックできます:

export CLAUDE_CODE_IDE_SKIP_AUTO_INSTALL=1

企業ポリシーのインストール、ロックされたプロファイル、拡張機能を必要としないパイプラインに便利です。

問題が発生したとき

トラブルシューティングガイドにさらに多くの修正方法が記載されています。

エンタープライズ: サードパーティプロバイダー

Amazon BedrockまたはGoogle Vertex AI経由でルーティングする場合は、settings.jsonに以下を追加してください:

{
  "env": {
    "CLAUDE_CODE_USE_BEDROCK": "1",
    "AWS_REGION": "us-east-2"
  }
}

ログインプロンプトは"claudeCode.disableLoginPrompt": trueで無効化できます。

VS CodeでClaudeとコーディングできるようになりました

• ターミナルグレードのClaude CodeがIDEに統合されました
• 次のステップ: MCP拡張機能によるブラウザ自動化
• レベルアップ: エージェントワークフローによるマルチステップのタスクオーケストレーション
• 比較: Cursorとの拡張機能の違い
• 調整: ワークフローに合わせたターミナルの動作とキーボードショートカット
• さらに調整: すべてのオプションの完全な設定リファレンス

この拡張機能は定期的にアップデートが提供されています。現在もベータ版のため、バグ報告はGitHubに送ってください。