Claude Code VSCode Setup Guide

Updated May 2026 · 5-minute read

Claude Code works two ways in VSCode: as a CLI tool in the integrated terminal (the primary workflow), and as a native extension that adds sidebar panels and inline diff views. This guide covers both, starting with the CLI approach that works everywhere.

Prerequisites

• Node.js 18 or later (node --version to check)
• An Anthropic API key from console.anthropic.com
• VSCode 1.85 or later

Step-by-Step Installation

npm install -g @anthropic-ai/claude-code

export ANTHROPIC_API_KEY="sk-ant-..."

# Launch Claude Code in your project root
claude

# Or with a specific task
claude "refactor this auth module to use JWT"

# Or on a specific file
claude edit src/auth/middleware.ts

# Project: My App
Stack: Next.js 14, TypeScript, Prisma, PostgreSQL

## Dev Commands
- Start: `npm run dev`
- Test: `npm test`
- Lint: `npm run lint`

## Conventions
- Use conventional commits
- No inline comments unless WHY is non-obvious
- Tests must cover happy path + edge cases

Configuring VSCode for Claude Code

Recommended VSCode Settings

Add to your settings.json (Ctrl+Shift+P → "Open User Settings JSON"):

{
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "editor.formatOnSave": true,
  // Claude Code diff viewer uses side-by-side by default
  "diffEditor.renderSideBySide": true,
  // Helps Claude Code detect file changes faster
  "files.watcherExclude": {
    "**/.git/**": true,
    "**/node_modules/**": true
  }
}

Useful Keybindings

Add to keybindings.json (Ctrl+Shift+P → "Open Keyboard Shortcuts JSON"):

[
  {
    "key": "ctrl+shift+a",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "claude edit ${file}\n" }
  },
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.terminal.sendSequence",
    "args": { "text": "claude /review ${file}\n" }
  }
]

Workspace Configuration

For team projects, add a .vscode/settings.json to your repo:

{
  "claude.enabled": true,
  "claude.model": "claude-opus-4-7",
  "claude.permissions.autoApprove": ["Read", "Edit"],
  "claude.permissions.requireConfirm": ["Bash", "Write"]
}

Troubleshooting

Command not found: claude

The global npm bin directory isn't in your PATH. Run npm config get prefix and add /bin to your PATH.

API key not found

VSCode's integrated terminal may not inherit your shell profile. Either: (a) set the API key in VSCode's terminal environment settings, or (b) add it to a .env file and source it manually.

Extension not detecting CLI

The extension needs the CLI installed. Run which claude in VSCode's terminal. If it works there, restart VSCode. If not, reinstall the CLI.

Frequently Asked Questions

Do I need the VSCode extension to use Claude Code?

No. Claude Code works perfectly in VSCode's integrated terminal (Ctrl+`) without any extension. The extension adds a sidebar panel and inline diff views, but all core functionality runs through the CLI. Install the extension only if you want the visual enhancements.

Why does the claude command not work in VSCode's terminal?

Most likely cause: VSCode's terminal isn't inheriting your shell PATH. Fix options:

• Run npm config get prefix and add that path's /bin folder to your PATH in ~/.zshrc or ~/.bashrc
• Configure VSCode to launch a login shell: add "terminal.integrated.shellArgs.osx": ["-l"] to settings.json
• Fully quit and relaunch VSCode after the initial CLI install

How do I update Claude Code to the latest version?

npm update -g @anthropic-ai/claude-code
claude --version  # verify the new version

Claude Code also notifies you in-session when a newer version is available.

Does Claude Code work with VSCode Remote SSH?

Yes — this is one of Claude Code's key advantages over GUI-only tools. When using Remote SSH, open a terminal in the remote session and run claude there. It runs on the remote machine directly. Set ANTHROPIC_API_KEY in the remote shell's ~/.bashrc or ~/.zshrc so it's available in every SSH session.

How do I set up Claude Code for my whole team?

Commit a CLAUDE.md to your project root with shared conventions and commands. Optionally add a .vscode/settings.json with Claude settings. Each team member installs the CLI individually and sets their own ANTHROPIC_API_KEY. The CLAUDE.md is the shared source of truth — everyone gets the same project context automatically.

Can Claude Code access all files in my project?

Yes. Claude Code operates from the directory you launch it in and can read any file in the tree. By default it asks permission before writing files or running shell commands. Configure auto-approval for safe operations in CLAUDE.md:

claude config permissions.autoApprove "Read,Edit"

→ Next: Full Commands Reference

→ Claude Code vs Cursor — which is right for you?

← Back to Claude Code Workflows Home