VS Code 統合

VS Code で Claude Code 拡張機能と GitHub Copilot カスタムエンドポイントを使う:拡張の導入、primaryApiKey 設定、chatLanguageModels.json で QCode に接続

最終更新 2026-09-18

API キーが必要ですか? 登録する →エンドポイントと Base URL →

目次

最終確認: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 拡張 · 言語モデル

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

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

前提条件

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

  1. Claude Code CLI がインストールされ、正常に動作している

  2. インストールガイド を参照してインストールを完了

  3. 環境変数の設定 を参照して設定を完了

  4. VS Code バージョン >= 1.98.0

インストール手順

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

VS Code がインストールされていない場合は、VS Code 公式サイト からダウンロードしてインストールしてください。

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

VS Code で:

  1. 拡張機能パネルを開く(Ctrl+Shift+X / Cmd+Shift+X)

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

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

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

code --install-extension anthropic.claude-code

ステップ 3:primaryApiKey の設定

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

Windows

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

{
  "primaryApiKey": "qcode"
}

macOS

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

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

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

Linux

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

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

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

注意: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. コード説明

  2. コードを選択

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

  5. コード生成

  6. Claude パネルを開く

  7. 必要な機能を説明
  8. Claude がコードを生成し、挿入オプションを提供

  9. コードリファクタリング

  10. リファクタリングするコードを選択

  11. Claude にリファクタリングを依頼
  12. プレビューして変更を適用

  13. エラー修正

  14. コードにエラーがある場合

  15. エラーコードまたはメッセージを選択
  16. Claude に分析と修正案を依頼

設定オプション

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

  1. 設定を開く(Ctrl+, / Cmd+,)

  2. "Claude Code" を検索

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

よく使う設定

{
  "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 は完全パスを入力)。最小設定:

[
  { "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 連携 を参照。

トラブルシューティング

拡張機能が起動しない

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

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

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

primaryApiKey エラー

  1. ファイルパスが正しいことを確認:

  2. Windows: C:\Users\ユーザー名\.claude\config.json

  3. macOS/Linux: ~/.claude/config.json

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

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

接続タイムアウト

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

  2. ANTHROPIC_BASE_URL 環境変数を確認

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

次のステップ

QCode を始める

API キーひとつで Claude Code・Codex などに対応。トークン単位の課金で、各モデルの単価は qcode.cc/models に掲載

企業版 →