Claude Code is now available directly inside VS Code as a first-class extension — not just a terminal tool you switch to. You get inline edits, a persistent chat panel, slash commands, MCP server connections, and full codebase context without leaving your editor. This guide covers everything from installation to the power-user workflows that make a real difference in day-to-day development.

What Is Claude Code (And How It Differs from Copilot)

Claude Code is Anthropic's agentic coding tool. Unlike GitHub Copilot, which primarily autocompletes lines and functions, Claude Code understands your entire codebase, executes multi-step tasks autonomously, reads and writes files, runs terminal commands, and explains what it's doing at each step.

The practical difference:

  • Copilot: "Complete this function." Works line-by-line in the editor.
  • Claude Code: "Refactor the authentication module to use JWT, update all call sites, write the tests, and explain the changes." Works across the whole project.

If you're choosing between them, the site's Claude vs GitHub Copilot comparison goes deeper on when each wins. For complex, multi-file tasks — the kind CTOs care about — Claude Code is in a different class.

Installing Claude Code in VS Code

Option A: VS Code Extension (Recommended)

The VS Code extension is the easiest way to get started and keeps everything inside your editor.

  1. Open VS Code and go to the Extensions panel (Cmd+Shift+X on Mac, Ctrl+Shift+X on Windows)
  2. Search for "Claude Code" (published by Anthropic)
  3. Click Install
  4. Once installed, you'll see the Claude Code icon in the Activity Bar on the left

After installing, you'll be prompted to sign in. Claude Code uses your Anthropic account — either via API key or claude.ai subscription (Max plan required for full agentic features).

Option B: CLI + VS Code Terminal

If you prefer the terminal or want access to the full CLI feature set, install the CLI globally and use it from the integrated terminal:

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

Then launch it from the VS Code terminal:

claude

The CLI and extension share session state — you can start a task in the extension panel and continue it in the terminal, or vice versa.

Setting Up Your API Key

If you're using an API key (for teams or CI use cases):

# Set your API key as an environment variable
export ANTHROPIC_API_KEY=sk-ant-...

# Or add it permanently to your shell profile
echo 'export ANTHROPIC_API_KEY=sk-ant-...' >> ~/.zshrc

For teams, set the key in your IDE's environment configuration rather than each developer's shell profile — this keeps billing centralized and makes rotation easier.

The VS Code Interface: What You're Working With

The Chat Panel

Click the Claude Code icon in the Activity Bar to open the chat panel. This is the primary interface for most interactions — you describe what you want, Claude Code shows its plan, executes it, and shows a diff of every file it changed before applying.

Key behaviors to know:

  • It reads your open files automatically. You don't need to paste code — Claude Code sees the files you have open and the full project structure.
  • It asks before writing. By default, Claude Code shows proposed changes as diffs and waits for your approval before writing to disk.
  • Session memory. The chat remembers context within a session. You can say "now do the same for the other endpoints" and it knows what "the same" means.

Inline Edit Mode

For quick, targeted edits without opening the full panel: select a block of code, press Cmd+I (Mac) or Ctrl+I (Windows), and type your instruction. Claude Code edits just that selection inline.

This is the fastest way to:

  • Rewrite a function to be more readable
  • Add error handling to an existing block
  • Convert a loop to a functional style
  • Add TypeScript types to JavaScript code

Slash Commands: The Features Most People Miss

Slash commands unlock Claude Code's most powerful capabilities. Type / in the chat panel to see the full list. The ones worth knowing:

/init

Run /init in a new project and Claude Code scans the entire codebase, then writes a CLAUDE.md file — a persistent context document that tells Claude Code about the project's architecture, conventions, and important patterns.

/init

Every future session in this project will load CLAUDE.md automatically, so you don't re-explain the stack, naming conventions, or architectural decisions every time. For a large codebase, this is the single highest-leverage setup step.

/review

Points Claude Code at your current git diff and produces a structured code review — logic issues, security concerns, test coverage gaps, and style inconsistencies. Faster than waiting for a human PR review for a first pass.

/review

/test

Generates tests for the currently open file or selected function. Claude Code reads the implementation, infers edge cases, and writes tests in whatever framework your project uses (Jest, Vitest, Pytest, Go test — it detects automatically).

/fix

Pass it a compiler error, stack trace, or failing test output and it diagnoses and fixes the issue. Works best when you paste the exact error message:

/fix TypeError: Cannot read properties of undefined (reading 'map')
  at UserList.render (UserList.jsx:24:18)

/memory

View and edit what Claude Code has stored in memory about your project and preferences. Useful for correcting wrong assumptions or adding project-specific context that wasn't captured by /init.

CLAUDE.md: Your Persistent Project Configuration

CLAUDE.md is the most underused feature. It's a Markdown file at the root of your project that Claude Code reads at the start of every session. Think of it as the onboarding document you'd write for a new engineer — except Claude Code follows it exactly.

A good CLAUDE.md includes:

# Project: Payments API

## Stack
- Node.js 22, TypeScript 5.4
- Express for routing, Prisma for ORM, PostgreSQL
- Jest for tests, ESLint + Prettier

## Conventions
- Use async/await, never callbacks or .then() chains
- All database queries go through the service layer, never direct in controllers
- Error handling: always use AppError class from src/errors.ts
- Tests live alongside source files (foo.ts → foo.test.ts)

## Architecture
- /src/routes — Express route definitions only, no logic
- /src/services — Business logic
- /src/repositories — Database access
- /src/middleware — Auth, validation, error handling

## Commands
- npm run dev — Start dev server
- npm test — Run test suite
- npm run migrate — Run Prisma migrations

With this in place, Claude Code won't invent its own patterns — it follows yours. It won't create a utils.js that bypasses your service layer, and it won't write callbacks when your codebase uses async/await.

MCP Servers: Connecting Claude Code to Your Tools

MCP (Model Context Protocol) lets Claude Code connect to external tools and data sources — databases, APIs, documentation, internal systems — so it can work with real data instead of just files.

Setting Up an MCP Server in VS Code

Open your VS Code settings (Cmd+,), search for "Claude Code MCP", and add server configurations. Or edit your settings.json directly:

{
  "claude-code.mcpServers": {
    "postgres": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres",
               "postgresql://localhost/mydb"]
    },
    "github": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-github"],
      "env": {
        "GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_..."
      }
    }
  }
}

With the Postgres MCP server connected, you can ask Claude Code:

"Look at the users table schema and write a migration
that adds a soft-delete column with the right index"

Claude Code reads the actual schema, writes the migration, and checks it makes sense against your existing data model — without you copying and pasting the schema manually.

Useful MCP Servers to Install

  • @modelcontextprotocol/server-filesystem — give Claude Code access to directories outside the current project
  • @modelcontextprotocol/server-postgres — read/query PostgreSQL schemas and data
  • @modelcontextprotocol/server-github — read issues, PRs, and code from GitHub repos
  • @modelcontextprotocol/server-brave-search — web search within the conversation
  • @modelcontextprotocol/server-slack — read Slack messages and threads for context

Practical Workflows That Save the Most Time

Workflow 1: New Feature End-to-End

"Add a POST /api/invoices endpoint. It should:
- Accept { customerId, lineItems[], dueDate } in the body
- Validate that customerId exists in the DB
- Calculate the total from lineItems
- Save to the invoices table
- Send a confirmation email via the EmailService
- Return the created invoice with 201
- Write the tests"

Claude Code reads your existing routes, finds your validation patterns, checks the EmailService interface, writes the endpoint, adds it to the router, and writes tests. What would take 45–90 minutes takes 5–10 minutes of review.

Workflow 2: Codebase-Wide Refactor

"Find all places where we're using the old UserService.getById()
method and update them to use the new UserRepository.findById()
pattern. Check that the return types match before updating each one."

Claude Code searches the codebase, identifies every call site, checks return types, and proposes changes file by file. You review the diff and approve. Manual find-and-replace misses edge cases; this doesn't.

Workflow 3: Explaining Unfamiliar Code

Open a file you've never touched and ask:

"Walk me through what this file does, what it depends on,
and what would break if I removed it."

Invaluable when joining a new codebase, debugging a service owned by someone who left, or inheriting legacy code before a migration.

Workflow 4: Security Review Before a PR

/review

Focus specifically on:
- SQL injection via unsanitized inputs
- Missing authentication checks
- Secrets or credentials in the diff
- CORS configuration issues

Running this before every non-trivial PR catches issues that human reviewers miss when they're moving fast. Takes 30 seconds.

Settings Worth Configuring

Open VS Code settings and search "Claude Code" for the full list. The ones that matter most:

  • Auto-approve safe tools: File reads, searches, and lint checks don't need manual approval. Enable auto-approve for read-only operations to cut the number of confirmation prompts in half.
  • Model selection: Claude Opus 4 for complex multi-file tasks, Claude Sonnet 4.5 for quick edits and explanations. You can switch mid-session.
  • Max tokens per request: Raise this for large refactors on big codebases. The default is conservative.
  • Excluded paths: Add node_modules, .git, dist, and any generated files to keep context focused on source code.

Team Setup: Making Claude Code Consistent Across Engineers

For a development team, consistency matters. These steps make Claude Code behave the same way for every engineer:

  1. Commit CLAUDE.md to the repo. Every engineer gets the same project context automatically. Update it when architecture changes.
  2. Add a .claude/settings.json to the repo. This sets project-level permissions — which tools are auto-approved, which directories are off-limits, which MCP servers to use.
  3. Document prompt patterns in CLAUDE.md. If you've found a prompt that reliably produces good results for your most common tasks, write it down. Institutional knowledge about how to use AI tools is as valuable as knowledge about the codebase itself.
  4. Centralize billing. Use a shared API key with usage tracking rather than individual developer keys. Claude Code supports organization-level API keys with per-project attribution.

Common Issues and How to Fix Them

Claude Code Can't Find My Files

Make sure VS Code is opened at the project root, not a subdirectory. Claude Code's file search is relative to the workspace root. If you have a monorepo, open the root and specify the subpackage path in your prompt.

Changes Are Applied Without My Review

Check your permissions settings. If "auto-approve" is enabled for file writes, Claude Code will apply edits immediately. Disable auto-approve for write operations if you want to review every diff before it's written to disk.

Responses Are Slow on Large Codebases

Large context = slower responses. Mitigate with:

  • Add .gitignore-style exclusions in Claude Code settings for generated files and dependencies
  • Use /compact at the start of long sessions to summarize earlier context
  • Be specific in your prompts — "update src/services/auth.ts" is faster than "update the auth code"

It Keeps Using the Wrong Patterns

Update CLAUDE.md. If Claude Code keeps writing patterns you don't want, it means your project conventions aren't documented in a place it can read. The fix is almost always adding a note to CLAUDE.md — not repeating yourself in every prompt.

Claude Code vs GitHub Copilot in VS Code: Which to Use When

  • Use Copilot for: autocomplete while typing, boilerplate generation, quick single-function completions.
  • Use Claude Code for: multi-file tasks, architecture questions, refactoring, writing tests for existing code, debugging complex issues, codebase exploration.

Many teams run both. Copilot handles the keystroke-level stuff; Claude Code handles the tasks that require understanding the whole system. The full AI coding tools comparison covers how Claude Code stacks up against Cursor and other alternatives if you're still deciding.

Getting Started: The 15-Minute Setup Checklist

  1. Install the Claude Code VS Code extension from the marketplace
  2. Sign in with your Anthropic account or set ANTHROPIC_API_KEY
  3. Open your project at the root directory
  4. Run /init to generate CLAUDE.md
  5. Review and edit CLAUDE.md — add your stack, conventions, and common commands
  6. Try a real task: pick something you'd normally spend 30+ minutes on and see how far Claude Code gets

The payoff compounds. The more accurately CLAUDE.md describes your project, the better the results get — and the better the results, the more confidently you delegate to it.