Claude Code VS Code拡張機能
AnthropicのVS Code拡張機能は、Claude CodeをエディタサイドバーのSparkアイコンパネルとして組み込みます。インラインdiff、プランモード、サブエージェント、MCPサポートが利用できます。
問題: 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経由(推奨):
- VS Codeを開く
- 拡張機能をクリック(Ctrl+Shift+X)
- 「Claude Code」で検索
- 公式の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つのレイヤーが見えます:
- ハイライトされた変更: Claudeが追加したいものを表示
- 承認/拒否ボタン: diff レベルで対応
- ファイルプレビュー: コミット前に確認
承認をクリックするとコードがワークスペースにすぐに反映されます。
調整したい場合は言えば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
企業ポリシーのインストール、ロックされたプロファイル、拡張機能を必要としないパイプラインに便利です。
問題が発生したとき
| エラー | 修正方法 |
|---|---|
| 拡張機能が読み込まれない | VS Codeを1.98.0以上に更新(code --version) |
| Claudeが応答しない | Ctrl+Shift+P → 「Developer: Reload Window」 |
| 認証に失敗した | Pro/Max/Team/Enterpriseサブスクリプションまたはより APIキーを確認 |
| 応答が届かない | インターネットを確認し、新しい会話を開始、CLIフォールバックを試みる |
トラブルシューティングガイドにさらに多くの修正方法が記載されています。
エンタープライズ: サードパーティプロバイダー
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に送ってください。
vs Google Jules
Claude Code is a synchronous terminal agent you steer in real time. Google Jules is an asynchronous cloud agent that runs tasks on its own VMs and hands back pull requests. Here is how the two compare on concurrency, review burden, model quality, and cost.
2026年版 Claude Code と Cursor の比較
2026年の Claude Code と Cursor を並べて比較します。エージェントモデル、コンテキストウィンドウ、料金プラン、そして各ツールが異なる開発ワークフローにどう適合するかを解説します。

