How to Use Claude Code in VS Code
Install the extension first, then configure settings.json
To use Claude Code in VS Code, the recommended path is to install the Claude Code for VS Code extension first. The extension provides the native panel, session entry points, and IDE integration; if you also need a custom endpoint or auth token, add claudeCode.preferredLocation and claudeCode.environmentVariables in settings.json.
Prerequisites
- Visual Studio Code installed
- Access to the VS Code Marketplace
- A valid Claude Code auth token if you need a custom endpoint
Configuration Steps
Install the Claude Code for VS Code extension
Search for Claude Code for VS Code in the VS Code Marketplace and install it. This is the recommended way to use Claude Code in VS Code because it provides the native panel, session entry points, and IDE integration.
Extension name:
Claude Code for VS Code
After install, check:
After install, you should see the Claude Code entry in VS Code and be able to open the panel
Open VS Code settings.json
If you want to control where Claude opens in VS Code or pass environment variables to the Claude process launched by the extension, open the command palette and run Preferences: Open Settings (JSON).
Preferences: Open Settings (JSON)
Add the Claude Code extension settings
Add only the Claude Code-related settings below. Keeping the example minimal makes it easier to maintain and less error-prone.
{
"claudeCode.preferredLocation": "panel",
"claudeCode.environmentVariables": [
{
"name": "ANTHROPIC_BASE_URL",
"value": "https://api.lumecoder.com"
},
{
"name": "ANTHROPIC_AUTH_TOKEN",
"value": "sk-xxx"
}
]
}Replace sk-xxx with your real key from lumecoder.com, save settings.json, then restart or reopen Claude Code for VS Code to start using it.
Understand these 2 key settings
Both claudeCode.preferredLocation and claudeCode.environmentVariables are VS Code extension settings. The first controls the default UI location, and the second injects environment variables into the Claude process launched by the extension.
claudeCode.preferredLocation
Use panel to keep Claude Code in the bottom panel area and reduce interruption to the main editor.
claudeCode.environmentVariables
Use it to pass environment variables such as ANTHROPIC_BASE_URL and ANTHROPIC_AUTH_TOKEN to the Claude process started by the extension.
claudeCode.environmentVariables is a VS Code extension setting, not the shared Claude Code configuration format.
Reopen the Claude Code panel and verify
After saving settings.json, reopen the Claude Code panel. If the change does not take effect, reload the VS Code window.
How to verify the setup
Use these 3 checks to confirm the setup is active:
- The Claude Code extension is visible in VS Code and the panel opens normally
- Claude opens in the panel area by default
- There are no endpoint or authentication errors
Which settings are required?
Required Claude Code settings
If you want to use the Lumecoder endpoint through the VS Code extension, focus on claudeCode.preferredLocation and claudeCode.environmentVariables first.
Other editor preferences
Settings like explorer.confirmDelete and workbench.startupEditor are personal VS Code preferences and do not determine whether the Claude Code extension works.
FAQ
Do I need the Claude Code for VS Code extension to use Claude Code in VS Code?
If you want the native VS Code panel and IDE integration, yes, the extension is the recommended path. If you only run the claude CLI inside the VS Code terminal, the extension is not strictly required.
Is claudeCode.environmentVariables the shared Claude Code configuration?
No. It is a VS Code extension setting used to pass environment variables to the Claude process launched by the extension. Shared Claude Code configuration typically lives in ~/.claude/settings.json.
Why did I update settings.json but Claude Code still does not react?
The usual causes are invalid JSON syntax, unsaved settings, the extension not being reloaded yet, or incorrect ANTHROPIC_BASE_URL / ANTHROPIC_AUTH_TOKEN values.
Can I put ANTHROPIC_AUTH_TOKEN directly in settings.json?
Yes, but keep it private. Do not commit real tokens to public repositories or expose them in screenshots or public docs.
Summary
The two key takeaways are simple: first, the recommended way to use Claude Code in VS Code is to install the Claude Code for VS Code extension; second, if you need a custom endpoint or auth token, add claudeCode.preferredLocation and claudeCode.environmentVariables in settings.json.