Werken met IntelliSense in VS Code

Tijdens het programmeren in Visual Studio Code helpt IntelliSense je met automatische suggesties. Terwijl je typt, toont VS Code mogelijke HTML-tags, Bootstrap-klassen of zelfs je eigen CSS-klassen en ID’s. Zo hoef je minder te onthouden, werk je sneller en maak je minder typfouten.

IntelliSense is vooral nuttig bij het schrijven van lange of complexe klassenamen. Typ je bijvoorbeeld class="btn-, dan krijg je automatisch een lijst met Bootstrap-knoppen zoals btn-primary of btn-success. Met de juiste extensie werkt dit ook voor je eigen style.css, zodat je onmiddellijk de juiste klassennamen kunt selecteren.

Hoe werkt het?

1. Typ een stukje code, bv. class="btn-.
2. VS Code toont een lijst met mogelijke suggesties (dropdown).
3. Gebruik de ↑ en ↓ pijltjestoetsen om door de lijst te scrollen.
4. Bevestig je keuze met:
   • Tab → handig tijdens het typen;
   • Enter → werkt ook (zorg dat editor.acceptSuggestionOnEnter aanstaat in de instellingen).

Voorbeeld met Bootstrap

Typ je in een HTML-bestand:

<button class="btn-

Dan stelt IntelliSense automatisch Bootstrap-klassen voor zoals:

• btn-primary
• btn-secondary
• btn-success

Kies met de pijltjes en bevestig met Tab. Het resultaat:

<button class="btn-primary">Klik mij</button>

IntelliSense met eigen CSS

IntelliSense toont niet alleen Bootstrap-klassen, maar ook je eigen CSS-klassen en ID’s. Zorg dat je stylesheet goed gelinkt is in je HTML:

<link rel="stylesheet" href="assets/styles/my_style.css">

Voorbeeld in my_style.css:

.download-link {
  color: #0d47a1;
  font-weight: bold;
}

#special {
  background: yellow;
}

Als je daarna in HTML typt:

<a class="do">

dan stelt IntelliSense automatisch download-link voor.
Typ je id="sp, dan stelt hij special voor.

Terug naar boven