Algemeen
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'.
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 RemoteSignedPath 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 -ForceAlhoewel 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 --installVervolgens 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 pnpmOm 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 setupAls 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-globalAls 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-globalWebStorm
Tijdens de lessen wordt er gebruik gemaakt van de WebStorm, dit is echter geen verplichting. Werk je liever met Visual Studio Code (of een andere IDE/Editor), dan mag dat. Let op, je moet dan wel zelf op zoek naar de juiste plug-ins en instellingen, WebStorm is veel eenvoudiger te configureren en doet zo goed als alles automatisch of met een paar klikken. Voor VS Code moeten verschillende plug-ins geïnstalleerd worden om eenzelfde resultaat te bereiken.
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.
ESLint & Prettier
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.
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.
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.
Code Style
Binnen deze cursussen gebruiken we volgende stijlregels:
- We gebruiken 2 spaties voor indentatie.
- Strings staan in single quotes.
- Er worden geen trailing commas gebruikt in interfaces, types, enums, ...
- Er worden trailing commas gebruikt in objecten en arrays als deze over meerdere lijnen geschreven worden.
- Er wordt geen puntkomma gebruikt om een lijn af te sluiten tenzij het absoluut noodzakelijk is.
WebStorm kan geconfigureerd worden om deze stijlregels te volgen in automatisch gegenereerde code. Hiervoor navigeer je (opnieuw vanuit de globale instellingen) naar Settings > Editor > Code Style > TypeScript. En configureer je de instellingen zoals hieronder beschreven.
Info
Alle voorbeelden worden ook van een .editorconfig voorzien die zo goed als alle instellingen automatisch configureert. Punctuatie wordt echter niet ondersteund door deze tool.
