Claude Code VS Code Integration: Install Extension & Configure Settings

Claude Code is a CLI-first tool designed to work seamlessly with any editor. This guide covers how to integrate Claude Code with Visual Studio Code for an optimal development experience.

Understanding the Integration

Claude Code runs in the terminal, not as a traditional VS Code extension. This design choice offers several advantages:

• Editor agnostic: Same workflow in VS Code, Terminal.app, iTerm, or any terminal
• Full terminal capabilities: Access to all CLI features and shell commands
• No extension conflicts: Works alongside any other extensions you use
• Consistent behavior: Same Claude Code experience everywhere

Setting Up VS Code for Claude Code

Step 1: Configure the Integrated Terminal

Open VS Code settings (Cmd+, on macOS, Ctrl+, on Windows/Linux) and configure:

{
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.scrollback": 10000,
  "terminal.integrated.enablePersistentSessions": true
}

These settings ensure a good Claude Code experience:

• Sufficient scrollback to review long outputs
• Persistent sessions to maintain context between restarts

Step 2: Create a Keyboard Shortcut

Add a keybinding to quickly open Claude Code:

1. Open Keyboard Shortcuts (Cmd+K Cmd+S)
2. Click the {} icon to open keybindings.json
3. Add:

{
  "key": "cmd+shift+c",
  "command": "workbench.action.terminal.sendSequence",
  "args": { "text": "claude\n" },
  "when": "terminalFocus"
}

Now Cmd+Shift+C in a focused terminal starts Claude Code.

Step 3: Set Up a Dedicated Claude Terminal Profile

Create a custom terminal profile for Claude Code:

{
  "terminal.integrated.profiles.osx": {
    "Claude Code": {
      "path": "/bin/zsh",
      "args": ["-c", "claude"],
      "icon": "sparkle"
    }
  }
}

Access it via the terminal dropdown menu or Terminal: Create New Terminal (With Profile).

Working with Claude Code in VS Code

Basic Workflow

1. Open integrated terminal: Press Ctrl+`
2. Start Claude Code: Type claude and press Enter
3. Give instructions: Describe what you want to build or fix
4. Review changes: Changes appear in VS Code's source control panel
5. Accept or revert: Use VS Code's diff viewer to review, then commit or discard

Split View Setup

For an optimal workflow, use split terminals:

1. Open terminal (Ctrl+`)
2. Split terminal (Cmd+\ or click the split icon)
3. Run claude in one pane
4. Use the other for git commands, tests, etc.

File Syncing Behavior

When Claude Code modifies files:

VS Code Tasks for Claude Code

Create VS Code tasks to run Claude Code commands:

.vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Claude: Review Code",
      "type": "shell",
      "command": "claude",
      "args": ["-p", "Review the currently open file for bugs and improvements"],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Claude: Write Tests",
      "type": "shell",
      "command": "claude",
      "args": ["-p", "Write unit tests for the currently open file"],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Claude: Explain Code",
      "type": "shell",
      "command": "claude",
      "args": ["-p", "Explain what this codebase does"],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

Run tasks with Cmd+Shift+P → "Tasks: Run Task".

Project-Level Configuration

CLAUDE.md in Your Project

Create a CLAUDE.md file in your project root:

# CLAUDE.md

## Project Overview
This is a React application using TypeScript and Tailwind CSS.

## Development Commands
- `npm run dev` - Start development server
- `npm run test` - Run tests
- `npm run build` - Production build

## Code Standards
- Use functional components with hooks
- Prefer named exports
- Write tests for all new features

## File Structure
- `/src/components` - React components
- `/src/hooks` - Custom hooks
- `/src/utils` - Utility functions

Claude Code reads this automatically when you start a session in the project directory.

VS Code Workspace Settings

For team consistency, add Claude-aware settings to .vscode/settings.json:

{
  "files.associations": {
    "CLAUDE.md": "markdown",
    "CLAUDE.local.md": "markdown"
  },
  "files.exclude": {
    "**/.claude": true
  },
  "search.exclude": {
    "**/.claude": true
  }
}

Recommended Extensions

These extensions complement Claude Code well:

Troubleshooting

Claude Code Not Found in Terminal

Symptom: command not found: claude

Fix: VS Code's integrated terminal may not source your shell profile:

{
  "terminal.integrated.inheritEnv": true,
  "terminal.integrated.env.osx": {
    "PATH": "${env:PATH}:${env:HOME}/.local/bin"
  }
}

Terminal Loses Claude Session

Symptom: Claude Code exits when switching tabs

Fix: Enable persistent terminal sessions:

{
  "terminal.integrated.enablePersistentSessions": true,
  "terminal.integrated.persistentSessionReviveProcess": "always"
}

File Changes Not Detected

Symptom: Claude edits files but VS Code doesn't refresh

Fix: Enable file watching:

{
  "files.useExperimentalFileWatcher": true,
  "files.watcherExclude": {
    "**/node_modules/**": false
  }
}

Slow Terminal Performance

Symptom: Claude output is laggy

Fix: Optimize terminal settings:

{
  "terminal.integrated.gpuAcceleration": "on",
  "terminal.integrated.scrollback": 5000,
  "terminal.integrated.smoothScrolling": false
}

Alternative: Community Extensions

While Claude Code is CLI-first, community extensions provide additional integration:

Claude Code Launcher

Adds toolbar buttons for common Claude operations:

• Start Claude in current directory
• Run with specific prompts
• Quick access to Claude settings

Search "Claude Code" in the VS Code extension marketplace.

Custom Extension Development

Create your own VS Code extension that wraps Claude CLI:

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand('claude.start', () => {
    const terminal = vscode.window.createTerminal('Claude Code');
    terminal.sendText('claude');
    terminal.show();
  });
  context.subscriptions.push(disposable);
}

Best Practices

Workspace Organization

project/
├── .vscode/
│   ├── settings.json      # VS Code settings
│   ├── tasks.json         # Claude tasks
│   └── keybindings.json   # Custom shortcuts
├── .claude/
│   └── settings.json      # Claude project settings
├── CLAUDE.md              # Project instructions
└── CLAUDE.local.md        # Personal overrides (gitignored)

Efficient Workflow

1. Start your day: Open VS Code, start Claude in terminal
2. Context first: Let Claude read relevant files before making changes
3. Incremental changes: Request small, focused changes
4. Review with diff: Use VS Code's built-in diff viewer
5. Commit often: Commit after each successful change

Next Steps

• Install Claude Code CLI if needed
• Configure CLAUDE.md for your projects
• Set Up MCP Servers for extended capabilities
• Manage Permissions for security