Claude Code × VS Code 拡張機能の活用法 — IDE連携で開発生産性を2倍にする

Claude Code × VS Code で開発がどう変わるのか

Claude Code はターミナルで動作するAIコーディングアシスタントですが、VS Code 拡張機能を導入することで、エディタと直接連携した開発体験が手に入ります。コードの編集提案がインラインで表示され、ファイル操作やコマンド実行もエディタ内で完結するため、ターミナルとエディタを行き来する手間が大幅に減ります。

VS Code 拡張機能のインストール手順

前提条件

Claude Code の VS Code 拡張機能を使うには、以下の環境が必要です。

• VS Code バージョン 1.96 以降
• Claude Code CLI がインストール済みであること
• Node.js 18 以上

Claude Code CLI をまだインストールしていない場合は、以下のコマンドで導入できます。

# Claude Code CLI のインストール
npm install -g @anthropic-ai/claude-code
 
# バージョン確認
claude --version

拡張機能のインストール

VS Code のコマンドパレット（Cmd + Shift + P / Ctrl + Shift + P）を開き、以下のコマンドを実行します。

Extensions: Install Extensions

検索ボックスに「Claude Code」と入力し、Anthropic 公式の拡張機能を選んでインストールしてください。あるいは、ターミナルから直接インストールすることも可能です。

# コマンドラインからのインストール
code --install-extension anthropic.claude-code

インストール後、VS Code のサイドバーに Claude Code のアイコンが表示されます。クリックするとチャットパネルが開き、すぐにコーディングを開始できます。

基本的な使い方 — チャットパネルとインラインエディット

チャットパネルでの対話

サイドバーの Claude Code パネルを開くと、ターミナル版と同じようにプロンプトを入力できます。違いは、VS Code のワークスペース情報が自動的にコンテキストとして渡される点です。

// チャットパネルでの入力例
「このファイルのエラーハンドリングを改善して」
「src/utils/ 以下のテスト網羅率を上げたい」
「このコンポーネントを TypeScript に変換して」

Claude Code は現在開いているファイルやプロジェクトの構造を理解しているため、的確な提案が返ってきます。

インラインエディット（Diff View）

Claude Code が提案するコード変更は、VS Code の Diff View で表示されます。変更箇所が緑（追加）と赤（削除）でハイライトされるため、何が変わるのか一目で確認できます。

提案を受け入れるには「Accept」ボタンをクリックするか、キーボードショートカットを使います。

Accept（受け入れ）: Cmd + Y / Ctrl + Y
Reject（却下）:     Cmd + N / Ctrl + N（設定による）

変更を部分的に受け入れたい場合は、Diff View 内で必要な行だけを選択して適用することも可能です。

ターミナル統合 — エディタ内でCLIを活用する

統合ターミナルでの起動

VS Code の統合ターミナル（Ctrl + `）で claude コマンドを実行すると、エディタ内で直接 Claude Code を使えます。この方法では、ターミナルの出力と VS Code のエディタが連携して動作します。

# 統合ターミナルで Claude Code を起動
claude
 
# 特定のタスクを直接指示
claude "このプロジェクトの README.md を更新して"

ターミナルのコマンド出力を Claude に渡す

開発中にエラーが発生した場合、ターミナルの出力をそのまま Claude Code に渡して解決策を得られます。

# ビルドエラーを Claude Code に渡す例
npm run build 2>&1 | claude "このビルドエラーを修正して"

VS Code 拡張機能を使っている場合、ターミナルのエラー出力を選択して右クリックメニューから「Ask Claude Code」を選ぶことで、コンテキスト付きで質問することもできます。

生産性を上げる5つのショートカットと設定

1. クイックアクション（Cmd + Shift + P）

コマンドパレットから Claude Code 関連のコマンドに素早くアクセスできます。

Claude Code: Open Chat        — チャットパネルを開く
Claude Code: Explain Code     — 選択中のコードを解説
Claude Code: Fix Error        — エラーの修正を依頼
Claude Code: Generate Tests   — テストコードを生成
Claude Code: Refactor         — リファクタリングを提案

2. 選択範囲のコンテキスト送信

コードを選択した状態で Cmd + L（macOS）/ Ctrl + L（Windows/Linux）を押すと、選択範囲をコンテキストとしてチャットパネルに送信できます。ファイル全体を読ませるよりも、必要な部分だけを指定する方が的確な回答を得られます。

3. CLAUDE.md によるプロジェクト固有の設定

プロジェクトルートに CLAUDE.md を配置すると、Claude Code がプロジェクトの方針やコーディング規約を自動的に読み込みます。

# CLAUDE.md
 
## プロジェクト概要
Next.js 15 + TypeScript + Tailwind CSS のウェブアプリケーション
 
## コーディング規約
- 関数コンポーネントのみ使用（クラスコンポーネント禁止）
- CSS-in-JS は使わず Tailwind のユーティリティクラスを使用
- テストは Vitest + Testing Library
- コミットメッセージは Conventional Commits 形式
 
## ディレクトリ構成
- src/components/ — UIコンポーネント
- src/lib/ — ユーティリティ関数
- src/app/ — App Router ページ

この設定により、Claude Code はプロジェクトの文脈を理解した上でコード提案を行うようになります。

4. .claude/settings.json による動作カスタマイズ

プロジェクト単位で Claude Code の動作を制御する設定ファイルも活用できます。

{
  "permissions": {
    "allow": [
      "Read(**)",
      "Write(src/**)",
      "Bash(npm test)",
      "Bash(npm run lint)"
    ],
    "deny": [
      "Bash(rm -rf *)",
      "Write(.env*)"
    ]
  }
}

この設定により、Claude Code がどのファイルを編集でき、どのコマンドを実行できるかを明確に制限できます。チーム開発では、この設定をリポジトリにコミットして共有するのがおすすめです。

5. ステータスバーの活用

VS Code のステータスバー（画面下部）には、Claude Code の接続状態やトークン使用量が表示されます。コンテキストウィンドウの使用状況をリアルタイムで確認できるため、大規模なファイルを扱う際のトークン管理に役立ちます。

全体を振り返って — VS Code × Claude Code で開発を加速する

Claude Code の VS Code 拡張機能は、ターミナルベースのAIコーディング体験をエディタ内に統合するものです。インラインでの差分表示やワンクリック承認、プロジェクト設定の自動読み込みなど、日々の開発作業を効率化する機能が揃っています。

まずはインストールして、普段のコーディング作業で試してみてください。CLAUDE.md を整備してプロジェクトの方針を伝えるだけで、Claude Code の提案精度は大きく向上します。

私自身、個人開発で Dolice Labs の4サイトを並行して触っていると、ターミナルとエディタを行き来する数秒のロスが一日で無視できない量になります。VS Code 拡張に寄せてから、差分を見て承認するまでが一つの画面で完結するようになり、細かな集中の途切れが目に見えて減りました。

さらに詳しい使い方を学びたい方は、Claude Code セットアップガイド や IDE連携ガイド も参考にしてみてください。