Visual Studio Code

Visual Studio Code (kortweg VS Code) is een gratis en krachtige code-editor van Microsoft. Het is speciaal ontworpen voor webontwikkeling en ondersteunt heel wat programmeertalen zoals HTML, CSS, JavaScript en PHP. Dankzij uitbreidingen (extensions) kan je de editor eenvoudig uitbreiden met extra functies.

1. Downloaden en installeren

Ga naar de officiële website: code.visualstudio.com
Klik op Download for macOS (Universal).
Open het gedownloade bestand en sleep Visual Studio Code.app naar de map Programma’s.
Start de app via Launchpad of Finder.

2. Eerste configuratie

Bij de eerste start kies je best de standaardinstellingen.
VS Code ondersteunt thema’s. Je kan via Preferences → Color Theme een ander thema instellen.
Je kan de taal instellen via View → Command Palette → Configure Display Language.
Installeer bij Extensions meteen Live Server. Daarmee open je HTML-pagina’s direct in de browser en zie je live updates.
Voor 6e jaar (PHP): zoek in Extensions naar PHP Server of PHP Intelephense voor syntax highlighting en live testmogelijkheden.

3. Waarom VS Code?

VS Code is licht, snel en flexibel. Het heeft ingebouwde functies zoals syntax highlighting, automatisch aanvullen en foutdetectie. Dit maakt het veel praktischer dan een eenvoudige teksteditor zoals Kladblok of TextEdit. Door vanaf het begin met een professionele editor te werken, leer je meteen goede gewoontes aan die ook in de praktijk gebruikt worden.

4. Oefening: eerste HTML met Live Server

Maak in je documentenmap een map Webdevelopment/oef1_helloworld/.
Open deze map in VS Code (File → Open Folder…).

Maak een nieuw bestand index.html en plak dit in:

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <title>Hallo wereld</title>
</head>
<body>
  <h1>Mijn eerste webpagina in VS Code</h1>
  <p>Dit is een test met Live Server.</p>
</body>
</html>

Klik rechtsonder in VS Code op Go Live (of klik rechts op je bestand → Open with Live Server).
Je pagina opent in de browser. Pas iets aan in de code, sla op, en zie de update live in je browser.

5. Extra oefening (6e jaar): eerste PHP-bestand

Maak in een nieuwe map oef_php_intro/ een bestand index.php.

Plak dit in:

<?php
  $naam = "Eddy";
  echo "<h1>Welkom $naam</h1>";
  echo "<p>Dit is mijn eerste PHP-pagina.</p>";
?>

Installeer de extensie PHP Server in VS Code.
Klik rechts op index.php → PHP Server: Serve project.
Bekijk de pagina in de browser. Wijzig de variabele $naam en zie het resultaat.

Samenvatting

VS Code is een gratis en veelzijdige code-editor.
Downloaden doe je via code.visualstudio.com.
Installeer extensies zoals Live Server (HTML/CSS/JS) en voor gevorderden ook PHP-modules.
Met Live Server zie je HTML direct live, met PHP Server kan je eenvoudige PHP-testen doen.

Terug naar boven