VS Code Integration

Use the Claude Code extension in VS Code

VS Code Integration

In addition to using Claude Code CLI in the terminal, you can use the VS Code extension to access Claude Code directly in the editor for a more convenient development experience.

Prerequisites

Before configuring the VS Code extension, ensure:

  1. Claude Code CLI is installed and working
  2. See Installation Guide to complete installation

  3. See Environment Configuration to complete setup

  4. VS Code version >= 1.75.2

Installation Steps

Step 1: Install VS Code

If VS Code is not installed, visit the VS Code website to download and install.

Step 2: Install Claude Code Extension

In VS Code:

  1. Open the Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)
  2. Search for "Claude Code for VS Code"
  3. Click Install

Or install via command line:

code --install-extension anthropic.claude-code

Step 3: Configure primaryApiKey

This is a critical step! The Claude Code extension requires primaryApiKey in the configuration file.

Windows

Edit or create the config file C:\Users\YourUsername\.claude\config.json:

{
  "primaryApiKey": "qcode"
}
macOS

Edit or create the config file ~/.claude/config.json:

# Create directory (if it doesn't exist)
mkdir -p ~/.claude

# Create config file
cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF
Linux

Edit or create the config file ~/.claude/config.json:

# Create directory (if it doesn't exist)
mkdir -p ~/.claude

# Create config file
cat > ~/.claude/config.json << 'EOF'
{
  "primaryApiKey": "qcode"
}
EOF

Note: The value of primaryApiKey can be anything (like qcode). You just need to have this field configured. The actual API authentication still uses the ANTHROPIC_AUTH_TOKEN you configured in environment variables.

Important: The config file is config.json, NOT settings.json. Please distinguish between these two files carefully.

Step 4: Restart VS Code

After configuration, restart VS Code for changes to take effect.

Usage

Keyboard Shortcuts

Shortcut Function
Cmd+Esc / Ctrl+Esc Open/Close Claude Code panel
Cmd+Shift+P / Ctrl+Shift+P Open command palette, search for Claude commands

Common Features

  1. Code Explanation
  2. Select code
  3. Right-click and choose "Ask Claude" or use shortcut

  4. Enter your question, e.g., "Explain this code"

  5. Code Generation

  6. Open Claude panel
  7. Describe the feature you need

  8. Claude will generate code with insert options

  9. Code Refactoring

  10. Select code to refactor
  11. Ask Claude to help refactor

  12. Preview and apply changes

  13. Error Fixing

  14. When code has errors
  15. Select the error code or message
  16. Ask Claude to analyze and provide fixes

Configuration Options

In VS Code settings, you can configure Claude Code extension behavior:

  1. Open Settings (Ctrl+, / Cmd+,)
  2. Search for "Claude Code"
  3. Adjust options as needed

Common Settings

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

Using with Terminal CLI

The VS Code extension and terminal CLI can be used together:

Scenario Recommended Tool
Quick code edits VS Code extension
Complex project analysis Terminal CLI
Code review Either
Git operations Terminal CLI
File generation Either

Troubleshooting

Extension Won't Start

  1. Confirm Claude Code CLI is properly installed
  2. Check environment variable configuration
  3. Verify config.json file format is correct

primaryApiKey Error

  1. Confirm file path is correct:
  2. Windows: C:\Users\YourUsername\.claude\config.json
  3. macOS/Linux: ~/.claude/config.json
  4. Confirm it's config.json not settings.json
  5. Confirm JSON format is valid

Connection Timeout

  1. Check network connection
  2. Verify ANTHROPIC_BASE_URL environment variable
  3. Try running claude in terminal to confirm CLI works

Next Steps

On this page