Claude Code for VS Code

Claude Code is an official VS Code extension from Anthropic that brings AI-powered coding assistance directly into your IDE. The extension provides a native graphical interface for Claude Code, allowing you to review and edit AI-generated plans, accept diffs inline, @-mention files with specific line ranges, and maintain conversation history across multiple tabs.

Key Features

• Visual Diff Review: Review and approve code changes with inline diffs before accepting them
• @-Mention References: Reference specific files and line ranges in your prompts with Alt+K
• Plan Review: Review Claude’s planned changes before execution
• Multi-Conversation: Open multiple conversations in separate tabs or windows
• Terminal Mode: Optional CLI-style interface within VS Code
• Third-Party Provider Support: Works with Amazon Bedrock, Google Vertex AI, and Microsoft Foundry
• Customizable Layout: Drag and reposition the Claude panel anywhere in VS Code
• Keyboard Shortcuts: Quick access to Claude with Cmd+Shift+Esc or Ctrl+Shift+Esc

Use Cases

• Code generation and refactoring with visual diff approval
• Debugging with context-aware file references
• Code explanation for specific line ranges
• Documentation writing with workspace context
• Multi-file edits with plan review

Prerequisites

• VS Code: Version 1.98.0 or higher
• relaxAI API Key: Get your API key from relaxAI

Note

You don’t need to install the Claude Code CLI separately. However, some features like MCP server configuration require the CLI. The extension and CLI share the same conversation history and settings.

Setup Instructions

1. Install the Claude Code Extension

   Install from VS Code:

   • Press Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux) to open Extensions
   • Search for “Claude Code”
   • Click Install

   Or install directly: Install for VS Code

   Tip

   You may need to restart VS Code or run “Developer: Reload Window” from the Command Palette after installation.

2. Disable Login Prompt

   Since we’re using relaxAI instead of Anthropic’s API:

   • Open VS Code Settings: Cmd+, (Mac) or Ctrl+, (Windows/Linux)
   • Search for “Claude Code login”
   • Check Disable Login Prompt

   Or click this link: Disable Login Prompt setting

3. Configure relaxAI as Provider

   type / in the Claude input box and select General Config.

   

   this will be open the vscode settings to the Claude Code General Config section.

   

   click on Edit in settings.json link to open the settings.json file.

   Add the following configuration to set relaxAI as the LLM provider:

   "claudeCode.environmentVariables": [
       {
           "name": "ANTHROPIC_API_KEY",
           "value": "rak_vwJnphMl"
       },
       {
           "name": "ANTHROPIC_BASE_URL",
           "value": "https://api.relax.ai"
       }
   ],
   "claudeCode.selectedModel": "<model_name>",

4. Verify Installation

   • Open any file in VS Code
   • Look for the Spark icon (✱) in the Editor Toolbar (top-right corner)
   • Click the icon to open Claude Code panel
   • Try sending a simple prompt like “Explain what this file does”

Getting Started

Opening Claude Code

The Spark icon (✱) indicates Claude Code throughout VS Code:

Quick Access Methods:

• Editor Toolbar: Click the Spark icon in the top-right corner (requires a file to be open)
• Status Bar: Click ”✱ Claude Code” in the bottom-right corner (works without a file open)
• Command Palette: Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows/Linux), type “Claude Code”
• Keyboard Shortcut: Cmd+Shift+Esc (Mac) or Ctrl+Shift+Esc (Windows/Linux) to open in a new tab

Sending Prompts

Ask Claude to help with your code or files:

1. Basic Prompt: Type your question or request in the chat panel
2. File References: Select text in the editor and press Alt+K to insert an @-mention with file path and line numbers
3. Review Changes: When Claude wants to edit a file, it shows a diff and asks for permission

Example Workflow:

1. Select lines 10-25 in your Python file
2. Press Alt+K to add @-mention
3. Ask: "Why is this function throwing an error?"
4. Claude analyzes and suggests fixes with inline diff
5. Review and accept/reject changes

Security Considerations

With auto-edit permissions enabled, Claude Code can modify VS Code configuration files (like settings.json or tasks.json) that VS Code may execute automatically.

Best Practices:

• Enable VS Code Restricted Mode for untrusted workspaces
• Use manual approval mode instead of auto-accept for edits
• Review changes carefully before accepting them
• Consider using initial permission mode settings for controlled environments

Troubleshooting

Spark Icon Not Visible

If you don’t see the Spark icon in the Editor Toolbar:

1. Open a file: The icon requires a file to be open
2. Check VS Code version: Requires 1.98.0 or higher (Help → About)
3. Restart VS Code: Run “Developer: Reload Window” from Command Palette
4. Disable conflicting extensions: Temporarily disable other AI extensions (Cline, Continue, etc.)
5. Check workspace trust: Extension doesn’t work in Restricted Mode

Alternative: Click ”✱ Claude Code” in the Status Bar (bottom-right)—works without a file open.

Claude Code Never Responds

If Claude Code isn’t responding:

1. Check internet connection: Ensure stable connectivity
2. Verify API key: Check your relaxAI API
3. Check API URL: Confirm baseURL is set to https://api.relax.ai/v1
4. Start new conversation: Try a fresh conversation
5. Try the CLI: Run claude from terminal for detailed error messages
6. Check logs: Use “Claude Code: Show Logs” from Command Palette

Extension Won’t Install

• Ensure VS Code 1.98.0 or higher
• Check VS Code has permission to install extensions
• Try installing from Marketplace website

CLI Not Connecting to IDE

• Ensure you’re using VS Code’s integrated terminal (not external)
• Verify code command is available: Run from Command Palette → “Shell Command: Install ‘code’ command in PATH”
• Check Claude Code is running from within the VS Code workspace

Example Workflows

Code Explanation

1. Open a file you want to understand
2. Click the Spark icon (✱) in Editor Toolbar
3. Ask: "Explain what this file does and its main components"

Debugging Specific Lines

1. Select problematic lines (e.g., 45-52)
2. Press Alt+K to add @-mention
3. Ask: "@filename.py:45-52 Why does this throw an error?"
4. Review Claude's analysis and suggested fixes

Multi-File Refactoring

1. Ask: "Refactor the authentication logic across these files"
2. Review Claude's plan before execution
3. Approve/reject each file change individually
4. Verify changes with your version control

Uninstalling

To remove the Claude Code extension:

1. Open Extensions view: Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows/Linux)
2. Search for “Claude Code”
3. Click Uninstall

To also remove extension data and settings:

rm -rf ~/.vscode/globalStorage/anthropic.claude-code
rm -rf ~/.claude  # Only if you want to remove all Claude Code data

Resources

• Claude Code for VS Code Documentation
• Common Workflows Guide
• Claude Code Settings Reference
• MCP Server Setup
• GitHub Issues
• VS Code Marketplace

---