import { BlogInternalLink } from "../../app/components/blog/blog-internal-link"; import { BlogLessonLink } from "../../app/components/blog/blog-lesson-link"; import { BlogCtaBanner } from "../../app/components/blog/blog-cta-banner";

Claude Code を VS Code で使う完全ガイド | 拡張機能・統合・ショートカット設定 (2026年版)

Claude Code はターミナルベースの AI コーディングアシスタント（Assistant）ですが、VS Code（Visual Studio Code）と組み合わせることで開発体験が大きく向上します。

「VS Code に Claude Code を設定したい」「Ctrl+G で Claude Code をすぐ呼び出したい」「Claude Code Assistant for VSCode の使い方を知りたい」「Cursor や JetBrains 系 IDE との使い分けが分からない」という方に向けて、本記事では Claude Code と VS Code の連携手順を 3 ステップで解説します。拡張機能のインストール、ターミナル統合、Ctrl+G などショートカット、settings.json への記述例、JetBrains 系（Cursor / WebStorm）との違いまで実践的にまとめました。

まだ Claude Code 本体をインストールしていない方は、先に以下のインストールガイドから準備してください。

Claude Code と VSCode の関係

Claude Code はターミナルツールである

Claude Code は、ターミナル上で動作する対話型の AI コーディングアシスタントです。GUI ベースのエディタ拡張ではなく、コマンドラインから claude コマンドで起動し、自然言語の指示に基づいてコードの生成・編集・ファイル操作・Git 操作などを自律的に実行します。

VSCode はあくまで「エディタ」としての役割を担い、Claude Code が編集したファイルをリアルタイムに確認・レビューする場として機能します。つまり、Claude Code がコードを書き、VSCode でその結果を確認するという分業関係です。

2つの連携方法

Claude Code と VSCode を連携させるには、大きく分けて2つの方法があります。

1. VSCode 拡張機能を使う方法: Anthropic が公式に提供する Claude Code 拡張機能をインストールし、VSCode 内のパネルから直接 Claude Code を操作する
2. VSCode 統合ターミナルで使う方法: VSCode に内蔵されたターミナルペインで claude コマンドを実行し、エディタとターミナルを並べて使う

どちらの方法でも、Claude Code がファイルを編集するとエディタ上に即座に変更が反映されます。好みやワークフローに応じて使い分けてください。

VSCode 拡張機能のインストールと設定

Claude Code Assistant for VSCode とは

Anthropic は VSCode 向けの公式拡張機能「Claude Code」を提供しています。これはいわば Claude Code の VSCode 用 AI アシスタント（Assistant）で、インストールすると VSCode のサイドバーやパネルから直接 Claude Code を操作できるようになります。

主な特徴は以下の通りです。

• VSCode 内蔵パネル: サイドバーまたはボトムパネルに Claude Code の対話インターフェースが表示される
• ファイルコンテキストの自動連携: 現在開いているファイルや選択中のコードが自動的に Claude Code に渡される
• diff ビューの統合: Claude Code による変更が VSCode の差分表示で確認できる
• ターミナル出力のストリーミング: Claude Code の実行結果がリアルタイムに表示される

インストール手順

拡張機能のインストールは以下の手順で行います。

1. 前提条件を確認する: Claude Code CLI がインストール済みであること。まだの場合は npm install -g @anthropic-ai/claude-code でインストールしてください
2. VSCode を開く: VSCode を起動します
3. 拡張機能マーケットプレイスを開く: サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリックするか、Ctrl+Shift+X（Mac: Cmd+Shift+X）で開きます
4. 「Claude Code」を検索する: 検索バーに「Claude Code」と入力します
5. インストールする: Anthropic が提供する公式拡張機能を選び、「Install」ボタンをクリックします
6. 認証を完了する: 拡張機能が起動すると、Claude Code CLI と同じ認証フローが開始されます。指示に従って Anthropic アカウントまたは API キーでログインしてください

インストールが完了すると、VSCode のアクティビティバー（左端のアイコン列）に Claude Code のアイコンが追加されます。

基本的な設定

拡張機能をインストールしたら、いくつかの設定を確認しておくと快適に使えます。

VSCode の設定（Cmd+, または Ctrl+,）で「Claude Code」と検索すると、以下のような設定項目が表示されます。

• Terminal Profile: Claude Code をどのターミナルプロファイルで実行するか
• Auto-approve: ファイル書き込みやコマンド実行を自動承認するかどうか（セキュリティに注意して設定してください）

設定は JSON で直接編集することも可能です。settings.json に以下のように追記します。

{
  "claude-code.terminalProfile": "default"
}

VSCode 統合ターミナルでの利用

ターミナルペインで直接使う

拡張機能を使わなくても、VSCode の統合ターミナルで Claude Code を利用できます。むしろ、多くの開発者はこの方法を好みます。

手順はシンプルです。

1. ターミナルを開く: Ctrl+`（バッククォート）でターミナルペインを開きます
2. プロジェクトディレクトリに移動する: cd /path/to/your/project
3. Claude Code を起動する: claude と入力して Enter

これだけで、VSCode のターミナルペインに Claude Code の対話セッションが開始されます。エディタ部分にはコードが表示され、下部のターミナルで Claude Code と対話するというレイアウトが完成します。

ファイル自動反映の仕組み

VSCode の統合ターミナルで Claude Code を使う大きなメリットは、ファイル変更の自動反映です。

Claude Code がファイルを編集すると、VSCode のファイルウォッチャーが変更を検知し、エディタ上の表示が自動的に更新されます。手動でファイルを再読み込みする必要はありません。

この仕組みにより、以下のワークフローが自然に実現します。

1. ターミナルで Claude Code に指示を出す
2. Claude Code がファイルを編集する
3. エディタ上で変更がリアルタイムに表示される
4. 変更内容を確認し、必要に応じて追加指示を出す

ターミナルを右側や下部に配置し、エディタとの分割レイアウトにすると、コードの変更を見ながら対話できるため効率的です。

ターミナル分割のコツ

VSCode では、ターミナルペインの配置を自由にカスタマイズできます。Claude Code を使う際におすすめのレイアウトは以下の2パターンです。

パターン1: 下部パネル（デフォルト）

エディタが上部、ターミナルが下部に配置されるデフォルトのレイアウトです。横幅を最大限使えるため、Claude Code の出力が見やすくなります。

パターン2: 右サイド分割

エディタが左側、ターミナルが右側に配置されるレイアウトです。コードの変更箇所と Claude Code の出力を同時に確認できます。Cmd+\（Mac）または Ctrl+\ でエディタを分割し、ターミナルをドラッグして右側に配置してください。

エディタ連携の便利な使い方

ファイル変更の自動検知

Claude Code がファイルを作成・編集・削除すると、VSCode はその変更をリアルタイムに検知します。具体的には以下の動作が自動的に行われます。

• 新規ファイル: エクスプローラーのファイルツリーに即座に表示される
• ファイル編集: エディタタブに未保存マーカー（ドット）が表示されず、ディスク上のファイルが直接更新される
• ファイル削除: エクスプローラーから自動的に消える
• Git 変更: ソース管理パネルに変更ファイルが即座に反映される

diff ビューでの変更確認

Claude Code が行った変更を確認するには、VSCode のソース管理機能が便利です。

1. ソース管理パネルを開く: サイドバーのソース管理アイコンをクリック、または Ctrl+Shift+G（Mac: Cmd+Shift+G）
2. 変更ファイルをクリック: diff ビューが開き、変更前後の差分がハイライト表示される
3. 変更を確認・修正: 必要に応じて手動で微調整する

Claude Code は Git を活用した操作も得意なので、claude セッション内で「変更内容を git diff で見せて」と指示することもできます。

ターミナルからのファイル操作

Claude Code のターミナル操作と VSCode のエディタ機能を組み合わせると、さらに効率的なワークフローが実現します。

例えば、以下のような使い方ができます。

• 「このファイルにテストを追加して」: Claude Code がテストファイルを生成し、VSCode 上ですぐにコードを確認できる
• 「このエラーを修正して」: エディタ上でエラー箇所を確認しながら、Claude Code に修正を依頼する
• 「リファクタリングして」: 変更前後の差分を VSCode の diff ビューで丁寧にレビューできる

CLI の操作方法についてさらに詳しく知りたい方は、以下の記事も参考にしてください。

VSCode + Claude Code のおすすめ設定

推奨拡張機能の組み合わせ

Claude Code と一緒に使うと便利な VSCode 拡張機能をまとめます。

settings.json のカスタマイズ

Claude Code との連携をスムーズにするための settings.json の推奨設定を紹介します。

{
  // ファイル自動保存: Claude Codeが直接ファイルを書き換えるため、
  // 競合を防ぐには off にしておくのが無難
  "files.autoSave": "off",

  // ファイル変更の自動検知を有効にする（デフォルトで有効）
  "files.useExperimentalFileWatcher": true,

  // ターミナルのフォントサイズ
  // Claude Code の出力が読みやすいサイズに調整
  "terminal.integrated.fontSize": 13,

  // ターミナルのスクロールバック行数
  // Claude Code は長い出力を生成することがあるため、十分な行数を確保
  "terminal.integrated.scrollback": 10000,

  // ターミナルのデフォルトプロファイル（Mac の場合）
  "terminal.integrated.defaultProfile.osx": "zsh",

  // ファイル除外設定: node_modules などを除外して
  // ファイルウォッチャーの負荷を軽減
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/objects/**": true,
    "**/dist/**": true,
    "**/build/**": true
  }
}

キーボードショートカットの設定

Claude Code の操作を効率化するために、以下のキーボードショートカットを設定しておくと便利です。

// keybindings.json
[
  {
    // ターミナルの表示/非表示をトグル
    "key": "cmd+j",
    "command": "workbench.action.togglePanel"
  },
  {
    // ターミナルにフォーカスを移動
    "key": "cmd+shift+t",
    "command": "workbench.action.terminal.focus"
  },
  {
    // エディタにフォーカスを戻す
    "key": "cmd+shift+e",
    "command": "workbench.action.focusActiveEditorGroup"
  }
]

ターミナル（Claude Code）とエディタを素早く行き来できるようにしておくと、レビューと指示のサイクルが高速化します。

ショートカットキー一覧表

Claude Code と VS Code を組み合わせて使うときに、押さえておきたい主要ショートカットを一覧にまとめました。Mac / Windows / Linux ごとのキー配列差分も合わせて記載しています。

特に Ctrl+G（Mac は Cmd+G） は、エディタで選択したコードを Claude Code にそのまま渡せる最重要ショートカットです。「この関数をリファクタリングして」と頼むときの定番操作になります。

なお Ctrl+G は VS Code 標準では「行へジャンプ」に割り当てられているため、Claude Code 拡張機能をインストールするとコマンド優先度がコンテキスト依存で切り替わります。意図したキーが効かない場合は keybindings.json で claude-code.sendSelectionToClaude などのコマンド名を明示的に再バインドしてください。

settings.json への記述例

VS Code のユーザー設定ファイル settings.json に Claude Code 用の項目をまとめて書いておくと、新しい PC や別の開発環境でも同じ体験を即座に再現できます。

settings.json を開くには次の手順を実行します。

1. Cmd+Shift+P（Mac）または Ctrl+Shift+P（Windows / Linux）でコマンドパレットを開く
2. 「Preferences: Open User Settings (JSON)」を選択する
3. 開いたファイルに、以下の Claude Code 関連設定を追記する

{
  // === Claude Code 拡張機能 ===
  // Claude Code が使うターミナルプロファイル
  "claude-code.terminalProfile": "default",
  // ファイル書き込みを自動承認するか（本番リポジトリでは false 推奨）
  "claude-code.autoApprove": false,
  // 起動時に Claude Code パネルを自動表示
  "claude-code.showOnStartup": true,

  // === ターミナル統合 ===
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash",
  "terminal.integrated.fontSize": 13,
  // Claude Code は長い出力を生成するため十分なバッファを確保
  "terminal.integrated.scrollback": 10000,

  // === ファイル監視 ===
  // Claude Code が編集した内容をエディタに即時反映
  "files.autoSave": "off",
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/objects/**": true,
    "**/dist/**": true,
    "**/build/**": true
  }
}

claude-code.* の設定キー名は拡張機能のバージョンで変わることがあります。最新のキー名はコマンドパレットで「Claude Code」と検索したときに表示される設定項目を正としてください。

ターミナル統合の使い方

Claude Code は VS Code の統合ターミナルから claude コマンドを叩くだけで起動できます。拡張機能を使わず、ターミナル統合だけで運用する開発者も多いシンプルな構成です。

最短の利用フローは次の通りです。

1. Ctrl+` で統合ターミナルを開く
2. プロジェクトルートに移動（cd /path/to/project）
3. claude と入力して Enter（初回は認証フローが起動）
4. 自然言語で指示を出す（例として「apps/claudecode のルーティングをまとめて」など）
5. Claude Code が編集したファイルがエディタに自動反映される

ターミナルを右側に分割しておけば、左にコード、右に Claude Code セッションという定番レイアウトが完成します。配置の切り替えは Cmd+\（Mac）/ Ctrl+\（Windows）でエディタを分割し、ターミナル右上の「Move Terminal into Editor Area」を実行します。

ターミナル統合の強みは、Claude Code 本来の CLI 機能（/clear、/compact、/init 等のスラッシュコマンド、--resume での会話再開、MCP 連携など）を VS Code の中からそのまま使える点です。詳しい操作は次の記事で解説しています。

JetBrains 系 IDE (Cursor / WebStorm) との違い

VS Code 以外で Claude Code を使うパターンとして、JetBrains 系 IDE（WebStorm、IntelliJ IDEA、PyCharm、GoLand など）や、VS Code フォークの Cursor を選ぶ開発者もいます。それぞれの違いを短くまとめます。

ポイントは次の通りです。

• Cursor は VS Code フォークのため、ここで紹介した settings.json や Ctrl+G の構成がほぼそのまま流用できます。Cursor 独自の Composer と Claude Code のターミナルセッションを使い分けると役割分担しやすくなります
• WebStorm / IntelliJ などの JetBrains 系は GUI 拡張ではなく、内蔵ターミナル（Alt+F12）から claude を起動するスタイルが安定です。エディタ側のファイル監視は標準で有効なので、Claude Code の編集も即座に反映されます
• 公式拡張機能の機能差は大きいため、「拡張機能 UI を重視するなら VS Code 系」「IDE のリファクタや型解析を重視するなら JetBrains 系」というのが大まかな判断基準です

Cursor と VSCode + Claude Code の違い

VSCode で AI コーディングを使う方法として、Cursor も人気があります。「Claude Code と Cursor と VSCode、どれを使えばいいの？」という疑問を持つ方も多いでしょう。Claude Code と Cursor は根本的なアプローチが異なるため、両者の違いを理解しておくと最適なツール選択ができます。

操作方法の違い

どちらを選ぶべきか

• Claude Code が向いている人: ターミナル操作に慣れている、大規模なリファクタリングや自律的なタスク実行が多い、Git 操作を含む複合的なワークフローを自動化したい
• Cursor が向いている人: GUI ベースの操作を好む、行単位・関数単位の補完が主な用途、エディタから離れずにすべて完結させたい

なお、Claude Code と Cursor は併用も可能です。Cursor のエディタでコードを書きながら、複雑なタスクは Claude Code に任せるというハイブリッドな使い方も有効です。

関連プロンプトテンプレート

VSCode での開発に使えるプロンプトテンプレートです。

• LP ページ作成 — ランディングページの設計から実装まで自動化
• ダッシュボード作成 — データダッシュボードを自動生成するプロンプト

おすすめスキル

VSCode での開発をさらに強化するスキルです。

• Claude Gemini MCP Slim — 複数 AI モデルを VSCode 内で切り替えて活用

まとめ

Claude Code と VSCode の連携方法を整理すると、以下のポイントが重要です。

• Claude Code はターミナルベースの AI Assistantであり、VSCode はコードの確認・レビューを担うエディタとして機能する
• **Claude Code 拡張機能（Assistant for VSCode）**をインストールすれば、VSCode 内のパネルから直接操作できる
• 統合ターミナルで claude コマンドを実行する方法も有効で、ファイル変更はエディタにリアルタイム反映される
• VSCode の settings.json 設定（スクロールバック増加、ファイルウォッチャー設定など）で連携がさらにスムーズになる
• Cursor とは異なるアプローチを取るため、用途に応じた使い分けや併用が効果的

VSCode で開発をしている方は、まず統合ターミナルで Claude Code を試し、その後に拡張機能を導入するのがスムーズな導入パスです。

Claude Code のインストールから VSCode での設定まで、ステップバイステップで学びたい方は以下のレッスンをご覧ください。