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のインストール方法｜Mac・Windows・Linux対応【2026年版】 Claude Codeの公式ネイティブインストーラーをOS別に解説。Mac・Windows・Linux・WSL2への導入、認証、更新、claude doctorによる確認までまとめました。
Claude Code と VSCode の関係
Claude Code はターミナルツールである
Claude Code は、ターミナル上で動作する対話型の AI コーディングアシスタントです。GUI ベースのエディタ拡張ではなく、コマンドラインから claude コマンドで起動し、自然言語の指示に基づいてコードの生成・編集・ファイル操作・Git 操作などを自律的に実行します。
VSCode はあくまで「エディタ」としての役割を担い、Claude Code が編集したファイルをリアルタイムに確認・レビューする場として機能します。つまり、Claude Code がコードを書き、VSCode でその結果を確認するという分業関係です。
VSCodeやJetBrainsを含むIDE連携の位置づけは、IDE連携の用語解説 でも整理しています。
2つの連携方法
Claude Code と VSCode を連携させるには、大きく分けて2つの方法があります。
VSCode 拡張機能を使う方法 : Anthropic が公式に提供する Claude Code 拡張機能をインストールし、VSCode 内のパネルから直接 Claude Code を操作する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 の実行結果がリアルタイムに表示される
インストール手順
拡張機能のインストールは以下の手順で行います。
前提条件を確認する : Claude Code CLI がインストール済みであること。まだの場合は公式ネイティブインストーラーを使ってください。npm 版を選ぶ場合は Node.js を準備して npm install -g @anthropic-ai/claude-code を実行しますVSCode を開く : VSCode を起動します拡張機能マーケットプレイスを開く : サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリックするか、Ctrl+Shift+X（Mac: Cmd+Shift+X）で開きます「Claude Code」を検索する : 検索バーに「Claude Code」と入力しますインストールする : Anthropic が提供する公式拡張機能を選び、「Install」ボタンをクリックします認証を完了する : 拡張機能が起動すると、Claude Code CLI と同じ認証フローが開始されます。指示に従って Anthropic アカウントまたは API キーでログインしてください
インストールが完了すると、VSCode のアクティビティバー（左端のアイコン列）に Claude Code のアイコンが追加されます。
基本的な設定
拡張機能をインストールしたら、いくつかの設定を確認しておくと快適に使えます。
VSCode の設定（Cmd+, または Ctrl+,）で「Claude Code」と検索すると、以下のような設定項目が表示されます。
Terminal Profile : Claude Code をどのターミナルプロファイルで実行するかAuto-approve : ファイル書き込みやコマンド実行を自動承認するかどうか（セキュリティに注意して設定してください）
設定は JSON で直接編集することも可能です。settings.json に以下のように追記します。
Copy {
"claude-code.terminalProfile" : "default"
} VSCode 統合ターミナルでの利用
ターミナルペインで直接使う
拡張機能を使わなくても、VSCode の統合ターミナルで Claude Code を利用できます。むしろ、多くの開発者はこの方法を好みます。
手順はシンプルです。
ターミナルを開く : Ctrl+`（バッククォート）でターミナルペインを開きますプロジェクトディレクトリに移動する : cd /path/to/your/projectClaude Code を起動する : claude と入力して Enter
これだけで、VSCode のターミナルペインに Claude Code の対話セッションが開始されます。エディタ部分にはコードが表示され、下部のターミナルで Claude Code と対話するというレイアウトが完成します。
ファイル自動反映の仕組み
VSCode の統合ターミナルで Claude Code を使う大きなメリットは、ファイル変更の自動反映 です。
Claude Code がファイルを編集すると、VSCode のファイルウォッチャーが変更を検知し、エディタ上の表示が自動的に更新されます。手動でファイルを再読み込みする必要はありません。
この仕組みにより、以下のワークフローが自然に実現します。
ターミナルで Claude Code に指示を出す
Claude Code がファイルを編集する
エディタ上で変更がリアルタイムに表示される
変更内容を確認し、必要に応じて追加指示を出す
ターミナルを右側や下部に配置し、エディタとの分割レイアウトにすると、コードの変更を見ながら対話できるため効率的です。
ターミナル分割のコツ
VSCode では、ターミナルペインの配置を自由にカスタマイズできます。Claude Code を使う際におすすめのレイアウトは以下の2パターンです。
パターン1: 下部パネル（デフォルト）
エディタが上部、ターミナルが下部に配置されるデフォルトのレイアウトです。横幅を最大限使えるため、Claude Code の出力が見やすくなります。
パターン2: 右サイド分割
エディタが左側、ターミナルが右側に配置されるレイアウトです。コードの変更箇所と Claude Code の出力を同時に確認できます。Cmd+\（Mac）または Ctrl+\ でエディタを分割し、ターミナルをドラッグして右側に配置してください。
エディタ連携の便利な使い方
ファイル変更の自動検知
Claude Code がファイルを作成・編集・削除すると、VSCode はその変更をリアルタイムに検知します。具体的には以下の動作が自動的に行われます。
新規ファイル : エクスプローラーのファイルツリーに即座に表示されるファイル編集 : エディタタブに未保存マーカー（ドット）が表示されず、ディスク上のファイルが直接更新されるファイル削除 : エクスプローラーから自動的に消えるGit 変更 : ソース管理パネルに変更ファイルが即座に反映される
diff ビューでの変更確認
Claude Code が行った変更を確認するには、VSCode のソース管理機能が便利です。
ソース管理パネルを開く : サイドバーのソース管理アイコンをクリック、または Ctrl+Shift+G（Mac: Cmd+Shift+G）変更ファイルをクリック : diff ビューが開き、変更前後の差分がハイライト表示される変更を確認・修正 : 必要に応じて手動で微調整する
Claude Code は Git を活用した操作も得意なので、claude セッション内で「変更内容を git diff で見せて」と指示することもできます。
ターミナルからのファイル操作
Claude Code のターミナル操作と VSCode のエディタ機能を組み合わせると、さらに効率的なワークフローが実現します。
例えば、以下のような使い方ができます。
「このファイルにテストを追加して」 : Claude Code がテストファイルを生成し、VSCode 上ですぐにコードを確認できる「このエラーを修正して」 : エディタ上でエラー箇所を確認しながら、Claude Code に修正を依頼する「リファクタリングして」 : 変更前後の差分を VSCode の diff ビューで丁寧にレビューできる
CLI の操作方法についてさらに詳しく知りたい方は、以下の記事も参考にしてください。
関連記事 — 使い方 Claude Code の使い方ガイド｜基本操作から実践テクニックまで Claude Code の使い方を基本操作から実践テクニックまで解説。効果的なプロンプトの書き方、ファイル操作、Git 連携など、すぐに使えるノウハウを紹介します。
VSCode + Claude Code のおすすめ設定
推奨拡張機能の組み合わせ
Claude Code と一緒に使うと便利な VSCode 拡張機能をまとめます。
拡張機能 用途 Claude Code との相性 GitLens Git 履歴・blame の可視化 Claude Code のコミット履歴を詳細に追跡 Error Lens エラー・警告のインライン表示 Claude Code に修正指示する際の参照に便利 Todo Tree TODO/FIXME コメントの一覧表示 Claude Code が残した TODO を把握しやすい Prettier コードフォーマッター Claude Code の出力を自動整形 ESLint Lint チェック Claude Code 生成コードの品質チェック
settings.json のカスタマイズ
Claude Code との連携をスムーズにするための settings.json の推奨設定を紹介します。
Copy {
"files.autoSave" : "off" ,
"files.useExperimentalFileWatcher" : true ,
"terminal.integrated.fontSize" : 13 ,
"terminal.integrated.scrollback" : 10000 ,
"terminal.integrated.defaultProfile.osx" : "zsh" ,
"files.watcherExclude" : {
"**/node_modules/**" : true ,
"**/.git/objects/**" : true ,
"**/dist/**" : true ,
"**/build/**" : true }
} キーボードショートカットの設定
Claude Code の操作を効率化するために、以下のキーボードショートカットを設定しておくと便利です。
Copy
[
{
"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 ごとのキー配列差分も合わせて記載しています。
目的 Mac Windows / Linux 補足 Claude Code の拡張機能パネルを開く Cmd+EscCtrl+Esc拡張機能インストール後に有効 選択中のコードを Claude Code に送る Cmd+GCtrl+G選択範囲をそのままコンテキストとして渡す 統合ターミナルを開閉 Ctrl+`Ctrl+`Claude Code セッションを起動・確認 パネル（ターミナル含む）の表示切替 Cmd+JCtrl+Jチャットとコードを高速トグル エディタを分割 Cmd+\Ctrl+\エディタとターミナルを左右レイアウト ターミナルにフォーカス Cmd+Shift+TCtrl+Shift+Tキー設定例として後述 エディタにフォーカスを戻す Cmd+Shift+ECtrl+Shift+Eキー設定例として後述 ソース管理パネルを開く Cmd+Shift+GCtrl+Shift+Gdiff ビューで Claude Code の編集を確認 拡張機能マーケットプレイスを開く Cmd+Shift+XCtrl+Shift+XClaude Code 拡張機能を検索 設定（settings.json）を開く Cmd+,Ctrl+,「Claude Code」で検索
特に Ctrl+G（Mac は Cmd+G）
なお Ctrl+G は VS Code 標準では「行へジャンプ」に割り当てられているため、Claude Code 拡張機能をインストールするとコマンド優先度がコンテキスト依存で切り替わります。意図したキーが効かない場合は keybindings.json で claude-code.sendSelectionToClaude などのコマンド名を明示的に再バインドしてください。
settings.json への記述例
VS Code のユーザー設定ファイル settings.json に Claude Code 用の項目をまとめて書いておくと、新しい PC や別の開発環境でも同じ体験を即座に再現できます。
settings.json を開くには次の手順を実行します。
Cmd+Shift+P（Mac）または Ctrl+Shift+P（Windows / Linux）でコマンドパレットを開く「Preferences: Open User Settings (JSON)」を選択する
開いたファイルに、以下の Claude Code 関連設定を追記する
Copy {
"claude-code.terminalProfile" : "default" ,
"claude-code.autoApprove" : false ,
"claude-code.showOnStartup" : true ,
"terminal.integrated.defaultProfile.osx" : "zsh" ,
"terminal.integrated.defaultProfile.linux" : "bash" ,
"terminal.integrated.fontSize" : 13 ,
"terminal.integrated.scrollback" : 10000 ,
"files.autoSave" : "off" ,
"files.watcherExclude" : {
"**/node_modules/**" : true ,
"**/.git/objects/**" : true ,
"**/dist/**" : true ,
"**/build/**" : true }
} claude-code.* の設定キー名は拡張機能のバージョンで変わることがあります。最新のキー名はコマンドパレットで「Claude Code」と検索したときに表示される設定項目を正としてください。
ターミナル統合の使い方
Claude Code は VS Code の統合ターミナルから claude コマンドを叩くだけで起動できます。拡張機能を使わず、ターミナル統合だけで運用する開発者も多いシンプルな構成です。
最短の利用フローは次の通りです。
Ctrl+` で統合ターミナルを開くプロジェクトルートに移動（cd /path/to/project）
claude と入力して Enter（初回は認証フローが起動）自然言語で指示を出す（例として「apps/claudecode のルーティングをまとめて」など）
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 を選ぶ開発者もいます。それぞれの違いを短くまとめます。
エディタ Claude Code との相性 特徴 VS Code + Claude Code 公式拡張機能 + 統合ターミナル両方に対応 エコシステムが最も成熟。本記事のメイン構成 Cursor + Claude Code VS Code フォークなので拡張機能はほぼ互換 Cursor の Composer / Tab 補完と Claude Code を併用できる JetBrains 系 + Claude Code 統合ターミナルから claude を起動して利用 公式拡張機能は VS Code 系ほど成熟していないが、IDE のリファクタ機能と Claude Code の自律編集が共存可能
ポイントは次の通りです。
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 + VSCode Cursor 操作方法 ターミナルで自然言語指示 エディタ内 UI で操作 動作方式 エージェント型（自律実行） アシスタント型（提案→承認） ファイル操作 複数ファイルを一括で自律編集 主にカーソル位置の周辺を編集 Git 操作 コミット・ブランチ操作を自動実行 エディタ内の補完が中心 学習コスト CLI に慣れが必要 GUI ベースで直感的
どちらを選ぶべきか
Claude Code が向いている人 : ターミナル操作に慣れている、大規模なリファクタリングや自律的なタスク実行が多い、Git 操作を含む複合的なワークフローを自動化したいCursor が向いている人 : GUI ベースの操作を好む、行単位・関数単位の補完が主な用途、エディタから離れずにすべて完結させたい
なお、Claude Code と Cursor は併用も可能です。Cursor のエディタでコードを書きながら、複雑なタスクは Claude Code に任せるというハイブリッドな使い方も有効です。
関連記事 — 連携 CursorとClaude Codeを比較｜料金・機能・併用方法【2026年版】 CursorとClaude Codeの料金・機能・作業画面・自動化・チーム管理を比較。どちらを選ぶか、同じリポジトリで安全に併用する方法を解説します。
関連プロンプトテンプレート
VSCode での開発に使えるプロンプトテンプレートです。
LP ページ作成 ダッシュボード作成
おすすめスキル
VSCode での開発をさらに強化するスキルです。
Claude Gemini MCP Slim
まとめ
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 での設定まで、ステップバイステップで学びたい方は以下のレッスンをご覧ください。
レッスン セットアップ — 45分 Claude Code を Mac にインストールする手順 macOS 13.0 以降に Claude Code を安全に導入する初心者向けガイド。推奨のネイティブ版、Homebrew・npm の代替方法、認証、確認、更新、トラブルシュートを整理します。
レッスン Claude Code とは — 45分 Claude Code で何ができる｜職種別ユースケース集 Claude Code は何ができるのか。営業・マーケ・経理・バックオフィス・エンジニア・経営者の 6 職種別に、現場で効く具体ユースケースと最初の一歩を地図化。自分の業務と紐づけて使い道がわかります。
株式会社BlueAI||法人向けAI導入・内製化支援
