110
0
Source

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.zip

Installs 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

  1. Click the Spark icon to open the Claude Code panel
  2. Drag the sidebar wider to see inline diffs
  3. Click on diffs to expand for full details
  4. Interact with Claude as you would in the terminal
  5. 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

  1. Find the Claude Code plugin in the JetBrains marketplace
  2. Install the plugin
  3. 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

  1. Run claude
  2. Enter /config
  3. Set the diff tool to auto for 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:

  1. Run Claude from project root directory
  2. Verify plugin is enabled in IDE settings
  3. Completely restart the IDE (multiple times if needed)
  4. Check that Claude Code is installed globally

WSL-specific issues: Consult the dedicated troubleshooting guide in the Claude Code documentation.

Diff viewer not showing:

  1. Verify /config has diff tool set to auto
  2. Restart IDE
  3. 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

FeatureVS CodeJetBrains
UI IntegrationSidebar panelTerminal-based
Diff ViewingInline diffsNative diff viewer
File Attachment@-mentions, pickerSelection sharing
ShortcutsStandardCustomizable
MCP SupportYes (basic)Via CLI
Multi-sessionYesVia CLI
MaturityBetaStable

Best Practices

For VS Code

  1. Drag sidebar wider to see diffs clearly
  2. Use @-mentions for efficient file attachment
  3. Enable auto-accept only after building trust
  4. Keep extension updated for latest features
  5. Use MCP servers for extended capabilities

For JetBrains

  1. Set diff tool to auto for seamless integration
  2. Use keyboard shortcuts for quick access
  3. Run from project root for proper context
  4. Share selections for targeted help
  5. Completely restart IDE after installation

General

  1. Start with manual approval before enabling auto-accept
  2. Use version control to track Claude's changes
  3. Review diffs carefully before accepting
  4. Configure permissions appropriately
  5. Leverage IDE diagnostics for better context
  6. Use subagents for specialized tasks (CLI)
  7. Enable checkpointing for easy rollback (CLI)

Common Workflows

VS Code: Feature Implementation

  1. Open Claude Code sidebar
  2. Describe feature requirements
  3. Attach relevant files with @-mentions
  4. Review proposed changes in inline diffs
  5. Accept/reject individual changes
  6. Test and iterate

JetBrains: Bug Fixing

  1. Select error in editor
  2. Press Cmd+Esc to open Claude Code
  3. Share selection context automatically
  4. Describe the issue
  5. Review fix in diff viewer
  6. Accept and test

Both: Code Review

  1. Open files to review
  2. Ask Claude to review for:
    • Security issues
    • Performance problems
    • Best practices violations
    • Code quality improvements
  3. Review suggestions
  4. 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.

284790

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.

211415

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.

202286

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.

214231

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."

169197

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.

165173

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.