Claude CodeのVSCodeでの使い方完全ガイド【2025年最新】

はじめに

「Claude Code を VSCode で使いたいけど、どうやって設定するの?」「VSCode 拡張機能はあるの?」そんな疑問を持つ開発者の方へ。本記事では、Claude Code を VSCode 環境で効果的に使う方法を、初心者から上級者まで分かりやすく解説します。

Claude Code と VSCode の関係

重要な前提知識

Claude Code は VSCode 拡張機能ではありません

Claude Code は以下の特徴を持つ独立したツールです:

スタンドアロン CLI ツール: ターミナルから起動
専用 UI: Web ベースのインターフェース
VSCode とは別プロセス: VSCode の拡張機能ではない

VSCode との連携方法

Claude Code を VSCode と併用する主な方法:

VSCode の統合ターミナルから起動
VSCode でファイル編集 + Claude Code で生成
Claude Code で生成 + VSCode で確認

Claude Code のインストール

前提条件

# Node.js のバージョン確認（18以上が必要）
node --version
# v20.x.x 以上推奨

# npm のバージョン確認
npm --version
# 9.x.x 以上推奨

インストール手順

Windows

# PowerShell または Git Bash
npm install -g @anthropic-ai/claude-code

# インストール確認
claude-code --version

macOS

# Homebrew 経由（推奨）
brew install claude-code

# または npm 経由
npm install -g @anthropic-ai/claude-code

# インストール確認
claude-code --version

Linux

# npm 経由
sudo npm install -g @anthropic-ai/claude-code

# インストール確認
claude-code --version

VSCode での基本的な使い方

方法1: 統合ターミナルから起動

VSCode の統合ターミナルで Claude Code を使う最も基本的な方法です。

ステップ1: ターミナルを開く

VSCode メニュー:
ターミナル > 新しいターミナル

ショートカット:
- Windows/Linux: Ctrl + `
- macOS: Cmd + `

ステップ2: Claude Code を起動

# プロジェクトディレクトリに移動
cd /path/to/your/project

# Claude Code を起動
claude-code

ステップ3: 対話的に開発

# 例: React コンポーネントを生成
> React の Todo リストコンポーネントを作成して

# Claude Code が以下を実行:
# 1. ファイルを生成（src/components/TodoList.tsx）
# 2. VSCode で自動的にファイルが更新される
# 3. 変更を確認して承認

方法2: サイドバイサイドでの使用

Claude Code のウィンドウと VSCode を並べて使う方法です。

推奨レイアウト

┌─────────────────┬─────────────────┐
│                 │                 │
│  Claude Code    │   VSCode        │
│  (Web UI)       │   (エディタ)     │
│                 │                 │
│  プロンプト入力  │  コード確認      │
│  コード生成      │  編集・保存      │
│  実行結果       │  デバッグ        │
│                 │                 │
└─────────────────┴─────────────────┘

セットアップ手順

# 1. Claude Code を起動
claude-code

# 2. VSCode でプロジェクトを開く
code /path/to/your/project

# 3. ウィンドウを並べて配置
# Windows: Win + 矢印キー
# macOS: アプリケーション > Window > Tile Window to Left/Right

方法3: VSCode Tasks を使った統合

VSCode の Tasks 機能で Claude Code を起動する方法です。

`.vscode/tasks.json` の設定

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Claude Code",
      "type": "shell",
      "command": "claude-code",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

使用方法

1. VSCode メニュー: ターミナル > タスクの実行
2. "Start Claude Code" を選択
3. 新しいターミナルパネルで Claude Code が起動

実践的な使い方例

例1: 新規ファイルの生成

VSCode での操作

# Claude Code で生成
> src/utils ディレクトリに日付フォーマット用のユーティリティ関数を作成

# Claude Code が実行:
# ✓ src/utils/dateFormatter.ts を作成
# ✓ テストファイル src/utils/dateFormatter.test.ts を作成

VSCode で確認

1. エクスプローラーで新しいファイルを確認
2. ファイルを開いて内容をレビュー
3. 必要に応じて手動で微調整
4. Ctrl+S で保存

例2: 既存ファイルの編集

Claude Code でのリファクタリング

> src/components/Header.tsx のスタイリングを
> Tailwind CSS に変更して

VSCode での差分確認

1. ファイルが自動的に更新される
2. Git の差分表示で変更内容を確認
   - VSCode のソース管理タブ
   - または GitLens 拡張機能
3. 問題なければコミット

例3: コードレビュー

Claude Code でレビュー依頼

> src/services/api.ts のセキュリティ上の問題を確認して

VSCode で修正

1. Claude Code が指摘した問題をメモ
2. VSCode で該当箇所にジャンプ
   - Ctrl+G で行番号指定
3. 修正を手動で適用
4. Claude Code で再度確認

VSCode 拡張機能との連携

効率的なワークフロー

パターン1: TDD（テスト駆動開発）

# ステップ1: テストコードを Claude Code で生成
> src/utils/validator.ts のテストコードを作成

# ステップ2: VSCode でテスト実行
$ npm test

# ステップ3: 失敗したテストを Claude Code で修正
> テストが失敗しました。validator.ts を修正して

パターン2: デバッグ駆動開発

# ステップ1: VSCode でデバッガーを起動
# ブレークポイントを設定

# ステップ2: エラーログを Claude Code に送る
> このエラーの原因を特定して:
> TypeError: Cannot read property 'name' of undefined

# ステップ3: VSCode で修正を確認
# デバッガーで変数の状態を確認

パターン3: ペアプログラミング風

# ステップ1: Claude Code で骨組みを生成
> Express サーバーの基本構造を作成

# ステップ2: VSCode で詳細を実装
# 人間が細かいロジックを追加

# ステップ3: Claude Code でレビュー
> このコードのパフォーマンス改善案を提案して

トラブルシューティング

問題1: Claude Code が VSCode のファイルを認識しない

原因

Claude Code と VSCode が異なるディレクトリで動作している

解決方法

# VSCode のワークスペースと同じディレクトリで起動
cd /path/to/workspace
claude-code

# または VSCode の統合ターミナルから起動
# ターミナルは自動的に正しいディレクトリにいる

問題2: ファイルの変更が VSCode に反映されない

原因

VSCode のファイルウォッチャーが無効になっている

解決方法

// settings.json
{
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

問題3: Claude Code のターミナル出力が見づらい

解決方法

// settings.json
{
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.lineHeight": 1.2,
  "terminal.integrated.fontFamily": "Consolas, 'Courier New', monospace"
}

便利なショートカット

VSCode ショートカット

ターミナルを開く:
- Windows/Linux: Ctrl + `
- macOS: Cmd + `

サイドバーのトグル:
- Windows/Linux: Ctrl + B
- macOS: Cmd + B

ファイル検索:
- Windows/Linux: Ctrl + P
- macOS: Cmd + P

全体検索:
- Windows/Linux: Ctrl + Shift + F
- macOS: Cmd + Shift + F

Claude Code コマンド

# コンテキスト圧縮
/compact

# プラン モードに切り替え
/plan

# ファイル参照
@filename.ts

# 前のセッションを再開
/resume

設定のカスタマイズ

VSCode 設定の推奨

`.vscode/settings.json`

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash"
}

Claude Code 設定

`~/.claude/claude.json`

{
  "model": "claude-sonnet-4-20250514",
  "autoCompact": true,
  "compactThreshold": 100000
}

実際の開発者の声

Aさん（フロントエンドエンジニア）

「VSCode の統合ターミナルで Claude Code を起動するのが一番楽。画面分割の必要もなく、すべて VSCode 内で完結する」

Bさん（バックエンドエンジニア）

「Claude Code でAPI設計、VSCode でデバッグ。2画面で使うと効率が良い。ただし慣れるまで少し時間がかかった」

Cさん（フルスタックエンジニア）

「GitHub Copilot と Claude Code の併用が最強。日常的なコードは Copilot、複雑な設計は Claude Code で」

よくある質問

Q1: VSCode 拡張機能版はいつリリースされる?

A: 2025年1月時点では未発表です。公式アナウンスを待ちましょう。

Q2: VSCode で直接 Claude Code を使えないの?

A: 現時点では別プロセスとして起動する必要があります。ただし、統合ターミナルを使えば VSCode 内で完結できます。

Q3: Cursor を使った方が良い?

A: Cursor は Claude 統合エディタですが、VSCode に慣れている場合は VSCode + Claude Code の方が柔軟性が高いです。

Q4: リモート開発環境で使える?

A: はい。VSCode の Remote Development 拡張機能と併用可能です:

# リモートサーバーで
npm install -g @anthropic-ai/claude-code

# VSCode の Remote SSH で接続
# 統合ターミナルから claude-code を起動

Q5: Windows で Git Bash を使うべき?

A: 推奨します。PowerShell よりも Unix ライクなコマンドが使えて便利です:

// settings.json
{
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

まとめ

Claude Code を VSCode で使う最適な方法

初心者向け: VSCode 統合ターミナルで起動
中級者向け: 2画面で併用（Claude Code + VSCode）
上級者向け: VSCode Tasks + 拡張機能との連携

推奨ワークフロー

1. VSCode でプロジェクトを開く
2. 統合ターミナルで claude-code を起動
3. Claude Code でコード生成・リファクタリング
4. VSCode で確認・微調整・デバッグ
5. Git で変更をコミット

併用すべき拡張機能

GitHub Copilot: コード補完
GitLens: 変更履歴管理
ESLint: コード品質チェック
Prettier: コードフォーマット

最後に

Claude Code は VSCode 拡張機能ではありませんが、統合ターミナルやタスク機能を活用することで、VSCode とシームレスに連携できます。

自分の開発スタイルに合わせて、最適な使い方を見つけてください。慣れれば、VSCode と Claude Code の組み合わせは非常に強力な開発環境になります。

はじめに

Claude Code と VSCode の関係

重要な前提知識

VSCode との連携方法

Claude Code のインストール

前提条件

インストール手順

Windows

macOS

Linux

VSCode での基本的な使い方

方法1: 統合ターミナルから起動

ステップ1: ターミナルを開く

ステップ2: Claude Code を起動

ステップ3: 対話的に開発

方法2: サイドバイサイドでの使用

推奨レイアウト

セットアップ手順

方法3: VSCode Tasks を使った統合

.vscode/tasks.json の設定

使用方法

実践的な使い方例

例1: 新規ファイルの生成

VSCode での操作

VSCode で確認

例2: 既存ファイルの編集

Claude Code でのリファクタリング

VSCode での差分確認

例3: コードレビュー

Claude Code でレビュー依頼

VSCode で修正

VSCode 拡張機能との連携

おすすめの併用拡張機能

1. GitHub Copilot

2. GitLens

3. ESLint / Prettier

4. REST Client

効率的なワークフロー

パターン1: TDD（テスト駆動開発）

パターン2: デバッグ駆動開発

パターン3: ペアプログラミング風

トラブルシューティング

問題1: Claude Code が VSCode のファイルを認識しない

原因

解決方法

問題2: ファイルの変更が VSCode に反映されない

原因

解決方法

問題3: Claude Code のターミナル出力が見づらい

解決方法

便利なショートカット

VSCode ショートカット

Claude Code コマンド

設定のカスタマイズ

VSCode 設定の推奨

.vscode/settings.json

Claude Code 設定

~/.claude/claude.json

実際の開発者の声

Aさん（フロントエンドエンジニア）

Bさん（バックエンドエンジニア）

Cさん（フルスタックエンジニア）

よくある質問

Q1: VSCode 拡張機能版はいつリリースされる?

Q2: VSCode で直接 Claude Code を使えないの?

Q3: Cursor を使った方が良い?

Q4: リモート開発環境で使える?

Q5: Windows で Git Bash を使うべき?

まとめ

Claude Code を VSCode で使う最適な方法

推奨ワークフロー

併用すべき拡張機能

最後に

Related Articles

`.vscode/tasks.json` の設定

`.vscode/settings.json`

`~/.claude/claude.json`