How to Use Claude Code in VS Code — Complete Setup Guide (2026)

Claude Code, right inside VS Code

Most developers discover Claude Code through the terminal. You type a prompt, it reads your project, edits files, runs commands. Powerful — but you're switching context constantly.

The VS Code extension changes that. Same full agentic system, but it all happens right inside your editor — with a proper diff view before anything changes. You see exactly what Claude is about to do and approve it with one click.

This guide covers the full setup and three real demos.

What the Extension Actually Does

This is not a chatbot panel that knows some code. It's the same Claude Code agent you've used in the terminal — the one that reads your entire project, edits files, runs commands, and creates new files.

The difference: everything happens inside VS Code, with a diff view before any file is touched. You can accept, reject, or ask it to revise every change before it's applied.

If you've only ever used Claude Code in the terminal, this changes how you work.

Step 1: Install Claude Code CLI

If you don't have Claude Code installed yet, open your terminal and run:

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

Verify it's working:

claude --version

Step 2: Install the VS Code Extension

Open VS Code
Click the Extensions icon in the sidebar (or press Cmd+Shift+X on Mac / Ctrl+Shift+X on Windows)
Search for Claude Code
Click Install on the official Anthropic extension — it has 10 million+ downloads

Once installed, you'll see the Claude Code icon in your left sidebar.

Step 3: Sign In

Click the Claude Code icon in the sidebar. It will prompt you to sign in. Use your Claude account or API key. Once authorized, Claude Code is active inside VS Code.

Important: Open your full project folder in VS Code — not just a single file. Claude Code needs the project context to give useful, specific answers.

Demo 1: Explain a Complex Function

You have a function you wrote a month ago and you've forgotten what half of it does. Normally you'd read it line by line and trace the logic.

With the extension:

Select the entire function in your file
Open the Claude Code panel from the sidebar — it shows how many lines are selected
Type your prompt: "Explain what this selected function does and identify any potential bugs or edge cases."
Submit

It reads the selected code in context with the full file — not just a paste. The explanation is specific to your actual code, not a generic answer about what that pattern usually does.

Demo 2: Add a Feature with Diff Review

This is where the VS Code extension genuinely beats copy-pasting into a chat window.

Select your function and type:

Add input validation to this function. It should throw a clear error message if any required parameter is missing or the wrong type. Keep the existing logic intact.

Watch what happens:

Claude reads the full file, understands your existing code style
Writes the validation — matching your code style, not inserting a template
Shows you the diff on the right side: red for removed lines, green for added lines
Asks for your permission before touching the file

You can accept, reject, or ask it to revise. Before committing anything, you see exactly what changed. This is the part that makes VS Code integration genuinely better than copy-pasting into ChatGPT.

Demo 3: Fix a Bug via Command Palette

You don't need the panel open to use Claude Code. The Command Palette gives you shortcuts directly.

Select the buggy code in your file
Press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows) to open the Command Palette
Type "Claude" — you'll see Claude Code shortcuts listed
Select Focus Input — it opens Claude Code with your selection already loaded
Type your prompt: "This code has a bug where it returns undefined instead of an empty array when no results are found. Fix it."
Submit

Claude finds the bug, shows the diff, and waits for your approval. Accept, and it's fixed — a 10-second bug fix without leaving the file.

Tips That Make a Real Difference

Select specific functions, not entire files. When asking for changes, select just the function you're working on. Smaller scope = better, more targeted result.

Always review the diff before accepting. Don't auto-accept everything. Read the change, especially for anything touching your data layer or business logic.

Use modes for different workflows. In the panel, you can switch between:

Default mode — asks for permission on each edit (recommended while learning)
Edit automatically — applies changes without prompting (faster for simple tasks)
Plan mode — Claude creates a plan first, then executes after you approve

Mention files with @. Type @ in the prompt to reference any file in your project. Claude loads it as additional context.

VS Code Extension vs Terminal — Which to Use?

Use VS Code extension when…	Use terminal when…
Editing specific files	Multi-step tasks (server setup, full builds)
Reviewing changes carefully	Operations touching many files at once
Working within an existing project	Running commands and scripts
You prefer UI-driven workflows	You're comfortable in the terminal

Most developers end up using both. The extension for in-file work, the terminal for bigger operations. The power is almost identical — it's about preference and workflow.

Install the Extension

The extension is available on the VS Code Marketplace:

Claude Code — VS Code Marketplace

Install it, sign in, open your project, and you have a full agentic AI coding assistant that shows you diffs before changing anything.