# Claude Code in VS Code: install, connect an API key, use it

> Install the Claude Code extension in VS Code, sign in or connect an API key, and work with diffs, @-mentions, checkpoints and the terminal CLI.

Updated: 2026-11-01

To use Claude Code in VS Code, install Anthropic's Claude Code extension from the Extensions view, then open it from the Spark icon in the editor's top-right corner. Sign in with a Claude plan, or add your API key and base URL to the `claudeCode.environmentVariables` setting. You need VS Code 1.94.0 or later.

## What do you need?

- **VS Code 1.94.0 or later.** Check your version under Help > About. Cursor and other VS Code forks can install the same extension.
- **A way to pay for the model:** an Anthropic Claude plan that includes Claude Code (Pro, Max, Ultra, Team or Enterprise), an Anthropic Console account, or an API key from a compatible service such as 5abeer.

## How do I install the Claude Code extension?

### 1. Open the Extensions view

Press `Ctrl+Shift+X` on Windows and Linux, or `Cmd+Shift+X` on macOS.

### 2. Search and install

Type Claude Code, pick the extension whose publisher is Anthropic, and click **Install**. Its ID is `anthropic.claude-code`, so you can also install it from a terminal:

```bash
code --install-extension anthropic.claude-code
```

### 3. Open a file

Open any file in your project. The Spark icon appears at the top right of the editor, and the extension is ready.

## How do I open Claude Code in VS Code?

| Where | What to do |
| --- | --- |
| Editor toolbar | Click the Spark icon at the top right, with a file open. |
| Activity Bar | Click the Spark icon in the bar on the left. |
| Status Bar | Click ✻ Claude Code at the bottom right. It works with no file open. |
| Command Palette | Press `Ctrl+Shift+P`, type Claude Code, and pick Open in New Tab, Open in Side Bar or Open in New Window. |

## Sign in with a Claude plan or connect an API key?

**With a Claude plan:** click **Sign in** in the Claude Code panel and finish in your browser.

**With an API key:** requests go to the base URL you set and are billed per token to the key's owner, so plan limits don't apply to them. Create a key in your dashboard ([how to create a key](https://5abeer.ai/en/docs/start/keys.md#create)). These are the values Claude Code needs, shown as its settings file:

`~/.claude/settings.json`

```json
{
  "env": {
    "ANTHROPIC_BASE_URL": "https://api.5abeer.ai",
    "ANTHROPIC_AUTH_TOKEN": "YOUR_5ABEER_API_KEY",
    "ANTHROPIC_MODEL": "claude-sonnet-5.5"
  }
}
```

The extension checks for a key before it starts, and that check reads its own VS Code setting, `claudeCode.environmentVariables`. Values in `~/.claude/settings.json` reach Claude Code once it runs, but not this check. So the key goes into VS Code's user settings:

### 1. Open your user settings

Press `Ctrl+Shift+P` (`Cmd+Shift+P` on macOS) and run **Preferences: Open User Settings (JSON)**.

### 2. Add the variables

Add the `claudeCode.environmentVariables` entry. If the file already holds settings, keep them and separate the entries with commas.

```json
{
  "claudeCode.environmentVariables": [
    { "name": "ANTHROPIC_BASE_URL", "value": "BASE_URL" },
    { "name": "ANTHROPIC_AUTH_TOKEN", "value": "YOUR_5ABEER_API_KEY" }
  ]
}
```

Put the `ANTHROPIC_BASE_URL` value from the settings block above in place of `BASE_URL`, and your key in place of `YOUR_5ABEER_API_KEY`.

### 3. Reload and check

Save the file, run **Developer: Reload Window** from the Command Palette, and open Claude Code again. Send a short message. If a reply comes back with no sign-in screen, the key works, and the request shows in your dashboard under that key.

The extension and the terminal version share `~/.claude/settings.json`, so keeping the same values there lets `claude` in any terminal use your key too. If the sign-in screen still appears, turn on **Disable Login Prompt** under Settings > Extensions > Claude Code (`claudeCode.disableLoginPrompt`).

> Keep the key in your user settings, not in a project's `.vscode/settings.json`, which is often committed to Git. If you use VS Code Settings Sync, your user settings can be copied to your other devices.

## How do you work with Claude Code in VS Code?

### Permission modes

Switch modes from the prompt box:

- **Manual:** Claude asks before file edits and most shell commands. Each edit opens as a side-by-side diff with Accept and Reject.
- **Plan:** Claude reads and writes a plan, then waits for your approval before it changes anything.
- **Edit automatically:** Claude makes file edits without asking.
- **Auto:** a background classifier reviews most actions instead of asking you.

The `claudeCode.initialPermissionMode` setting picks the mode new conversations start in.

### Give Claude context

- Type `@` and a file or folder name, such as `@src/app.ts` or `@src/`. Add a line range with `@app.ts#5-10`.
- Select code in the editor and press `Alt+K` (`Option+K` on macOS) to mention the file and the selected lines.
- Paste a screenshot into the prompt box, or hold Shift while you drag a file in.

### Undo with checkpoints

Hover over one of your earlier messages to rewind. **Fork conversation from here** branches the chat and keeps your files, **Rewind code to here** undoes Claude's file changes after that point, and **Fork conversation and rewind code** does both. Past sessions sit under the session history button.

### Commands and shortcuts

Type `/` in the prompt box to list the commands the extension supports, such as `/model` to switch models, `/compact` to shorten a long conversation, `/status` for the version, account and model, `/mcp` for MCP servers and `/plugins` for plugins.

| Action | Windows and Linux | macOS |
| --- | --- | --- |
| Move focus between the editor and Claude | `Ctrl+Esc` | `Cmd+Esc` |
| Mention the selected code | `Alt+K` | `Option+K` |
| New line without sending | `Shift+Enter` | `Shift+Enter` |

## Extension or the CLI in the terminal?

You can use both on the same project:

| Feature | Extension | CLI in a terminal |
| --- | --- | --- |
| Review diffs in VS Code | Yes | Yes, once connected to VS Code |
| Commands | A subset | All of them |
| `!` shortcut to run a shell command | No | Yes |
| Tab completion | No | Yes |
| MCP servers and checkpoints | Yes | Yes |

To run the CLI inside VS Code, open a terminal from the Terminal menu and run `claude`. This needs the terminal install ([Install Claude Code on Windows](https://5abeer.ai/en/guides/claude-code-windows-install)), because the extension's own copy isn't on your PATH. In a terminal outside VS Code, run `/ide` inside Claude Code to connect it to the editor, so its diffs open in VS Code's diff viewer and it sees your selection and the editor's errors. `claude --resume` can also pick up a conversation you started in the extension.

## How do I fix common errors?

- **The extension won't install:** check that VS Code is 1.94.0 or later and that you're allowed to install extensions, or install it from its Visual Studio Marketplace page.
- **No Spark icon:** open a file first, or use ✻ Claude Code in the Status Bar. If it's still missing, run Developer: Reload Window, turn off other AI extensions that may conflict, such as Cline or Continue, and check that the folder isn't in Restricted Mode.
- **The panel is blank:** update the extension, run Developer: Reload Window, then read the output of **Claude Code: Show Logs**.
- **`'claude' is not recognized` in the terminal:** the extension doesn't add `claude` to your PATH. Install the terminal version too.

### Claude Code keeps asking you to sign in

The extension found no key in its own setting. Check that `claudeCode.environmentVariables` sits in your user settings rather than a project's settings, and that the file is valid JSON. Then reload the window. If the sign-in screen still shows, turn on Disable Login Prompt. Starting VS Code from a terminal with `code .` also passes that terminal's variables to the extension.

If a request is refused with a code, [`INVALID_API_KEY`](https://5abeer.ai/en/docs/help/errors.md#INVALID_API_KEY) means the key is wrong or deleted, and [`INSUFFICIENT_BALANCE`](https://5abeer.ai/en/docs/help/errors.md#INSUFFICIENT_BALANCE) means your balance doesn't cover the request. Every code is in [Errors and fixes](https://5abeer.ai/en/docs/help/errors.md).

## How do I run the extension with 5abeer?

5abeer is an independent service compatible with the Anthropic Messages API, so the extension runs exactly as Anthropic ships it. Only the base URL and the key change.

- **An API key, paid as you go.** Pay per token from your balance, and give every key a spend limit, an expiry date and an IP allow-list ([key controls](https://5abeer.ai/en/docs/start/keys.md#controls)). Claude prices are on the [Claude API page](https://5abeer.ai/en/api/claude).
- **A 5abeer plan.** The 5abeer AI app turns on Claude Code for your plan ([what each plan runs](https://5abeer.ai/en/docs/subscriptions/plan-apps.md#claude-code)). Plans are for the supported apps. To call the models from your own code, create an API key. See the [pricing page](https://5abeer.ai/en/pricing) and the [Claude Code app page](https://5abeer.ai/en/apps/claude-code).

Every setting is explained on the [Claude Code docs page](https://5abeer.ai/en/docs/apps/claude-code.md).

## Questions

### Does it work in Cursor and other VS Code forks?

Yes. Cursor installs the same extension, and other VS Code forks can install it from the Open VSX Registry. Search for Claude Code in the editor's Extensions view and check that the publisher is Anthropic. In an editor that can't install it, run `claude` in its integrated terminal.

### Do I need to install the Claude Code CLI too?

No. The extension ships its own copy of Claude Code. Install the terminal version only if you also want to run `claude` in a terminal.

### Does the extension cost anything?

Installing it costs nothing. You pay for the model use: through your Claude plan, or per token on the API key you connect.

### Can I undo what Claude changed?

Yes. Hover over an earlier message and pick Rewind code to here. A Git commit before a large task is a second safety net.

### Which model does it use?

Start with the default model, [`claude-sonnet-5.5`](https://5abeer.ai/en/models/claude-sonnet-5.5), which handles most coding tasks. Move to [`claude-opus-5.5`](https://5abeer.ai/en/models/claude-opus-5.5) or [`claude-fable-5.1`](https://5abeer.ai/en/models/claude-fable-5.1) for the hardest problems. Switch for the session with `/model` in the prompt box. To change the model new sessions start with, edit `ANTHROPIC_MODEL` in `~/.claude/settings.json`. The full list with prices is on the [models page](https://5abeer.ai/en/models).

### How do I uninstall it?

Open the Extensions view, find Claude Code and click Uninstall. Running `claude` in a VS Code terminal installs the extension again by default. To stop that, turn off **Auto-install IDE extension** in `/config`, or set `CLAUDE_CODE_IDE_SKIP_AUTO_INSTALL=1`.

## Sources

Checked on 2026-11-01:

- Claude Code docs: [Use Claude Code in VS Code](https://code.claude.com/docs/en/vs-code)
- Claude Code docs: [Connect Claude Code to an LLM gateway](https://code.claude.com/docs/en/llm-gateway-connect)

> 5abeer is an independent service, not affiliated with OpenAI, Anthropic or Google.

## Get started

Install the terminal version with [Install Claude Code on Windows](https://5abeer.ai/en/guides/claude-code-windows-install), compare a Claude plan with an API key in [The cheapest way to use Claude Code](https://5abeer.ai/en/guides/claude-code-cheapest-way), or learn the basics in [How to get an API key](https://5abeer.ai/en/guides/ai-api-key-guide).