If you’re figuring out how to Claude Code in VS Code, you’re probably tired of squinting at terminal output when you could be reviewing changes right inside the editor. The Claude Code extension replaces claude in a shell with a panel that shows you exactly what the agent intends to modify — before a single byte hits your branch. This guide steers you around the setup choices that matter: the extension versus a raw terminal, permission files that act as guardrails, which MCP servers earn their keep, and the diff‑first review habit that keeps agent edits from becoming surprises.

How to Claude Code in VS Code: start with the extension

The extension is the first‑class answer for anyone asking how to Claude Code in VS Code. Install it from the marketplace and click the Claude Code icon in the sidebar. The panel that opens isn’t a terminal masquerading as an IDE; it’s the same agent binary you’d invoke with claude, but now it draws inline diffs and a plan review sidebar directly inside your editor. That bundle is a fact — the extension ships the claude binary so you’re talking to the real agent, not a watered‑down API.

Keyboard shortcuts put common actions under your fingers:

• Ctrl+Shift+I (Windows/Linux) or Cmd+Shift+I (Mac) opens the panel.
• Ctrl+Enter or Cmd+Enter submits your prompt.
• @‑mentions let you target specific files, symbols, or workspace context without typing paths.

Once the panel is open, write your instruction in plain English. The agent responds with a summary of its intended changes — the plan — and then applies them as inline diffs. You inspect, accept, or reject. No terminal tabs, no git diff after the fact.

For teams building custom tools where the agent needs to stay in lockstep with a larger application, our web development services help wire the extension into a workflow that includes automated testing, CI gates, and code review checkpoints.

Permission files that keep you in control

The agent is powerful; a permission system is the difference between a helpful pair programmer and a bull in a china shop. Run /permissions from the Claude Code panel to see every rule and the underlying settings.json that stores them. You can create allowlist and denylist rules for files, directories, and tool categories.

Common permission rules you’ll set on day one:

These rules are saved in your workspace’s .vscode/settings.json inside a claude.code.permissions key. The Claude Code permissions docs walk through the dialog and the JSON structure. Locking things down early means you can hand the agent a broader mandate without regret.

MCP servers worth loading for IDE work

MCP servers extend the agent’s reach. The one that ships with the extension — the IDE MCP server — is the one you should never disable. It exposes diagnostics straight from VS Code’s language servers, so when you paste a TypeScript error, the agent already has the full error object, not just the squiggly underline. According to the DataCamp tutorial, the server provides mcp__ide__getDiagnostics, which turns “fix this” into a targeted edit without you copy‑pasting.

Beyond the built‑in server, a filesystem MCP server is the next practical add. It lets the agent read, write, and list files across your machine, but only within directories you’ve explicitly granted. Combine that with the permission allowlist and the agent can refactor across microservices without being able to wander into /etc.

Add a server to your workspace settings:

"claude.code.mcpServers": {
  "filesystem": {
    "command": "npx",
    "args": ["-y", "@modelcontextprotocol/server-filesystem", "/shared/libs"]
  }
}

Keep the server count small. Every server expands the attack surface and the token budget. The IDE server plus one can‑do file server covers 90% of real IDE workflows.

The review habit that saves your branches

The agent works fast — too fast to trust blindly. The one habit that separates a productive session from a late‑night revert is reviewing every inline diff before you accept. The extension shows each change as a classic green‑plus‑red‑minus diff inside the editor. You step through them with Alt+RightArrow (or Option+RightArrow on Mac), and you hit Accept or Reject for each block.

If the plan seems off, use the plan review sidebar before the agent starts editing. The sidebar lays out the proposed steps; you can tweak the instructions or cancel a wild plan before a single line moves.

This isn’t just about catching mistakes — it’s about staying in the loop. Every accepted diff is a learning signal. When the agent’s changes surprise you later during a pull request, the cost is far higher than the 15 seconds you’d spend clicking through the inline review.

When the stakes are high — say, a core module or a payment flow — a second set of eyes is cheap insurance. Our AI code audit reviews agent‑generated changes against security, style, and correctness standards, so you ship with confidence.

Workspace settings for a quiet agent

A few tweaks to your workspace settings strip out noise and keep the agent focused on your code, not your config:

• Set "claude.code.autoApprove": false to force manual review of every tool call — even harmless ones. This gives you a chance to see what the agent is doing in real time.
• Use "claude.code.provider": "anthropic" to pin the model provider, avoiding surprises if you later add an alternative.
• Add "claude.code.ignoreFiles": ["*.log", "dist/**"] to stop the agent from reading build artifacts and logs that waste context.

These aren’t hidden flags; they’re visible in the settings.json under the claude.code.* namespace. A minimal settings block can look like this:

{
  "claude.code.autoApprove": false,
  "claude.code.permissions": {
    "allow": [
      { "type": "edit", "path": "${workspaceFolder}/*" },
      { "type": "execute", "command": "npm test" }
    ],
    "deny": [
      { "type": "execute", "command": "rm -rf" }
    ]
  },
  "claude.code.mcpServers": { ... },
  "claude.code.ignoreFiles": ["*.log", "dist/**"]
}

Lock the agent to the workspace, let it run your test suite, and you’ll spend more time thinking about architecture than babysitting a process.

Ready to build a workflow where agent‑assisted coding meets professional review? Start a project with us.

FAQ

Can I use Claude Code in VS Code without the extension?

Yes, you can run the claude CLI in an integrated terminal, but you lose the inline diffs, the plan review sidebar, and the IDE MCP server that reads diagnostics. The extension bundles the same agent binary and surfaces changes directly inside the editor — it’s the experience the terminal can’t match. Claude Code VS Code docs confirm the extension is the recommended way to get agent assistance inside VS Code.

How do I prevent Claude from editing files outside my project?

Run /permissions in the Claude Code panel. In the dialog, set an allowlist rule that restricts file access to a specific workspace folder (e.g., allow edit at /path/to/your-project). The rule is saved to your workspace settings. This prevents the agent from touching any file outside that tree — even if it hallucinates a path. The permissions docs show how to view and manage these rules through the /permissions command and settings.json.

Which MCP servers should I add for Claude Code in VS Code?

The IDE MCP server that ships with the extension is non‑negotiable: it exposes diagnostics from VS Code’s language servers, letting the agent fix type errors and lint warnings without you pasting them. For projects that need to traverse the file system, a filesystem MCP server is a solid second — it lets the agent list and read files outside the workspace root when you’ve granted permission. The DataCamp tutorial specifically calls out that the IDE server provides mcp__ide__getDiagnostics, which is the fastest path to a fix.

faqs: [ { "question": "Can I use Claude Code in VS Code without the extension?", "answer": "Yes, you can run the claude CLI in an integrated terminal, but you lose the inline diffs, the plan review sidebar, and the IDE MCP server that reads diagnostics. The extension bundles the same agent binary and surfaces changes directly inside the editor — it’s the experience the terminal can’t match. Claude Code VS Code docs confirm the extension is the recommended way to get agent assistance inside VS Code." }, { "question": "How do I prevent Claude from editing files outside my project?", "answer": "Run /permissions in the Claude Code panel. In the dialog, set an allowlist rule that restricts file access to a specific workspace folder (e.g., allow edit at /path/to/your-project). The rule is saved to your workspace settings. This prevents the agent from touching any file outside that tree — even if it hallucinates a path. The permissions docs show how to view and manage these rules through the /permissions command and settings.json." }, { "question": "Which MCP servers should I add for Claude Code in VS Code?", "answer": "The IDE MCP server that ships with the extension is non‑negotiable: it exposes diagnostics from VS Code’s language servers, letting the agent fix type errors and lint warnings without you pasting them. For projects that need to traverse the file system, a filesystem MCP server is a solid second — it lets the agent list and read files outside the workspace root when you’ve granted permission. The DataCamp tutorial specifically calls out that the IDE server provides mcp__ide__getDiagnostics, which is the fastest path to a fix." } ]

imagePrompt: "A VS Code window displaying an inline diff with green additions and red deletions, the cursor poised over an "Accept" button, while a dark terminal window sits minimized in the corner."