VS Code slimmer maken met extensies

Visual Studio Code is krachtig in zijn basisvorm, maar wordt pas echt handig met de juiste extensies. Extensies zijn uitbreidingen die extra functies toevoegen, zoals automatisch herladen met Live Server, automatisch aanvullen van paden met Path Intellisense, of het netjes formatteren van code met Prettier. Door een paar essentiële extensies te installeren, werk je sneller, maak je minder fouten en wordt je workflow overzichtelijker.

In dit hoofdstuk overlopen we de belangrijkste extensies voor HTML, CSS en JavaScript. Ook krijg je tips voor extra instellingen die het werken in VS Code aangenamer maken.

Aanraders voor HTML & CSS

  • IntelliSense for CSS class names in HTML (Zignd)
    Autocompletion voor class="..." uit je eigen CSS én Bootstrap.
  • HTML CSS Support
    Betere CSS-/HTML-intelligentie (eigenschappen, waarden, go-to definition van styles).
  • Bootstrap 5 Snippets
    Kant-en-klare component-snippets (bijv. knop, navbar) + class-hints.
  • Path Intellisense
    Vult paden aan in href/src. Typ assets/ en kies het bestand.
  • Auto Rename Tag
    Wijzigt automatisch je sluittag als je de openingstag aanpast.
  • Prettier – Code formatter
    Houdt HTML/CSS/JS automatisch netjes. Zet “Format on Save” aan.
  • Color Highlight
    Toont kleuren direct in je CSS/HTML.
  • Image Preview
    Hover over een afbeeldingspad om een mini-preview te zien.

Preview & lokaal testen

  • Live Server (Ritwick Dey)
    Start een lokale server met auto-refresh. (Geen PHP.)
  • Live Preview (Microsoft)
    Alternatieve ingebouwde preview. Ook geen PHP-support.

Git (versiebeheer)

  • GitLens
    Laat zien wie wat veranderde, wanneer, en waarom.

Snelle instellingen (aanbevolen)

In VS Code kan je instellingen aanpassen via het tandwiel links onderaan → Instellingen. Voor gevorderden kan je ook direct werken in het Settings (JSON)-bestand. Voeg daarin deze regels toe: 

{
  "editor.formatOnSave": true,
  "liveServer.settings.port": 5500,
  "liveServer.settings.useLocalIp": true,
  "css.classCompletion.enable": true,
  "html-css-class-completion.enableEmmetSupport": true,
  "editor.minimap.enabled": false
}
  • "editor.formatOnSave": true → Formatteert je code automatisch netjes bij opslaan (werkt met Prettier of de standaard formatter).
  • "liveServer.settings.port": 5500 → Stelt de poort van Live Server in. Handig als er een conflict is, of om steeds dezelfde poort te gebruiken.
  • "liveServer.settings.useLocalIp": true → Laat je site ook openen via het lokale IP-adres (bv. http://192.168.0.12:5500), zodat je kan testen op smartphone of tablet.
  • "css.classCompletion.enable": true → Zet automatische aanvulling aan voor CSS-klassen in je HTML.
  • "html-css-class-completion.enableEmmetSupport": true → Combineert Emmet en class-aanvulling, zodat je sneller Bootstrap- en eigen klassen kan gebruiken.
  • "editor.minimap.enabled": false → Schakelt de minimap (het kleine overzicht rechts) uit. Rustiger voor beginners, minder afleiding.
Tip: Open dit bestand via Ctrl/Cmd + Shift + P → Preferences: Open Settings (JSON). Zo kan je deze instellingen direct plakken.
Tip: Zorg dat je bootstrap.min.css of je eigen my_style.css echt gelinkt is in je project.

Gebruik in de praktijk

  • Typ in je HTML: class="btn → accepteer voorstel btn btn-primary.
  • Typ in href=" of src=" → kies pad met Path Intellisense.
  • Klik rechtsonder Go Live om te testen met Live Server.

Terug naar boven