IDE Integration

Optimize your Claude Code workflow by integrating with VS Code, JetBrains IDEs, and terminal multiplexers. This skill covers setup, keybindings, and patterns for seamless development.

Quick Reference

Chrome Integration (2.0.73+)

Connect Claude Code to Chrome for browser automation and live debugging.

# Start with Chrome enabled
claude --chrome

# Or enable in-session
/chrome

Capabilities:

• Live debugging (console errors, DOM state)
• Web app testing (forms, flows, regressions)
• Design verification (compare UI to mocks)
• Data extraction from websites
• Authenticated app access (uses your login state)

Requirements: Chrome browser, Claude in Chrome extension v1.0.36+, Pro/Team/Enterprise plan.

See chrome-integration skill for detailed workflows.

UI Improvements (2.1.6+)

• @ Autocomplete Icons - Different suggestion types now have icons
• Status Line Fields - context_window.used_percentage and remaining_percentage available

Core Integration Patterns

Pattern 1: Split Terminal Workflow

Run Claude Code in one terminal pane, run commands in another.

+---------------------------+---------------------------+
|                           |                           |
|    IDE / Editor           |   Claude Code Terminal    |
|                           |                           |
|                           |---------------------------|
|                           |   Command Terminal        |
|                           |   (tests, builds, etc.)   |
+---------------------------+---------------------------+

Pattern 2: IDE as Diff Viewer

Let Claude make changes, use IDE's diff tools to review:

1. Claude edits files
2. IDE shows git diff/file changes
3. Review changes in IDE's visual diff
4. Accept or request refinements from Claude

Pattern 3: File Navigation Sync

Share current file context between IDE and Claude:

# Copy current file path to clipboard (macOS)
echo "/path/to/current/file.ts" | pbcopy

# Paste into Claude prompt
"Look at /path/to/current/file.ts and fix the error on line 42"

Clipboard Integration

macOS

# Copy to clipboard
echo "text" | pbcopy
cat file.txt | pbcopy

# Paste from clipboard
pbpaste
pbpaste > file.txt

Linux (X11)

# Requires xclip or xsel
echo "text" | xclip -selection clipboard
xclip -selection clipboard -o

WSL / Windows

# Copy
echo "text" | clip.exe

# Paste
powershell.exe Get-Clipboard

Terminal Multiplexing

Split terminals efficiently for Claude Code workflows.

tmux Quick Reference

# Start new session
tmux new -s claude

# Split horizontally (top/bottom)
Ctrl-b "

# Split vertically (left/right)
Ctrl-b %

# Navigate panes
Ctrl-b arrow-key

# Resize panes
Ctrl-b Ctrl-arrow-key

# Detach session
Ctrl-b d

# Reattach
tmux attach -t claude

Recommended tmux Layout

# Create Claude Code development layout
tmux new-session -s dev -n main \; \
  split-window -h -p 40 \; \
  split-window -v -p 30 \; \
  select-pane -t 0

Layout result:

• Left pane (60%): Main editor / IDE
• Top-right (40% x 70%): Claude Code
• Bottom-right (40% x 30%): Command runner

File Watching Patterns

Watch for Claude's Changes

# macOS - watch for file changes
fswatch -o /path/to/project | xargs -n1 -I{} echo "File changed"

# Linux - inotifywait
inotifywait -m -r -e modify /path/to/project

# Cross-platform with node
npx chokidar '/path/**/*.ts' -c 'echo "Changed: {path}"'

Auto-reload Integration

Many IDEs auto-reload files. If not:

Diff Viewing

Command Line Diffs

# Git diff of Claude's changes
git diff

# Diff specific file
git diff path/to/file.ts

# Diff with color (most terminals)
git diff --color

# Side-by-side diff
git diff --side-by-side  # requires diff-so-fancy or similar

IDE Diff Tools

Delta (Enhanced Diffs)

# Install delta
brew install git-delta  # macOS
cargo install git-delta # Rust

# Configure git to use delta
git config --global core.pager delta
git config --global interactive.diffFilter 'delta --color-only'

Environment Variables for Claude Code

# Add to ~/.bashrc or ~/.zshrc
export ANTHROPIC_API_KEY="your-key"
export CLAUDE_CODE_EDITOR="code"  # or "webstorm", "vim", etc.

# For JetBrains IDEs, use the CLI launcher
export CLAUDE_CODE_EDITOR="webstorm"
export CLAUDE_CODE_EDITOR="idea"
export CLAUDE_CODE_EDITOR="pycharm"

Quick Keybinding Reference

Terminal Navigation

Copy/Paste in Terminal

Workflow: Initial Setup

Prerequisites

• Claude Code installed and authenticated
• IDE installed and configured
• Terminal multiplexer (optional but recommended)

Steps

1. Configure terminal

   • Set up split panes or tmux
   • Test clipboard integration

2. Configure IDE

   • Enable file auto-reload
   • Set up diff viewer shortcuts
   • Install recommended extensions

3. Test integration

   • Have Claude edit a file
   • Verify IDE shows changes
   • Test undo/redo flow

Common Integration Issues

Best Practices

1. Use split terminals - Keep Claude visible while working
2. Review diffs before committing - IDE diff tools are faster than reading
3. Copy file paths liberally - Saves Claude from searching
4. Persist sessions - Use tmux/screen for long-running work
5. Configure shortcuts - Quick terminal switching is essential

Reference Files