VS Code と連携する

基本的な使い方

VS CodeでClaude Codeを使うには、VS Codeの統合ターミナルからそのまま起動するのが最もシンプルです。

# VS Codeの統合ターミナル（Ctrl+` で開く）
claude

プロジェクトをVS Codeで開いた状態でターミナルから claude を起動すると、そのプロジェクトのルートディレクトリで自動的に起動します。

---

Claude Code VS Code拡張機能

Anthropicが公式のVS Code拡張機能を提供しています。

インストール:

1. VS Codeの拡張機能パネルを開く（Ctrl+Shift+X）
2. 「Claude Code」で検索
3. Anthropic製の拡張機能をインストール

主な機能:

• エディタ上でClaude Codeにコンテキストを渡す
• 選択したコードをそのまま質問できる
• チャット履歴の表示

---

※コンテキスト: Claudeが一度に記憶・参照できる会話・コードの範囲。上限を超えると古い情報が失われる。

便利な使い方

選択範囲を渡す

1. 気になるコードを選択
2. 右クリック → 「Claude Codeに送る」
3. 「このコードを説明して」「バグを探して」など追加指示

ファイルツリーと連携

VS Codeのファイルツリーを見ながら claude に「src/components/Header.tsx を修正して」と指示すると、ファイルを開かずに修正ができる。

---

CLAUDE.md に VS Code 設定を書く

## 開発環境
- エディタ: VS Code
- フォーマッター: Prettier（保存時に自動実行）
- Linter: ESLint

## コーディング規約
- インデント: スペース2つ
- セミコロン: なし
- シングルクォート使用

VS Codeの設定と一致させることで、Claudeが生成するコードがそのままフォーマッタに合う形になる。

---

※CLAUDE.md: プロジェクトのルートに置くClaude Code専用の設定ファイル。プロジェクト固有のルールやコンテキストを記述する。※Linter: コードのスタイルや潜在的バグを自動検出するツール。ESLint・RuboCopなど。

settings.json の推奨設定

VS Codeの settings.json に追加しておくと便利な設定:

{
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "Cascadia Code, monospace",
  "terminal.integrated.scrollback": 10000
}

スクロールバックを増やすことで、Claude Codeの長い出力が消えなくなる。