ClaudeCodeとVSCodeを連携させる方法【拡張機能・統合ターミナル】

ClaudeCodeはターミナルで動くCLIツールですが、VSCodeと連携させることで、エディタ上でコードを書きながら同じ画面でAIに指示できる、最強の開発環境を作れます。VSCodeは世界で最も使われているコードエディタであり、ClaudeCodeとの相性も抜群です。本記事では、VSCodeでClaudeCodeを使うための準備、拡張機能のインストール、統合ターミナルからの起動、便利なショートカット、そしてCursorやJetBrains IDEとの併用方法までを徹底解説します。エディタとAIをシームレスに行き来できる環境を整えれば、あなたの開発スピードは目に見えて加速します。

結論：VSCodeの統合ターミナルでClaudeCodeを起動するだけで快適な開発環境が完成

結論を先に言うと、ClaudeCodeとVSCodeの連携で最も重要なのは「VSCodeの統合ターミナルでClaudeCodeを起動すること」です。これだけで、エディタとAIが同じウィンドウに同居し、ファイル編集→AIに依頼→結果確認の往復が一瞬で完結する環境ができます。さらに、公式の拡張機能をインストールすれば、エディタで選択した範囲をAIに送ったり、差分をエディタ内でレビューしたりといった操作がより直感的に行えます。ショートカットキーを覚えれば、マウス操作なしで「コードを書く」「AIに聞く」「変更を確認する」がスムーズに切り替えられるようになります。CursorやJetBrains IDEを使っている方も、同じ要領でClaudeCodeを呼び出せるため、エディタ選びに縛られずにClaudeCodeの恩恵を受けられます。

ClaudeCodeをVSCodeで使う3つの方法

ClaudeCodeをVSCodeで使う方法は、大きく3つあります。

方法1：統合ターミナルで起動する（基本）

最もシンプルで誰でもすぐに使える方法です。VSCodeの統合ターミナルを開いて、claudeコマンドを叩くだけです。

claude

これだけでClaudeCodeが起動し、現在のプロジェクトを認識してくれます。VSCodeで開いているフォルダを自動的に作業対象として扱うため、特別な設定は不要です。

方法2：公式拡張機能を使う

VSCode Marketplaceに公開されている公式拡張機能をインストールすると、エディタとClaudeCodeの統合がより深くなります。エディタで選択した行をAIに送ったり、AIが提案した差分をエディタ内のDiffビューで確認できたりします。

方法3：タスクとして登録する

VSCodeのタスク機能を使って、特定のClaudeCodeコマンドをショートカットから起動するように設定できます。「コミットを書かせる」「テストを生成する」など、よく使うパターンをワンクリックで呼び出せるようになります。

統合ターミナルでClaudeCodeを起動する手順

最も基本的な方法から見ていきましょう。

ステップ1：ClaudeCodeをインストール

まだインストールしていない方は、ターミナルで以下を実行します。

npm install -g @anthropic-ai/claude-code

Node.jsが必要なので、未インストールの方は先にNode.js（推奨：v20以上）をインストールしてください。

ステップ2：VSCodeを開く

開発したいプロジェクトのフォルダをVSCodeで開きます。

code /path/to/your-project

または、VSCodeのファイル → フォルダーを開くから選択します。

ステップ3：統合ターミナルを開く

ショートカットで開きます。

• Mac: Control + `（バッククォート）
• Windows/Linux: Ctrl + `

メニューからは「ターミナル」→「新しいターミナル」でも開けます。

ステップ4：ClaudeCodeを起動

統合ターミナル内で以下を実行。

claude

ClaudeCodeが起動し、プロジェクトのコンテキストを読み込みます。CLAUDE.mdがあれば自動で参照されます。

ステップ5：話しかける

src/components/Button.tsx を読んで、改善点を教えてください

ClaudeCodeはファイルを読み、エディタで開いているのと同じ内容を分析してくれます。

VSCodeの分割ビューでさらに快適に

VSCodeはエディタ領域とターミナル領域を分割できます。ClaudeCodeを使うときは、以下のレイアウトがおすすめです。

+---------------------+---------------------+
|                     |                     |
|   コードエディタ     |   ClaudeCode        |
|   （左側）          |   （右側 or 下部）   |
|                     |                     |
+---------------------+---------------------+

ターミナルを右側に配置するには、ターミナルパネルの右上にある「ターミナルを右側に移動」アイコンをクリックします。これにより、コードを見ながら同じ画面でAIと対話できます。

公式拡張機能のインストールと活用

VSCode拡張機能を使うと、さらに便利になります。

インストール手順

1. VSCodeを起動
2. 拡張機能パネルを開く（Ctrl/Cmd + Shift + X）
3. 「Claude Code」で検索
4. 公式の拡張機能をインストール

インストール後、コマンドパレット（Ctrl/Cmd + Shift + P）で「Claude」と検索すると、利用可能なコマンドが表示されます。

拡張機能でできること

• 選択範囲をAIに送る：エディタで選んだコードを直接ClaudeCodeに渡せます。
• インラインDiff表示：AIが提案した変更をエディタ内の差分ビューで確認できます。
• ファイル単位の操作：ファイルを右クリックして「ClaudeCodeで分析」などのアクションを呼び出せます。
• ステータスバー統合：現在のセッション状態をエディタ下部で確認できます。

よく使うコマンド

コマンドパレットから呼び出せる主なコマンド：

• Claude: Open Terminal：ClaudeCode用のターミナルを開く
• Claude: Send Selection：選択範囲をAIに送信
• Claude: Explain This Code：選択コードの解説を依頼
• Claude: Refactor：リファクタを依頼
• Claude: Generate Tests：テスト生成を依頼

おすすめショートカットの設定

VSCodeのキーボードショートカット設定（Ctrl/Cmd + K、Ctrl/Cmd + S）から、よく使うClaudeCodeコマンドにショートカットを割り当てましょう。

設定例（keybindings.json）：

[
  {
    "key": "cmd+shift+c",
    "command": "claude.openTerminal"
  },
  {
    "key": "cmd+shift+e",
    "command": "claude.explainSelection",
    "when": "editorHasSelection"
  },
  {
    "key": "cmd+shift+t",
    "command": "claude.generateTests",
    "when": "editorHasSelection"
  }
]

MacならCmd、Windows/LinuxならCtrlに置き換えて設定してください。

ファイル編集の流れを最適化する

ClaudeCodeがファイルを編集すると、VSCodeは自動的にその変更を検知して画面に反映してくれます。これにより、AIの作業をリアルタイムで確認できます。

編集前後のDiff確認

ClaudeCodeはファイルを編集する際、内部的に「変更前→変更後」の差分を提示します。VSCodeのソース管理パネル（Ctrl/Cmd + Shift + G）を開いておくと、未コミットの変更が一覧で見え、クリックでDiffを確認できます。

編集を取り消す

「やっぱり前の状態に戻したい」というときは、VSCodeのCtrl/Cmd + Z（元に戻す）で直近の編集を取り消せます。または、Git操作でファイル単位に巻き戻すこともできます。

ClaudeCode に対して:「src/components/Button.tsx を直前の git の状態に戻して」

CursorとClaudeCodeの併用

Cursor（VSCodeフォーク版のAIエディタ）を使っている方も、ClaudeCodeを併用できます。CursorもVSCodeと同じく統合ターミナルを持っているので、claudeコマンドで起動するだけです。

Cursor自体にもAI機能がありますが、ClaudeCodeのほうが「ファイルを横断して読み、複数ステップで作業する」のが得意です。使い分けの目安：

• Cursor内蔵AI：その場でコードを書く、補完する
• ClaudeCode：プロジェクト全体を理解した上で、複雑なタスクを進める

両者を併用すれば、エディタ内の即時補完と、ターミナルでの大規模作業を同時にこなせます。

JetBrains IDEとClaudeCodeの併用

IntelliJ IDEA、PyCharm、WebStormなどのJetBrains IDE勢も、ClaudeCodeを利用できます。やり方はVSCodeと同じく、IDE内のターミナル（Alt+F12）からclaudeコマンドを起動するだけです。

JetBrainsのリファクタリング機能や強力なデバッガと、ClaudeCodeの自然言語によるコード変更を組み合わせれば、これまで以上に効率的な開発が可能になります。

VSCode連携時の注意点

1. ファイル監視の競合

ClaudeCodeとVSCodeが同時に同じファイルを編集しようとすると、競合が起きることがあります。基本的にはClaudeCodeに編集を任せている間は、エディタ側で同じファイルを触らないようにしましょう。

2. 自動保存の設定

VSCodeの自動保存がオンだと、ファイル変更が即座にディスクへ書き込まれ、ClaudeCodeも自然に最新内容を読み取れます。逆にオフだと、未保存の変更がClaudeCodeに見えません。設定（files.autoSave）をafterDelayにしておくのがおすすめです。

3. ターミナルプロファイル

WindowsでGit BashとPowerShellの両方がインストールされている場合、デフォルトのターミナルを選んでおきましょう。Terminal: Select Default Profileで設定できます。ClaudeCodeはBashで動かしたほうが安定します。

4. 文字化け対策

日本語環境では稀にターミナルで文字化けが発生することがあります。VSCodeの設定でterminal.integrated.fontFamilyを等幅日本語フォント（例：「HackGen35 Console」）にしておくと、表示が安定します。

5. プロジェクトを開く場所

VSCodeで開いているフォルダがClaudeCodeの作業ディレクトリになります。サブフォルダだけを開いていると、親フォルダのファイルが読めなくなるので注意です。

実践：VSCode + ClaudeCodeで1日の開発フロー

ある日の典型的なワークフローを見てみましょう。

朝：作業開始

1. VSCodeでプロジェクトを開く
2. 統合ターミナルを開く（Ctrl/Cmd + ``）
3. claudeでClaudeCode起動
4. 「昨日の続きで、ユーザー登録機能を実装します」とコンテキストを伝える

午前：実装

1. ClaudeCodeに「Planエージェントで計画を立てて」と依頼
2. 計画を確認しながら、エディタで該当ファイルを開く
3. 「では実装を進めて」と指示
4. ClaudeCodeがファイルを編集 → VSCodeで即座に確認
5. 気になる箇所はエディタで直接微修正

午後：テストとコミット

1. 「このコンポーネントのテストを書いて」と依頼
2. テストが書かれたらnpm testで実行
3. パスしたら「変更をコミットして」
4. PR作成も「mainに向けてPRを作って」で完了

このように、VSCodeとClaudeCodeを行き来しながら作業を進めるのが理想的な流れです。

FAQ

Q1. VSCodeを使わなくてもClaudeCodeは使えますか？ A. 使えます。ClaudeCode自体は単独のCLIツールなので、どんなターミナルからでも起動できます。VSCodeとの連携はあくまで利便性のためです。

Q2. Macのターミナル.appやiTerm2で使っても問題ないですか？ A. もちろん問題ありません。ターミナルだけで使う方も多いです。ただ、エディタとの行き来が必要な場合はVSCode統合ターミナルが圧倒的に便利です。

Q3. 拡張機能を入れたら統合ターミナルでの起動と何が違うのですか？ A. 拡張機能を入れると、選択範囲の送信、インラインDiff、ファイル右クリックメニューなどのGUI操作が増えます。ターミナル単体でも全機能は使えますが、拡張機能があるとより直感的に操作できます。

Q4. リモート開発（SSH接続先）でも使えますか？ A. はい、VSCode Remote SSHで接続したリモート環境でも、リモート側にClaudeCodeをインストールしておけば統合ターミナルから起動できます。

Q5. WSL環境でも使えますか？ A. 使えます。WSL2上でClaudeCodeをインストールし、VSCodeのWSL拡張機能経由で開けば、Windows側の統合ターミナルからLinux上のClaudeCodeを起動できます。

Q6. CursorとClaudeCodeはどちらか片方だけにすべきですか？ A. 併用がおすすめです。Cursorの即時補完とClaudeCodeの大規模タスク処理は得意分野が違うため、両方使うと最も効率的です。

Q7. ショートカットを大量に登録すると競合しませんか？ A. VSCode標準のショートカットと被らないように、Cmd+Shift+◯系で統一するなど、自分なりのルールを決めておくと安全です。

まとめ

VSCodeとClaudeCodeを連携させれば、エディタとAIがシームレスに繋がる強力な開発環境ができあがります。基本は「統合ターミナルでclaude起動」、慣れてきたら拡張機能とショートカットで効率を上げる、というステップで導入してみてください。CursorやJetBrainsを使っている方も同じ要領で活用できるので、まずは普段使っているエディタの中でClaudeCodeを起動してみましょう。

関連記事

• ClaudeCodeとは？基本機能と特徴を徹底解説
• ClaudeCodeの初回起動と使い方
• ClaudeCodeの設定方法【初心者向け完全ガイド】
• ClaudeCodeのキーボードショートカット完全一覧
• ClaudeCodeでファイル編集を効率化する
• ClaudeCodeのスラッシュコマンド一覧と使い方
• ClaudeCodeでWeb開発を進める方法