VS Code 統合

VS Code で Claude Code 拡張機能を使用

VS Code 統合

ターミナルで 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
ファイル生成 どちらでも

トラブルシューティング

拡張機能が起動しない

  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 を始めよう — AI プログラミングアシスタント
Claude Code 公式リレー、高速・安定・すぐに使える
料金プランを見る → アカウント登録