Digitale Toledo

Thema: Tools | Tags: #vscode #live preview #plugin #extensie #chromeos #mac #windows

Hoe installeer ik plugins in VS Code?

In VS Code kun je plugins (ook wel extensies genoemd) installeren. Plugins voegen extra functies toe, zoals het bekijken van HTML-bestanden, het werken met Python, of het gebruik van GitHub.

Een van de belangrijkste plugins bij webontwikkeling is Live Preview: hiermee kun je direct in de browser zien hoe je website eruitziet terwijl je code schrijft.

Stappenplan voor het installeren van een plugin:

  1. Open VS Code.
  2. Klik in de linkerzijbalk op het icoon Extensions (vier blokjes).
  3. Typ de naam van de plugin in de zoekbalk (bijvoorbeeld Live Preview).
  4. Klik op de plugin in de lijst.
  5. Controleer of de plugin van een betrouwbare uitgever is (bij Live Preview is dat Microsoft).
  6. Klik op Install.

Voorbeeld: Live Preview

  1. Open een HTML-bestand (bijvoorbeeld index.html).
  2. Klik rechtsboven op het pictogram Live Preview of gebruik het commando:
  3. Windows/Linux: Ctrl+Shift+PLive Preview: Show Preview
  4. macOS: Cmd+Shift+PLive Preview: Show Preview
  5. Algemeen: Open een HTML bestand en klik op het boekje met een vergrootglas.
  6. Je pagina opent nu in een browser-tabblad of ingebouwd venster.
  7. Sla je bestand op (Ctrl+S of Cmd+S), en je ziet de wijzigingen direct terug.

Tips:

  • Installeer alleen de plugins die je echt nodig hebt, om VS Code overzichtelijk en snel te houden.
  • Voor webontwikkeling zijn Live Preview, HTML CSS Support, en Prettier (automatische formattering) vaak handig.
  • Als een plugin niet werkt: herstart VS Code of kijk in de instellingen van de plugin.