Vibecoden met Visual Studio Code: richt je VSC-omgeving optimaal in

Vibecoden houdt in dat je software grotendeels bouwt door in gewone taal met een AI-agent te overleggen. Je beschrijft wat een toepassing moet doen, waarna de agent projectbestanden analyseert, code schrijft, opdrachten uitvoert en eventuele fouten tracht op te lossen. Dit betekent dat je de gebruikte programmeertaal of syntaxis niet volledig hoeft te beheersen, maar enig technisch inzicht blijft wel belangrijk. Een AI-agent kan namelijk overtuigend ogende code produceren die toch niet optimaal werkt of onnodig complex is, of zelfs beveiligingsproblemen bevat.

De gratis opensource AI-code-editor Visual Studio Code (verder afgekort tot VSC) is hiervoor een prima centrale werkplek. Deze combineert namelijk projectbestanden, terminalopdrachten, foutmeldingen, Git-versiebeheer en AI-assistentie in één venster. De standaard ingebouwde AI-agentomgeving in VSC is GitHub Copilot (wat je weinig zal verbazen aangezien zowel VSC als GitHub van Microsoft zijn) maar je kunt wel, afhankelijk van je abonnement, uit diverse taalmodellen kiezen.

Bovendien kun je via extensies ook andere agenten, zoals Claude Code en OpenAI Codex, rechtstreeks toegang geven tot je project. Verder bewaren we via GitHub de door Git bijgehouden codeversies in de cloud, met het oog op back-ups of om deze te delen, en dankzij integratie met hostingplatform Vercel zorgen we voor automatische online testversies bij codewijzigingen.

Logischerwijs beginnen we met de installatie van de VSC-editor. Er bestaat ook een communityversie, VSCodium, waarin verwijzingen naar Microsoft-diensten zijn verwijderd. GitHub Copilot en bepaalde extensies werken hierin minder goed en daarom gebruiken we de officiële VSC-versie.

Deze is er in een browserversie, maar die heeft enkele beperkingen. Zo ontbreken een volwaardige terminal en een lokale Node.js-runtime, waardoor deze versie minder geschikt is voor onze opzet, een web-app-project. We kiezen dus voor de desktopapplicatie, beschikbaar voor macOS, Linux en Windows via deze site.

We gaan in dit artikel uit van Windows en downloaden dus het exe-bestand. De installatie vergt slechts enkele muisklikken en je kunt gerust de standaardinstellingen behouden. Bij de eerste start kun je je met een GitHub-account aanmelden om GitHub Copilot te gebruiken; hier vind je een vergelijking tussen de gratis en betaalde formules.

Heb je Copilot niet nodig, kies dan Continue without Signing In. Later aanmelden kan trouwens nog altijd via Sign in, rechtsboven in het VSC-dashboard. Kies vervolgens een kleurenschema, zoals Light 2026, en stel de gewenste ‘keyboard mapping’ in; standaard is dit VS Code.

Het VSC-dashboard staat nu voor je klaar, maar we moeten nog enkele andere programma’s installeren en doen dat liever in één moeite door.

Zoals gezegd willen we wijzigingen in ons project vastleggen, bijvoorbeeld om naar een eerdere versie te kunnen terugkeren. Daarnaast willen we onze code naar GitHub pushen om deze in de cloud te back-uppen, te delen of via Vercel online te zetten. Daarvoor hebben we Git nodig.

Je moet dit programma eerst installeren – tenzij het natuurlijk al op je pc staat.

Ga naar www.git-scm.com, klik op Install for Windows en voer het gedownloade exe-bestand uit. Je kunt de standaardcomponenten en -opties doorgaans behouden. Let wel op twee instellingen. Kies bij Choosing the default editor used by Git voor Use Visual Studio Code as Git’s default editor. Bij Adjusting your PATH environment laat je de tweede, standaard geselecteerde optie staan, zodat VSC Git vanzelf vindt.

Test vervolgens vanuit VSC of Git werkt. Open in VSC een terminal via Terminal / New Terminal of met Ctrl+ (of Ctrl+Shift+ù op een azerty-toetsenbord). Voer hier git --version uit: verschijnt er een versienummer, dan is Git correct geïnstalleerd. Stel daarna eenmalig je naam en e-mailadres in. Gebruik hierbij bij voorkeur hetzelfde e-mailadres als voor je GitHub-account:

git config --global user.name "je_naam"
git config --global user.email "je_e-mail@adres"

Met git config user.name en git config user.email controleer je de ingestelde gegevens. Gelukt? Dan ben je klaar om Git vanuit VSC voor versiebeheer te gebruiken. We komen hier uiteraard nog op terug.

Zoals reeds vermeld, gaan we dus een web-app maken en dat doen we met het hedendaagse ‘gouden trio’: React (frontend-bibliotheek), Vite (buildtool en ontwikkelserver) en TypeScript (programmeertaal en uitbreiding op JavaScript).

Hiervoor hebben we ook Node.js nodig. Deze JavaScript-runtime maakt het namelijk mogelijk om JavaScript-code buiten de browser uit te voeren. Vite gebruikt Node.js onder meer om de ontwikkelserver en het bouwproces te draaien (voor de volledigheid: Vite zet daarbij op de achtergrond je TypeScript-code automatisch om naar JavaScript). Bovendien wordt Node.js geleverd met de pakketbeheerder npm (Node Package Manager), waarmee we React, Vite, TypeScript en andere benodigde pakketten kunnen installeren.

Je installeert Node.js als volgt, in de veronderstelling uiteraard dat het nog niet op je pc staat. Ga naar www.nodejs.org, klik op Get Node.js en selecteer indien nodig je besturingssysteem. Wij gaan uit van Windows x64 en downloaden het msi-bestand van de aanbevolen LTS-versie. Doorloop de installatie met de standaardopties. Start VSC daarna opnieuw en open de terminal. Voer achtereenvolgens deze opdrachten uit: node -v en npm -v. Bij beide opdrachten hoort een versienummer te verschijnen. Node.js en npm zijn nu klaar voor gebruik.

We zijn nu opnieuw in het VSC-dashboard. Verderop passen we enkele instellingen aan en installeren we een paar extensies. Zulke aanpassingen zijn profielgebonden. Zonder dat je het goed merkt, werk je standaard met het ingebouwde Default-profiel.

Wil je VSC gebruiken voor uiteenlopende codeprojecten, bijvoorbeeld één met TypeScript, React en Vite en één met Python, dan kunnen aparte profielen nuttig zijn. Extensies en dergelijke die je voor het ene project nodig hebt, zijn immers niet noodzakelijk relevant voor het andere. Klik linksonder op het tandwielpictogram en kies Profiles / New Profile. Vul een naam in en bevestig met Create. Klik op het vinkje linksboven bij het nieuwe profiel om het te activeren.

Via het tandwielpictogram kun je bij Themes / Color Theme nu een geschikt kleurenschema kiezen. Via Keyboard Shortcuts stel je desgewenst eigen sneltoetsen in. De onderdelen Settings en Extensions komen verderop nog aan bod.

Je werkt in VSC dus binnen een bepaald profiel: je persoonlijke werkomgeving met onder meer instellingen en extensies. Binnen zo’n profiel kun je meerdere projecten beheren. Voor elk project open je het best een afzonderlijke werkruimte met eigen bestanden, instellingen en taken.

Zo’n werkruimte maak je eenvoudig door via File / Open Folder een projectmap te openen. Is deze map nog niet vertrouwd, dan meldt VSC dat de werkruimte in ‘Restricted Mode’ draait. Deze beveiligingsmaatregel beperkt onder meer de uitvoering van code, taken en extensies. Dit is wellicht raadzaam als je een map opent met onbekende code van internet. Gaat het om je eigen projectmap, dan hef je deze beperking het liefst op. Klik linksonder in de statusbalk op het sloticoontje en vervolgens op de blauwe knop Trust. Sluit daarna het venster.

Je kunt deze instelling altijd opnieuw oproepen en aanpassen via het Command Palette. Ga naar View / Command Palette of druk op Ctrl+Shift+P, typ trust en selecteer Workspaces: Manage Workspace Trust. Goed om te weten: via dit handige palet kun je vrijwel alle opdrachten en functies van VSC snel opzoeken en uitvoeren.

VSC hebben we eerder een editor genoemd, maar vooral dankzij de vele extensies krijgt het de allures van een IDE (Integrated Development Environment) op maat. Met enkele muisklikken voeg je allerlei functies toe. VSC haalt de extensies uit Visual Studio Marketplace, de officiële extensiewinkel van Microsoft. Klik hiervoor links in de activiteitenbalk of via het tandwielpictogram op Extensions of gebruik Ctrl+Shift+X.

Voor ons webapp-project installeren we twee extensies, naast een of twee AI-agents die eveneens als extensie beschikbaar zijn: ESLint en Prettier.

ESLint is een zogeheten ‘linter’. Deze controleert broncode op mogelijke fouten en verdachte constructies en is vooral populair voor JavaScript en TypeScript. Prettier is een formatter: deze houdt de opmaak van de broncode automatisch consistent, zonder de werking ervan te veranderen. Je mag natuurlijk andere of extra extensies installeren, maar wij gaan alvast uit van dit duo.

Typ ESLint in de zoekbalk van dit deelvenster en klik op ESLint van Microsoft voor een detailvenster. Laat Auto Update ingeschakeld en klik op Install. Herhaal dit voor Prettier – Code Formatter van Prettier. Bevestig indien gevraagd met Trust Publisher & Install.

Wil je ooit een extensie (als .vsix-bestand) buiten de Marketplace om installeren, klik dan op de knop met de drie puntjes in het Extensions-venster en kies Install from VSIX. Typ je @installed in de zoekbalk, dan verschijnen de reeds geïnstalleerde extensies. Om een extensie te verwijderen, open je de bijbehorende detailpagina en klik je op Uninstall.

Je kunt ook profiel- en workspace-specifieke instellingen vastleggen en bijvoorbeeld bepalen welke extensie als formatter wordt gebruikt. Klik op het tandwielpictogram en kies Settings. Bovenaan verschijnen de tabbladen User en Workspace. Instellingen onder User gelden voor het actieve profiel, terwijl die onder Workspace alleen van toepassing zijn op de geopende werkruimte of projectmap binnen je profiel.

Controleer gerust de verschillende instellingen. Als voorbeeld zorgen we ervoor dat Prettier automatisch wordt gebruikt wanneer je een codebestand opslaat. Open bijvoorbeeld het tabblad Workspace, ga naar Commonly Used en schakel Editor: Format On Save in. Selecteer vervolgens bij Editor: Default Formatter de eerder geïnstalleerde extensie Prettier – Code Formatter.

Open je daarna via de activiteitenbalk het onderdeel Explorer, dan vind je in de projectmap het bestand .vscode/settings.json. Daarin heeft VSC de instellingen in enkele regels vastgelegd, althans wanneer je de aanpassingen op workspace-niveau hebt doorgevoerd.

Om ons web-app-project een solide fundament te geven, zetten we eerst een basisstructuur op met de nodige beginbestanden. Denk aan package.json, waarin onder meer de afhankelijkheden en projectscripts staan, evenals enkele configuratiebestanden. Dit gebeurt doorgaans met een zogeheten ‘scaffolding-tool’ (steigerbouw), die de bestanden genereert op basis van een kant-en-klaar sjabloon.

Voor ons project gebruiken we Vite met React en TypeScript. In de officiële Vite-handleiding vind je hiervoor geschikte commando’s, maar omdat onze focus nu eenmaal op vibecoden ligt, laten we de opdracht in VSC door een AI-agent genereren. Dit kan met Copilot, maar verderop tonen we hoe je ook andere AI-agents in VSC integreert.

Voor Copilot open je het Chat-venster (sneltoets Ctrl+Alt+I). Selecteer onderaan bij Agent de modus Ask of Plan, zodat de agent zeker nog niets uitvoert of aanpast. Gebruik bijvoorbeeld deze prompt:

‘Genereer het officiële CLI-commando om in mijn huidige projectmap met de nieuwste stabiele versie van Vite een React-project met TypeScript te scaffolden.’

De agent zal waarschijnlijk dit commando voorstellen:

npm create vite@latest . -- --template react-ts

Dit sluit mooi aan bij de officiële Vite-aanbevelingen. Noteer dit commando, want we gaan het straks zelf uitvoeren vanuit de terminal, hoewel je dit in principe ook door je AI-agent kunt laten doen.

Zoals gezegd kun je dus ook andere AI-agents aan VSC koppelen en dat gebeurt doorgaans ook via de VS Code Extension Marketplace. Populaire agents (binnen VSC) zijn onder meer de opensource agent-extensies Cline (voorheen Claude DEV), Kilo Code en Roo Code en verder Claude Code en Codex. We houden het hier bij deze twee laatste, maar de werkwijze is goed vergelijkbaar. Let er wel op om meerdere AI-agents niet zomaar gelijktijdig en door elkaar te gebruiken om mogelijke conflicten te vermijden.

Open Extensions en typ Claude Code for VS Code (van Anthropic). Klik hierop en klik op Install. Bevestig met Trust Publisher & Install. Onder de activiteitenbalk wordt het bijbehorende pictogram toegevoegd: klik hierop en kies hoe je je bij Claude Code wilt aanmelden – via je Claude-abonnement of via Anthropic Console (als je via API wilt werken). Herhaal dit voor de extensie Codex – OpenAI’s coding agent. Klik rechtsboven op het OpenAI-pictogram en kies Sign in with ChatGPT of Use API Key.

Na een succesvolle login (of API-connectie) kun je aan de slag en kun je ook hier vragen om een scaffolding-commando te genereren. We gaan even uit van Codex. Klik onderin de promptbalk op het plusje en activeer eventueel Plan-mode. Veiligheidshalve laat je de optie Ask for approval ook ingeschakeld.

Je mag het advies van je AI-agent volgen, een terminalvenster openen in VSC en het voorgestelde commando binnen je projectmap uitvoeren:

npm create vite@latest . -- --template react-ts

De punt (.) zorgt ervoor dat Vite de bestanden rechtstreeks in de huidige projectmap plaatst. In de terminal verschijnen vervolgens enkele vragen. Omdat de map wellicht al een .vscode-map bevat, kies je bij een waarschuwing over bestaande bestanden voor Ignore files and continue, zodat deze behouden blijven. Selecteer bij ‘Which linter would you like to use?’ de optie ESLint en geef met Yes toestemming om het npm-commando daadwerkelijk uit te voeren.

Na afloop verschijnen in Explorer allerlei bestanden en submappen. Houd Ctrl ingedrukt en klik op de url onderaan in de terminal. In de browser opent nu de lokale ontwikkelserver op http://localhost:<poort>.

Controleer meteen of Prettier en ESLint werken. Open hiervoor in Explorer bijvoorbeeld het codebestand src/App.tsx en voeg bovenaan deze opzettelijk onvolkomen coderegel toe:

const   testfoutje : string = 123 ;

Bewaar het bestand met Ctrl+S. Prettier verwijdert meteen alle overbodige spaties en ESLint plaatst een rood golflijntje wegens een ongebruikte variabele. Houd de muisaanwijzer boven zo’n markering voor meer uitleg.

In principe kun je nu volop vibecoden en je favoriete AI-agent allerlei prompts geven, maar veiligheidshalve stellen we eerst versiebeheer in.

Klik links in de activiteitenbalk op Source Control en selecteer Initialize Repository. In het linkerdeelvenster verschijnen de bestanden uit je projectmap, behalve de items die via het bestand .gitignore zijn uitgesloten.

Ga met de muisaanwijzer over een bestand en klik op het plusje Stage Changes om het klaar te zetten voor een momentopname, oftewel een commit. Wil je alle nieuwe en gewijzigde bestanden tegelijk klaarzetten, ga dan met de muisaanwijzer over Changes, boven in dit venster, en klik daar op het plusje.

Vul bovenaan een duidelijke commitbeschrijving in of laat AI er een genereren via het pictogram met de twee ruitjes (Generate Commit Message). Klik vervolgens op de blauwe knop Commit. Je eerste commit verschijnt nu onderaan in de grafiek bij Graph.

Zoals eerder aangegeven willen we onze commits ook in de cloud bewaren via GitHub, als back-up en eventueel om de code met anderen te delen. Klik hiervoor bij Graph op Publish Branch en selecteer bovenaan Publish to GitHub private (of eventueel public) repository <loginnaam/projectnaam>.

Je kunt de commit ook rechtstreeks controleren op www.github.com, aangemeld met hetzelfde account. Of houd je de muisaanwijzer in de Graph-balk boven het paarse wolkicoon en klik je op Open on GitHub. In je GitHub-repository vind je nu mooi de gepubliceerde codebestanden. Ververs indien nodig de browserpagina.

Je kunt lokale commits ook automatisch naar GitHub laten pushen, zodat je daar niet telkens zelf aan hoeft te denken. Open via het tandwielpictogram Settings, zoek naar Git: Post Commit Command en stel deze optie in op push.

Wijzig bij wijze van experiment iets onschuldigs in bijvoorbeeld src/App.tsx. Zodra je het bestand bewaart, loopt de teller bij Source Control op. Voeg het bestand toe via Stage Changes, vul een commitbeschrijving in en klik op Commit & Push. De wijziging wordt nu zowel lokaal als op GitHub geregistreerd.

Een nadeel is dat het terugdraaien van een commit omslachtiger kan zijn zodra deze naar GitHub is gepusht. Wil je liever meer controle, klik dan op de knop rechts van Commit & Push en selecteer gewoon Commit om wijzigingen eerst veilig lokaal vast te leggen. Zodra je zeker bent, stuur je de lokale commits in één keer naar GitHub via de blauwe knop Sync Changes [n].

Voordat we aan ons ‘echte’ project beginnen, willen we zeker weten dat we de web-app ook live kunnen presenteren. Hiervoor gebruiken we hostingplatform Vercel. Zodra je vanuit VSC een commit naar GitHub pusht, pikt Vercel de wijzigingen automatisch op, bouwt het de web-app en publiceert het de nieuwe versie. Je krijgt meteen een werkende https-link. Vercel kan prima overweg met frameworks en bouwtools als React en Vite.

Tip voor wat gevorderde Git-gebruikers: Vercel maakt automatisch een unieke testlink wanneer je een nieuwe branch in Git aanmaakt, zodat je de wijzigingen kunt bekijken voordat ze op de hoofdsite komen.

Ga naar www.vercel.com, klik op Sign Up en vervolgens op Continue with GitHub. Selecteer I’m working on personal projects (Hobby) en vul een Team Name in.

Je belandt nu in je Vercel-dashboard. Klik bij Import Git Repository op Continue with GitHub. Je kunt ook naar Projects gaan en Add New / Project kiezen. Selecteer het juiste GitHub-account en klik bij de repository van je web-app op Import. Open hier het onderdeel Build and Output Settings en wijzig de velden Build Command, Output Directory en Install Command in respectievelijk npm run build, dist en npm install.

Dit laatste commando (npm install) installeert eerst de pakketten waarvan het project afhankelijk is. Met npm run build zet Vite de React- en TypeScript-code om in een geoptimaliseerde productieversie. Deze bestanden belanden standaard in de map dist, die Vercel vervolgens publiceert.

Bevestig met de knop Deploy. Even later staat je testapp online. Kies Continue to Dashboard en open de vermelde url, iets als https://<projectnaam>.<random>.vercel.app. Vanaf nu zorgt iedere nieuwe push naar je GitHub automatisch voor een bijgewerkte liveversie.

Je bent nu klaar om je favoriete AI-agent aan het werk te zetten. Wij gaan zoals gezegd uit van Codex, al is de werkwijze bij andere AI-agents goed vergelijkbaar. Wij kiezen binnen Codex voor het taalmodel GPT 5.6 Sol (Medium), maar dat beslis je natuurlijk zelf.

Begin bij voorkeur met het prompt-commando /init. Hiermee analyseert de agent de huidige projectmap en maakt hij (een eerste versie van) het Markdown-bestand AGENTS.md. Hierin worden onder meer de projectstructuur, gebruikte technologieën en relevante commando’s vastgelegd. Zo weet de agent bij volgende opdrachten beter waarmee hij rekening moet houden. Open dit instructiebestand gerust vanuit Explorer, controleer de inhoud en vul deze desgewenst aan.

Langere prompts typ je beter niet rechtstreeks in de promptbalk. Stel ze eerst op in een editor, bijvoorbeeld via File / New Text File in VSC, en plak ze pas daarna in het chatvenster. Zo voorkom je dat je per ongeluk op Enter drukt terwijl je prompt nog niet volledig of optimaal is. Maak bij complexere opdrachten gebruik van de Plan-modus van Codex en controleer het voorgestelde plan voordat je de uitvoering toestaat.

In het bijbehorende screenshot zie je een prompt die na bevestiging met Yes, implement this plan enkele minuten later al tot een fraai resultaat leidde. Codex stelde weliswaar eerst nog enkele tussenvragen, waaronder of het ook geautomatiseerde componenttests (met Vitest en Testing Library) moest toevoegen. Graag zelfs, want zo hoeven we die niet achteraf via een afzonderlijke prompt te laten genereren. Veel succes met je VSC-project.