はじめに
「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 v20.x.x 以上推奨
npm 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
Linux
# npm 経由
sudo npm install -g @anthropic-ai/claude-code
VSCode での基本的な使い方
方法1: 統合ターミナルから起動
VSCode の統合ターミナルで Claude Code を使う最も基本的な方法です。
ステップ1: ターミナルを開く
ショートカット:
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 (Web UI)
- プロンプト入力
- コード生成
- 実行結果
右側: VSCode (エディタ)
- コード確認
- 編集・保存
- デバッグ
セットアップ手順
Claude Code を起動
VSCode でプロジェクトを開く
ウィンドウを並べて配置
Windows: Win + 矢印キー
macOS: Window > Tile Window to Left/Right
方法3: VSCode Tasks を使った統合
.vscode/tasks.json の設定
{
"version": "2.0.0",
"tasks": [
{
"label": "Start Claude Code",
"type": "shell",
"command": "claude-code",
"problemMatcher": [],
"presentation": {
"reveal": "always",
"panel": "new"
}
}
]
}
使用方法
VSCode メニュー: ターミナル > タスクの実行
“Start Claude Code” を選択
新しいターミナルパネルで Claude Code が起動
実践的な使い方例
例1: 新規ファイルの生成
# Claude Code で生成
> src/utils ディレクトリに日付フォーマット用のユーティリティ関数を作成
# VSCode で確認
1. エクスプローラーで新しいファイルを確認
2. ファイルを開いて内容をレビュー
3. 必要に応じて手動で微調整
4. Ctrl+S で保存
例2: 既存ファイルの編集
# Claude Code でリファクタリング
> src/components/Header.tsx のスタイリングを Tailwind CSS に変更して
# VSCode で差分確認
1. Git の差分表示で変更内容を確認
2. 問題なければコミット
例3: コードレビュー
# Claude Code でレビュー依頼
> src/services/api.ts のセキュリティ上の問題を確認して
# VSCode で修正
1. 指摘された問題をメモ
2. Ctrl+G で該当行にジャンプ
3. 修正を適用
4. Claude Code で再度確認
VSCode 拡張機能との連携
おすすめの併用拡張機能
1. GitHub Copilot
役割分担:
Copilot: リアルタイムコード補完
Claude Code: 複雑なリファクタリング、設計
併用例:
Copilot で基本的なコードを補完
Claude Code で全体の構造を最適化
2. GitLens
使い方:
Claude Code でコード生成
GitLens で変更履歴を確認
問題があれば以前のバージョンに戻す
3. ESLint / Prettier
ワークフロー:
Claude Code でコード生成
ESLint が自動的にエラーをチェック
Prettier が自動的にフォーマット
エラーがあれば Claude Code でフィックス依頼
便利なショートカット
VSCode ショートカット
ターミナルを開く:
- Windows/Linux: Ctrl + `
- macOS: Cmd + `
ファイル検索:
- Windows/Linux: Ctrl + P
- macOS: Cmd + P
全体検索:
- Windows/Linux: Ctrl + Shift + F
- macOS: Cmd + Shift + F
Claude Code コマンド
# コンテキスト圧縮
/compact
# プラン モードに切り替え
/plan
# ファイル参照
@filename.ts
# 前のセッションを再開
/resume
よくある質問
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 拡張機能と併用可能です。
まとめ
Claude Code を VSCode で使う最適な方法
初心者向け: VSCode 統合ターミナルで起動
中級者向け: 2画面で併用（Claude Code + VSCode）
上級者向け: VSCode Tasks + 拡張機能との連携
推奨ワークフロー
VSCode でプロジェクトを開く
統合ターミナルで claude-code を起動
Claude Code でコード生成・リファクタリング
VSCode で確認・微調整・デバッグ
Git で変更をコミット
併用すべき拡張機能
GitHub Copilot: コード補完
GitLens: 変更履歴管理
ESLint: コード品質チェック
Prettier: コードフォーマット
Claude Code は VSCode 拡張機能ではありませんが、統合ターミナルやタスク機能を活用することで、VSCode とシームレスに連携できます。自分の開発スタイルに合わせて、最適な使い方を見つけてください。