MCP & Integrations/IDE Integration
Beginner12 min

Claude Inside VS Code -- The Full Setup That Replaced My Old Workflow

Claude Code works beautifully from the terminal, but the VS Code extension brings it directly into your editor with inline diffs, side-by-side chat, and one-click accept/reject for changes. This guide covers installation, configuration, keyboard shortcuts, and when to use the VS Code integration versus the CLI.

Quick Reference

  • →Install from VS Code marketplace: search 'Claude Code' by Anthropic
  • →The extension opens Claude in a side panel while you keep your editor focused on code
  • →Inline diffs show proposed changes directly in your files with green/red highlighting
  • →Cmd+Shift+P > 'Claude' shows all available commands
  • →Cmd+L opens the Claude panel from any file (customizable shortcut)
  • →The extension reads your existing .mcp.json and CLAUDE.md -- no duplicate configuration needed
  • →Select code, then Cmd+L to ask Claude about just that selection
  • →VS Code extension and CLI share the same Claude Code engine -- same capabilities, different interface

Installing the Claude Code VS Code Extension

The Claude Code VS Code extension brings the full power of Claude Code into your editor. Instead of switching between a terminal and VS Code, you get an integrated experience where Claude can see your open files, propose inline edits, and show diffs directly in the editor.

1

Install Claude Code CLI first

The VS Code extension requires the Claude Code CLI to be installed. If you have not already, run npm install -g @anthropic-ai/claude-code in your terminal. Verify with claude --version.

2

Install the VS Code extension

Open VS Code, go to the Extensions sidebar (Cmd+Shift+X), and search for "Claude Code" by Anthropic. Click Install. The extension will appear as a new icon in your activity bar.

3

Authenticate

If you are already authenticated with the CLI (claude login), the extension picks up your credentials automatically. If not, it will prompt you to log in the first time you open the Claude panel.

4

Open the Claude panel

Click the Claude icon in the activity bar, or use the keyboard shortcut Cmd+L. The Claude chat panel opens in the sidebar. You are ready to go.

Same engine, different interface

The VS Code extension runs the exact same Claude Code engine as the CLI. Your .mcp.json, CLAUDE.md, and all project configuration carry over automatically. You are not setting up a separate tool -- you are adding a visual interface to what you already have.