# VS Code 統合

> **最終確認**：2026-09-18 · 📄 公式ドキュメント準拠（VS Code 1.138.0、2026-09-16 公開）

## 概要

| 項目 | 内容 |
|---|---|
| 利用できるモデル | Claude ✅（拡張は Anthropic プロトコル／Copilot は Messages）· GPT ✅ · 中国系モデル ✅（Copilot カスタムエンドポイント）· Gemini ❌ |
| プロトコルと Base URL | Claude Code 拡張：環境変数で `https://api.qcode.cc/api` · Copilot：`chatLanguageModels.json` に完全パス |
| 設定場所 | `~/.claude/config.json` + 環境変数。Copilot は `chatLanguageModels.json` |
| 公式ドキュメント | [Claude Code 拡張](https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code) · [言語モデル](https://code.visualstudio.com/docs/agent-customization/language-models) |

> **Trae IDE をお使いですか？** Trae は VS Code のフォークで、ほとんどの手順がそのまま適用できます。マーケットプレイスの違い、オフライン `.vsix` インストール、Trae 内蔵 AI との共存など Trae 固有の詳細は [Trae 統合ガイド](/docs/ide/trae) を参照してください。

ターミナルで Claude Code CLI を使用するだけでなく、VS Code 拡張機能を使用してエディタ内で直接 Claude Code にアクセスし、より便利な開発体験を得ることができます。

## 前提条件

VS Code 拡張機能を設定する前に、以下を確認してください：

1. **Claude Code CLI がインストールされ、正常に動作している**
   - [インストールガイド](/docs/getting-started/installation) を参照してインストールを完了
   - [環境変数の設定](/docs/getting-started/environment) を参照して設定を完了

2. **VS Code バージョン >= 1.98.0**

## インストール手順

### ステップ 1：VS Code のインストール

VS Code がインストールされていない場合は、[VS Code 公式サイト](https://code.visualstudio.com/) からダウンロードしてインストールしてください。

### ステップ 2：Claude Code 拡張機能のインストール

VS Code で：

1. 拡張機能パネルを開く（`Ctrl+Shift+X` / `Cmd+Shift+X`）

2. **"Claude Code for VS Code"** を検索

3. **インストール** をクリック

またはコマンドラインでインストール：

```bash
code --install-extension anthropic.claude-code
```

### ステップ 3：primaryApiKey の設定

これは重要なステップです！Claude Code 拡張機能は設定ファイルに `primaryApiKey` を必要とします。

<div data-os="windows" markdown="1">

#### Windows

設定ファイル `C:\Users\ユーザー名\.claude\config.json` を編集または作成：

```json
{
  "primaryApiKey": "qcode"
}
```

</div>

<div data-os="macos" markdown="1">

#### macOS

設定ファイル `~/.claude/config.json` を編集または作成：

```bash
# ディレクトリを作成（存在しない場合）
mkdir -p ~/.claude

# 設定ファイルを作成
cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF
```

</div>

<div data-os="linux" markdown="1">

#### Linux

設定ファイル `~/.claude/config.json` を編集または作成：

```bash
# ディレクトリを作成（存在しない場合）
mkdir -p ~/.claude

# 設定ファイルを作成
cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF
```

</div>

> **注意**：`primaryApiKey` の値は何でも構いません（`qcode` など）。このフィールドを設定するだけで OK です。実際の API 認証は、環境変数で設定した `ANTHROPIC_AUTH_TOKEN` を使用します。

> **重要**：設定ファイルは `config.json` であり、`settings.json` ではありません。これら 2 つのファイルを注意して区別してください。

### ステップ 4：VS Code を再起動

設定完了後、VS Code を再起動して変更を有効にします。

## 使用方法

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

| ショートカット | 機能 |
|----------------|------|
| `Cmd+Esc` / `Ctrl+Esc` | Claude Code パネルを開く/閉じる |
| `Cmd+Shift+P` / `Ctrl+Shift+P` | コマンドパレットを開き、Claude コマンドを検索 |

### よく使う機能

1. **コード説明**
   - コードを選択
   - 右クリックで "Ask Claude" を選択するかショートカットを使用
   - 質問を入力、例：「このコードを説明して」

2. **コード生成**
   - Claude パネルを開く
   - 必要な機能を説明
   - Claude がコードを生成し、挿入オプションを提供

3. **コードリファクタリング**
   - リファクタリングするコードを選択
   - Claude にリファクタリングを依頼
   - プレビューして変更を適用

4. **エラー修正**
   - コードにエラーがある場合
   - エラーコードまたはメッセージを選択
   - Claude に分析と修正案を依頼

## 設定オプション

VS Code 設定で Claude Code 拡張機能の動作を設定できます：

1. 設定を開く（`Ctrl+,` / `Cmd+,`）

2. "Claude Code" を検索

3. 必要に応じてオプションを調整

### よく使う設定

```json
{
  "claude-code.autoSuggest": true,
  "claude-code.inlineChat": true
}
```

## ターミナル CLI との併用

VS Code 拡張機能とターミナル CLI は一緒に使用できます：

| シナリオ | 推奨ツール |
|----------|-----------|
| 素早いコード編集 | VS Code 拡張機能 |
| 複雑なプロジェクト分析 | ターミナル CLI |
| コードレビュー | どちらでも |
| Git 操作 | ターミナル CLI |
| ファイル生成 | どちらでも |

## GitHub Copilot のカスタムエンドポイント

VS Code 1.122 以降、内蔵の Copilot Custom Endpoint で QCode の各プロトコルを Copilot に直接接続できます（Claude は `messages` のみ、`url` は完全パスを入力）。最小設定：

```json
[
  { "name": "QCode Claude", "vendor": "customendpoint", "apiKey": "cr_your-QCode-key",
    "apiType": "messages",
    "url": "https://api.qcode.cc/api/v1/messages",
    "toolCalling": true,
    "models": [ { "id": "claude-sonnet-5" } ] }
]
```

3 プロトコル全体の設定、Copilot CLI の BYOK、既知の制限（インライン補完は引き続き GitHub 経由）は専用ページ [GitHub Copilot 連携](/docs/ide/github-copilot) を参照。

## トラブルシューティング

### 拡張機能が起動しない

1. Claude Code CLI が正しくインストールされていることを確認

2. 環境変数の設定を確認

3. `config.json` ファイルの形式が正しいことを確認

### primaryApiKey エラー

1. ファイルパスが正しいことを確認：
   - Windows: `C:\Users\ユーザー名\.claude\config.json`
   - macOS/Linux: `~/.claude/config.json`

2. `config.json` であって `settings.json` ではないことを確認

3. JSON 形式が有効であることを確認

### 接続タイムアウト

1. ネットワーク接続を確認

2. `ANTHROPIC_BASE_URL` 環境変数を確認

3. ターミナルで `claude` を実行して CLI が動作することを確認

## 次のステップ

- [CLI テクニック](/docs/usage/cli-tips) で効率を向上

- [ワークフロー](/docs/usage/workflow-tips) で開発フローを最適化