How to Use Claude Code in VS Code
Install the Claude Code extension, sign in, and click the Spark icon. Claude works in a panel beside your files and shows each change before it lands.
To use Claude Code in VS Code, install Anthropic’s Claude Code extension, sign in, and click the Spark icon at the top right of any open file. A chat panel opens beside your code, and Claude edits your files from there.
You need VS Code 1.94.0 or later and a paid Claude plan or a Claude Console account. The free plan won’t sign in. Here’s what the first session actually looks like.
What does your first session look like?
Picture a weeknight. You have a folder with a half-built website for a local business. Three HTML pages, a stylesheet, a logo.
You open the folder in VS Code. You press Ctrl+Shift+X, type “Claude Code” in the search box, and click Install. A small Spark icon appears in the top right corner of the editor.
You click it. A sign-in screen appears. You click Sign in, approve it in your browser, and come back to VS Code.
Now you open index.html and highlight the footer. You type one sentence: “Add the phone number to this footer and make it a tap-to-call link.”
You don’t paste any code. Claude already sees the lines you highlighted and the file you have open. It writes the change and shows you the old version and the new one side by side. You read it. You click accept.
That’s the whole loop. Describe it, read the change, accept or reject it.
How do you install the Claude Code extension?
It takes about four clicks.
- Open VS Code. Check it’s version 1.94.0 or later.
- Press Ctrl+Shift+X (Cmd+Shift+X on a Mac) to open Extensions.
- Search for “Claude Code” and click Install. The publisher is Anthropic.
- Click the Spark icon and sign in with your Claude account.
If the icon doesn’t show up, open the Command Palette and run “Developer: Reload Window.” You don’t need an API key. Your Pro, Max, Team or Enterprise login is enough.
Where do you click to open it?
The Spark icon in the editor toolbar is the fastest way, but it only appears when a file is open. These are the other routes.
| Where | What you do |
|---|---|
| Editor toolbar | Click the Spark icon, top right (needs an open file) |
| Status bar | Click ✻ Claude Code, bottom right (works with no file open) |
| Activity Bar | Click the Spark icon in the left sidebar for your list of sessions |
| Command Palette | Ctrl+Shift+P, type “Claude Code,” pick an option |
| Ctrl+Esc | Jump between your code and the Claude prompt box |
| Ctrl+Shift+Esc | Open a new conversation in its own tab |
On a Mac, swap Ctrl for Cmd.
Will it change your files without asking?
That depends on the mode shown at the bottom of the prompt box. Click it to switch.
New sessions start in Auto. A safety check reviews most actions instead of asking you each time. In Manual, Claude shows every edit side by side and waits for your yes. Plan makes Claude write out what it intends to do, as a document you can comment on, before it touches anything.
For your first week, use Manual. Read every change. Don’t switch to Edit automatically on a client’s live site until you trust what you’re seeing.
If something goes wrong anyway, hover over any message and click the rewind button. Rewind code to here puts your files back the way they were at that point. Keep the project in Git too, as a second safety net.
How do you point Claude at the right file?
Highlight the code first. Claude sees your selection and the file you have open, every time.
For more control, press Alt+K (Option+K on a Mac) to drop a reference like @index.html#5-10 into your prompt. You can also type @ and part of a file or folder name. It matches loosely, so @foot finds footer.html.
Two more tricks save a lot of copying. Paste a screenshot straight into the prompt box. Or type @terminal: and a terminal’s name so Claude can read an error without you pasting it.
Should you use the extension or the terminal?
Start with the extension. It’s the route Anthropic recommends inside VS Code, and the diffs are easier to read.
The terminal version has every command, while the extension has a subset. You can switch whenever you like, because both share the same conversation history. Run claude --resume in a terminal and pick up a chat you started in the panel. One catch: the extension doesn’t install the claude command for your terminal. You install that separately.
How much does it cost?
The extension costs nothing to install. Using it needs a paid Claude plan, starting with Pro at $20 a month, or $17 a month billed yearly. The free plan doesn’t include Claude Code. I’ve laid out every plan in How Much Does Claude Code Cost?
New to the tool itself? Start with What Is Claude Code?
Frequently asked questions
Is the Claude Code extension for VS Code free? Installing it is free. Signing in needs a paid Claude plan, such as Pro at $20 a month, or a Claude Console account.
Does Claude Code work in Cursor? Yes. Anthropic publishes an install link for Cursor, and the extension also installs in other VS Code forks through the Open VSX registry.
Do I need an API key to use Claude Code in VS Code? No. Sign in with your Pro, Max, Team or Enterprise account, or a Console account. No API key is required.
Can I undo a change Claude made in VS Code? Yes. Hover over a message, click rewind, and choose Rewind code to here. Keeping the project in Git gives you a second way back.
Want to see it build a real site, start to finish? I made a free video that walks through the whole thing. Watch the free video.