ClaudeCode入門ガイド
トップ
ブログ一覧
（更新: 2026-03-10）連携10分で読める
著者: BlueAI編集部
酒井歩乃加
監修: 酒井歩乃加

早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆

平原尚樹
監修: 平原尚樹

株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

Claude Code を VSCode で使う方法｜拡張機能・連携・設定ガイド

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

「Claude Code を VSCode 上で使いたいけど、どう設定すればいいかわからない」「エディタ連携で何ができるのか知りたい」という方に向けて、本記事では Claude Code と VSCode の連携方法を網羅的に解説します。拡張機能のインストールから設定のカスタマイズ、Cursor との違いまで、実践的なガイドとしてまとめました。

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 拡張機能とは

Anthropic は VSCode 向けの公式拡張機能「Claude Code」を提供しています。この拡張機能をインストールすると、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 の操作方法についてさらに詳しく知りたい方は、以下の記事も参考にしてください。

関連記事 — 連携Claude Code CLI の使い方｜ターミナル操作の基本と応用Claude Code CLI の使い方を解説。基本的なターミナル操作、非対話モード（-p フラグ）、パイプ入力、CI/CD 連携など、コマンドラインでの活用方法を紹介します。

VSCode + Claude Code のおすすめ設定

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

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

拡張機能用途Claude Code との相性
GitLensGit 履歴・blame の可視化Claude Code のコミット履歴を詳細に追跡
Error Lensエラー・警告のインライン表示Claude Code に修正指示する際の参照に便利
Todo TreeTODO/FIXME コメントの一覧表示Claude Code が残した TODO を把握しやすい
PrettierコードフォーマッターClaude Code の出力を自動整形
ESLintLint チェックClaude Code 生成コードの品質チェック

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）とエディタを素早く行き来できるようにしておくと、レビューと指示のサイクルが高速化します。

Cursor との違い

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

操作方法の違い

比較項目Claude Code + VSCodeCursor
操作方法ターミナルで自然言語指示エディタ内 UI で操作
動作方式エージェント型（自律実行）アシスタント型（提案→承認）
ファイル操作複数ファイルを一括で自律編集主にカーソル位置の周辺を編集
Git 操作コミット・ブランチ操作を自動実行エディタ内の補完が中心
学習コストCLI に慣れが必要GUI ベースで直感的

どちらを選ぶべきか

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

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

関連記事 — 連携Cursor と Claude Code を併用する方法｜それぞれの強みを活かすCursor と Claude Code を併用して開発効率を最大化する方法を解説。それぞれの得意分野、使い分けのコツ、連携のベストプラクティスを紹介します。

まとめ

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

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

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

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

レッスン セットアップ — 15分Mac編Mac に Claude Code をインストールする手順を解説します。

Claude Code を体系的に学びませんか？

全10章・30レッスン無料公開中

第1章から始める

関連記事

連携

Claude Code CLI の使い方｜ターミナル操作の基本と応用

Claude Code CLI の使い方を解説。基本的なターミナル操作、非対話モード（-p フラグ）、パイプ入力、CI/CD 連携など、コマンドラインでの活用方法を紹介します。

8分で読める
酒井歩乃加平原尚樹
監修: 酒井歩乃加・平原尚樹
連携

Cursor と Claude Code を併用する方法｜それぞれの強みを活かす

Cursor と Claude Code を併用して開発効率を最大化する方法を解説。それぞれの得意分野、使い分けのコツ、連携のベストプラクティスを紹介します。

10分で読める
酒井歩乃加平原尚樹
監修: 酒井歩乃加・平原尚樹

Claude Code を体系的に学びませんか？

全10章・30レッスン無料公開中

第1章から始める