Algemeen

Deze pagina beschrijft de algemene software die nodig is voor de lessen en oefeningen van de vakken binnen de JavaScript leerlijn. Als er, voor een bepaald vak, extra configuratie nodig is, dan wordt dit in de specifieke sectie van dat vak beschreven.

Er worden installatie-instructies voorzien voor Windows, macOS (gebruikmaken van zsh) en Linux (Debian gebaseerde systemen met bash en apt-get). Als de instructies verschillen per besturingssysteem wordt dit duidelijk aangegeven in de tekst.

Node.js

Node.js is een JavaScript runtime waarmee JavaScript uitgevoerd kan worden buiten de browser. Node kan gebruikt worden om servers te schrijven, scripts te automatiseren en om JavaScript interactief te gebruiken in een interpreter.

Download de LTS-versie van de Node website.

Kies tijdens de installatie voor 'Automatically install the necessary tools. Note that this wil also install Chocolatey The script will pop-up in a new window after the installation completes'.

Figuur 0: Node.js Installatie op Windows

Info

Je hebt deze tools niet noodzakelijk nodig doorheen voor de cursussen op deze website, maar de kans bestaat dat je de tools nodig hebt voor het project van Mobile Development. Als deze optie foutmeldingen produceert, mag je deze negeren. Als blijkt dat je één van de geïnstalleerde tools nodig hebt voor je project, lossen we het probleem dan op.

Scripts toestaan

Om alle commando's vlot te kunnen gebruiken op een Windows machine moet je het uitvoeren van scripts toestaan. Hiervoor start je PowerShell als Administrator en voer je vervolgens het commando uit.

Set-ExecutionPolicy RemoteSigned

Figuur 0: Execution Policy instellen op Windows

Path limit aanpassen

Windows staat standaard slechts relatief korte padnamen toe. Omdat de node_modules (de map met dependencies) dikwijls diep genest kan zijn, is dit mogelijks een probleem.

Voer onderstaand commando uit als administrator in PowerShell om de limiet te verhogen.

New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" -Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force

Alhoewel er voor macOS een installer beschikbaar is op de Node.js website, is het aan te raden op een Node package manager te gebruiken die het eenvoudiger maakt om verschillende versies van Node te installeren.

Begin met de XCode Developer Tools te installeren, deze library bied software aan die nodig is voor heel wat tools die we binnen deze cursussen gebruiken. Open de terminal en voer het volgende commando uit.

xcode-select --install

Vervolgens kan Node geïnstalleerd worden via Node Version Manager (nvm).

# Installeer de Node Version Manager
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# Voeg de nvm configuratie toe aan je shell profile zodat je het nvm commando kan gebruiken.
# Als je ooit al een shell profiel aangemaakt hebt gebeuren onderstaande twee regels automatisch.
echo 'export NVM_DIR="$HOME/.nmv"' >> ~/.zshrc
echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads NVM' >> ~/.zshrc

# Laad de nieuwe configuratie in je huidige shell sessie.
source ~/.zshrc

# Download en installeer de laatste LTS versie van Node.
nvm install --lts

# Test dat Node en npm correct geïnstalleerd zijn.
node -v # Zou iets als v20.16.0 moeten geven.
npm -v  # Zou iets als 10.8.1 moeten geven.

Voer volgende commando's uit in een terminal om Node.js te installeren. Deze commando's gebruiken Node Version Manager (nvm) om een specifieke versie van Node.js te installeren.

# Installeer de Node Version Manager
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

# Laad de wijzigingen aan je PATH in je huidige shell sessie.
source ~/.bashrc

# Download en installeer de laatste LTS versie van Node.
nvm install --lts

# Test dat Node en npm correct geïnstalleerd zijn.
node -v # Zou iets als v20.16.0 moeten geven.
npm -v  # Zou iets als 10.8.1 moeten geven.

Node package manager & pnpm

De Node Package Manager (of npm) kan gebruikt worden om verschillende soorten JavaScript apps te bootstrappen en om bibliotheken te installeren.

Npm is een volwaardige package manager waarmee alle nodige pakketten geïnstalleerd kunnen worden, toch kiezen we voor een alternatief, pnpm. Deze package manager is tot 2x sneller dan npm en download een pakket slechts één keer terwijl npm een installatie voor elk project (voorbeeld/oefening) vereist. Installeer pnpm door het volgende commando uit te voeren in een shell (cmd, powershell, bash, zsh, fish, ...).

Notitie

Elke commando dat gebruikt maakt van een node package manager wordt aangeboden in vier varianten, npm, pnpm, bun en yarn.

Alhoewel de commando's normaalgezien zouden moeten werken, is enkel pnpm grondig getest door het docententeam.

npm install -g pnpm

Om zo min mogelijk commando's uit te voeren is het nodig om de standaardinstellingen van pnpm licht aan te passen. Dit kan door middel van onderstaande commando's.

pnpm config set auto-install-peers=true
pnpm setup

Als je macOS gebruikt is het best om de global install directory aan te passen zodat je geen sudo-rechten nodig hebt om een library globaal te installeren.

Onderstaande code zorgt dat globale libraries geïnstalleerd wordt in de homedirectory van je gebruikersaccount.

pnpm config set global-dir ~/.local/share/pnpm-global

Als je Linux gebruikt is het best om de global install directory aan te passen zodat je geen sudo-rechten nodig hebt om een library globaal te installeren.

Onderstaande code zorgt dat globale libraries geïnstalleerd wordt in de homedirectory van je gebruikersaccount.

pnpm config set global-dir ~/.local/share/pnpm-global

Editor

De docenten raden WebStorm aan als IDE voor de JavaScript lessen, maar dit is geen verplichting. Werk je liever met Visual Studio Code (of een andere IDE/Editor), dan mag dat.

WebStorm is een krachtige IDE die specifiek ontworpen is voor JavaScript en webontwikkeling, met ingebouwde ondersteuning voor veel van de tools en frameworks die we in deze cursussen gebruiken. In VS Code moeten doorgaans meer plugins geïnstalleerd en geconfigureerd worden om dezelfde functionaliteit te bereiken.

WebStorm is een IDE en geen editor, dit betekent dat het meer functies en mogelijkheden heeft dan VS Code, maar dit gebruikt aanzienlijk systeembronnen en kan soms leiden tot rare caching issues die vereisen dat je de IDE opnieuw opstart. VS Code is daarentegen meer lightweight en sneller, maar heeft minder ingebouwde functionaliteit.

WebStorm is daarnaast betalend voor commercieel gebruikt, terwijl VS Code volledig gratis is.

Ga naar de JetBrains Education pagina en vraag een gratis licentie aan via je Thomas More email.

Om WebStorm te installeren heb je twee opties, de eerste is de Toolbox. Dit is een applicatie waarmee alle JetBrains producten geïnstalleerd kunnen worden, verder geeft deze app je ook toegang tot beta-builds van nieuwe versies en worden de geïnstalleerde tools automatisch bijgewerkt als er een nieuwe (stabiele) release beschikbaar is. De andere optie is om WebStorm als stand-alone te installeren. De docenten raden je aan om de Toolbox te gebruiken, maar de keuze is aan jou.

Visual Studio Code is gratis te downloaden van de officiële website. Voor diegenen die liever een variant gebruiken zonder Microsoft telemetry, is er ook de open-source variant van VS Code, VSCodium.

Biome

Notitie

Deze configuratie is in 2025-2026 enkel nodig voor de JavaScript cursus.

In deze cursussen maken we gebruik van Biome om de code te controleren op fouten en automatisch te formatteren.

Om Biome te activeren in WebStorm moet een plugin geïnstalleerd worden. Als je WebStorm nog nooit opgestart hebt, kan je de opties openen via Customize > All Settings.

Figuur 0: Globale instellingen openen in WebStorm

Als je al een project geopend hebt, kan je de instellingen openen via File > Settings. Open vervolgens het Plugins menu en zoek naar de Biome plugin in het "Marketplace" tabblad.

Figuur 0: Biome Plugin

Eens deze plugin geïnstalleerd is en de IDE eventueel opnieuw opgestart is, navigeer je naar File > Settings > Languages & Frameworks > JavaScript > Biome en kies je voor onderstaande opties.

In het geval je dit niet graag hebt, kan je de "on save" acties eventueel uit laten staan, maar dan moet je er aan denken om de linting commando's manueel uit te voeren.

Figuur 0: Biome Configuratie

Om Biome te activeren in VS Code, navigeer je naar de extensies tab en zoek je vervolgens naar de Biome plugin in de marketplace.

Figuur 0: Biome Plugin

Eens deze plugin geïnstalleerd is, open je de VS Code instelling in JSON-formaat. Hiervoor gebruikt je de sneltoets Ctrl + Shift + P en zoek je naar "Preferences: Open Settings (JSON)". Vervolgens voeg je de gemarkeerde lijnen in onderstaande configuratie toe aan je instellingen. In het geval dat je dezelfde keys al ergens in je configuratie hebt staan, moet je deze natuurlijk wel samenvoegen.

Als je niet wilt dat Biome bestanden automatisch formateerd bij het opslaan, kan je de editor.formatOnSave optie uitzetten en de source.fixAll.biome en source.organizeImports.biome opties verwijderen.

{
  "editor.defaultFormatter": "biomejs.biome",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports.biome": "explicit",
    "source.fixAll.biome": "explicit"
  },
  "biome.enabled": true,
  "biome.suggestInstallingGlobally": false
}

ESLint & Prettier

Notitie

Deze configuratie is enkel voor studenten die 2025-2026 Frontend, Mobile of Backend volgen.

In deze cursussen maken we gebruik van ESLint om de code te controleren op fouten en Prettier om de code automatisch te formatteren. Voordat je de ESLint foutmeldingen te zien krijgt of de code automatisch geformatteerd wordt, moet WebStorm geconfigureerd worden om ESLint en Prettier te activeren.

Als WebStorm de eerste keer start, heb je de optie om de globale instellingen te bewerken. Dit kan via Customize > All Settings. Als je WebStorm ooit al eens gebruikt hebt kan je dit menu terug openen door je project af te sluiten via File > Close Project.

Figuur 0: Globale instellingen openen in WebStorm

Om ESLint te activeren navigeer je naar Settings > Languages & Frameworks > JavaScript > Code Quality Tools > ESLint, vervolgens activeer je de optie 'Automatic ESLint configuration'. Deze optie zorgt ervoor dat een eslint.config.mjs file uitgelezen wordt en dat de daarin opgelegde stijlregels afgedwongen worden.

We raden aan om de optie 'Run eslint --fix on save' te activeren, hierdoor wordt de code automatisch geformatteerd als een bestand bewaard wordt.

Figuur 0: ESLint instellingen in WebStorm

Om Prettier te activeren navigeer je naar Settings > Languages & Frameworks > JavaScript > Prettier, vervolgens activeer je de optie 'Automatic Prettier configuration'. We raden opnieuw aan om de optie 'Run on save' te activeren.

Figuur 0: Prettier instellingen in WebStorm