Skip to main content

How to Use Claude Code with VS Code

I use Visual Studio Code with Claude Code daily and find this combination incredibly productive. VS Code now offers two ways to integrate with Claude Code: the native VS Code Extension (Beta) for a visual IDE experience, or the legacy CLI integration for terminal-based workflows.

VS Code Extension (Beta)​

The VS Code extension, available in beta, lets you see Claude's changes in real-time through a native graphical interface integrated directly into your IDE. This is the recommended approach for users who prefer a visual interface over the terminal.

Installation​

Download and install the extension from the Visual Studio Code Extension Marketplace.

Requirements:

  • VS Code 1.98.0 or higher

Key Features​

The VS Code extension provides:

  • Native IDE experience: Dedicated Claude Code sidebar panel accessed via the Spark icon
  • Plan mode with editing: Review and edit Claude's plans before accepting them
  • Auto-accept edits mode: Automatically apply Claude's changes as they're made
  • File management: @-mention files or attach files and images using the system file picker
  • MCP server usage: Use Model Context Protocol servers configured through the CLI
  • Conversation history: Easy access to past conversations
  • Multiple sessions: Run multiple Claude Code sessions simultaneously
  • Keyboard shortcuts: Support for most shortcuts from the CLI
  • Slash commands: Access most CLI slash commands directly in the extension

How to Use​

Once installed, start using Claude Code through the VS Code interface:

  1. Click the Spark icon in your editor's sidebar to open the Claude Code panel
  2. Prompt Claude Code in the same way you would in the terminal
  3. Watch as Claude analyzes your code and suggests changes
  4. Review and accept edits directly in the interface
    • Tip: Drag the sidebar wider to see inline diffs, then click on them to expand for full details

Updating the Extension​

To update the VS Code extension:

  1. Open the VS Code command palette with Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
  2. Search for "Claude Code: Update"
  3. Select the command to update to the latest version

Using Third-Party Providers (Vertex and Bedrock)​

The VS Code extension supports using Claude Code with third-party providers like Amazon Bedrock and Google Vertex AI. When configured with these providers, the extension will not prompt for login.

To use third-party providers, configure environment variables in the VS Code extension settings:

  1. Open VS Code settings
  2. Search for "Claude Code: Environment Variables"
  3. Add the required environment variables

Common Environment Variables:

VariableDescriptionRequiredExample
CLAUDE_CODE_USE_BEDROCKEnable Amazon Bedrock integrationRequired for Bedrock"1" or "true"
CLAUDE_CODE_USE_VERTEXEnable Google Vertex AI integrationRequired for Vertex AI"1" or "true"
ANTHROPIC_API_KEYAPI key for third-party accessRequired"your-api-key"
AWS_REGIONAWS region for BedrockOptional"us-east-2"
AWS_PROFILEAWS profile for Bedrock authenticationOptional"your-profile"
CLOUD_ML_REGIONRegion for Vertex AIOptional"global" or "us-east5"
ANTHROPIC_VERTEX_PROJECT_IDGCP project ID for Vertex AIOptional"your-project-id"
ANTHROPIC_MODELOverride primary modelOptional"us.anthropic.claude-3-7-sonnet-20250219-v1:0"
ANTHROPIC_SMALL_FAST_MODELOverride small/fast modelOptional"us.anthropic.claude-3-5-haiku-20241022-v1:0"

For detailed setup instructions, see Claude Code on Amazon Bedrock and Claude Code on Google Vertex AI.

Security Considerations​

When Claude Code runs in VS Code with auto-edit permissions enabled, it may be able to modify IDE configuration files that can be automatically executed by your IDE. This may increase the risk of running Claude Code in auto-edit mode and allow bypassing Claude Code's permission prompts for bash execution.

When running in VS Code, consider:

  • Enabling VS Code Restricted Mode for untrusted workspaces
  • Using manual approval mode for edits
  • Taking extra care to ensure Claude is only used with trusted prompts

Not Yet Implemented​

The following features are not yet available in the VS Code extension:

  • Full MCP server configuration: You need to configure MCP servers through the CLI first, then the extension will use them
  • Subagents configuration: Configure subagents through the CLI to use them in VS Code
  • Checkpoints: Save and restore conversation state at specific points
  • Advanced shortcuts:
    • # shortcut to add to memory
    • ! shortcut to run bash commands directly
  • Tab completion: File path completion with tab key

We are working on adding these features in future updates.

Legacy CLI Integration​

The legacy CLI integration allows Claude Code running in the terminal to interact with your IDE. It provides selection context sharing, diff viewing in the IDE instead of terminal, file reference shortcuts, and automatic diagnostic sharing.

Quick Setup​

The legacy integration auto-installs when you run claude from VS Code's integrated terminal:

  1. Open VS Code
  2. Open the integrated terminal (Ctrl+` or View > Terminal)
  3. Run claude in the terminal
  4. Start coding with AI assistance right in your familiar editor

For external terminals, use the /ide command to connect Claude Code to your VS Code instance.

Features​

  • Selection context: Current selection/tab is automatically shared with Claude Code
  • Diff viewing: View proposed changes in VS Code's diff viewer instead of terminal
  • File reference shortcuts: Cmd+Option+K (Mac) or Alt+Ctrl+K (Windows/Linux) to insert file references like @File#L1-99
  • Automatic diagnostic sharing: Lint and syntax errors are automatically shared with Claude
  • Works with variants: Compatible with Visual Studio Code, Cursor, Windsurf, and VSCodium

Configuration​

To configure the legacy CLI integration:

  1. Run claude from your terminal
  2. Enter /config
  3. Set the diff tool to auto for automatic IDE detection

Choosing Your Workflow​

I observe two effective approaches for using Claude Code with VS Code:

  • Best for: Users who prefer visual interfaces and IDE-native experiences
  • Advantages: Plan mode, inline diffs, auto-accept edits, file picker
  • When to use: When you want to see changes in real-time within VS Code's interface

Legacy CLI Integration (Best for Terminal Workflows)​

  • Best for: Users comfortable with terminal-based development
  • Advantages: Seamless terminal integration, external terminal support
  • When to use: When you prefer command-line workflows or need external terminal access

Hybrid Approach​

Many experienced users combine both approaches:

  • Use the native extension for interactive development and planning
  • Use the CLI integration for quick terminal-based tasks
  • Switch based on the specific task at hand
Extension or CLI?

Start with the VS Code Extension (Beta) if you prefer visual interfaces. The extension provides plan mode, inline diffs, and auto-accept features that make development more interactive. Use the legacy CLI integration if you prefer terminal-based workflows or need to connect from external terminals.

Troubleshooting​

Extension Not Installing​

  • Ensure you have a compatible version of VS Code (1.98.0 or later)
  • Check that VS Code has permission to install extensions
  • Try installing directly from the marketplace website

Legacy Integration Not Working​

  • Ensure you're running Claude Code from VS Code's integrated terminal
  • Ensure the CLI for your IDE variant is installed:
    • VS Code: code command should be available
    • Cursor: cursor command should be available
    • Windsurf: windsurf command should be available
    • VSCodium: codium command should be available
  • If the command isn't installed:
    1. Open command palette with Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux)
    2. Search for "Shell Command: Install 'code' command in PATH" (or equivalent for your IDE)

For additional help, see our troubleshooting guide.

See Also: Installation Guide|Getting Started|Windows Installation|Pricing Plans

Last updated on