How to integrate Claude Code with VS Code and JetBrains IDEs. Use when user asks about IDE integration, VS Code extension, JetBrains plugin, or IDE setup.
Install
mkdir -p .claude/skills/ide && curl -L -o skill.zip "https://mcp.directory/api/skills/download/293" && unzip -o skill.zip -d .claude/skills/ide && rm skill.zipInstalls to .claude/skills/ide
About this skill
Claude Code IDE Integration
VS Code Extension (Beta)
Overview
Claude Code integrates with Visual Studio Code through a native extension, providing a dedicated sidebar panel with IDE-native features.
Key Features
Native IDE experience:
- Dedicated sidebar panel accessed via the Spark icon
- Review Claude's proposed changes before accepting
- Auto-accept mode for automatic application of edits
- Inline diff viewing with expandable details
Integration features:
- File management through @-mentions and file picker attachment
- Model Context Protocol (MCP) server integration
- Conversation history access
- Multiple simultaneous sessions
- Support for most CLI slash commands
Requirements & Installation
Requirements:
- VS Code 1.98.0 or higher
- Claude Code installed globally
Installation: Download from the Visual Studio Code Extension Marketplace.
Search for "Claude Code" in VS Code Extensions panel.
How to Use
- Click the Spark icon to open the Claude Code panel
- Drag the sidebar wider to see inline diffs
- Click on diffs to expand for full details
- Interact with Claude as you would in the terminal
- Review and accept/reject changes
Configuration
Auto-accept mode: Enable to automatically apply Claude's edits without manual review.
File attachments: Use @-mentions or the file picker to attach files to conversations.
MCP servers: Configure MCP integrations for extended functionality.
Third-Party Provider Support
The extension supports Amazon Bedrock and Google Vertex AI through environment variable configuration in VS Code settings:
Settings (JSON):
{
"claude-code.env": {
"ANTHROPIC_API_KEY": "your-key",
"AWS_REGION": "us-east-1",
"ANTHROPIC_VERTEX_PROJECT_ID": "your-project"
}
}
Current Limitations
Features not yet implemented:
- Full MCP configuration
- Subagents setup
- Checkpoints
- Advanced shortcuts
- Tab completion
Note: These features are available in the terminal version.
Legacy CLI Integration
For terminal-based users, the integration auto-installs when running claude from VS Code's integrated terminal.
Features:
- Selection context sharing
- Automatic diagnostic reporting
- Terminal-based interaction
JetBrains Integration
Overview
Claude Code integrates with JetBrains IDEs through a dedicated plugin, offering features like interactive diff viewing and automatic selection context sharing.
Supported IDEs
The plugin works with:
- IntelliJ IDEA
- PyCharm
- Android Studio
- WebStorm
- PhpStorm
- GoLand
Key Features
Quick launch:
Cmd+Esc(Mac)Ctrl+Esc(Windows/Linux)
Diff viewing: Code changes display directly in the IDE diff viewer
Selection context: Current IDE selections automatically share with Claude Code
File references:
Cmd+Option+K(Mac)Alt+Ctrl+K(Linux/Windows)
Diagnostic sharing: IDE errors and diagnostics automatically sync with Claude
Installation Methods
Marketplace Installation
- Find the Claude Code plugin in the JetBrains marketplace
- Install the plugin
- Restart your IDE completely
Auto-Installation
The plugin may self-install when running claude in the integrated terminal.
Important: Requires full IDE restart to activate.
Configuration
Claude Code Settings
- Run
claude - Enter
/config - Set the diff tool to
autofor automatic IDE detection
Plugin Settings
Go to: Settings → Tools → Claude Code
Configuration options:
- Specify custom Claude command paths
- Enable multi-line prompts with Option+Enter (macOS)
- Configure automatic updates
ESC Key Troubleshooting
If ESC doesn't interrupt operations:
Option 1: Settings → Tools → Terminal → Uncheck "Move focus to the editor with Escape"
Option 2: Delete the "Switch focus to Editor" shortcut
Special Configurations
Remote Development
Install the plugin on the remote host: Settings → Plugin (Host)
WSL Users
Set Claude command as:
wsl -d Ubuntu -- bash -lic "claude"
Replace Ubuntu with your distribution name.
Troubleshooting
Plugin not working:
- Run Claude from project root directory
- Verify plugin is enabled in IDE settings
- Completely restart the IDE (multiple times if needed)
- Check that Claude Code is installed globally
WSL-specific issues: Consult the dedicated troubleshooting guide in the Claude Code documentation.
Diff viewer not showing:
- Verify
/confighas diff tool set toauto - Restart IDE
- Check plugin version is up to date
Security Note
When auto-edit is enabled, Claude Code may modify IDE configuration files. Consider using manual approval mode for edits when using JetBrains IDEs.
Comparison: VS Code vs JetBrains
| Feature | VS Code | JetBrains |
|---|---|---|
| UI Integration | Sidebar panel | Terminal-based |
| Diff Viewing | Inline diffs | Native diff viewer |
| File Attachment | @-mentions, picker | Selection sharing |
| Shortcuts | Standard | Customizable |
| MCP Support | Yes (basic) | Via CLI |
| Multi-session | Yes | Via CLI |
| Maturity | Beta | Stable |
Best Practices
For VS Code
- Drag sidebar wider to see diffs clearly
- Use @-mentions for efficient file attachment
- Enable auto-accept only after building trust
- Keep extension updated for latest features
- Use MCP servers for extended capabilities
For JetBrains
- Set diff tool to auto for seamless integration
- Use keyboard shortcuts for quick access
- Run from project root for proper context
- Share selections for targeted help
- Completely restart IDE after installation
General
- Start with manual approval before enabling auto-accept
- Use version control to track Claude's changes
- Review diffs carefully before accepting
- Configure permissions appropriately
- Leverage IDE diagnostics for better context
- Use subagents for specialized tasks (CLI)
- Enable checkpointing for easy rollback (CLI)
Common Workflows
VS Code: Feature Implementation
- Open Claude Code sidebar
- Describe feature requirements
- Attach relevant files with @-mentions
- Review proposed changes in inline diffs
- Accept/reject individual changes
- Test and iterate
JetBrains: Bug Fixing
- Select error in editor
- Press
Cmd+Escto open Claude Code - Share selection context automatically
- Describe the issue
- Review fix in diff viewer
- Accept and test
Both: Code Review
- Open files to review
- Ask Claude to review for:
- Security issues
- Performance problems
- Best practices violations
- Code quality improvements
- Review suggestions
- Apply relevant fixes
Future Enhancements
Both integrations are actively developed. Upcoming features may include:
- Enhanced MCP configuration (VS Code)
- Subagent support (VS Code)
- Checkpoint management (VS Code)
- Improved multi-session handling
- Advanced shortcuts and completions
You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
drawio-diagrams-enhanced
jgtolentino
Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.
godot
bfollington
This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.
nano-banana-pro
garg-aayush
Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.
ui-ux-pro-max
nextlevelbuilder
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."
rust-coding-skill
UtakataKyosui
Guides Claude in writing idiomatic, efficient, well-structured Rust code using proper data modeling, traits, impl organization, macros, and build-speed best practices.
Stay ahead of the MCP ecosystem
Get weekly updates on new skills and servers.