Skip to main content

Lesson 10: IDE Integration

Learning Objectives​

After completing this lesson, you will be able to:

  • Use Claude Code in VS Code
  • Install and use the JetBrains plugin
  • Leverage desktop app features
  • Automate browser tasks with Chrome extension
  • Seamlessly switch between CLI and IDE
  • Share context across interfaces

Prerequisites​

  • Completed Lessons 1-9 - Full understanding of Claude Code basics
  • IDE installed - VS Code, JetBrains, or browser
  • Claude Code CLI installed - For IDE integrations

Estimated Time: 20 minutes

VS Code Extension​

The VS Code extension brings Claude Code directly into your editor.

Installation​

Method 1: Marketplace

  1. Open VS Code
  2. Extensions panel (Ctrl+Shift+X)
  3. Search "Claude Code"
  4. Click "Install"

Method 2: Command Line

code --install-extension anthropic.claude-code

VS Code Features​

Inline Chat:

  • Ask Claude questions directly in the editor
  • Get code suggestions without leaving VS Code
  • Context-aware responses based on open files

Sidebar Panel:

  • Dedicated Claude Code panel
  • Full conversation history
  • File operations in the sidebar

Quick Actions:

  • Right-click for Claude commands
  • "Explain this code"
  • "Refactor this function"
  • "Generate tests"

Using VS Code Extension​

Start a conversation:

1. Open VS Code
2. Click Claude Code icon in sidebar
3. Type your message
4. Press Enter to send

Context-aware responses:

  • Claude sees your open files
  • Understands cursor position
  • Knows selected code

Example:

// You have this file open in VS Code
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// In Claude panel:
You: Explain how this function works

Claude: This calculateTotal function takes an array of items
and returns the sum of all item prices using reduce()...

Inline Diff Reviews​

When Claude suggests changes:

View diff inline:

  • Modified code highlighted
  • Side-by-side comparison
  • Accept/reject changes

Apply changes:

  • Click "Accept" to apply
  • Click "Reject" to discard
  • Edit before applying

VS Code Keyboard Shortcuts​

ShortcutAction
Ctrl+Shift+COpen Claude panel
Ctrl+Shift+Alt+CQuick chat at cursor
Ctrl+Alt+AAccept suggested change
Ctrl+Alt+RReject suggested change

JetBrains Plugins​

Claude Code integrates with IntelliJ IDEA, PyCharm, WebStorm, and other JetBrains IDEs.

Installation​

Method 1: Marketplace

  1. File → Settings → Plugins
  2. Search "Claude Code"
  3. Click "Install"
  4. Restart IDE

Method 2: Disk

  1. Download plugin from GitHub
  2. File → Settings → Plugins → Gear icon
  3. Install Plugin from Disk
  4. Select downloaded file

Supported JetBrains IDEs​

  • IntelliJ IDEA
  • PyCharm
  • WebStorm
  • PhpStorm
  • RubyMine
  • GoLand
  • CLion
  • Rider

JetBrains Features​

Tool Window:

  • Dedicated Claude Code tool window
  • Persistent conversation history
  • File operations within IDE

Code Actions:

  • Right-click for Claude commands
  • Generate code
  • Refactor selection
  • Explain code

Integrations:

  • Works with JetBrains refactoring
  • Respects IDE code style
  • Integrates with version control

Using JetBrains Plugin​

Open Claude tool window:

1. View → Tool Windows → Claude Code
2. Or click Claude icon in bottom toolbar

Ask about code:

1. Select code in editor
2. Right-click → Ask Claude
3. Or use tool window directly

Refactor with Claude:

1. Select function or class
2. Right-click → Refactor with Claude
3. Describe desired changes
4. Review and apply

Desktop App​

Claude Code offers a native desktop application for a standalone experience.

Installation​

Download:

  • macOS: .dmg file
  • Windows: .exe installer
  • Linux: .AppImage or .deb

Get installer: Visit claude.com/download or use CLI:

claude --download-desktop

Desktop App Features​

Dedicated Window:

  • Full-screen Claude Code experience
  • Independent of terminal
  • Multiple sessions in tabs

Native Integrations:

  • File picker dialogs
  • Native notifications
  • System tray integration
  • Keyboard shortcuts

Project Management:

  • Recent projects list
  • Quick project switching
  • Project-specific settings

Session Persistence:

  • Auto-save conversations
  • Resume on restart
  • Session history browser

Desktop App vs CLI​

Desktop App Advantages:

  • No terminal needed
  • Better for visual workflows
  • Easier file management
  • Integrated help

CLI Advantages:

  • Scriptable
  • Works over SSH
  • Lighter resource usage
  • Integrates with terminal workflows

Choose Desktop App when:

  • You prefer GUI applications
  • Working locally on your machine
  • Need file picker access
  • Want persistent sessions

Choose CLI when:

  • Working on remote servers
  • Automating with scripts
  • Prefer terminal workflows
  • Need minimal resource usage

Chrome Extension​

The Chrome extension brings Claude Code to the browser for web development.

Installation​

  1. Chrome Web Store
  2. Search "Claude Code"
  3. Add to Chrome
  4. Grant necessary permissions

Chrome Extension Features​

Web Page Analysis:

  • Analyze web page code
  • Understand site structure
  • Suggest improvements

Browser Console:

  • Claude in DevTools
  • Debug JavaScript
  • Analyze network requests

Form Automation:

  • Fill forms intelligently
  • Test input validation
  • Generate test data

Using Chrome Extension​

Open Claude in browser:

1. Click extension icon in toolbar
2. Or press Ctrl+Shift+C (Chrome)
3. Claude panel opens in sidebar

Analyze current page:

You: Analyze this page's structure

Claude: This page uses React with...

Debug JavaScript:

1. Open DevTools (F12)
2. Go to Claude tab
3. Paste error message
4. Get explanations and fixes

Switching Between Interfaces​

You can move seamlessly between CLI, IDE, and desktop app.

Shared Context​

Session sync:

  • Conversations available across interfaces
  • Start in CLI, continue in VS Code
  • Project context maintained

Settings sync:

  • Configuration shared
  • Skills available everywhere
  • MCP servers configured once

Switching Workflows​

CLI → IDE:

1. Start conversation in CLI
2. Open IDE
3. Continue in IDE extension
4. Full conversation history available

IDE → Desktop:

1. Work in VS Code extension
2. Open desktop app for full view
3. Continue conversation
4. Use desktop features (file picker, etc.)

Browser → CLI:

1. Debug in browser with Chrome extension
2. Switch to CLI for code changes
3. Test in browser again
4. Iterate seamlessly

Practical Example​

Scenario: Full-stack development workflow

Step 1: Browser - Analyze issue

1. Open web app in Chrome
2. Use Claude extension to analyze bug
3. Claude identifies the issue in React component

Step 2: VS Code - Fix frontend

1. Open VS Code with Claude extension
2. Conversation continues from browser
3. Claude helps fix the React component
4. Test changes inline

Step 3: CLI - Backend changes

1. Switch to terminal with CLI
2. Continue same conversation
3. Claude updates API endpoint
4. Runs tests in background

Step 4: Desktop - Review

1. Open desktop app
2. Review all changes
3. See full conversation across interfaces
4. Commit with Claude

Cross-Interface Context​

Claude maintains context across all interfaces.

What's Shared​

  • Conversation history
  • Project files read
  • Current task context
  • Settings and preferences
  • Skills and MCP servers

What's Interface-Specific​

  • UI layout and features
  • Keyboard shortcuts
  • Local preferences

Best Practices​

For consistent experience:

  1. Use same Claude account
  2. Configure settings in user scope
  3. Use CLAUDE.md for project context
  4. Keep skills in user directory

For interface-specific workflows:

  1. CLI for remote work
  2. IDE for code editing
  3. Desktop for review
  4. Browser for web development

✅ Check Your Understanding​

  1. How do you install the VS Code extension?

    • Only from command line
    • Marketplace or command line
    • Only from GitHub
    • It comes pre-installed

  2. Which JetBrains IDEs support Claude Code?

    • Only IntelliJ IDEA
    • All JetBrains IDEs
    • Only PyCharm and WebStorm
    • None do

  3. What can the Chrome extension do?

    • Only browse the web
    • Analyze web pages and debug code
    • Replace the browser
    • Only show Claude responses

  4. True or False: Conversations sync between CLI and IDE.**

    • True
    • False

  5. When should you use the desktop app?

    • When working over SSH
    • When you prefer a GUI and are working locally
    • When automating tasks
    • Never, always use CLI

Answers: 1-b, 2-b, 3-b, 4-True, 5-b

Summary​

In this lesson, you learned:

  • VS Code extension - Integrated Claude in your editor
  • JetBrains plugins - Full IDE family support
  • Desktop app - Standalone GUI application
  • Chrome extension - Browser-based development
  • Switching interfaces - Seamless context transfer
  • Cross-interface context - Shared history and settings

Next Steps​

In Lesson 11: Common Workflows, you'll learn:

  • Feature development workflow
  • Bug fixing process
  • Code review techniques
  • Refactoring strategies
  • Learning new codebases
  • Test-driven development

Further Reading​

Continue to Lesson 11: Common Workflows →