Claude Code VS Code Extension

The official Claude Code VS Code extension provides graphical conversations, file references, plan review, and editor diffs. This setup uses a gateway API key: prepare a Passion8 URL, key, and enabled Claude model ID, configure them, and reload the window. The extension bundles Claude Code for its chat panel, so a standalone CLI installation is not required.

#1. Install the Official Extension

Use an officially supported VS Code version; the current documentation requires 1.94.0 or later. Search for Claude Code in the Extensions view. Verify the publisher Anthropic and extension ID anthropic.claude-code, or open the official listing.

If the code command is available, install from a terminal:

code --install-extension anthropic.claude-code

Open your project folder and the Claude Code panel. Compatible editors such as Cursor can install the same extension where officially supported.

#2. Enter the Passion8 Gateway Settings

Run Preferences: Open User Settings (JSON) from the Command Palette. Merge the following fields into your existing user settings, preserving other settings. claudeCode.environmentVariables must be an array of {name, value} objects.

{
  "claudeCode.environmentVariables": [
    {
      "name": "ANTHROPIC_BASE_URL",
      "value": "https://passion8.cc"
    },
    {
      "name": "ANTHROPIC_AUTH_TOKEN",
      "value": "sk-your-Passion8-API-Key"
    },
    {
      "name": "ANTHROPIC_MODEL",
      "value": "claude-sonnet-5-5"
    }
  ]
}

The example uses claude-sonnet-5-5; check availability in the dashboard. These user settings contain a key, so do not put them in a repository's shared .vscode/settings.json or public synchronization.

#Why Terminal Exports Are Not Enough

An editor launched from the Dock or Start menu normally does not inherit variables from a particular terminal session. The current extension also checks credentials before launching Claude. The env block in ~/.claude/settings.json reaches the child process but may not satisfy the extension's own login check. The official gateway documentation therefore explicitly recommends setting these variables in VS Code user settings.

#If You Use CC-Switch

You can continue to manage Claude Code with CC-Switch. Enable Passion8, then match the VS Code variables above to the URL, key, and model in CC-Switch. CC-Switch manages CLI configuration; do not assume every version also updates VS Code user settings.

After switching providers or rotating a key, check the explicitly configured VS Code values as well, so the CLI and panel do not use different configurations.

#3. Reload and Verify

Save user settings, run Developer: Reload Window, reopen Claude Code, create a new session, and send:

Reply with one sentence saying "Connected successfully". Do not read files, edit files, or run commands.

After receiving a response, check the matching request time, model, and usage in the Passion8 dashboard. Next, ask it to read and explain just one file to verify editor context and file tools.

If the panel still shows a login prompt, confirm the variables are saved in the active user configuration and reload. The extension also provides claudeCode.disableLoginPrompt, which you can set to true after correctly configuring gateway credentials. It only skips the prompt and does not replace a valid key.

#4. Work in the Editor

Start with a prompt such as:

Read my selected code and identify one edge-case issue. Explain your plan first, edit only this file, run existing relevant tests, and summarize the changes.

The graphical panel and integrated terminal are separate entry points. Running the claude command in the terminal still requires installing the standalone CLI and completing CLI configuration.

#Extension Choice and Account FAQ

#Do I need an Anthropic account for the official extension?

This guide configures local projects with a Passion8 URL, API key, and enabled Claude model, without Anthropic OAuth. Save the user settings and reload the window to verify a request. Cloud-hosted entry point permissions are separate from local configuration.

#Should I use the official Claude extension or Cline?

Use this official extension when you want Claude with its official plan review and editor diff experience. To switch Claude, GPT, Gemini, and Grok in one panel, use Cline. The extensions use different configuration locations, so do not copy their settings files interchangeably.

#Troubleshooting

#Next Steps

#Official References

• Use Claude Code in VS Code
• LLM gateway — VS Code extension