Using Claude Code in VS Code

Who this is for

This guide is for developers who write code in VS Code and want Claude Code inside the editor rather than in a separate terminal. After reading it you should be able to install the extension, open a conversation, send Claude the code you have selected, review its edits one change at a time, resume an earlier session and deal with the most common setup problems.

What the extension is

The VS Code extension gives Claude Code a native graphical interface inside the editor, and the documentation recommends it as the way to use Claude Code in VS Code^[1]. Its main features are reviewing and editing Claude's plans before accepting them, auto-accepting edits as they are made, @-mentioning files with specific line ranges, keeping a conversation history and opening several conversations in tabs or windows^[1].

The extension also bundles its own copy of the CLI for the chat panel. If you want to type claude in VS Code's integrated terminal, you need the standalone CLI as well^[1].

Prepare

You need VS Code 1.94.0 or later^[1]. You also need an Anthropic account. Any paid Claude subscription works, including Pro, Max, Ultra, Team and Enterprise, and so does a Claude Console account. No API key is needed^[1].

The version number of the extension matches the Claude Code version it bundles. If a feature needs Claude Code v2.1.286, you need extension version 2.1.286 or later, which the Extensions view shows^[1].

Step 1: install

Open the Extensions view with Cmd+Shift+X on Mac or Ctrl+Shift+X on Windows and Linux, search for "Claude Code" and click Install^[1].

Step 2: open the panel and sign in

The quickest way to open Claude is the Spark icon in the Editor Toolbar, at the top right of the editor. It appears only when a file is open. You can also click the Spark icon in the Activity Bar, or use the Command Palette and choose an option such as "Open in New Tab". The ✻ Claude Code item in the status bar works even when no file is open^[1].

The first time you open the panel, a sign-in screen appears. Click Sign in and finish the authorization in your browser^[1]. If you already have ANTHROPIC_API_KEY set in your shell but still see the sign-in prompt, VS Code probably did not inherit your shell environment. Start it from a terminal with code . so it picks up those variables^[1].

Step 3: send a prompt with your selection

Claude automatically sees the text you select. Press Option+K on Mac or Alt+K on Windows and Linux to insert a reference such as @file.ts#5-10 into the prompt as well^[1].

Step 4: review the edits

Check the permission mode shown in the prompt box. In Manual mode Claude asks before each edit. It shows the current and proposed versions side by side, and you can accept, reject or tell it what to do instead^[1].

To review one change at a time, use the Accept this change and Reject this change buttons under each change. Accepting or rejecting the whole file also finishes the review. A diff with more than 100 changes opens without the per-change buttons, so review that one as a file^[1].

The permission mode can be Auto, Manual, Plan or Edit automatically. In Auto, a classifier reviews most actions instead of asking you^[1]. Plan mode: Claude describes what it will do and waits for approval before changing anything. VS Code opens the plan as a Markdown document where you can add inline comments, and /plan is available from Claude Code v2.1.280^[1].

You can switch models in the middle of a session with Switch model… in the command menu, or by clicking the model name at the bottom of the prompt box^[1].

Reviewing edits is the part of this workflow that takes the most attention. Manual mode asks before every change, which suits an unfamiliar codebase. Once you know how Claude behaves in a project, Auto mode lets a classifier handle most actions, but you still read the result before you commit it. The per-change buttons let you keep the parts you like and drop the rest, which helps when one reply touches several unrelated places.

Find and resume sessions

The Session history button at the top of the panel lets you search past conversations by keyword or browse them by time. Click one to resume it^[1]. New sessions get AI-generated titles. A session with no activity for 14 days moves to Archived sessions automatically, unless it is open, unread or in a group. The archiveInactiveSessions setting controls this^[1].

Arrange the layout

Drag the Claude panel to the secondary sidebar, the primary sidebar or the editor area. The preferredLocation setting accepts sidebar or panel^[1]. By default, the lockEditorGroups setting is true, which locks the editor groups Claude starts for its tabs. Files you open while a Claude tab is focused then go to another group. Turn the setting off if you do not want that behavior^[1].

Cmd+Esc on Mac or Ctrl+Esc on Windows and Linux switches focus between the editor and Claude. Cmd+Shift+Esc or Ctrl+Shift+Esc opens a new conversation as an editor tab^[1].

A sidebar placement suits work where you read code and talk to Claude at the same time. An editor tab suits a side task you want to keep next to your files, such as a question unrelated to the file you are editing.

Settings

Extension settings open with Cmd+, or Ctrl+,, then Extensions > Claude Code. The Claude Code settings file at ~/.claude/settings.json is shared between the extension and the CLI^[1].

Use a cloud provider

To use Amazon Bedrock, Google Cloud's Agent Platform or Microsoft Foundry, turn on the Disable Login Prompt setting, which is claudeCode.disableLoginPrompt, and configure the provider in ~/.claude/settings.json. Features that need a claude.ai account are then unavailable^[1].

Because the settings file is shared, the extension and the CLI read the same provider configuration, so you do not maintain two copies^[1].

MCP servers from the panel

MCP servers give Claude access to external tools, databases and APIs. Managing them from the panel means you do not have to leave the editor.

Type /mcp in the chat panel to add or remove MCP servers, enable or disable them, reconnect and manage OAuth authentication. Adding and removing servers from the dialog requires Claude Code v2.1.261 or later^[1].

Common problems

If the Spark icon is missing, check that a file is open, that VS Code is 1.94.0 or later, and that the window has been reloaded with Developer: Reload Window. The extension also does not work in Restricted Mode, so the workspace must be trusted^[1].

On macOS Tahoe and later, the system Game Overlay shortcut uses Cmd+Esc by default and can take the keypress before VS Code sees it. You can clear the Game Overlay checkbox in System Settings, or rebind the extension to another key^[1].

If Ctrl+J adds a new line in the prompt box, unbind it in keybindings.json:

{
  "bindings": [
    {
      "context": "Chat",
      "bindings": {
        "ctrl+j": null
      }
    }
  ]
}

Next steps

The official page has a full list of commands, shortcuts and settings, which is the place to check when a version requirement matters^[1].