Claude Code in VS Code: AI Coding Right in Your Editor

Claude Code Meets VS Code

We’ve covered Claude Code as a terminal tool, but Anthropic also provides a VS Code extension that brings Claude Code’s capabilities directly into your editor. If you live in VS Code (and most developers do), this is arguably the most seamless way to work with Claude Code – no switching between windows, your code is right there alongside the AI.

Getting Set Up

Step 1: Install Claude Code (if you haven’t already)

The VS Code extension works alongside the Claude Code CLI, so you need that installed first:

npm install -g @anthropic-ai/claude-code

Make sure you’ve authenticated – run claude in your terminal and follow the login steps if you haven’t done so already.

Step 2: Install the VS Code Extension

Open VS Code.
Click the Extensions icon in the left sidebar (or press Ctrl+Shift+X / Cmd+Shift+X).
Search for “Claude Code” – look for the extension by Anthropic.
Click Install.

Once installed, you’ll see a Claude icon appear in your VS Code sidebar. Click it and sign in with your Anthropic/Claude.ai account if prompted.

The Interface: What You’re Looking At

The Claude Code extension adds a chat panel to VS Code. It’s similar to the terminal experience, but now it’s embedded in your IDE. Key things you’ll see:

The chat panel – where you type your requests and see Claude’s responses.
Diff views – when Claude proposes file edits, they appear as VS Code diffs (the standard red/green change view you’re used to). You accept or reject each change.
Terminal integration – Claude can still run commands in VS Code’s integrated terminal.

Core Features

Inline Code Actions

Right-click on selected code in the editor and you’ll see Claude options in the context menu – things like “Explain this code”, “Refactor this”, or “Add tests for this selection.” This is great for quick one-off tasks without having to type a full prompt.

@ Mentions

In the chat panel, you can reference specific files using @filename syntax. This tells Claude exactly which files to focus on without it having to search. For example:

Add error handling to @src/api/users.js and make sure it follows the pattern in @src/api/auth.js

Accepting and Rejecting Changes

When Claude proposes a file edit, it appears as a diff. You have clear Accept/Reject buttons. You can even accept individual chunks of a change while rejecting others – just like a manual code review.

Practical Workflows Inside VS Code

The “open file, ask about it” workflow: Open a file you want to understand or improve, then in the Claude panel ask “What does this file do?” or “What could be improved here?” Claude can see what you have open.

The “write the function, Claude writes the tests” workflow: Write your function, then ask Claude to generate unit tests for it. This is particularly fast inside VS Code because everything is already in the same workspace.

The “fix as you go” workflow: When you hit a red squiggly underline or a linting error, select the problematic code, right-click, and ask Claude to fix it. Much faster than Googling the error.

The “build this feature” workflow: Describe a new feature you need. Claude Code will determine which files to create or edit, show you the diffs, and you accept each change. You’re acting as a reviewer rather than the author.

The “explain before I commit” workflow: Before committing, open the Git diff panel in VS Code and ask Claude to review what you’re about to commit. It can spot issues you might have missed.

Tips for Beginners

Start with small, focused tasks – ask Claude to improve one function before asking it to rewrite a whole module. Build confidence in how it works.
Use @ references liberally – referencing the specific file avoids ambiguity and gives Claude more accurate context.
Read every diff – the diff view makes this easy. Don’t click “Accept All” without scanning what changed.
Create a CLAUDE.md file – drop a CLAUDE.md file in the root of your project with instructions about your tech stack, coding conventions, and how you like things done. Claude reads this automatically.

Tips for Advanced Users

Use multiple workspaces – you can have Claude Code sessions running in different VS Code windows for different projects simultaneously.
Combine with tasks and launch configs – ask Claude to run your VS Code task runners as part of its workflow: “Implement this feature and run the build task to make sure it compiles.”
Claude Code in VS Code respects your .gitignore and won’t touch files listed there. Use this to keep generated files or secrets out of Claude’s reach.

Claude Code in VS Code vs Just Using the Terminal

If you’re comfortable in the terminal, the CLI gives you a bit more flexibility – you can pipe things, script it, and use it in non-VS Code projects. But for most developers, the VS Code extension is more comfortable because the diffs are rendered beautifully, keyboard shortcuts feel native, and you never leave your editor.

If you’re a beginner, start with the extension – the visual diff interface is much less intimidating than text-based terminal output.

Wrapping Up

Claude Code in VS Code is a genuinely powerful setup. The combination of AI that can read and write your actual project files, presented through VS Code’s familiar diff interface, makes it feel much more like a real collaboration than copy-pasting code into a chat window.

Next in the series: GitHub Copilot in VS Code – Microsoft’s veteran AI coding assistant and how it compares.