VS Code Setup for Claude Code

VS Code Setup for Claude Code

This guide covers how to configure Visual Studio Code to work optimally with Claude Code, including managing the Claude icon in your Activity Bar.

Understanding the Claude Code Icon Location

Claude Code uses the Activity Bar (the vertical icon bar on the left side of VS Code), not the status bar at the bottom. The Claude Code icon appears as a spark/lightning bolt icon (⚡).

Repositioning the Claude Code Icon

Method 1: Drag and Drop

1. Locate the Claude Code spark icon (⚡) in the Activity Bar (left side of VS Code)
2. Click and drag the icon up or down to reorder it
3. Release when it's in your preferred position

Method 2: Right-Click Menu

1. Right-click on the Claude Code spark icon in the Activity Bar
2. Select one of the following options:
   • Move to Top - Places it at the top of the Activity Bar
   • Move Up - Moves it up one position
   • Move Down - Moves it down one position

Showing/Hiding the Claude Code Icon

If you don't see the Claude Code icon in your Activity Bar:

1. Right-click anywhere on the Activity Bar
2. Look for "Claude Code" in the list
3. Check/uncheck it to show or hide the icon

Opening Claude Code Panel Location

You can configure where the Claude Code panel opens:

Panel Locations

Changing Panel Location

1. Open Claude Code by clicking the spark icon
2. Right-click on the Claude Code tab header
3. Select "Move to..." and choose your preferred location

Or drag the Claude Code tab to your preferred panel area.

Keyboard Shortcuts

Default Shortcuts

Setting a Custom Shortcut

1. Open Keyboard Shortcuts:
   • Mac: Cmd + K, then Cmd + S
   • Windows/Linux: Ctrl + K, then Ctrl + S
2. Search for "Claude"
3. Click the + icon next to the command you want to customize
4. Press your desired key combination
5. Press Enter to save

Workspace Trust

When opening a new project, VS Code may ask about workspace trust. Claude Code requires a trusted workspace to function fully.

• Click "Yes, I trust the authors" for projects you're working on
• Restricted mode limits Claude Code's capabilities

Terminal Integration

Claude Code works best with proper terminal access. Ensure your default terminal is configured:

{
    "terminal.integrated.defaultProfile.osx": "zsh",
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "terminal.integrated.defaultProfile.linux": "bash"
}

Add these to your .vscode/settings.json or user settings.

Troubleshooting

Claude Code Icon Not Visible

1. Check extension is installed:

   • Open Extensions panel (Cmd/Ctrl + Shift + X)
   • Search for "Claude Code"
   • Ensure it's installed and enabled

2. Check Activity Bar visibility:

   • Right-click on Activity Bar
   • Ensure "Claude Code" is checked

3. Reload VS Code:

   • Open Command Palette (Cmd/Ctrl + Shift + P)
   • Type: Developer: Reload Window

Extension Not Working

1. Check authentication: Claude Code requires authentication with your Anthropic account
2. Check workspace trust: Ensure the workspace is trusted
3. Check for updates: Update the extension to the latest version

Panel Opens in Wrong Location

1. Right-click the Claude Code tab header
2. Select "Move to..." and choose your preferred location
3. VS Code remembers this preference for future sessions

Recommended VS Code Settings

Add these to your .vscode/settings.json for an optimal experience:

{
    "editor.formatOnSave": true,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "terminal.integrated.scrollback": 10000
}

Differences from Other Extensions

Note: The claude-dev.statusBar.position setting is for the Cline extension, not the official Claude Code extension.

Related Resources

• Claude Code Documentation
• VS Code Activity Bar Guide
• VS Code Settings Reference