Skip to main content
VS Code editor with the Claude Code extension panel open on the right side, showing a conversation with Claude The VS Code extension provides a native graphical interface for Claude Code, integrated directly into your IDE. This is the recommended way to use Claude Code in VS Code. With the extension, you can review and edit Claude’s plans before accepting them, auto-accept edits as they’re made, @-mention files with specific line ranges from your selection, access conversation history, and open multiple conversations in separate tabs or windows.

​
Prerequisites

Before installing, make sure you have:
  • VS Code 1.94.0 or higher
  • An Anthropic account: any paid Claude subscription (Pro, Max, Team, or Enterprise) or a Claude Console account works, and no API key is required. You’ll sign in with this account when you first open the extension. If you access Claude through a third-party provider like Amazon Bedrock or Google Cloud’s Agent Platform, see Use third-party providers for setup instructions.
The extension bundles its own copy of the CLI (command-line interface) for the chat panel. To run claude in VS Code’s integrated terminal, you also need the standalone CLI install. See VS Code extension vs. Claude Code CLI for details.

​
Install the extension

Click the link for your IDE to install directly: Or in VS Code, press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open the Extensions view, search for “Claude Code”, and click Install. The extension also installs in other VS Code forks like Devin Desktop or Kiro. Search for “Claude Code” in the editor’s Extensions view, or install from the Open VSX registry. If your editor can’t install the extension, install the CLI and run claude in its integrated terminal instead. The CLI works in any terminal.
If the extension doesn’t appear after installation, restart VS Code or run “Developer: Reload Window” from the Command Palette.

​
Get started

Once installed, you can start using Claude Code through the VS Code interface:
1

Open the Claude Code panel

Throughout VS Code, the Spark icon indicates Claude Code: Spark iconThe quickest way to open Claude is to click the Spark icon in the Editor Toolbar (top-right corner of the editor). The icon only appears when you have a file open.VS Code editor showing the Spark icon in the Editor ToolbarOther ways to open Claude Code:
  • Activity Bar: click the Spark icon in the left sidebar to open the sessions list. Click any session to open it as a full editor tab, or start a new one. This icon is always visible in the Activity Bar.
  • Command Palette: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux), type “Claude Code”, and select an option like “Open in New Tab”
  • Status Bar: click ✱ Claude Code in the bottom-right corner of the window. This works even when no file is open.
You can drag the Claude panel to reposition it anywhere in VS Code. See Customize your workflow for details.
2

Sign in

The first time you open the panel, a sign-in screen appears. Click Sign in and complete authorization in your browser.If you see Not logged in · Please run /login later, the extension reopens the sign-in screen automatically. If it doesn’t appear, reload the window from the Command Palette with Developer: Reload Window.If you have ANTHROPIC_API_KEY set in your shell but still see the sign-in prompt, VS Code may not have inherited your shell environment. Launch VS Code from a terminal with code . so it inherits your environment variables, or sign in with your Claude account instead.After you sign in, a Learn Claude Code checklist appears. Work through each item by clicking Show me, or dismiss it with the X. To reopen it later, uncheck Hide Onboarding in VS Code settings under Extensions → Claude Code.
3

Send a prompt

Ask Claude to help with your code or files, whether that’s explaining how something works, debugging an issue, or making changes.
Claude automatically sees your selected text. Press Option+K (Mac) / Alt+K (Windows/Linux) to also insert an @-mention reference (like @file.ts#5-10) into your prompt.
Here’s an example of asking about a particular line in a file:VS Code editor with lines 2-3 selected in a Python file, and the Claude Code panel showing a question about those lines with an @-mention reference
4

Review changes

What you see depends on the permission mode shown at the bottom of the prompt box:
  • In Auto or Edit automatically mode, Claude edits most files in your workspace without asking.
  • In Manual mode, when Claude wants to edit a file, it shows a side-by-side comparison of the original and proposed changes, then asks for permission. You can accept, reject, or tell Claude what to do instead. If you edit the proposed content directly in the diff view before accepting, Claude is told that you modified it so it doesn’t assume the file matches its original proposal. VS Code showing a diff of Claude's proposed changes with a permission prompt asking whether to make the edit
For more ideas on what you can do with Claude Code, see Common workflows.
Run “Claude Code: Open Walkthrough” from the Command Palette for a guided tour of the basics.

​
Use the prompt box

The prompt box supports several features:
  • Permission modes: click the mode indicator at the bottom of the prompt box to switch permission modes. On Pro, Max, and Team plans, Auto is the built-in starting permission mode. See how the extension chooses the starting permission mode for what changes that, and every permission mode the indicator offers.