Claude Code × VSCode - IDE統合の使い方リファレンス

Claude CodeのVSCode拡張は、AIアシスタントをエディタに直接統合し、インラインdiff・@メンション・会話履歴の永続化などの機能を提供する。ターミナルCLI版と併用することで、開発ワークフローを効率化できる。

インストール

前提条件

項目要件
エディタVS Code または Cursor
Node.jsv18以上
OSmacOS / Windows / Linux（WSL含む）
アカウントAnthropicアカウント（Claude Pro / Max / Team / Enterprise）

インストール手順

  1. VSCodeの拡張機能ビュー（Ctrl+Shift+X）を開く
  2. 「Claude Code」で検索
  3. Install をクリック

拡張機能が表示されない場合は、VSCodeの再起動またはコマンドパレット（Ctrl+Shift+P）から「Developer: Reload Window」を実行する。

起動方法

コマンドパレットから起動

Ctrl+Shift+P（macOSはCmd+Shift+P）でコマンドパレットを開き、以下のコマンドを選択する。

コマンド説明
Claude Code: Open in New Tab新しいタブでClaude Codeパネルを開く
Claude Code: Open in Side Panelサイドパネルで開く
Claude Code: Focus既存のClaude Codeパネルにフォーカスを移動
Claude Code: New Conversation新しい会話を開始

サイドバーアイコン

インストール後、アクティビティバー（左側のアイコン列）にClaude Codeのアイコンが追加される。クリックするとサイドパネルが開く。

@メンションによるコンテキスト送信

チャット入力欄で @ を入力すると、ファイルやフォルダを参照としてClaude Codeに送信できる。ファジーマッチに対応しており、完全なパス入力は不要。

@auth          → auth.js, AuthService.ts などにファジーマッチ
@src/components/  → フォルダ全体を参照（末尾スラッシュでフォルダ指定）

使用例

> @utils/date.ts この関数のバグを見つけて
> @src/components/ このディレクトリの構造を説明して
> @package.json 使われていない依存関係はある？

@メンションで指定したファイルの内容がコンテキストとしてClaude Codeに送信されるため、大きなファイルやディレクトリを指定する場合はトークン消費に注意する。

コード選択からの質問

エディタ上でコードを選択し、右クリックメニューまたはコマンドパレットからClaude Codeに送信できる。

手順

  1. エディタ上で対象のコードを選択
  2. 右クリック → 「Claude Code」関連のメニューを選択、またはコマンドパレットからコマンドを実行
  3. Claude Codeパネルに選択範囲がコンテキストとして送信される

この機能により、特定の関数やクラスについてピンポイントで質問・リファクタリング指示を出せる。

diffビューでの変更確認

Claude Codeがファイルを変更すると、VSCodeのdiffビューで変更前後の差分を確認できる。

動作の流れ

  1. Claude Codeがファイル編集を提案
  2. VSCode上にインラインdiffが表示される
  3. 変更を Accept（承認）または Reject（拒否）で操作

diffビューはVSCodeネイティブの差分表示機能を利用しているため、通常のGit diffと同じ操作感で変更を確認できる。変更の一部だけを承認することも可能。

ファイルリンクのクリック対応

Claude Codeの出力に含まれるファイルパスはクリック可能なリンクとして表示される。クリックすると該当ファイルがエディタで開く。

  • 絶対パス・相対パスのいずれにも対応
  • 行番号付きリンク（file.ts:42形式）の場合、該当行にジャンプ

ターミナルCLI版ではCtrl+クリックが必要だが、VSCode拡張ではパネル内のリンクを直接クリックできる。

診断情報の共有

VSCodeの「問題」パネル（Ctrl+Shift+M）に表示されるエラーや警告を、Claude Codeが自動的に認識する。

  • TypeScriptの型エラー
  • ESLintの警告
  • その他の言語サーバーからの診断情報

これにより「このエラーを直して」のような指示で、エラー内容をClaude Codeが自動的に把握し修正提案を行える。

設定オプション

VSCodeの設定（Ctrl+,）→ Extensions → Claude Code で設定を変更できる。

主要な設定項目

設定キー説明デフォルト
claudeCode.selectedModel新しい会話で使用するモデル（デフォルトモデル）
claudeCode.useTerminalターミナルモードで起動false
claudeCode.initialPermissionMode権限プロンプトの処理方法（都度確認）
claudeCode.preferredLocationパネルの表示位置（自動）
claudeCode.autosaveファイルの自動保存（設定依存）
claudeCode.useCtrlEnterToSendCtrl+Enterで送信false
claudeCode.enableNewConversationShortcut新規会話ショートカットの有効化true
claudeCode.hideOnboardingオンボーディングチェックリストを非表示false
claudeCode.respectGitIgnore.gitignoreのパターンをファイル検索で尊重true
claudeCode.environmentVariablesClaude Codeプロセスに渡す環境変数{}
claudeCode.disableLoginPromptログインプロンプトを無効化false
claudeCode.claudeProcessWrapperカスタム実行パスの指定（なし）

ターミナルモードの切り替え

GUIパネルではなくターミナルベースのUIを好む場合、ターミナルモードに切り替えられる。

設定 → Extensions → Claude Code → Use Terminal にチェック

または直接 vscode://settings/claudeCode.useTerminal にアクセスする。

キーボードショートカット

VSCode拡張のショートカット

ショートカット動作
Ctrl+Shift+P → “Claude Code”コマンドパレットからClaude Code操作
Enterプロンプトを送信（デフォルト）
Ctrl+Enterプロンプトを送信（useCtrlEnterToSend 有効時）

Claude Codeチャット内のキーバインド

Claude Codeのチャットパネル内ではカスタムキーバインドを設定できる。設定ファイルはJSON形式で、コンテキストごとにバインドを定義する。

{
  "$schema": "https://www.schemastore.org/claude-code-keybindings.json",
  "bindings": [
    {
      "context": "Chat",
      "bindings": {
        "ctrl+e": "chat:externalEditor",
        "ctrl+u": null
      }
    }
  ]
}
  • null を指定するとデフォルトのショートカットを無効化できる
  • context でショートカットが有効になるコンテキストを指定
  • Claude Code v2.1.18以降で利用可能

デフォルトショートカットの無効化例

{
  "bindings": [
    {
      "context": "Chat",
      "bindings": {
        "ctrl+s": null
      }
    }
  ]
}

プラグイン管理

VSCode拡張にはプラグインのGUI管理機能が統合されている。

プラグインのインストール

  1. Claude Codeのプロンプト入力欄に /plugins と入力
  2. プラグイン管理ダイアログが表示される
  3. 「Plugins」タブで利用可能なプラグインを検索・インストール

インストールスコープ

スコープ説明
Install for youユーザースコープ。全プロジェクトで利用可能
Install for this projectプロジェクトスコープ。共同作業者と共有される
Install locallyローカルスコープ。自分のみ、現在のリポジトリのみ

VSCode拡張 vs ターミナルCLI

機能比較

機能VSCode拡張ターミナルCLI
インラインdiff表示○×
@メンションによるファイル参照○×
ファイルリンクのクリック○（直接クリック）△（Ctrl+クリック）
診断情報の自動共有○×
会話履歴の永続化○○
プラグインGUI管理○△（CLIコマンド）
bashショートカット×○
タブ補完×○
全コマンドへのアクセス△○
パイプ入力×○
非対話モード（--print）×○

使い分けの指針

VSCode拡張が適しているケース:

  • コードの変更をdiffビューで確認しながら作業したい
  • エディタ上で選択したコードについて質問したい
  • VSCodeの診断情報（型エラー等）を自動的にClaude Codeに伝えたい
  • GUIで直感的に操作したい

ターミナルCLI版が適しているケース:

  • パイプラインの一部としてClaude Codeを使いたい（cat file | claude）
  • 非対話モード（claude --print "質問"）でスクリプトに組み込みたい
  • bashのショートカットやタブ補完を活用したい
  • SSHリモート環境など、VSCodeが使えない環境
  • CI/CDパイプラインでの自動化

併用のパターン

VSCode拡張とターミナルCLI版は同時に使える。VSCode拡張でGUIパネルを使いつつ、VSCodeの統合ターミナルで claude コマンドを実行する運用が可能。ターミナルで実行したCLI版もVSCodeのdiffビュー等のIDE機能を利用できる。

# VSCodeの統合ターミナルで実行
claude "このプロジェクトの構造を説明して"

CLAUDE.md との連携

VSCode拡張でもCLI版と同様に CLAUDE.md ファイルが読み込まれる。プロジェクトルートに配置した CLAUDE.md に記載したルールやコンテキストは、VSCode拡張の会話にも自動的に適用される。

ファイルスコープ
~/.claude/CLAUDE.md全プロジェクト共通（グローバル）
プロジェクトルート/CLAUDE.mdプロジェクト固有
サブディレクトリ/CLAUDE.mdディレクトリ固有（該当ディレクトリの作業時に読み込み）

トラブルシューティング

症状対処法
拡張が表示されないVSCodeを再起動、またはReload Windowを実行
ログインできないclaude コマンドでCLI版にログインしてから拡張を再起動
パネルが応答しないコマンドパレットから「Claude Code: New Conversation」で新規会話を開始
diffが表示されないclaudeCode.useTerminal が false であることを確認
WSLで動作しないVSCodeのRemote - WSL拡張がインストールされていることを確認

参考リンク