Part 2: Getting started — Claude Code in VS Code
The VS Code extension is the recommended starting point for Claude Code. It is not simply a UI wrapper — it makes the agentic loop (introduced in Part 1) visible and reviewable at every step. Plans before execution. Diffs before acceptance. Checkpoints before anything goes wrong.
For engineers learning Claude Code, this visibility is the most valuable feature.
Install
In VS Code: Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open Extensions, search "Claude Code", install. Or open the VS Code Marketplace directly.
Requirements: VS Code 1.98.0 or higher. Sign in with your Anthropic account the first time you open the panel.
Open the panel
The extension adds a spark icon (✦) to the editor toolbar — visible in the top-right corner when a file is open. Click it to open the Claude Code panel.
Other access points:
- Activity Bar (left sidebar): always visible, opens session history
- Status bar (bottom-right corner): "✱ Claude Code" — works even when no file is open
- Command Palette (Cmd+Shift+P): type "Claude Code" and choose an option
Drag the panel anywhere in VS Code — right sidebar, left sidebar, or as a tab in the editor area. Most developers put it in the right sidebar to keep the code editor visible alongside the conversation.
Start with Plan mode
Before accepting any edits, set your initial permission mode to Plan. In the prompt box, click the mode indicator at the bottom and switch to Plan mode.
In Plan mode, Claude describes exactly what it intends to do before making any changes — and opens the plan as a markdown document you can read and annotate. Nothing is changed until you explicitly approve.
This is the right mode for learning. You see the full proposed sequence of actions, you understand what the loop would do, and you decide whether to proceed. Over time, as you develop trust in how Claude interprets specific types of tasks, you can switch to auto-accept for routine operations.
The mode setting for new conversations can be saved: VS Code Settings → Extensions → Claude Code → Initial Permission Mode.
Use @-mentions to give context
The most common mistake when starting out: asking questions or giving tasks without providing file context. Claude Code can read files on its own, but being explicit about what matters saves time and reduces wrong-path exploration.
Select code in the editor, then press Option+K (Mac) / Alt+K (Windows/Linux) to insert an @filename#line-range reference directly into the prompt. Claude sees your selection and can answer questions about it or make targeted changes to it.
For directories: @src/components/ (include the trailing slash).
For fuzzy matching: @auth matches auth.js, AuthService.ts, or any file with "auth" in the path.
Keep context focused. Three relevant files is better than an entire repository — the loop works faster and produces more accurate results when context is specific.
Review changes as diffs
When Claude wants to edit a file, it shows a side-by-side diff of the original and proposed changes before applying them. You can accept, reject, or give feedback.
This is a fundamentally different relationship with AI-generated code than accepting an autocomplete suggestion. You are reviewing a change proposal, not typing characters. Read the diff. Understand what changed and why. Ask follow-up questions if something is unclear.
The habit of careful diff review is what separates engineers who trust Claude Code from those who produce bugs they do not understand.
Use checkpoints to explore safely
Every message creates a checkpoint — a snapshot of file state at that moment. If Claude takes a path you want to reverse, hover over any previous message in the conversation to reveal the rewind button.
Three rewind options: - Fork conversation from here — start a new branch from this message, keeping all code changes - Rewind code to here — revert files to this point while keeping conversation history - Fork conversation and rewind code — start fresh from this point in both code and conversation
This makes exploration low-risk. You can ask Claude to try an approach, review it, decide it's wrong, and rewind to before it happened. No manual git stash, no lost work.
CLI vs extension: which to use
The extension and CLI share conversation history. Both are available from within VS Code — the extension as the panel, the CLI via the integrated terminal (Ctrl+ or Cmd+, then run claude).
Use the extension for most tasks. The visual interface — diffs, plan review, checkpoint rewind — adds meaningful safety and visibility that the terminal cannot replicate.
Use the CLI (within VS Code's integrated terminal) when you need features not available in the extension: tab completion, the ! bash shortcut, or specific MCP server configuration commands.
What comes next
Once you have the extension running and have completed a few conversations in Plan mode, you are ready for the most leveraged part of Claude Code: configuration.
Part 3 covers CLAUDE.md, Skills, and Hooks — the three mechanisms that encode your judgment into the agentic loop so it works consistently without re-explanation every session.
Previous: Part 1 — The agentic loop Next: Part 3 — CLAUDE.md, Skills and Hooks
Source: Use Claude Code in VS Code