Use Claude Code in VS Code changedvs-code
Nearest release: v2.1.304, published 2 hours before upstream edited the page. Shown because the two are within 24 hours of each other. Nothing here says the release caused the edit.
Upstream edited this page at 19 Oct 2026 21:54 UTC, give or take a minute or two: the time comes from Anthropic’s own sitemap rather than from a commit. This site recorded the change at 20 Oct 2026 18:37 UTC.
Upstream edited
Recorded here
Lines+139added
Lines−147removed
From line
2
where the diff opens
First seen
14 Aug 2026
this site's first read of the page
Recorded edits62to this page, all time
The whole hunk
from line 2, old and new numbered
/
from line 2
22
33> Install and configure the Claude Code extension for VS Code. Get AI coding assistance with inline diffs, @-mentions, plan review, and keyboard shortcuts.
44
5<img src="https://mintcdn.com/claude-code/-YhHHmtSxwr7W8gy/images/vs-code-extension-interface.jpg?fit=max&auto=format&n=-YhHHmtSxwr7W8gy&q=85&s=300652d5678c63905e6b0ea9e50835f8" alt="VS Code editor with the Claude Code extension panel open on the right side, showing a conversation with Claude" width="2500" height="1155" data-path="images/vs-code-extension-interface.jpg" />
5
66
77The 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.
88
from line 21
2121* VS Code 1.94.0 or later
2222* 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](/docs/en/authentication#log-in-to-claude-code) 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](#use-third-party-providers) for setup instructions.
2323
24<Tip>
25 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](/docs/en/setup). See [VS Code extension vs. Claude Code CLI](#vs-code-extension-vs-claude-code-cli) for details.
26</Tip>
24> [!TIP]
25>
26> 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](/docs/en/setup). See [VS Code extension vs. Claude Code CLI](#vs-code-extension-vs-claude-code-cli) for details.
2727
2828## Install the extension
2929
from line 42
4242* **Editors that can't install the extension**: [install the CLI](/docs/en/quickstart) and run `claude` in the editor's integrated terminal instead. The CLI works in any terminal.
4343* **Dev containers**: to run Claude Code inside a dev container, see [Development containers](/docs/en/devcontainer).
4444
45<Note>If the extension doesn't appear after installation, restart VS Code or run "Developer: Reload Window" from the Command Palette.</Note>
45> [!NOTE]
46>
47> If the extension doesn't appear after installation, restart VS Code or run "Developer: Reload Window" from the Command Palette.
4648
4749## Get started
4850
4951Once installed, you can start using Claude Code through the VS Code interface:
5052
51<Steps>
52 <Step title="Open the Claude Code panel">
53 Throughout VS Code, the Spark icon indicates Claude Code: <img src="https://mintcdn.com/claude-code/c5r9_6tjPMzFdDDT/images/vs-code-spark-icon.svg?fit=max&auto=format&n=c5r9_6tjPMzFdDDT&q=85&s=3ca45e00deadec8c8f4b4f807da94505" alt="Spark icon" style={{display: "inline", height: "0.85em", verticalAlign: "middle"}} width="16" height="16" data-path="images/vs-code-spark-icon.svg" />
53**1. Open the Claude Code panel**
5454
55 The 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.
55Throughout VS Code, the Spark icon indicates Claude Code: 
5656
57 <img src="https://mintcdn.com/claude-code/mfM-EyoZGnQv8JTc/images/vs-code-editor-icon.png?fit=max&auto=format&n=mfM-EyoZGnQv8JTc&q=85&s=eb4540325d94664c51776dbbfec4cf02" alt="VS Code editor showing the Spark icon in the Editor Toolbar" width="2796" height="734" data-path="images/vs-code-editor-icon.png" />
57The 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.
5858
59 Other ways to open Claude Code:
59
6060
61 * **Activity Bar**: click the Spark icon in the left sidebar to open the sessions list. Click any session to open it in your [preferred location](#extension-settings), or start a new one. This icon is always visible in the Activity Bar.
62 * **Command Palette**: `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux), type "Claude Code", and select an option like "Open in New Tab"
63 * **Status Bar**: click **✻ Claude Code** in the bottom-right corner of the window. This works even when no file is open.
61Other ways to open Claude Code:
6462
65 You can drag the Claude panel to reposition it anywhere in VS Code. See [Customize your workflow](#customize-your-workflow) for details.
66 </Step>
63* **Activity Bar**: click the Spark icon in the left sidebar to open the sessions list. Click any session to open it in your [preferred location](#extension-settings), or start a new one. This icon is always visible in the Activity Bar.
64* **Command Palette**: `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux), type "Claude Code", and select an option like "Open in New Tab"
65* **Status Bar**: click **✻ Claude Code** in the bottom-right corner of the window. This works even when no file is open.
6766
68 <Step title="Sign in">
69 The first time you open the panel, a sign-in screen appears. Click **Sign in** and complete authorization in your browser.
67You can drag the Claude panel to reposition it anywhere in VS Code. See [Customize your workflow](#customize-your-workflow) for details.
7068
71 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**.
69**2. Sign in**
7270
73 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.
71The first time you open the panel, a sign-in screen appears. Click **Sign in** and complete authorization in your browser.
7472
75 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**.
76 </Step>
73If 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**.
7774
78 <Step title="Send a prompt">
79 Ask Claude to help with your code or files, whether that's explaining how something works, debugging an issue, or making changes.
75If 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.
8076
81 <Tip>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.</Tip>
77After 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**.
8278
83 Here's an example of asking about a particular line in a file:
79**3. Send a prompt**
8480
85 <img src="https://mintcdn.com/claude-code/FVYz38sRY-VuoGHA/images/vs-code-send-prompt.png?fit=max&auto=format&n=FVYz38sRY-VuoGHA&q=85&s=ede3ed8d8d5f940e01c5de636d009cfd" alt="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" width="3288" height="1876" data-path="images/vs-code-send-prompt.png" />
86 </Step>
81Ask Claude to help with your code or files, whether that's explaining how something works, debugging an issue, or making changes.
8782
88 <Step title="Review changes">
89 <span id="security-considerations" />
83> [!TIP]
84>
85> 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.
9086
91 <span id="security-and-privacy" />
87Here's an example of asking about a particular line in a file:
9288
93 Check the [permission mode](/docs/en/permission-modes#which-mode-a-session-starts-in) shown at the bottom of the prompt box:
89
9490
95 * In Auto or Edit automatically mode, Claude edits [most files](/docs/en/permission-modes#protected-paths) in your workspace without asking.
96 * 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.
91**4. Review changes**
9792
98 <img src="https://mintcdn.com/claude-code/FVYz38sRY-VuoGHA/images/vs-code-edits.png?fit=max&auto=format&n=FVYz38sRY-VuoGHA&q=85&s=e005f9b41c541c5c7c59c082f7c4841c" alt="VS Code showing a diff of Claude's proposed changes with a permission prompt asking whether to make the edit" width="3292" height="1876" data-path="images/vs-code-edits.png" />
93Check the [permission mode](/docs/en/permission-modes#which-mode-a-session-starts-in) shown at the bottom of the prompt box:
9994
100 To review a proposed edit one change at a time, use the **Accept this change** and **Reject this change** buttons under each change in the diff. Rejecting a change reverts it in the proposed content; accepting marks it as reviewed. Per-change review requires Claude Code v2.1.275 or later.
95* In Auto or Edit automatically mode, Claude edits [most files](/docs/en/permission-modes#protected-paths) in your workspace without asking.
96* 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.
10197
102 Accepting or rejecting the whole file still finishes the review. A diff with more than 100 changes opens without the per-change buttons, so review it as a whole file.
98 
10399
104 The same actions are available at the cursor from the editor's context menu and from the Command Palette as **Claude Code: Accept Change at Cursor** and **Claude Code: Reject Change at Cursor**.
105 </Step>
106</Steps>
100To review a proposed edit one change at a time, use the **Accept this change** and **Reject this change** buttons under each change in the diff. Rejecting a change reverts it in the proposed content; accepting marks it as reviewed. Per-change review requires Claude Code v2.1.275 or later.
107101
102Accepting or rejecting the whole file still finishes the review. A diff with more than 100 changes opens without the per-change buttons, so review it as a whole file.
103
104The same actions are available at the cursor from the editor's context menu and from the Command Palette as **Claude Code: Accept Change at Cursor** and **Claude Code: Reject Change at Cursor**.
105
108106For more ideas on what you can do with Claude Code, see [Common workflows](/docs/en/common-workflows).
109107
110<Tip>
111 Run "Claude Code: Open Walkthrough" from the Command Palette for a guided tour of the basics.
112</Tip>
108> [!TIP]
109>
110> Run "Claude Code: Open Walkthrough" from the Command Palette for a guided tour of the basics.
113111
114112## Use the prompt box
115113
from line 276
278276
279277If you run [cloud sessions](/docs/en/claude-code-on-the-web), you can resume them directly in VS Code. This requires signing in with **Claude.ai Subscription**, not Anthropic Console.
280278
281<Steps>
282 <Step title="Open session history">
283 Click the **Session history** button at the top of the Claude Code panel.
284 </Step>
279**1. Open session history**
285280
286 <Step title="Select the Web tab">
287 The dialog shows two tabs: Local and Web. Click **Web** to see sessions from claude.ai.
288 </Step>
281Click the **Session history** button at the top of the Claude Code panel.
289282
290 <Step title="Select a session to resume">
291 Browse or search the sessions. Click one to continue the conversation locally.
292 </Step>
293</Steps>
283**2. Select the Web tab**
294284
295<Note>
296 When the folder you have open is a GitHub repository, the Web tab shows only sessions from that repository.
285The dialog shows two tabs: Local and Web. Click **Web** to see sessions from claude.ai.
297286
298 When you resume a cloud session, the extension downloads a copy of the conversation history; changes don't sync back to claude.ai.
299</Note>
287**3. Select a session to resume**
300288
289Browse or search the sessions. Click one to continue the conversation locally.
290
291> [!NOTE]
292>
293> When the folder you have open is a GitHub repository, the Web tab shows only sessions from that repository.
294>
295> When you resume a cloud session, the extension downloads a copy of the conversation history; changes don't sync back to claude.ai.
296
301297The Web tab also lists your [Remote Control](/docs/en/remote-control) sessions. If you click one that ran in the folder you have open, the extension opens that local conversation instead of downloading a copy. The extension focuses the tab already showing it, if there is one. If the extension can't rule out that another Claude process has the conversation open, you get a downloaded copy instead.
302298
303299If any part of a conversation fails to download, an error appears and no copy is saved. Select the session again to retry. If you select a session that has no conversation to download yet, an error tells you where to continue it instead.
from line 337
341337
342338To stop the extension from locking groups, turn off the [Lock Editor Groups setting](vscode://settings/claudeCode.lockEditorGroups). Groups that are already locked stay locked until you unlock them. The setting requires Claude Code v2.1.274 or later.
343339
344<Tip>
345 Use the sidebar for your main Claude session and open additional tabs for side tasks. Claude remembers your preferred location. The Activity Bar sessions list icon is separate from the Claude panel. The sessions list is always visible in the Activity Bar, while the Claude panel icon only appears there when the panel is docked to the left sidebar.
346</Tip>
340> [!TIP]
341>
342> Use the sidebar for your main Claude session and open additional tabs for side tasks. Claude remembers your preferred location. The Activity Bar sessions list icon is separate from the Claude panel. The sessions list is always visible in the Activity Bar, while the Claude panel icon only appears there when the panel is docked to the left sidebar.
347343
348344### Continue conversations after a reload
349345
from line 485
489485
490486If the session you opened the dialog from can't reload its plugins, the dialog offers to try again or to restart Claude in that session.
491487
492<Note>
493 The extension manages plugins by running the same commands as the CLI. Plugins and marketplaces you configure in the extension are also available in the CLI, and vice versa.
494</Note>
488> [!NOTE]
489>
490> The extension manages plugins by running the same commands as the CLI. Plugins and marketplaces you configure in the extension are also available in the CLI, and vice versa.
495491
496492For more about the plugin system, see [Plugins](/docs/en/plugins/overview) and [Plugin marketplaces](/docs/en/plugins/overview).
497493
from line 575
579575
580576Some shortcuts depend on which panel is "focused" (receiving keyboard input). When your cursor is in a code file, the editor is focused. When your cursor is in Claude's prompt box, Claude is focused. Use `Cmd+Esc` / `Ctrl+Esc` to toggle between them.
581577
582<Note>
583 These are VS Code commands for controlling the extension. Not all built-in Claude Code commands are available in the extension. See [VS Code extension vs. Claude Code CLI](#vs-code-extension-vs-claude-code-cli) for details.
584</Note>
578> [!NOTE]
579>
580> These are VS Code commands for controlling the extension. Not all built-in Claude Code commands are available in the extension. See [VS Code extension vs. Claude Code CLI](#vs-code-extension-vs-claude-code-cli) for details.
585581
586582| Command | Shortcut | Description |
587583| - | - | - |
from line 605
609605
610606Invoke the handler with your operating system's URL opener.
611607
612<Tabs>
613 <Tab title="macOS">
614 ```bash theme={null}
615 open "vscode://anthropic.claude-code/open"
616 ```
617 </Tab>
608**macOS**
618609
619 <Tab title="Linux">
620 ```bash theme={null}
621 xdg-open "vscode://anthropic.claude-code/open"
622 ```
610```bash theme={null}
611open "vscode://anthropic.claude-code/open"
612```
623613
624 The `xdg-open` command comes from the `xdg-utils` package. If the shell reports it isn't found, see [xdg-open is not found on Linux](/docs/en/deep-links#xdg-open-is-not-found-on-linux).
625 </Tab>
614**Linux**
626615
627 <Tab title="Windows">
628 In PowerShell:
616```bash theme={null}
617xdg-open "vscode://anthropic.claude-code/open"
618```
629619
630 ```powershell theme={null}
631 Start-Process "vscode://anthropic.claude-code/open"
632 ```
620The `xdg-open` command comes from the `xdg-utils` package. If the shell reports it isn't found, see [xdg-open is not found on Linux](/docs/en/deep-links#xdg-open-is-not-found-on-linux).
633621
634 In `cmd.exe`, `start` treats its first quoted argument as a window title, so pass an empty title before the URL:
622**Windows**
635623
636 ```cmd theme={null}
637 start "" "vscode://anthropic.claude-code/open"
638 ```
639 </Tab>
640</Tabs>
624In PowerShell:
641625
626```powershell theme={null}
627Start-Process "vscode://anthropic.claude-code/open"
628```
629
630In `cmd.exe`, `start` treats its first quoted argument as a window title, so pass an empty title before the URL:
631
632```cmd theme={null}
633start "" "vscode://anthropic.claude-code/open"
634```
635
642636The handler accepts two optional query parameters:
643637
644638| Parameter | Description |
from line 655
661655* **Extension settings** in VS Code: control the extension's behavior within VS Code. Open with `Cmd+,` (Mac) or `Ctrl+,` (Windows/Linux), then go to **Extensions > Claude Code**. You can also type `/` and select **General config…** to open settings.
662656* **Claude Code settings** in `~/.claude/settings.json`: shared between the extension and CLI. Use it for allowed commands, environment variables, hooks, and MCP servers. With Claude Code v2.1.283 or later, it's also one input to the permission mode conversations start in, and on earlier versions only on Pro, Max, and Team plans. [Switch permission modes](/docs/en/permission-modes#switch-permission-modes) lists the order. See [Settings](/docs/en/settings) for details.
663657
664<Tip>
665 Add `"$schema": "https://json.schemastore.org/claude-code-settings.json"` to your `settings.json` to get autocomplete and inline validation for all available settings directly in VS Code.
666</Tip>
658> [!TIP]
659>
660> Add `"$schema": "https://json.schemastore.org/claude-code-settings.json"` to your `settings.json` to get autocomplete and inline validation for all available settings directly in VS Code.
667661
668662### Extension settings
669663
from line 692
698692
699693By default, Claude Code connects directly to Anthropic's API. If your organization uses Amazon Bedrock, Google Cloud's Agent Platform, or Microsoft Foundry to access Claude, configure the extension to use your provider instead:
700694
701<Steps>
702 <Step title="Disable login prompt">
703 Open the [Disable Login Prompt setting](vscode://settings/claudeCode.disableLoginPrompt) and check the box.
695**1. Disable login prompt**
704696
705 You can also press `Cmd+,` on Mac or `Ctrl+,` on Windows/Linux to open VS Code settings, search for "Claude Code login", and check **Disable Login Prompt**.
706 </Step>
697Open the [Disable Login Prompt setting](vscode://settings/claudeCode.disableLoginPrompt) and check the box.
707698
708 <Step title="Configure your provider">
709 Follow the setup guide for your provider:
699You can also press `Cmd+,` on Mac or `Ctrl+,` on Windows/Linux to open VS Code settings, search for "Claude Code login", and check **Disable Login Prompt**.
710700
711 * [Claude Code on Amazon Bedrock](/docs/en/amazon-bedrock)
712 * [Claude Code on Google Cloud's Agent Platform](/docs/en/google-vertex-ai)
713 * [Claude Code on Microsoft Foundry](/docs/en/microsoft-foundry)
701**2. Configure your provider**
714702
715 These guides cover configuring your provider in `~/.claude/settings.json`, which ensures your settings are shared between the VS Code extension and the CLI.
716 </Step>
717</Steps>
703Follow the setup guide for your provider:
718704
705* [Claude Code on Amazon Bedrock](/docs/en/amazon-bedrock)
706* [Claude Code on Google Cloud's Agent Platform](/docs/en/google-vertex-ai)
707* [Claude Code on Microsoft Foundry](/docs/en/microsoft-foundry)
708
709These guides cover configuring your provider in `~/.claude/settings.json`, which ensures your settings are shared between the VS Code extension and the CLI.
710
719711On a third-party provider, the extension doesn't offer features that require a claude.ai account, such as plan usage bars, [voice dictation](/docs/en/voice-dictation), and the Web tab for [cloud sessions](#resume-cloud-sessions-from-claude-ai). For what the Account & usage dialog shows on these sign-ins, see [Check account and usage](#check-account-and-usage).
720712
721713A claude.ai sign-in left over from an earlier `/login` stays unused: the extension doesn't send it with any request.
from line 795
803795
804796Once configured, ask Claude to use the tools (for example, "Review PR #456").
805797
806<Note>To find servers to connect, see [Find and build MCP servers](/docs/en/mcp#find-and-build-mcp-servers).</Note>
798> [!NOTE]
799>
800> To find servers to connect, see [Find and build MCP servers](/docs/en/mcp#find-and-build-mcp-servers).
807801
808802## The built-in IDE MCP server
809803
from line 855
861855
862856Cancelling, or dismissing the picker with `Esc`, returns an error to Claude and nothing runs. The tool also refuses outright when there's no active notebook, when the Jupyter extension (`ms-toolsai.jupyter`) isn't installed, or when the kernel isn't Python.
863857
864<Note>
865 The Quick Pick confirmation is separate from `PreToolUse` hooks. An allowlist entry for `mcp__ide__executeCode` lets Claude *propose* running a cell; the Quick Pick inside VS Code is what lets it *actually* run.
866</Note>
867
868<a id="troubleshooting" />
858> [!NOTE]
859>
860> The Quick Pick confirmation is separate from `PreToolUse` hooks. An allowlist entry for `mcp__ide__executeCode` lets Claude *propose* running a cell; the Quick Pick inside VS Code is what lets it *actually* run.
869861
870862## Fix common issues
871863
No line in this hunk matches that.