VS Code voor AI

VS Code is een gratis applicatie van Microsoft. Je opent het en ziet drie dingen. De bestandsverkenner (links). Vergelijkbaar met Finder op Mac of Verkenner op Windows. Toont al je bestanden en mappen. Klik op een bestand om het te openen. De editor (midden). Een tekstverwerker voor code. Denk aan Google Docs, maar dan voor codebestanden. Je kunt hier alles lezen, ook als je de code zelf niet begrijpt. Zoek naar Engelse woorden: koppen, knoplabels, content. De terminal (onderin). Een tekstgesprek met je computer. Jij typt een opdracht, de computer reageert. Meer is het niet. Waarom VS Code belangrijk is. bijna elk AI-codetool draait erin, of in iets wat er sterk op lijkt. Claude Code, Copilot, Cursor. VS Code begrijpen is begrijpen waar AI en code elkaar raken.

Probeer dit

Download VS Code (gratis via code.visualstudio.com). Open het. Kijk naar de drie onderdelen: bestandsverkenner, editor, terminal. Open een tekstbestand. Pas iets aan. Sla op. Je hebt net een code-editor gebruikt.

Open een geëxporteerd project en je ziet een mappenstructuur. Overweldigend op het eerste gezicht. Maar de logica is gewoon simpel.

`src/` staat voor "source." Hier zitten de pagina's, componenten en teksten. Hier werk je in.

`public/` bevat bestanden die direct op de website terechtkomen. Afbeeldingen, iconen, fonts.

`node_modules/` zijn bibliotheken. Sla deze map over. Nooit openen.

`package.json` laat zien wat het project nodig heeft. Zie het als de ingrediëntenlijst van een recept.

De kern van de zaak. jouw content staat in `src/` en `public/`. De rest is achtergrondinfrastructuur. Ga je voor het eerst door geëxporteerde code heen, begin dan bij `src/`.

Probeer dit

Exporteer een project vanuit Lovable of Bolt. Open de map in VS Code. Ga naar de src-map. Zoek een bestand met inhoud die je herkent. Je hebt jezelf zojuist georiënteerd in een codebase.

Open een HTML-bestand. De eerste seconden lijkt het een chaos van haakjes en schuine strepen. Dan zie je gewone woorden staan: koppen, alineatekst, knopteksten. De inhoud is er gewoon, met wat tags eromheen. Druk op Ctrl+F (of Cmd+F op een Mac) en zoek naar tekst die je op de pagina ziet. Je vindt hem meteen. Aanpassen, opslaan, klaar. Kleuren vind je door te zoeken op "color:" of "background:". Daar staan hexcodes zoals #C4612A. Verander de code en de kleur verandert mee. Afbeeldingen zoek je op dezelfde manier: typ .jpg of .png en je ziet welke bestanden er worden geladen. Vervang het bestand of pas het pad aan. Je hebt net code bewerkt. Niet op professioneel niveau, maar het bestand doet het. En dat is een begin.

Probeer dit

Open een geëxporteerd HTML-bestand. Zoek een kop op met Ctrl+F. Pas hem aan. Sla op. Open het bestand in een browser. Zie je aanpassing staan. Dat is code bewerken.

Open de terminal in VS Code (View, dan Terminal). Een cursor knippert. Typ iets. De computer reageert. Vijf commando's voor 80% van wat je nodig hebt: ls (of dir op Windows). wat staat er in deze map? Hetzelfde als een map openen in Finder. cd mapnaam. ga naar die map. Alsof je erop dubbelklikt. cd .. . een map terug. De terugknop. npm run dev. start het project. Je site draait nu lokaal in je browser. npm run build. klaar voor lancering. Maakt de definitieve versie aan, klaar voor hosting. Dat is alles. Vijf commando's. De terminal is ook waar Claude Code woont. Als Assisted Coding zegt "voer dit uit in de terminal", is dit de plek.

Probeer dit

Open de terminal in VS Code. Typ 'ls' (of 'dir'). Je ziet je bestanden staan. Typ 'cd' om een map in te gaan. Typ nog een keer 'ls'. Je hebt net genavigeerd via de terminal.

VS Code is het origineel. Gratis, van Microsoft. Alles wat hier werkt, werkt overal. Cursor is VS Code met AI in de kern. Zelfde interface. Zelfde bestandsstructuur. Zelfde terminal. Maar AI zit overal in verweven: het stelt code voor, bewerkt meerdere bestanden tegelijk en begrijpt je project. VS Code met een AI-collega er al in. Windsurf is ook een fork. Vergelijkbaar idee, andere uitwerking. Minder volwassen, maar groeiende. Het punt. leer VS Code en je kent ze allemaal. De interface is hetzelfde. De basis is hetzelfde. AI-functies zijn aanvullingen, geen vervangers. Wat te kiezen. aan het verkennen? VS Code (gratis). Wil je de beste AI-integratie? Cursor (betaald). Beide draaien dezelfde projecten op dezelfde manier.

Probeer dit

Als je VS Code gebruikt, probeer hetzelfde project te openen in Cursor (gratis trial). De interface is vrijwel identiek. Alleen de AI-functies zijn anders.

Manier 1. Inline AI (Copilot, Cursor ingebouwd). AI kijkt mee terwijl je typt en stelt voor wat er daarna komt. Vergelijkbaar met autocorrectie op je telefoon, maar dan voor code. Jij bent aan het stuur, AI geeft suggesties. Copilot werkt met het model van jouw keuze. GPT, Claude, Gemini. Het is een extensie die een laag suggesties toevoegt, zonder dat VS Code zelf verandert. Manier 2. Terminal AI (Claude Code). AI draait als een gesprek in de terminal. Je beschrijft wat je nodig hebt: "Voeg een contactformulier toe." Het maakt bestanden aan en past ze aan. Jij bepaalt het doel, AI zoekt de route. Het grote verschil. Inline AI werkt goed als je precies weet wat je bouwt. Terminal AI werkt goed als je weet wat je wil, maar nog niet hoe je daar komt. Veel professionals zetten beide in. Inline voor kleine aanpassingen, terminal voor grotere taken. De twee werken prima naast elkaar.

Probeer dit

Bekijk een demo van twee minuten op YouTube. Copilot én Claude Code naast elkaar. Zie zelf wat het verschil is. De één doet suggesties. De ander schrijft hele features uit.

Stap 1. exporteer een project vanuit Lovable of Bolt. Stap 2. open de map in VS Code. Stap 3. typ in de terminal `npm install` (zet het project klaar) en daarna `npm run dev` (start het lokaal op). Stap 4. open je browser en ga naar de URL die de terminal laat zien, meestal localhost:3000 of zoiets. Stap 5. zoek een heading in de code, verander de tekst, sla op. De browser ververst vanzelf. Dat is de development loop. Schrijven, opslaan, zien wat er verandert. Vijf seconden per ronde. Zodra je die flow te pakken hebt, gaat het hard.

Probeer dit

Doe het gewoon. Exporteer een project. Open het in VS Code. Run npm install en npm run dev. Verander een koptekst. Zie het updaten. Je hebt net de development workflow ervaren.

Wat je hebt geleerd. VS Code is een teksteditor met veel extra mogelijkheden. Bestanden en mappen hebben een logische structuur. Je kunt code lezen en aanpassen. De terminal is een gesprek in tekst. AI helpt op twee manieren. Cursor is VS Code met AI er al in. Wat Assisted Coding toevoegt. Docker voor consistente omgevingen. Claude Code als je AI-programmeermaatje. Supabase voor echte databases. Vercel voor professionele deployment. Een gefaseerde aanpak voor complexe projecten. De eerlijke beoordeling. Assisted Coding vraagt om een technische instelling. Geen diploma. Wel de bereidheid om commando's in te typen, foutmeldingen te lezen en in systemen te denken. Als deze VS Code-cursus haalbaar voelde, ben je er klaar voor. Voelde het overweldigend. blijf dan bij no-code tools. Die zijn krachtig en worden steeds beter. De eerdere University-cursussen zijn voor de meeste behoeften meer dan voldoende.

Probeer dit

Open VS Code. Open een project. Ga naar src. Zoek tekst. Pas het aan. Als dat haalbaar voelde, ben je klaar voor Assisted Coding.