PILOT — Private preview. Progress is saved for this browser session only.
HaiPhai.AI Fluency for Biotech

IDE Integration — VS Code and JetBrains

Lesson 3~12 min1-question check

Module 10 · Lesson 03

IDE Integration — VS Code and JetBrains

Reading time: 12 minutes Track: Claude Fluency for Teams · Developer path


Why IDE integration matters

Running Claude in a terminal tab alongside your editor works, but IDE integration removes the context-switching friction and puts Claude's capabilities directly in your workflow:

  • See Claude's responses alongside your code
  • Select code and send it directly to Claude without copy-pasting
  • Apply Claude's suggested edits inline with a single click
  • Maintain awareness of what files are open and what you're working on

VS Code

Installation:

  1. Open VS Code
  2. Open the Extensions panel (⌘+Shift+X / Ctrl+Shift+X)
  3. Search "Claude Code"
  4. Install the official Anthropic extension
  5. Sign in with your Anthropic account or API key when prompted

Key interactions in VS Code:

  • Open Claude panel: Click the Claude icon in the Activity Bar (left sidebar)
  • Send selected code: Select code → right-click → "Ask Claude about selection"
  • Inline suggestions: Claude can suggest edits directly in your editor, shown as diff overlays you accept or reject
  • Terminal integration: The Claude Code CLI and VS Code extension share session state — start a session in the terminal, continue it in the panel

Settings worth configuring:

{
  "claude.autoApproveEdits": false,
  "claude.showDiffBeforeEdit": true,
  "claude.defaultModel": "claude-sonnet-4-6"
}

Always keep showDiffBeforeEdit: true in development environments.

JetBrains (IntelliJ, PyCharm, WebStorm, etc.)

Installation:

  1. Open your JetBrains IDE
  2. Go to Settings → Plugins → Marketplace
  3. Search "Claude Code"
  4. Install and restart

Key interactions in JetBrains:

  • Claude tool window: View → Tool Windows → Claude
  • Intention actions: With cursor on code, press Alt+Enter to see Claude-powered suggestions
  • Code selection: Select code → right-click → Claude → "Explain" / "Refactor" / "Generate tests"
  • Diff view: JetBrains' built-in diff viewer is used for showing Claude's proposed changes

Working with both CLI and IDE simultaneously

The CLI and IDE extensions are different interfaces to the same underlying Claude Code sessions. You can:

  • Start a session in the CLI, continue in the IDE panel
  • Use claude --continue in the CLI to pick up where your IDE session left off
  • Switch between them mid-task without losing context

A common pattern: use the IDE extension for quick, inline questions and small edits; switch to the CLI for longer agentic tasks where you want to see full output.

Troubleshooting common issues

Authentication not persisting: Make sure ANTHROPIC_API_KEY is set in your shell profile (not just the current terminal session). IDE extensions spawn their own processes and may not inherit a one-time export.

Extension not seeing files: Claude Code needs to be opened from your project root. If the extension can't see your files, check that VS Code's workspace is set to the project directory.

Slow responses: Claude Code routes through the Anthropic API. Check your internet connection and API status at status.anthropic.com.

Knowledge check

1 question · select an answer to see if you got it
1.What's the recommended setting for 'showDiffBeforeEdit' when using Claude Code in a development environment?
Ready to apply this?
Practice with AI →

Bring a real challenge from your work — the AI will help you apply what you just learned.