Claude Code in VS Code: stap voor stap je eerste vibe coding-project bouwen

Claude Code in VS Code: stap voor stap je eerste vibe coding-project bouwen

Door AI verandert softwareontwikkeling snel. Waar je vroeger zelf programmeerde en regel voor regel code schreef, kun je nu steeds makkelijker ontwikkelen met opdrachten in menselijke taal. Je omschrijft wat je wilt bouwen en een AI-tool gaat ermee aan de slag. Dit heet ook wel vibe coding.

Bijvoorbeeld: je geeft een AI-tool zoals Claude Code de volgende opdracht:

Maak een dashboardpagina voor alle verbetervoorstellen in ons bedrijf. Toon een paar kengetallen, een tabel en een filter.

Claude kan vervolgens een plan maken voor het project, code schrijven, aanpassingen doorvoeren en helpen om fouten op te lossen.

In deze blog gaan we aan de slag met Claude Code vanuit VS Code. Dit doen we aan de hand van een demo. Daarmee doorlopen we een werkwijze die je in de praktijk vaak zult gebruiken:

1. Omschrijven wat je wilt bouwen
2. Claude een plan laten maken
3. Beoordelen van het plan
4. Claude de code laten schrijven
5. Bekijken en beoordelen van het resultaat
6. Stap voor stap uitbreiden en/of verbeteren

We zullen aan de slag gaan met een eenvoudig voorbeeld en bij de basis blijven.

Wat is Claude Code?

Claude Code is een populaire vibe-coding-tool van Anthropic waarmee je in menselijke taal kunt werken om met AI code te maken en aanpassen. Bijvoorbeeld om een website of applicatie te bouwen, zonder dat je alles zelf regel voor regel hoeft te programmeren.

Het verschil met een gewone AI-chatbot is belangrijk. Daaraan kun je in de browser bijvoorbeeld vragen:

Maak een opzet voor HTML-code voor een dashboard.

In een gewone AI-chat krijg je meestal uitleg, codevoorbeelden of losse bestanden terug. Die moet je daarna zelf op de juiste plek opslaan, combineren en testen.

Met een vibe-coding-tool zoals Claude Code werkt het anders. Je werkt vanuit een projectmap waarin Claude mee kan kijken en werken. Op basis van jouw opdrachten (prompts) kan Claude bestanden uitlezen, nieuwe bestanden aanmaken, en bestaande bestanden aanpassen. Daarmee kun je met Claude Code echt samenwerken aan projecten.

Binnen projecten, zoals het bouwen van een website, kun je Claude Code voor allerlei taken gebruiken:

• schrijven van alle code voor een nieuwe webpagina
• opzetten van een projectstructuur
• uitleg geven over bestaande code
• opzoeken en oplossen van bugs
• verbeteren van code
• schrijven van documentatie
• toevoegen van tests

Net als wanneer je een mens zou vragen om een website te bouwen, kan Claude ook allerlei aannames doen en fouten maken. Daarom kun je beter niet zomaar alles door Claude laten bedenken en bepalen.

Laat in plaats daarvan Claude eerst een plan maken, beoordeel dat plan en geef waar nodig aanpassingen door, laat Claude dan pas bouwen, ga het resultaat testen, en voer vervolgens stap voor stap verbeteringen door.

In deze blog gaan we ook volgens die werkwijze aan de slag.

Waarom Claude Code gebruiken vanuit VS Code?

Er zijn verschillende manieren om met Claude Code te werken. Bijvoorbeeld via de Desktop-app, de terminal, of met een code-editor (IDE) zoals VS Code.

VS Code is dus een code-editor, waarmee je ook zonder Claude of een andere AI-tool code kunt ontwikkelen. Het bestaat al veel langer dan de huidige AI-tools, en is een fijne tool om aan codeprojecten te werken.

Dit komt vooral doordat je goed ziet wat er gebeurt. Aan de linkerkant zie je bijvoorbeeld alle bestanden in een project. In het midden kun je de code bekijken en aanpassen. Wanneer je met de Claude Code-extensie werkt zie je aan de rechterkant een Claude-chat om zo met Claude samen te werken aan je project.

Je chat met Claude, en Claude maakt bestanden aan en past code aan. Doordat je in VS Code ook mappen, bestanden en code ziet, kun je goed volgen wat er gebeurt.

Je ziet daardoor bijvoorbeeld:

• welke bestanden Claude heeft aangemaakt
• aanpassingen in de code
• voorgestelde wijzigingen
• of de projectstructuur overzichtelijk blijft
• etc.

Wanneer je al met Claude Code hebt gewerkt vanuit de Desktop-app zal je werkwijze na de overstap naar VS Code iets technischer zijn, maar ook leerzamer. Je hoeft nog altijd niet alles zelf te kunnen programmeren om iets te ontwikkelen, maar je moet wel leren beoordelen wat Claude doet.

Wat heb je nodig?

Voor deze demo heb je het volgende nodig:

• VS Code geïnstalleerd op je computer
• Claude Code-extensie in VS Code geïnstalleerd
• een Claude-account met toegang tot Claude Code
• een lege projectmap

De Claude Code-extensie in VS Code:

Daarnaast is Git handig. Git is een manier om wijzigingen in code bij te houden. Daardoor kun je beter zien wat Claude heeft aangepast en kun je wijzigingen later eventueel terugdraaien. Maar voor de demo in deze blog is het niet vereist.

In de demo zullen we met Claude Code stap voor stap een eenvoudig dashboard maken. We gebruiken daarbij bewust geen moeilijke technieken of tools, zodat je snel aan de slag kunt.

Het voorbeeldproject: een eenvoudig dashboard

Als demo in deze blog bouwen we een eenvoudig dashboard dat details moet tonen van verbeterprojecten in een bedrijf. Dat zou gebruikt kunnen worden om voortgang te kunnen monitoren of om prioriteiten te kunnen stellen.

Het dashboard zal uiteindelijk het volgende tonen:

• een aantal KPI's / kengetallen zoals het aantal projecten en de statussen
• een tabel met alle projecten en hun details
• mogelijkheden om te kunnen filteren en te sorteren

Daarmee focussen we stap voor stap op het proces om vanuit VS Code met Claude software te ontwikkelen.

We maken uiteindelijk onderstaand dashboard:

Stap voor stap: een eerste project bouwen

We gaan nu het voorbeeldproject opzetten. In onderstaande stappen doorlopen we met uitleg en screenshots hoe je aan de slag gaat. Van het aanmaken van een nieuwe projectmap tot het laten schrijven van de eerste versie van de code, die we ook weer doorontwikkelen.

Stap 1: maak een projectmap

Maak eerst een nieuwe map aan voor het project op je computer.

Bijvoorbeeld: claude-code-dashboard

Open vervolgens VS Code:

Open de aangemaakte map in VS Code:

Dit is een belangrijke eerste stap. Vanuit VS Code werk je met Claude in de map die je opgeeft. Alles wat Claude voor een project doet, komt in die map. Daarmee hebben zowel jij als Claude goed overzicht over het project.

Tip: maak altijd aparte projectmappen aan voor losse projecten en experimenten, niet alles door elkaar.

Stap 2: open Claude Code in VS Code

Zorg ervoor dat Claude Code geopend is in VS Code. Het kan zijn dat Claude Code al automatisch opent. Het kan ook zijn dat je dit handmatig moet doen. Dit kan op verschillende manieren: door bovenin op het Claude-icoontje te klikken, of met sneltoets Ctrl + Shift + P → Claude Code.

Zorg er vervolgens voor dat je bent ingelogd met je Claude-account.

Controleer voor de zekerheid nog even of in VS Code de juiste map is geopend. Dit zie je linkboven. Daarmee voorkom je dat Claude in een verkeerde map aan de slag gaat.

Stap 3: schrijf de eerste prompt

We starten met een nieuw project, en moeten Claude dus gaan vertellen wat we willen bouwen. Wees daarbij zo duidelijk en specifiek mogelijk.

Gebruik dus geen vage prompt zoals:

Maak een dashboard.

Claude heeft dan geen idee wat voor dashboard het moet worden, en zal alles zelf invullen. Je krijgt vast iets dat werkt, maar niet wat je voor ogen had. Wees dus duidelijk en specifiek, bijvoorbeeld als volgt:

Ik wil een kleine lokale dashboardpagina bouwen voor fictieve interne verbeterprojecten.

Maak een eenvoudige webapp met HTML, CSS en JavaScript. De app moet:
- vier KPI-kaarten tonen: totaal aantal projecten, open projecten, afgeronde projecten en projecten met hoge prioriteit
- een tabel tonen met fictieve interne verbeterprojecten
- kunnen filteren op status, afdeling en prioriteit
- rustige, professionele styling hebben
- lokaal in de browser te openen zijn

Zo'n prompt geeft Claude meer richting. Denk voor een eerste prompt bijvoorbeeld aan:

• wat voor project het moet worden
• welke technologie gebruikt moet worden of juist niet
• welke functies nodig zijn
• hoe uitgebreid het ongeveer moet zijn

Voer de prompt in, maar voer het nog niet uit:

Stap 4: gebruik Plan mode

Gebruik voor je eerste prompt in een nieuw project Plan mode. Daarmee maakt Claude eerst een plan dat je zelf kunt beoordelen en eventueel van feedback kunt voorzien. Pas nadat je akkoord gaat begint Claude met bouwen.

Plan mode is een belangrijk onderdeel van Claude Code, omdat je op die manier goed kunt meedenken bij wat er gebeurt.

Een goed plan maakt het volgende duidelijk:

• welke bestanden Claude wil gaan maken
• wat in elk bestand komt
• welke functionaliteit gebouwd gaat worden
• hoe je het resultaat kunt bekijken
• wat bewust buiten scope blijft

Selecteer de Plan mode, en voer de prompt uit:

Claude gaat nu aan de slag, en maakt een plan:

Claude kan bijvoorbeeld het volgende plan voorstellen:

Plan:
1. Maak index.html voor de structuur, styling en logica van het dashboard.
2. Zorg dat de KPI's automatisch worden berekend.
3. Test of het filter werkt door de pagina lokaal te openen.

Dit is overzichtelijk en je ziet direct wat Claude van plan is te gaan doen. Je kunt er ook vragen over stellen en Claude bijsturen. Dat is een goede manier om met Claude te werken: meteen bijsturen daar waar nodig.

Stap 5: beoordeel het plan

Als Claude klaar is kun je het plan bekijken en beoordelen:

Neem het plan eerst goed door en accepteer het niet zomaar omdat het er indrukwekkend uitziet. Stel daarbij bijvoorbeeld de volgende vragen:

• Is het project dat Claude omschrijft klein genoeg voor een eerste demo / versie?
• Maakt Claude alleen bestanden die we ook echt nodig hebben?
• Gebruikt Claude geen onnodig framework?
• Is het project gewoon lokaal in de browser te openen?
• Zijn alle functies duidelijk?

Voor ons voorbeeldproject is een goed plan eenvoudig. We willen geen complexe functionaliteit zoals een verbinding met een database of gebruikersaccounts. We willen één eenvoudige webpagina met een dashboard.

Stap 6: laat Claude de bestanden maken

Als het plan van Claude goed is, kun je het accepteren.

Terwijl Claude bezig is met deze stap zie je in VS Code links de bestanden verschijnen. In de chat zie je wat Claude aan het doen is, met eventuele uitleg.

In dit voorbeeld heeft Claude één bestand aangemaakt: index.html. Dit kun je ook bekijken in VS Code door het links aan te klikken:

Je kunt hier eens doorheen scrollen om een beeld te vormen van de code die door Claude geschreven is.

In dit voorbeeld zet Claude alles in één index.html-bestand. Voor een eerste demo is dat handig omdat je het bestand direct in de browser kunt openen. In grotere projecten is het vaak overzichtelijker om HTML, CSS en JavaScript op te delen in losse bestanden.

Stap 7: bekijk en test het resultaat

Het aangemaakte bestand index.html kun je openen in de browser. Dit doe je bijvoorbeeld door buiten VS Code naar de projectmap toe te gaan, en het bestand te openen, bijvoorbeeld via de Verkenner in Windows.

Het resultaat in de browser:

Beoordeel wat je hier ziet, denk daarbij bijvoorbeeld aan de volgende punten:

• opent index.html zonder foutmelding in de browser?
• zie je bovenin de KPI-kaarten?
• staat er een tabel met data?
• werken de filters?
• ziet de pagina er rustig en professioneel uit?

Als er iets niet werkt, of anders is dan hoe je het zou willen, kun je dit direct terugkoppelen en Claude aanpassingen laten doen.

Stap 8: verbeter het project in kleine stappen

Over het algemeen is de eerste versie van software nooit precies goed. Ook wanneer je niet met AI ontwikkelt. Doorgaans maak je iets wat werkt, haal je feedback op, en voer je aanpassingen door. Zo kun je iteratief bijschaven.

Doe dit altijd in kleine stappen waarbij je dus niet te veel in één keer laat aanpassen.

Dus bijvoorbeeld niet:

Maak het mooier, voeg grafieken toe, maak het responsive, voeg een export toe en verbeter de code.

Dat zijn te veel aanpassingen tegelijk waarmee het voor jou ook moeilijker wordt om het resultaat te beoordelen.

We gaan nu 2 aanpassingen doorvoeren in ons voorbeeldproject: (1) toevoegen van functionaliteit om te sorteren in de tabel, en (2) de waarden van de KPI's laten meeveranderen wanneer je filtert.

Verbetering 1: sorteren toevoegen

Voor het toevoegen van sorteren geven we de volgende prompt op:

Er kan nu niet gesorteerd worden op waarden in kolommen in de tabel. Voeg dit toe: functionaliteit waarmee oplopend of aflopend gesorteerd kan worden op iedere kolom.

Hier werken we met Edit automatically mode. Claude voert direct de wijzigingen door zonder eerst een plan te maken. Stel dit in en voer de prompt uit:

Gebruik dit vooral bij kleine, overzichtelijke wijzigingen. Bij grotere aanpassingen is Plan mode of Ask before edits mode verstandiger.

Als Claude klaar is kunnen we de pagina in de browser verversen:

Daar zie je dat visueel pijltjes naast kolomnamen zijn toegevoegd. Je kunt op kolomnamen klikken en zo sorteren.

Verbetering 2: KPI's laten meeveranderen met filters

Wanneer je filtert, worden de waarden van de KPI's niet aangepast:

Met het volgende prompt gaan we dit aanpassen:

Wanneer wordt gefilterd met de knoppen passen de KPI's in de kaarten niet aan. Voer wijzigingen door zodat wanneer is gefilterd, de KPI's in de kaarten aanpassen.

We voeren de prompt in, en kiezen Ask before edits mode:

Hiermee zal Claude eerst akkoord vragen voordat een aanpassing wordt doorgevoerd.

Je ziet dan verschillende wijzigingen voorbijkomen, waar je op kunt reageren:

Uiteindelijk is Claude weer klaar:

En kun je het resultaat weer testen door de pagina in de browser te verversen:

Je ziet dat de KPI-waarden nu wel veranderen na het filteren.

Belangrijk hierbij om te onthouden is dat je het beste wijzigingen opdeelt in kleine controleerbare opdrachten. Daarmee vergroot je de kans op dat je krijgt wat je wilt, en dat je het resultaat goed kunt controleren.

Wat gebeurt er onder de motorkap?

In het begin kan werken met Claude Code als een black box lijken. Waar je voorheen zelf bestanden maakte, functies schreef en alles testte, verschuift je rol met Claude Code.

Met Claude Code beschrijf jij wat je wilt. Claude Code gebruikt op de achtergrond een large language model om plannen te maken en code te genereren. De wijzigingen worden vervolgens toegepast in de bestanden van je projectmap.

Daardoor verandert je rol. Je bent aanzienlijk minder bezig met zelf code schrijven, en meer met:

• scherp formuleren van het doel
• afbakenen van de opdracht
• beoordelen van het plan
• bekijken van de aangemaakte bestanden
• testen van de wijzigingen
• bijsturen waar nodig

Dit maakt de Plan mode ook zo nuttig. Daarmee voorkom je dat er direct van alles wordt gemaakt en wellicht wordt afgeweken van het doel. Belangrijk om te onthouden is dus dat je een nieuw project over het algemeen altijd start vanuit de Plan mode.

Veelgemaakte fouten bij de eerste keer Claude Code

Bij een eerste project gaan vaak dezelfde dingen mis.

Te groot beginnen

Een prompt zoals onderstaand is verleidelijk:

Bouw een volledig platform voor verbeterprojecten met accounts, een database, dashboards en beheeromgeving.

Dat is te groot voor een eerste opzet of een eerste project. Begin altijd klein. Bijvoorbeeld met een eerste pagina met één functie. Bouw dit vervolgens waar nodig iteratief verder uit.

Geen duidelijke projectmap gebruiken

Met Claude Code werk je vanuit een projectmap. Wanneer je in één map meerdere projecten of experimenten hebt staan, raken zowel jij als Claude Code gemakkelijk het overzicht kwijt. Gebruik per project dus een eigen map.

Plan mode overslaan

We hebben verschillende modes gezien (zoals Plan mode, Ask before edits, ...). Gebruik zeker in het begin, of bij een eerste project, Plan mode. Zo leer je beter hoe Claude te werk gaat en kun je waar nodig bijsturen.

Alles tegelijk laten aanpassen

Hoe groter een wijziging is, hoe lastiger het te testen of controleren is. Verwerk daarom beter één aanpassing per keer.

Niet testen

Als Claude iets heeft gemaakt en aangeeft dat het klaar is, is dat nog geen bewijs dat het ook daadwerkelijk werkt. Open altijd het resultaat, klik rond en test functionaliteiten.

Niet naar de bestanden kijken

In VS Code kun je gemakkelijk zien wat Claude allemaal gemaakt heeft, maak hier gebruik van. Ook wanneer je de code niet kunt lezen en niet helemaal begrijpt, kun je vaak wel zien of het project logisch is opgebouwd.

Te snel naar geavanceerde onderwerpen gaan

Claude Code heeft veel meer mogelijkheden dan dat we hier hebben besproken. Denk bijvoorbeeld aan memory, CLAUDE.md, MCP's, GitHub, en parallelle sessies. Dat zijn allemaal waardevolle en interessante onderwerpen, maar niet nodig voor de eerste stap.

Zorg ervoor dat je eerst de basisworkflow goed begrijpt. Ga je daarna pas verder verdiepen en je skills uitbreiden.

Wat hebben we geleerd?

In deze blog hebben we een eerste project gebouwd in VS Code met Claude Code via de VS Code-extensie.

We hebben daarbij gezien hoe je:

• een nieuwe projectmap maakt
• Claude Code opent in VS Code
• een goede eerste prompt schrijft
• Plan mode gebruikt
• een plan beoordeelt
• Claude bestanden laat maken
• het resultaat bekijkt in de browser
• verbeteringen stap voor stap laat doorvoeren

Daarmee hebben we de basis van het werken met Claude Code behandeld: een heldere opdracht omschrijven, plannen, beoordelen, testen en iteratief verbeteren.

Mogelijke vervolgstappen

In deze blog hebben we bewust aan een eenvoudig project gewerkt. Dat is altijd een goede start. Als je je verder wilt gaan verdiepen en ontwikkelen, denk dan aan de volgende vragen en onderwerpen:

• wanneer gebruik je VS Code, Desktop of terminal?
• hoe werk je met Git?
• hoe gebruik je CLAUDE.md om projectcontext vast te leggen?
• hoe voorkom je dat lange sessies onoverzichtelijk worden?
• hoe koppel je Claude Code aan externe tools met MCP?
• wanneer gebruik je Claude Cowork in plaats van Claude Code?

Het belangrijkste om te onthouden: begin klein, werk in een aparte projectmap, gebruik Plan mode en verbeter het resultaat stap voor stap.

Wil je apps en workflows leren maken met Claude code?

Bekijk dat onze 2-daagse Claude Code training. Na deze training werk je met vertrouwen aan softwareapplicaties. Je hebt geen programmeerervaring nodig om mee te doen aan deze training.