Claude Code Assistant for VSCode
Unofficial integration of Anthropic's Claude Code AI assistant into Visual Studio Code. Get intelligent coding assistance without leaving your editor.
Disclaimer: This is an unofficial extension not affiliated with Anthropic. It integrates with the official Claude Code CLI tool which must be installed separately.
Features
🤖 AI-Powered Coding Assistant
- Seamless Integration: Access Claude Code directly from VSCode's sidebar
- Smart Launch Options: Choose how to start your Claude session
- Auto-Start Control: Configure automatic startup behavior
- Persistent Sessions: Maintain conversations across your coding sessions
- Context-Aware: Claude understands your workspace and current files
🚀 Smart Session Management
- Launch Options: When Claude isn't running, choose from three convenient options:
- Start New Session: Begin a fresh conversation
- Continue Last Session: Resume your previous conversation
- Select History: Browse and choose from past conversations
- Auto-Start Configuration: Control whether Claude starts automatically when VSCode opens
- Flexible Commands: Configure which command to use for auto-start (claude, claude -c, etc.)
🖼️ Visual Context Support
- Drag & Drop Images: Simply drag images into the chat
- Paste Screenshots: Ctrl/Cmd+V to paste images directly
- File Selection: Use the image button to browse and attach files
- Multiple Formats: Supports JPG, PNG, GIF, WebP, and SVG
🚀 Quick Fix Integration
- Instant Error Help: "Fix with Claude Code" appears in VSCode's Quick Fix menu (Ctrl+. / Cmd+.)
- Automatic Context: Sends error details, file references, and surrounding code automatically
- Seamless Workflow: Click the lightbulb on any error to get Claude's assistance instantly
- Smart Detection: Works with all types of errors and warnings from any language
💬 Smart Interactions
- @mentions: Reference workspace problems and terminal output
- Slash Commands: Quick access to Claude's powerful features
- Custom Commands: Create your own project and user slash commands
- Markdown Support: Rich formatting with syntax highlighting
- Code Actions: Copy code blocks with one click
🎨 Beautiful Interface
- Claude-Styled UI: Familiar interface matching Claude's design
- Dark/Light Theme: Adapts to your VSCode theme
- Status Indicators: Real-time feedback on Claude's state
- Clear History: Easy conversation management
Prerequisites
- Visual Studio Code 1.70.0 or newer
- Claude Code CLI installed on your system
- Active Claude account with authentication
Building the Extension
To build the extension, follow these steps:
Install dependencies:
npm install
Build the extension:
npm run build
This will generate a .vsix file in the project root directory.
Installing the Extension
From the VSIX file
- Open VSCode
- Go to the Extensions view
- Click the "..." menu (top-right of Extensions view)
- Select "Install from VSIX..."
- Browse to the .vsix file generated in the build step
- Select the file and click "Install"
From the Command Line
You can also install the extension using the VSCode CLI:
code --install-extension claude-code-extension-0.0.1.vsix
Getting Started
- Install the extension from the VSCode Marketplace
- Open the Claude Code panel from the sidebar (look for the Claude icon)
- Choose how to launch Claude:
- Auto-start enabled: Claude starts automatically when VSCode opens
- Auto-start disabled: Select from launch options (New Session, Continue Last, or Select History)
- Start chatting with Claude about your code!
Usage
🚀 Launch Options
When Claude isn't running, you'll see three launch options:
- Start New Session (▶️): Begin a fresh conversation with Claude
- Continue Last Session (⏭️): Resume your previous conversation where you left off
- Select History (📚): Browse and choose from your past conversations
💬 Basic Chat
- Type your questions or requests in the input area
- Press Enter or click Send to submit
- Claude will respond with helpful suggestions and code
🚀 Quick Fix with Claude
- Instant Help: When you see a red/yellow squiggly line under code, press Ctrl+. (Cmd+. on Mac)
- Select Fix: Choose "Fix with Claude Code" from the Quick Fix menu
- Auto Context: Claude receives the error details, file location, and surrounding code automatically
- Get Solution: Claude analyzes the error and provides targeted fixes
🖼️ Working with Images
- Drag & Drop: Drag image files directly onto the input area
- Paste: Copy an image and paste with Ctrl/Cmd+V
- Browse: Click the 📎 button to select image files
- Supported: JPG, PNG, GIF, WebP, SVG
🔧 Advanced Features
- @mentions: Type @ to reference problems or terminal output
- Slash Commands: Type / to see available commands
- Custom Commands: Create your own project-specific (
/project:command
) and personal (/user:command
) slash commands
- Clear Chat: Click the clear button to start fresh
- Restart Claude: Use the restart button if needed
⚙️ Configuration
The extension can be customized through VSCode settings:
- Auto Start On Activation: Enable/disable automatic Claude startup when VSCode opens
- Auto Start Command: Configure which command to use when auto-starting Claude
claude
- Start a new session
claude -c
- Continue the last session
claude -r
- Select from conversation history
- Custom commands as needed
Access these settings through VSCode preferences: File > Preferences > Settings
and search for "Claude Code Extension".
See our documentation for detailed guides, including how to create custom slash commands.
Development
npm run compile
- Compile the extension
npm run watch
- Watch for changes and recompile
npm run package
- Package the extension for production (webpack)
npm run lint
- Run ESLint on source files
npm run test
- Run tests
npm run vsix
- Create VSIX package for installation
Support
License
MIT License - see LICENSE.md for details
Contributing
We welcome contributions! Please see our Contributing Guide for details.
Made with ❤️ by CodeFlow Studio
This is an unofficial extension. Claude and Claude Code are trademarks of Anthropic, PBC.