Overview

Claude Code is Anthropic's official CLI and IDE companion for Claude. While Claude Code runs natively in the terminal, integrating it with Visual Studio Code provides a richer editing experience: in-editor diffs, faster file navigation, and the ability to keep an existing VS Code workflow. This tutorial covers installation, authentication, IDE wiring, and common errors as of April 2026.

Prerequisites

Visual Studio Code 1.85 or newer
Node.js 20.x or newer (Claude Code is distributed as an npm package)
An Anthropic account with API access or a Claude Pro/Max subscription with Claude Code entitlement
macOS, Linux, or Windows (WSL2 recommended on Windows)

Step 1: Install Claude Code

Install the CLI globally via npm:

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

A successful install reports a version such as claude-code 1.x.x. If npm install fails with permission errors on macOS or Linux, fix the npm prefix to a user-owned directory rather than running with sudo:

mkdir -p ~/.npm-global
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

Step 2: Authenticate

Run the auth flow:

claude auth

The CLI opens a browser window to console.anthropic.com. Sign in with the same account holding the API or Claude subscription. The browser returns a one-time code; paste it back into the terminal. Credentials are stored in ~/.claude/credentials.json with file permissions 600.

Verify auth by running:

claude --help
claude "What model am I using?"

Step 3: Install the VS Code Extension

Open VS Code and install the official "Claude Code" extension from the Marketplace:

Open Extensions (Cmd/Ctrl+Shift+X)
Search for "Claude Code" — publisher Anthropic
Click Install

The extension auto-detects the global claude binary if it is on the PATH. If not, set the path explicitly in VS Code settings:

{
  "claudeCode.cliPath": "/Users/yourname/.npm-global/bin/claude"
}

Step 4: Open the Claude Code Panel

Open the Command Palette (Cmd/Ctrl+Shift+P) and run Claude Code: Open Chat. The panel docks in the sidebar. From here:

Send prompts that include the active editor file as context
Accept or reject diffs inline before they touch disk
Use / slash commands the same way you would in the terminal

Step 5: Configure Per-Project Settings

Each project can have a .claude/settings.json file that controls allowed tools, environment variables, and hooks. A minimal config:

{
  "permissions": {
    "allow": ["Read", "Edit", "Bash(git status)", "Bash(npm test)"]
  }
}

Storing this file in the repository root keeps the team aligned on which Bash commands Claude is permitted to run unattended. A CLAUDE.md file at the repo root provides project-specific instructions that the agent reads on every session.

Common Errors

claude: command not found — The npm global bin directory is not on PATH. Add ~/.npm-global/bin (or your npm prefix) to the shell rc file.
401 Unauthorized — The auth token expired or the account lost API access. Re-run claude auth.
rate limit exceeded — Either the daily message budget on a Pro plan is hit, or the API tier is too low for the model selected. Check usage at console.anthropic.com.
VS Code extension shows "CLI not found" — Set claudeCode.cliPath explicitly. Restart VS Code after changing the setting.
Diffs do not apply — The extension requires the workspace to be a single root folder; multi-root workspaces can confuse path resolution. Open one folder at a time.

Tips

Pin the Claude Code panel to the secondary sidebar so it sits next to a terminal panel; switching context between chat and shell is faster
Keep CLAUDE.md in version control so onboarding new contributors does not require re-explaining repo conventions
For privacy-sensitive code, set ANTHROPIC_DISABLE_TELEMETRY=1 in the shell environment

Editor's Note: We use Claude Code with VS Code daily at ShadowGen for the Automation Atlas codebase and several client engagements. The VS Code extension cuts roughly 30-40% of context-switching time compared to terminal-only usage, mainly because diffs review inline with the existing tab. The biggest practical caveat is the per-project permissions.allow list — without one, the agent prompts on every shell command, which destroys flow. Spending 10 minutes upfront enumerating safe Bash commands per repo pays back within a single session. We have not yet hit a case where the VS Code extension and terminal disagree on auth state, but if it ever happens, deleting ~/.claude/credentials.json and re-running claude auth resolves it.

How to Set Up Claude Code with VS Code in 2026

Overview

Prerequisites

Step 1: Install Claude Code

Step 2: Authenticate

Step 3: Install the VS Code Extension

Step 4: Open the Claude Code Panel

Step 5: Configure Per-Project Settings

Common Errors

Tips

Tools Mentioned

Related Guides

Related Rankings

Common Questions