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

claude --chrome

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:

:set autoread

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

:Gdiff

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

export TERM=xterm-256color

tmux

Edit

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