headroom.walls.sh · vscode

Claude Code + VS Code

Claude Code has a first-party VS Code extension. It wires Claude Code's terminal agent directly into your editor: diffs open in VS Code, files are linked, the terminal runs inline. This page covers installing the extension, the workflow, and how to get Headroom monitoring your usage alongside it.

The VS Code extension

The Claude Code extension for VS Code is published by Anthropic. It adds:

• Inline diff view — when Claude Code edits a file, the diff opens in VS Code's native diff viewer instead of in the terminal
• File link integration — file paths in Claude Code's output are clickable and open in your editor
• Terminal integration — Claude Code runs in VS Code's integrated terminal with full access to your workspace
• Sidebar panel — a dedicated panel for Claude Code conversations alongside your file tree

Installing the extension

1. Open VS Code → Extensions panel (Cmd+Shift+X)
2. Search for Claude Code — published by anthropic
3. Click Install
4. If you haven't installed the Claude Code CLI: npm install -g @anthropic-ai/claude-code
5. Open a new terminal in VS Code (Ctrl+`) and type claude

The extension detects the CLI automatically. On first launch, Claude Code installs its statusLine hook (which is what Headroom reads).

The workflow: Claude Code in VS Code

The typical workflow once the extension is installed:

1. Open your project in VS Code
2. Open the integrated terminal (Ctrl+`)
3. Type claude to start a session
4. Give Claude Code a task: "Add error handling to the API client"
5. Claude Code reads files, plans changes, and edits — diffs open in VS Code automatically
6. Accept or reject changes in the diff viewer, give feedback in the terminal

The flow is: you stay in VS Code, Claude Code works in the terminal below. You see every edit as a native VS Code diff before it's applied.

VS Code settings.json and the statusLineHook

Claude Code's settings live at ~/.claude/settings.json — separate from VS Code's settings.json. The key setting for Headroom is the statusLineHook entry, which Claude Code installs automatically on first launch:

{
  "hooks": {
    "statusLineHook": {
      "type": "command",
      "command": "node ~/.claude/headroom-hook.mjs"
    }
  }
}

This hook runs each time Claude Code processes a prompt and writes your current usage to ~/.claude/headroom-usage.json. Headroom reads that file every 15 seconds — the same data Claude Code shows with /usage, surfaced in your menu bar.

→ How the statusLineHook works · Full settings.json reference

Claude Code vs GitHub Copilot in VS Code

Both can be active in VS Code simultaneously. They serve different moments:

If you use Copilot with Claude models (BYOK), both tools draw from the same Anthropic API quota — your Claude Code 5h/7d windows are shared with Copilot's Claude usage.

→ Full Claude Code vs Copilot comparison

Project-level CLAUDE.md in VS Code

Drop a CLAUDE.md file in your project root and Claude Code reads it as project context — similar to how VS Code reads .vscode/settings.json for editor preferences, but for AI instructions:

# This project

- TypeScript, strict mode
- Tests with Vitest — run `npm test`
- Never edit generated files in `dist/`
- Prefer functional patterns; avoid classes

VS Code users often already have .vscode/settings.json in their project — CLAUDE.md is the equivalent for Claude Code's project context.

→ Full CLAUDE.md guide

Keyboard shortcuts in VS Code + Claude Code

Inside the Claude Code terminal (the integrated terminal running claude):

Pressing Esc early — before Claude Code goes too far down a wrong path — saves session budget. Each model call counts toward your 5h rolling window.

→ Full Claude Code keyboard reference

Monitoring usage while working in VS Code

VS Code fills the screen — you're watching diffs and file trees, not a terminal. Claude Code's session (5h) and weekly (7d) usage meters are invisible unless you run /usage manually. Headroom keeps them in your menu bar, color-coded before a limit stops you mid-session:

Reads the same data the VS Code extension uses. Zero network calls, no API key. macOS 13+, free.

→ Claude Code settings.json reference
→ Hooks: PreToolUse, PostToolUse, statusLineHook
→ Claude Code keyboard shortcuts
→ Claude Code vs GitHub Copilot
→ Claude Code vs Windsurf
→ Claude Code vs Cursor