Claude Code in VS Code: de ultieme setup

Claude Code in VS Code: De Ultieme Setup Guide voor 2025

Waarom Claude Code + VS Code?

• Uitstekende code editing features
• Enorme extension marketplace
• Geintegreerde terminal
• Git integratie
• Debugging tools
• Multi-language support

• Diepe codebase understanding
• Multi-file editing
• Intelligente code generatie
• Bug fixing en analysis
• Context-aware suggestions

Overzicht: Claude Code + VS Code Opties

Methode 1: Claude Code CLI in VS Code Terminal

Stap 1: Installeer Claude Code CLI

# Via npm (Node.js 18+ required)
npm install -g @anthropic-ai/claude-code

# Controleer installatie
claude --version
# Output: claude-code v1.x.x

# Als npm niet werkt, probeer:
npm install -g @anthropic-ai/claude-code --force

# Permission error op macOS/Linux?
sudo npm install -g @anthropic-ai/claude-code

# Of gebruik nvm voor betere npm management
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 20
nvm use 20
npm install -g @anthropic-ai/claude-code

Stap 2: Authenticatie

# Login met je Anthropic account
claude login

# Dit opent je default browser
# Log in met je Anthropic account
# Autoriseer de CLI applicatie
# Je wordt terug geredirect

# Verifieer login
claude config show

• Browser OAuth (aanbevolen): Veiligste methode
• API Key: Voor automation en CI/CD

# API key methode (alternatief)
export ANTHROPIC_API_KEY=sk-ant-api-xxxxx

Stap 3: Gebruik in VS Code Terminal

1. Open VS Code
2. Open je project folder: File → Open Folder
3. Open de terminal: Ctrl+` (backtick) of View → Terminal
4. Start Claude Code: Type claude en druk Enter

# In VS Code terminal
$ claude

╭─────────────────────────────────────────────╮
│  Claude Code v1.0.23                        │
│  Type your request or /help for commands    │
╰─────────────────────────────────────────────╯

>

Praktische Workflows met CLI

> Leg uit wat de functie in src/utils/parser.js doet

# Claude analyseert de file en geeft uitgebreide uitleg

> Er is een bug in de checkout flow - orders worden dubbel aangemaakt

# Claude doorzoekt de codebase, vindt de bug, en stelt fixes voor

> Voeg dark mode toe aan de applicatie

# Claude identificeert relevante files
# Maakt een implementatie plan
# Genereert de benodigde code changes
# Vraagt om bevestiging voor elke change

> Refactor de authentication module naar async/await

# Claude vindt alle auth-gerelateerde files
# Toont diffs per file
# Past changes atomisch toe

VS Code Terminal Tips

1. Click het split icon in terminal header
2. Houd Claude in één panel, run commands in de andere

1. Click + in terminal panel
2. Rename to "Claude" (right-click → Rename)
3. Houd deze altijd open voor Claude Code

Voordelen van CLI Methode

• Volledige functionaliteit: Alle Claude Code features beschikbaar
• Geen extra extensions: Werkt out of the box
• Consistent: Zelfde ervaring als standalone CLI
• Updates: Krijg direct nieuwe features via npm update
• Keyboard-focused: Perfecte voor power users

Nadelen van CLI Methode

• Geen inline suggestions: Moet wisselen naar terminal
• Copy-paste nodig: Code moet handmatig worden overgenomen (of auto-applied)
• Aparte interface: Niet visueel geintegreerd in editor

Methode 2: Officiële Claude Extensions

Claude for VS Code (Community Extension)

1. Open VS Code
2. Ga naar Extensions (Ctrl+Shift+X)
3. Zoek "Claude" of "Anthropic"
4. Bekijk ratings en reviews
5. Installeer een vertrouwde extension

// settings.json
{
  "claude.apiKey": "sk-ant-api-xxxxx",
  "claude.model": "claude-3-5-sonnet-20241022",
  "claude.maxTokens": 4096
}

• Sidebar chat panel
• Code selection → Ask Claude
• Inline suggestions (sommige extensions)
• Keyboard shortcuts

Keyboard Shortcuts (Extension-dependent)

Methode 3: Continue.dev Extension

Waarom Continue?

• Open source: Transparant en community-driven
• Multi-provider: Werkt met Claude, GPT-4, lokale modellen
• Uitgebreide features: Chat, autocomplete, edit, actions
• Actief onderhouden: Frequente updates

Installatie

1. Open VS Code Extensions (Ctrl+Shift+X)
2. Zoek "Continue"
3. Installeer "Continue - Codestral, Claude, GPT & more"
4. Restart VS Code

Claude Configuratie

• Click Continue icon in sidebar
• Click gear icon of open command palette
• Search "Continue: Open Config"

{
  "models": [
    {
      "title": "Claude 3.5 Sonnet",
      "provider": "anthropic",
      "model": "claude-3-5-sonnet-20241022",
      "apiKey": "sk-ant-api-xxxxx"
    },
    {
      "title": "Claude 3.5 Haiku (Fast)",
      "provider": "anthropic", 
      "model": "claude-3-5-haiku-20241022",
      "apiKey": "sk-ant-api-xxxxx"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Claude Haiku",
    "provider": "anthropic",
    "model": "claude-3-5-haiku-20241022",
    "apiKey": "sk-ant-api-xxxxx"
  },
  "allowAnonymousTelemetry": false
}

• macOS/Linux: ~/.continue/config.json
• Windows: %USERPROFILE%\.continue\config.json

Continue Features met Claude

// Type een comment en wacht
// TODO: Create a function that validates email
// [Tab] om suggestion te accepteren

{
  "tabAutocompleteOptions": {
    "useFileSuffix": true,
    "maxPromptTokens": 1024,
    "debounceDelay": 350
  }
}

• Open met Ctrl+L
• Selecteer code en voeg toe aan context met Ctrl+Shift+L
• Vraag Claude om uitleg, fixes, of verbeteringen

• Selecteer code
• Ctrl+I om edit mode te openen
• Beschrijf de gewenste change
• Review en accept

• Explain this code
• Write tests for this
• Find bugs
• Optimize this
• Add documentation

Continue Keyboard Shortcuts

Methode 4: Cody by Sourcegraph

Wanneer Cody?

• Je werkt in een team/enterprise
• Je hebt SSO/compliance requirements
• Je wilt codebase-wide context
• Je hebt Sourcegraph al

Installatie

1. Installeer "Cody AI" extension in VS Code
2. Maak een Sourcegraph account (gratis tier beschikbaar)
3. Connect je account in VS Code
4. Configureer Claude als model (als beschikbaar in je plan)

Cody Features

• Codebase Context: Begrijpt je hele repository
• Recipes: Pre-built prompts voor common tasks
• Enterprise: SSO, audit logs, data privacy
• Multi-repo: Zoek across repositories

Optimale Setup: Mijn Aanbeveling

Voor Beginners

1. Installeer Continue.dev extension
2. Configureer met Claude API key
3. Begin met chat sidebar voor vragen
4. Experimenteer met inline suggestions

Voor Gevorderde Users

1. Installeer Claude Code CLI globaal
2. Installeer Continue.dev voor autocomplete
3. Gebruik CLI voor complexe taken (refactoring, analysis)
4. Gebruik Continue voor quick questions en autocomplete

Voor Teams/Enterprise

1. Deploy Cody met enterprise configuratie
2. Installeer Claude Code CLI voor power users
3. Configureer SSO en compliance settings
4. Train team op beide tools

VS Code Settings voor Optimale AI Ervaring

{
  // Editor settings voor AI
  "editor.inlineSuggest.enabled": true,
  "editor.suggestOnTriggerCharacters": true,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  
  // Terminal settings voor Claude CLI
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.scrollback": 10000,
  
  // Continue settings (als je Continue gebruikt)
  "continue.enableTabAutocomplete": true,
  "continue.telemetryEnabled": false,
  
  // File associations voor betere AI context
  "files.associations": {
    "*.mdx": "markdown",
    ".env*": "properties"
  },
  
  // Exclude noisy files van AI context
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true
  }
}

Praktische Workflows: Van Beginner tot Expert

Workflow 1: Bug Fixing (Beginner)

1. Open file met bug
2. Selecteer de problematische code
3. Open Continue chat (Ctrl+L)
4. Type: "Er is een bug in deze code: [beschrijf symptoom]"
5. Review Claude's analyse
6. Accept suggested fix of vraag om alternatieven

Workflow 2: Code Generation (Intermediate)

1. Open terminal in VS Code
2. Start Claude Code: `claude`
3. Type: "Maak een React component voor [beschrijving]"
4. Review generated code
5. Accept en laat Claude de file aanmaken
6. Open file in editor
7. Gebruik Continue voor kleine tweaks

Workflow 3: Large Refactoring (Advanced)

1. Open terminal, start `claude`
2. "Analyseer deze codebase en identificeer de 
    authentication-gerelateerde files"
3. Review Claude's analysis
4. "Refactor alle authentication naar een centrale 
    AuthService class"
5. Review diffs per file
6. Accept changes
7. Run tests: `npm test`
8. Als tests falen: "Fix de failing tests"

Workflow 4: Code Review (Expert)

1. Checkout PR branch
2. Start `claude` in terminal
3. "Review de changes in deze branch versus main. 
    Focus op security, performance, en best practices"
4. Review Claude's feedback
5. "Apply de suggested improvements"
6. Commit fixes
7. Push en update PR

Extensions die Goed Samenwerken met Claude

Code Quality

• ESLint: Catch issues before AI does
• Prettier: Consistent formatting
• Error Lens: Inline error display

Git Integration

• GitLens: Enhanced git features
• Git Graph: Visualize branches

Productivity

• Project Manager: Quick project switching
• Todo Tree: Track TODO comments
• Better Comments: Categorize comments

Language Support

• TypeScript/JavaScript: Built-in
• Python: Python extension
• Prisma: Database schema support

Settings Sync

• Settings Sync (built-in): Sync across machines

Troubleshooting Veelvoorkomende Problemen

Extension Werkt Niet

# Reset VS Code extension host
1. Ctrl+Shift+P
2. Type: "Developer: Restart Extension Host"
3. Wait for reload

# Clean reinstall
1. Uninstall extension
2. Delete extension folder:
   - macOS: ~/.vscode/extensions/[extension-name]
   - Windows: %USERPROFILE%\.vscode\extensions\[extension-name]
3. Reinstall

Claude CLI Issues in VS Code Terminal

# Check PATH
echo $PATH | grep npm

# Als npm niet in PATH:
export PATH="$PATH:$(npm bin -g)"

# Permanent fix (add to ~/.zshrc or ~/.bashrc):
echo 'export PATH="$PATH:$(npm bin -g)"' >> ~/.zshrc
source ~/.zshrc

API Key Issues

# Check API key is set
claude config show

# Reset authentication
claude logout
claude login

# Alternative: set environment variable
export ANTHROPIC_API_KEY=sk-ant-api-xxxxx

Rate Limiting

• Wacht enkele minuten
• Upgrade naar Claude Pro/Max
• Gebruik efficiëntere prompts
• Batch requests waar mogelijk

Traag Response

• Check internet verbinding
• Verklein de context (sluit onnodige files)
• Gebruik specifiekere prompts
• Probeer Claude Haiku voor snellere responses

Veelgestelde Vragen

Kan ik Claude Code gratis gebruiken in VS Code?

Wat is beter: Extension of CLI?

• Extension: Makkelijker, visueel, beter voor beginners en quick tasks
• CLI: Krachtiger, meer features, beter voor complexe taken

Werkt Claude Code met Remote Development?

Hoeveel kost deze setup?

Is mijn code veilig?

• Claude Pro+: Code wordt niet gebruikt voor training
• API calls zijn encrypted
• Check Anthropic's privacy policy voor details
• Voor sensitive code: overweeg enterprise options

Conclusie

1. Start met de CLI in VS Code terminal - Dit geeft je de volledige Claude Code ervaring
2. Voeg Continue.dev toe - Voor inline autocomplete en quick chat
3. Optimaliseer je settings - Configureer VS Code voor de beste AI ervaring
4. Experimenteer met workflows - Vind wat werkt voor jouw manier van werken

Mijn Persoonlijke Setup

- VS Code met standaard extensions (ESLint, Prettier, GitLens)
- Claude Code CLI voor complexe taken
- Continue.dev met Claude Haiku voor autocomplete
- Dedicated terminal tab voor Claude
- Keyboard shortcuts memorized