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.
- 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
- 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.)
- 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
- 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
- @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
- 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
- Visual Studio Code 1.70.0 or newer
- Claude Code CLI installed on your system
- Active Claude account with authentication
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.
- 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"
You can also install the extension using the VSCode CLI:
code --install-extension claude-code-extension-0.0.1.vsix
- 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!
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
- Type your questions or requests in the input area
- Press Enter or click Send to submit
- Claude will respond with helpful suggestions and code
- 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
- 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
- @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
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 sessionclaude -c- Continue the last sessionclaude -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.
npm run compile- Compile the extensionnpm run watch- Watch for changes and recompilenpm run package- Package the extension for production (webpack)npm run lint- Run ESLint on source filesnpm run test- Run testsnpm run vsix- Create VSIX package for installation
- 🔧 Troubleshooting Guide - Fix common issues like service worker errors
- 📖 Documentation
- 🐛 Report Issues
- 💬 Discussions
MIT License - see LICENSE.md for details
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.