**If you just want it working: run npm install -g @anthropic-ai/claude-code, then install the "Claude Code" extension (publisher: anthropic) from the VS Code Extensions view, and sign in with any paid Claude plan.** No API key. You need VS Code 1.94.0 or higher, and once it's in, a Spark icon appears in your editor's top-right toolbar — click it and you're talking to Claude about the repo you already have open. That's the whole setup. The rest of this page is the part most guides skip: the handful of moves that make it feel native instead of a chat box bolted onto your editor.
Here's the fast version, then the detail:
- Install — CLI first (
npm install -g @anthropic-ai/claude-code), then the extension from the Extensions view (Cmd+Shift+X/Ctrl+Shift+X, search "Claude Code", publisher anthropic). - Sign in — first time you open the panel, click Sign in and authorize in the browser. Pro, Max, Team, Enterprise, or a Console account all work.
- Open it — Spark icon in the editor toolbar (needs a file open), the Activity Bar, or the Command Palette (
Claude Code: Open in New Tab). - Point it at code —
@-mention files and folders; select lines and pressOption+K/Alt+Kfor a reference like@app.ts#5-10. - Stay in control — the permission-mode switch at the bottom of the prompt box. Reach for Plan mode on anything non-trivial.
Step 1 — Install (two commands, ~2 minutes)#
Claude Code in VS Code is a native extension published by Anthropic, and it sits on top of the same CLI that runs everywhere else. So you install the CLI, then the UI.
Install the CLI globally with npm:
npm install -g @anthropic-ai/claude-code
Then open VS Code, press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open the Extensions view, search for Claude Code, and install the one from publisher anthropic. You need VS Code 1.94.0 or higher. If the extension doesn't appear after installing, run Developer: Reload Window from the Command Palette.
Using a local model instead of the cloud is a different setup entirely — this extension is for Claude, and the value of the IDE integration is that it wires a frontier model directly into the files you're editing.
Step 2 — Sign in (no API key)#
The first time you open the panel, a sign-in screen appears. Click Sign in and finish authorization in your browser. You sign in with an Anthropic account — any paid Claude subscription (Pro, Max, Team, or Enterprise) or a Claude Console account — and no API key is required. This is the part that trips people up who expect to paste a key: you don't. If you later see Not logged in · Please run /login, the extension reopens the sign-in screen for you. (If you route Claude through Amazon Bedrock or Google Cloud, that's a separate provider setup; everyone else just signs in.)
Step 3 — Open the panel#
Throughout VS Code, the Spark icon means Claude Code. There are a few ways in, and which you use is mostly taste:
- Editor toolbar — the fastest: click the Spark icon in the top-right corner of the editor. It only appears when you have a file open.
- Activity Bar — the Spark icon in the left sidebar opens your sessions list; it's always visible.
- Command Palette —
Cmd+Shift+P/Ctrl+Shift+P, type "Claude Code", pick something like Open in New Tab. - Status Bar — if you set the panel's location to
sidebar, the ✻ Claude Code button in the bottom-right corner opens it even when no file is open.
You can drag the panel anywhere in the window, so it can live as a right-hand sidebar, a bottom panel, or its own tab.
The five moves that make it feel native#
Setup is the easy part. The difference between "I installed the Claude Code extension" and "I actually work in it" is a small number of habits.
1. @-mention files instead of pasting them
Type @ followed by a file or folder name and Claude reads that content. It fuzzy-matches, so @auth finds auth.js or AuthService.ts, and a trailing slash targets a folder:
Explain the logic in @auth
What's in @src/components/
Claude also automatically sees the file you have open and any text you've selected — so you rarely need to describe where something is. You point.
2. Option+K / Alt+K for exact line ranges
When you've selected code, press Option+K (Mac) or Alt+K (Windows/Linux) to drop an @-mention that carries the file path and line numbers, like @app.ts#5-10, straight into your prompt. This is the single move that turns "here's my whole file, find the bug" into "here are the six lines, fix them" — and the tighter the reference, the better the edit.
3. The permission-mode switch is your steering wheel
At the bottom of the prompt box is a mode indicator. Click it to switch:
- Auto — a classifier reviews most actions instead of asking you. The default on Pro, Max, and Team plans.
- Manual — Claude asks before it edits a file or runs most shell commands.
- Plan — Claude describes what it will do, as a full Markdown document you can annotate with inline comments, and waits for your approval before touching anything.
- Edit automatically — Claude makes edits without asking.
Start in Plan mode for anything bigger than a one-line fix. Reviewing a plan and leaving an inline comment ("don't touch the migration, just the handler") is far cheaper than catching a wrong assumption three files into a diff. This is the same discipline that keeps an agent from failing silently in a long loop: you review the intent before you pay for the execution.
4. In Manual mode, read the diff before you accept
When Claude wants to change a file in Manual mode, it opens a side-by-side comparison of the original and the proposed change. Red is removed, green is added, and you accept or reject per file. You can even edit the proposed content directly in the diff before accepting — Claude is told you modified it, so it doesn't assume the file matches its own proposal. This is the review surface; use it like a code review, not a rubber stamp.
5. Shift+Enter and Ctrl+O
Two small ones that remove daily friction. Shift+Enter adds a new line without sending — so you can write a multi-paragraph prompt without firing it off half-finished. And when you've turned on extended thinking (from the / command menu), Ctrl+O expands or collapses every thinking block in the session at once, so you can read Claude's reasoning when you want it and hide it when you don't.
Where it runs, and when to drop to the terminal#
The extension isn't VS-Code-only. The same "Claude Code" extension installs in VS Code forks — Cursor, Kiro, Devin Desktop — either from the editor's Extensions view or the Open VSX registry. If your editor can't install the extension at all, install the CLI and run claude in its integrated terminal; the CLI is the substrate, and it works in any terminal.
That's the mental model worth keeping: the extension is a graphical front end on the CLI, so you're never locked into the panel. When you want the full GUI — inline diffs, plan review, session history, the agent map for subagents — stay in the extension. When you want to script it, pipe it, or run it on a box without a GUI, drop to claude in the terminal. Same tool, same account, two doors.
The 60-second checklist#
npm install -g @anthropic-ai/claude-code- Extensions view → install Claude Code (publisher anthropic), VS Code ≥ 1.94.0
- Open the panel (Spark icon), click Sign in, authorize in the browser
- Open a file,
@-mention what matters, select lines andOption+K/Alt+Kfor exact ranges - Set the mode to Plan for real work, read the diff before you accept
Do those five and Claude Code stops being a chat window next to your editor and becomes part of how you edit. If you're still deciding which model to lean on for the actual coding, our roundup of open-source LLMs for coding is the companion piece — the extension is the cockpit, the model is the engine.



