Claude Code VSCode-extensie: zo gebruik je Claude Code in VS Code, stap voor stap

Wat heb je nodig

Wat heb je nodig voor Claude Code in VS Code?

Zes dingen, en de meeste heb je al. Alleen het Claude-plan kost geld. De extensie zelf is gratis, maar Claude Code zit niet in het gratis Claude-plan.

Welk plan kies je?

Voor een eerste tooltje is Pro genoeg. Je gebruik in VS Code telt mee in dezelfde limiet als je chats op claude.ai. Chat je overdag veel, dan heb je 's middags minder ruimte voor Claude Code. De prijzen in euro en de verschillen tussen de plannen staan op Claude-abonnementen.

Werk je op een laptop van de zaak?

Op een beheerde werkplek kan je IT-afdeling het installeren van extensies hebben beperkt. Vraag het vooraf, dan sta je niet halverwege stil. Heeft je organisatie Claude Team of Enterprise, log dan in met dat zakelijke account en niet met een privé-Pro. Dan gelden de afspraken die je werkgever met Anthropic heeft gemaakt. Wat er met je code en bestanden gebeurt, lees je op Claude Code privacy.

Installeren

Claude Code in VS Code installeren: zes stappen

Volg de stappen in deze volgorde. Stap 2 en stap 6 slaan de meeste video's over, en juist daar lopen beginners vast.

Verschijnt de extensie niet?

Herstart VS Code of kies Developer: Reload Window in het commandopalet (Cmd+Shift+P of Ctrl+Shift+P). Daarna staat het Spark-icoon in de activiteitenbalk.

Wil je een rondleiding?

Kies in het commandopalet Claude Code: Open Walkthrough. Dat is de ingebouwde uitleg van Anthropic over de basis. Handig als naslag naast deze tutorial.

Werkt het?

Werkt het? Zo controleer je de installatie met je eerste prompt

Vijf controles van samen een paar minuten. Ze vertellen je of je bent ingelogd, met welk account, of Claude je map ziet en hoe goedkeuren voelt.

Geen antwoord of een foutmelding?

Zoek de tekst die je ziet op in de probleemtabel verderop. Twee meldingen komen het vaakst voor bij de eerste keer: Not logged in en 403 Request not allowed. Beide gaan over je account, niet over VS Code.

De eerste 30 minuten

Je eerste 30 minuten: een klein intern tooltje bouwen zonder codeerervaring

Het beste eerste project is klein, draait alleen op je eigen computer en werkt met nepdata. Ons voorbeeld: een pagina die een CSV-export inleest, zoals uit je boekhoud- of urenpakket, en per klant het totaal laat zien. Eén HTML-bestand, niets te installeren, en je opent het gewoon in je browser.

De prompt voor je eerste tooltje

/plan Ik ben geen programmeur. Bouw in deze map een eenvoudige webpagina: één bestand index.html, zonder installaties of externe bibliotheken. De pagina laat me een CSV-bestand kiezen en toont per klant het totaal van de kolom bedrag, gesorteerd van hoog naar laag.
Maak ook voorbeeld.csv met 12 verzonnen regels (kolommen: datum, klant, omschrijving, bedrag). Gebruik een puntkomma als scheidingsteken en een komma als decimaalteken, zoals Nederlandse exports vaak doen.
Leg in je plan in gewone taal uit welke bestanden je maakt en hoe ik het test. Vraag het eerst als iets onduidelijk is.

Waarom deze prompt werkt

"Ik ben geen programmeur" zorgt dat het plan in gewone taal komt. "Zonder installaties of externe bibliotheken" houdt het tooltje klein en voorkomt dat de pagina code van internet laadt. De zin over puntkomma's en komma's vangt een fout die bij Nederlandse exports snel optreedt: een bedrag als 1.250,50 wordt verkeerd gelezen en je totalen kloppen niet, zonder dat de pagina een foutmelding geeft.

Hoe een bijna goed resultaat eruitziet

Vaak werkt de eerste versie met voorbeeld.csv, maar niet met een echte export. De kolom heet dan anders of er staat een titelregel boven. Schrijf dan niet "het werkt niet", maar beschrijf wat je ziet: "Met mijn export blijft de tabel leeg. De kolom heet Bedrag incl. btw en de eerste regel is een titel. Laat me zelf kiezen welke kolom het bedrag is." Claude laat de aanpassing weer als diff zien.

Gebruik nepdata, geen klantbestand

Wat Claude in je map leest, gaat naar Anthropic om verwerkt te worden. Zet in je eerste sessies dus geen echte export met namen, adressen of bedragen van klanten in de map. Werkt het tooltje met nepdata, spreek dan met de privacyverantwoordelijke in je organisatie af of en met welk account je echte gegevens gebruikt. Onder de AVG is dat een keuze van je organisatie, niet van de tool.

Modi, diffs, checkpoints

Plan mode, diffs, @-mentions en checkpoints in de VS Code-extensie

Onderaan het invoerveld staat de modus. Die bepaalt hoeveel Claude zonder te vragen mag doen. Het is de belangrijkste knop van de extensie, en je wisselt hem met één klik.

Diffs beoordelen

In Manual zie je bij elke bewerking het origineel naast het voorstel. Je kunt accepteren, weigeren of Claude vertellen wat hij anders moet doen. Onder elk onderdeel van een wijziging staan de knoppen Accept this change en Reject this change, zodat je per stukje kiest. Pas je zelf iets aan in de diff voordat je accepteert, dan krijgt Claude te horen dat jij het hebt veranderd.

@-mentions: Claude naar het juiste bestand wijzen

Typ @ en een deel van een bestandsnaam, bijvoorbeeld @index, en Claude leest dat bestand mee. Een map geef je aan met een schuine streep erachter, zoals @data/. Selecteer je regels in de editor, dan ziet Claude die automatisch. Met Option+K (Mac) of Alt+K (Windows en Linux) zet je er een verwijzing als @index.html#5-10 van in je prompt. Hoe preciezer je wijst, hoe kleiner de kans dat Claude het verkeerde bestand aanpast.

Plan mode

Typ /plan of kies Plan in de modusaanduiding. VS Code opent het plan als Markdown-document waarin je per regel opmerkingen zet. Pas als jij akkoord geeft, gaat Claude bouwen. Met /plan open zie je het plan later opnieuw in de editor.

Checkpoints: terug naar een eerder moment

Beweeg je muis over een eerder bericht en klik op de terugspoelknop. Je kiest uit Fork conversation from here (nieuw gesprek vanaf dat punt, code blijft), Rewind code to here (bestanden terug, gesprek blijft) of Fork conversation and rewind code (allebei). Checkpoints volgen alleen wat Claude met zijn eigen bewerkingstool deed. Een bestand dat alleen door een terminalcommando is veranderd, gaat niet terug. Voor echte versiegeschiedenis heb je Git nodig.

Bypass permissions laat je uit

Er bestaat ook een modus die alles zonder vragen doet. Die verschijnt pas als je in de instellingen Allow dangerously skip permissions aanzet. Anthropic raadt hem alleen aan in afgeschermde omgevingen zonder internettoegang. Voor een intern tooltje op je eigen laptop heb je hem niet nodig.

De valkuil

De grootste valkuil in Claude Code in VS Code: alles auto-accepteren

Vanaf Claude Code-versie 2.1.283 start de extensie standaard in Auto, tenzij je zelf iets anders kiest. Dat scheelt klikken, en een apart controlemodel houdt risicovolle acties tegen. Maar het betekent ook dat je als beginner een heel tooltje kunt laten bouwen zonder ooit een diff te zien.

Wat Auto wel en niet bewaakt

Het controlemodel blokkeert standaard onder meer het downloaden en uitvoeren van code van internet, git reset --hard en deploys naar productie. Het beoordeelt niet of de code doet wat jij bedoelt. Een tooltje dat btw dubbel optelt of een kolom overslaat, komt er gewoon door. In Edit automatically zit die controle niet op bewerkingen: elke bestandswijziging gaat direct door.

Waarom het later pijn doet

Een tooltje dat je niet hebt zien ontstaan, kun je niet uitleggen aan een collega. Je kunt het ook niet repareren als de export van je pakket verandert. En je weet niet of er ergens een wachtwoord of API-sleutel in een bestand is beland. Vraag je dan om "even een fix", dan stapelt Claude nieuwe wijzigingen op code die niemand heeft gelezen.

Onze regel voor beginners

Werk je eerste sessies in Manual en begin elke nieuwe opdracht met /plan. Lees bij elke diff minstens welke bestanden veranderen en waarom. Zet je project in Git zodra het tooltje iets doet wat je wilt bewaren. Daarna wordt Auto tijdwinst in plaats van een gok, want je kunt elke stap terugzien en terugdraaien. Waarom Anthropic Auto toch als standaard koos, lees je in ons artikel over auto mode.

Extensie, CLI of fork

Extensie of Claude Code in de terminal van VS Code, en hoe zit het met Cursor?

De extensie is de grafische variant. Je kunt Claude Code ook in de geïntegreerde terminal van VS Code draaien, of de extensie in een andere editor gebruiken. Extensie en terminal delen dezelfde gespreksgeschiedenis.

Claude Code in de terminal van VS Code

Open de terminal met Ctrl+` (Windows en Linux) of Cmd+` (Mac) en typ claude. Krijg je "command not found", dan klopt dat: de extensie zet claude niet in je PATH, de lijst met mappen waarin je computer naar programma's zoekt. Installeer de CLI dan apart volgens Claude Code installeren. Draai je Claude Code in een losse terminal buiten VS Code, typ dan /ide om hem aan VS Code te koppelen. Met claude --resume pak je een gesprek uit het paneel weer op.

Welke kies je als beginner?

Begin met het paneel: je ziet de diffs, de knoppen en de modus. De CLI heb je nodig voor de volledige set commando's en voor automatisering. Wat die commando's doen, staat op Claude Code commands.

Cursor, Windsurf en andere forks

Cursor is een fork van VS Code, een afgeleide versie met eigen AI-functies. De Claude Code-extensie installeer je daar op dezelfde manier, en Anthropic heeft er een directe installatielink voor. Andere forks, zoals Kiro en Devin Desktop (de editor die eerder Windsurf heette; windsurf.com stuurt nu door naar devin.ai/desktop), halen de extensie uit de Open VSX-registry. Je hebt dan wel twee AI-assistenten naast elkaar, met twee abonnementen. Anthropic noemt andere AI-extensies als mogelijke oorzaak wanneer het Spark-icoon niet verschijnt. Het verschil tussen de twee aanpakken lees je in Claude Code vs Cursor.

Problemen

Claude Code werkt niet in VS Code: melding, oorzaak en oplossing

Zoek de tekst die je ziet in de eerste kolom. De meeste problemen bij de eerste keer gaan over een ontbrekend bestand, een oude versie of je account.

Staat je melding er niet bij?

Anthropic houdt een foutoverzicht bij in de documentatie van de extensie. Bij een limietmelding helpt Claude Code limieten. Kom je er niet uit, kies dan Report a problem onderaan het commandomenu of typ /bug met een korte beschrijving.

Ons oordeel

Ons oordeel: wanneer Claude Code in VS Code wel en niet past

Wij gebruiken VS Code met de extensie als leeromgeving voor medewerkers die zelf kleine tools willen maken. Je ziet de map, de diffs en de terminal in één venster. Dat maakt zichtbaar wat een AI-agent echt doet. Maar het is niet voor elke vraag de juiste plek.

Wel

Voor kleine interne tooltjes die op je eigen computer draaien: een export omzetten, een overzicht per klant maken, een simpel invulformulier, een script dat bestanden hernoemt. En voor iedereen die wil leren welke bestanden er ontstaan en waarom, zodat je later met een ontwikkelaar of collega kunt meepraten.

Niet

Wil je geen code zien, kies dan de Code-tab in Claude Desktop, of vraag Claude in de chat om een artifact. Gaat het om een tool die klantgegevens verwerkt, waar collega's op inloggen of die op internet komt te staan, laat dan een ontwikkelaar meekijken voordat je hem gebruikt. Beveiliging, back-ups en AVG-afspraken bouwt Claude niet vanzelf in.

De fout die we beginners het vaakst zien maken

Te veel in één keer vragen: "bouw een klantportaal met login en facturen". Claude doet dat, maar je krijgt een stapel bestanden die je niet kunt beoordelen. Begin met één scherm dat één ding doet en test het met de hand. Voeg daarna per opdracht één functie toe, en begin elke opdracht met /plan.

Een voorbeeld uit het MKB

Een officemanager telt elke maand in Excel per klant de gewerkte uren op uit een export van het urenpakket. Met een tooltje zoals in deze tutorial wordt dat: export openen in de pagina, overzicht kopiëren. De echte export blijft op de eigen computer, want het tooltje draait in de browser. Alleen de code en het nepbestand zijn via Claude gegaan. Dat is de schaal waarop je dit veilig leert.

Wat nu?

Wat nu? Je volgende stappen na je eerste sessie

Je hebt een werkende extensie en een eerste tooltje. Dit zijn de logische vervolgstappen, in deze volgorde.

1. Zet je project in Git

Met versiebeheer kun je elke stap terugdraaien, ook na de sessie en ook wat checkpoints missen. Claude Code met GitHub laat zien hoe.

2. Geef Claude vaste instructies

In een CLAUDE.md, een tekstbestand met afspraken voor je project, zet je eenmalig dat je geen programmeur bent en geen installaties wilt. Typ / in het invoerveld en kies bij Customize de optie Instructions om het bestand te maken.

3. Laat je werk nakijken en uitbreiden

Laat Claude je code controleren met de tutorial code review met Claude. Wil je Claude laten werken met andere systemen, lees dan een MCP-server toevoegen. Een eigen site bouwen staat in een website bouwen met Claude.

4. Lees verder over Claude Code

De Claude Code-gids geeft het overzicht, alle functies de details. Wil je dit met je team leren, met opdrachten uit jullie eigen werk? Dat doen we in de Claude Code Masterclass.