VS Code-tips: sneller code schrijven elke dag

Je editor moet voor jou werken, niet andersom. Met de juiste VS Code-tips, sneltoetsen en een paar instellingen klaar je hetzelfde werk in de helft van de tijd en raak je de muis nauwelijks aan. Dit artikel verzamelt de praktische technieken die een dagelijkse workflow echt versnellen — het soort dat spiergeheugen wordt in plaats van trivia. De voorbeelden gelden voor zowel Windows/Linux als macOS (vervang Ctrl door Cmd op macOS).

Command palette en snel wisselen van bestand

Als dit de enige sneltoets was die je ooit leerde, was je nog steeds spekkoper: het command palette. Open het met Ctrl+Shift+P en je bereikt vrijwel alles wat de editor kan — geen gezoek in menu's. Begin de opdracht te typen en de treffers filteren zich vanzelf.

• Ctrl+P — open elk bestand direct op naam (Quick Open). Een paar letters volstaat.
• Ctrl+Shift+O — spring naar symbolen (functies, klassen, methodes) in het open bestand.
• Ctrl+G — ga naar een specifiek regelnummer.
• Ctrl+T — zoek een symbool in het hele project.

Een kleine truc: typ in Quick Open een : na de bestandsnaam gevolgd door een regelnummer (bijvoorbeeld UserController.php:42) om meteen op die regel te belanden.

Multi-cursor: overal tegelijk bewerken

Voor repetitieve bewerkingen draaien de krachtigste VS Code-tips om meerdere cursors. In plaats van dezelfde wijziging op tien plekken met de hand te doen, doe je het in één keer:

• Ctrl+D — selecteer het woord onder de cursor; druk nogmaals om de volgende overeenkomst toe te voegen.
• Ctrl+Shift+L — selecteer in één keer alle voorkomens van het geselecteerde woord.
• Alt+Click — zet met de muis een extra cursor waar je maar wilt.
• Ctrl+Alt+Up/Down (macOS: Cmd+Alt+Up/Down) — voeg een cursor toe op de regel erboven of eronder.

Stel dat je tien variabelenamen in een JSON-bestand moet hernoemen: selecteer de eerste, voeg de rest toe met Ctrl+D, typ, en ze veranderen allemaal samen.

Regelbewerkingen: verplaatsen, kopiëren, verwijderen

Sleep regels niet met de muis, maar houd je handen op het toetsenbord:

Alt+Up / Alt+Down          → regel omhoog/omlaag verplaatsen
Shift+Alt+Up / Down        → regel omhoog/omlaag kopiëren
Ctrl+Shift+K               → regel verwijderen
Ctrl+/                     → regelcommentaar aan/uit
Ctrl+Enter                 → een nieuwe regel eronder openen

Een if-blok omhoog tillen of een configuratieregel dupliceren kost zo enkele seconden. Zodra deze in je vingergeheugen zitten, grijp je niet meer naar de muis.

Door code navigeren en hernoemen

In een grote codebase verlies je de meeste tijd aan de vraag "waar is deze functie gedefinieerd?" VS Code lost dat op:

• F12 — ga naar definitie (Go to Definition).
• Alt+F12 — bekijk de definitie in een klein inline venster (Peek).
• Shift+F12 — vind alle verwijzingen naar een symbool.
• F2 — hernoem een symbool veilig; alle verwijzingen worden automatisch bijgewerkt.
• Ctrl+Tab — wissel tussen recent gebruikte bestanden.

Hernoemen met F2 gebruikt de taalserver in plaats van een gewone zoek-en-vervang, dus het pakt geen valse treffers — een variabele hernoemen verprutst geen commentaar of tekst die toevallig dezelfde naam heeft.

Geïntegreerde terminal en Git-flow

Werken zonder de editor te verlaten levert veel snelheid op. Ctrl+` (backtick) opent/sluit de geïntegreerde terminal; Ctrl+Shift+` maakt een nieuwe aan. Je kunt meerdere terminals naast elkaar splitsen — draai een dev-server in de ene en typ Git-commando's in de andere.

Het Source Control-paneel links (Ctrl+Shift+G) is ideaal om wijzigingen regel voor regel te bekijken. Stage een bestand met de "+" ernaast, schrijf een bericht en commit. De markeringen in de gutter tonen welke regels gewijzigd zijn; klik erop om een wijziging terug te draaien. Voor meer geschiedenis toont de extensie GitLens wie elke regel wanneer schreef (blame) aan het einde van de regel.

Blijvende winst via instellingen

Sneltoetsen zijn momentopnames; instellingen werken elke dag op de achtergrond. Open de instellingen met Ctrl+, of bewerk settings.json rechtstreeks ("Preferences: Open User Settings (JSON)" in het palette). Een paar van de nuttigste:

{
  "editor.formatOnSave": true,
  "files.autoSave": "onFocusChange",
  "editor.tabSize": 2,
  "editor.bracketPairColorization.enabled": true,
  "editor.minimap.enabled": false,
  "files.trimTrailingWhitespace": true
}

Met formatOnSave en een formatter geïnstalleerd (Prettier, ESLint) wordt je code bij elke save opgeruimd — de "inspringingsdiscussie" verdwijnt simpelweg. Zet een .vscode/settings.json en .vscode/extensions.json in de projectroot en teamgenoten openen met dezelfde instellingen en aanbevolen extensies; consistentie krijg je gratis.

Snippets en focus

Maak van de patronen die je vaak typt (een React-component, het skelet van een Laravel-controller, een licentiekop) je eigen snippets: "Snippets: Configure User Snippets" in het palette. Typ een triggerwoord, druk op Tab, en het hele blok verschijnt, met de cursor die door de in te vullen velden springt.

Als je je moet concentreren, verbergt de Zen-modus (Ctrl+K daarna Z) elk paneel en laat alleen de code zien. Ctrl+B schakelt de zijbalk en Ctrl+\ splitst de editor zodat je twee bestanden naast elkaar ziet.

Veelgestelde vragen

Hoe leer ik deze sneltoetsen makkelijker?

Probeer ze niet allemaal in één dag te onthouden. Kies er twee of drie per week en gebruik ze bewust in plaats van de muis. Wanneer je een opdracht uit het palette uitvoert, toont VS Code de sneltoets ernaast — een natuurlijke leercirkel. Je kunt ook een afdrukbaar overzicht pakken via "Help → Keyboard Shortcuts Reference".

Hoe verhuis ik mijn setup naar een andere computer?

Zet de ingebouwde Settings Sync van VS Code aan (tandwielicoon → Turn on Settings Sync). Je instellingen, sneltoetsen, extensies en snippets synchroniseren via je GitHub- of Microsoft-account; log in op een nieuwe machine en alles valt op zijn plek.

Vertragen te veel extensies VS Code?

Dat kan. Voer "Developer: Show Running Extensions" uit via het palette om te zien welke extensie hoeveel opstarttijd en CPU verbruikt. Schakel uit wat je niet gebruikt; activeer sommige alleen voor de relevante projecten via het "workspace"-niveau.

Je editor versnellen is pas het begin van een snellere workflow. Als je een webproject, een automatisering of een opzet bouwt die je ontwikkelproces moet versnellen, kijken we er samen naar — neem contact op.