VS Code

NodeJS

NodeJS is een extensie van Javascript voor serverside en lokale toepassingen.

We zullen er zelf niet rechtstreeks mee werken, maar een aantal tools die we binnen onze tekst editor nodig hebben, vereisen dit. Dus download en installeer NodeJS (de windows installer is ok).

Je kan in Visual Studio Code (die we in volgende stap installeren) eenvoudig controleren of NodeJS correct geïnstalleerd is door het versienummer op te vragen. Open een nieuwe terminal via View, New Terminal..., en tik het commando npm -version (npm is een afkorting van Node Package Manager). Als je een foutmelding krijgt, dan is NodeJS nog niet geïnstalleerd.

Visual Studio Code

Visual Studio Code is de tekst editor waarmee we onze code zullen schrijven. Het heeft alle kenmerken die een tekst editor moet bezitten, en is vandaag dé editor voor web development:

• visueel aantrekkelijk en strakke GUI
• bestanden & mappen: navigatiebar, projecten, meerdere bestanden in tabbladen
• editeren: code folding, syntax highlighting, autocompletion en -indentatie, on-the-fly syntax check, shortcuts, refactoring, auto layout...
• zoeken/vervangen: basic search, searching in folders, reguliere expressies
• integraties: Git, terminal...
• aanpasbaarheid: kleurschema's, voorkeuren
• uitbreidbaarheid: mogelijkheid extensies te downloaden en installeren

downloaden

Download en installeer VS Code

extensies installeren

Extensies zijn plugins waarmee je de functionaliteit van VS Code kan uitbreiden of aanpassen. Installeer volgende extensies (zie screenshot):

1. EditorConfig for VS Code
2. ESLint
3. HTML-validate
4. htmltagwrap
5. Live Preview
6. Stylelint
7. W3C Web Validator

github copilot verwijderen

Github Copilot is een niet erg bruikbare AI-assistent (met een slechte rating), die je beter verwijdert:

werkmap openen

Je opent nooit zomaar losse bestanden in VS code, maar een folder waarin je werkt — de werkmap of working directory. Voor elk vak zul je een boilerplate krijgen (te downloaden van Toledo): dit is een kant-en-klare mappenstructuur voor je oefeningen. Open altijd de volledige boilerplate in VS Code via het File menu:

Je krijgt alle mappen te zien (screenshot voor Web Development Fundamentals). Uit veiligheid wordt de geopende folder niet zomaar vertrouwd. Maak deze folder trusted:

Je ziet tenslotte links alle submappen, samen met een paar configuratiebestanden:

packages installeren

We hebben eerder een aantal extensies als html-validate, stylelint en eslint geïnstalleerd in VS Code. Om te kunnen werken hebben ze een aantal Node packages nodig. Dit zijn code libraries met specifieke functionaliteit, die we zullen installeren in de working directory. Je boilerplate bevat een bestand package.json, waarin alle nodige packages opgelijst staan:

Open de Terminal (Terminal, new Terminal... of Shift-Ctrl-`), en installeer alle packages in je working directory met volgend commando:

npm install

Het kan zijn dat je eerst volgende foutmelding krijgt:

Run dan dit commando, en voer daarna npm install opnieuw uit:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Samenvattende screenshot:

Je ziet dat er een map node_modules bijgekomen is. Deze bevat alle packages uit package.json, plus alle packages die zij weer nodig hebben, de zgn. dependencies:

uitleg configuratiebestanden

In de root van de boilerplate komen allerhande configuratiebestanden voor.

Enkele typische:

• .editorconfig: algemene editor instellingen
• .gitignore: lijst bestanden en mappen die niet gepushed hoeven worden naar Github
• .htmlvalidate.json: HTML-validate HTML linter opties
• .stylelintrc.json: StyleLint CSS linter opties
• eslint.config.mjs: ESLint Javascript linter opties
• package.json: bestand met alle packages die geïnstalleerd zullen worden via het npm install commando in de terminal
• package-lock.json: bestand met alle packages versies

Deze bevatten allerhande instellingen zoals gebruikte karakterset, indentatiestijl (tabs of spaties, spronggrootte), voorkeuren qua hoofdlettergebruik, layout, toegelaten HTML tags, Javascript syntax, witruimtes enz...

Het is belangrijk dat deze instellingen bij iedereen gelijk zijn: breng dus geen wijzigingen aan deze bestanden aan!

Hoe oefeningen maken

Open altijd eerst je volledige repository in VS Code, zie repository openen

oefening aanmaken

Eerst moet je weten om welke les en wat de naam van de oefening is. Dit vind je terug in de opgave:

Stappen:

1. maak een submap in de les met exact de naam van de oefening, hier InVuurEnVlam
2. voeg daarin eventuele afbeeldingen en ander startmateriaal toe
3. voeg een bestand index.html toe
4. maak de HTML basiscode aan (b.v. met de html:5 + tab shortcut)

oefening uitwerken

Voeg nu alle mappen en bestanden toe die je nodig hebt voor deze oefening, typisch:

• img: afbeeldingen (meestal meegegeven met de opgave)
• css: stijlen
• js: scripts
• fonts: lettertypes
• vendor: externe bestanden en plugins als lightbox, carousel...
• ...

Werk tenslotte de opgave uit. Indien nodig, maak je nog extra submappen aan, b.v. voor afbeeldingen, CSS, fonts enz... VS Code herkent een git repository en geeft in kleur aan welke veranderingen er zijn sinds de laatste commit:

live preview

De Live Preview extensie opent je pagina in de browser; elke keer als je opslaat wordt de pagina automatisch bijgewerkt. Je vindt de knop rechtsboven (als een html pagina openstaat):

De preview opent in een nieuw tabblad. Handiger is direct in de browser:

Je ziet je code en het resultaat dan apart, live gerefreshed:

Standaard gebeurt de update elke toetsaanslag, wat hinderlijk kan zijn. Verander het bij instellingen (shortcut: Ctrl ,) zodat de update enkel bij het opslaan (shortcut: Ctrl S) gebeurt:

Een voorbeeld van een correcte setup, met je code op je laptop en de live server op een externe monitor:

Code kwaliteit

Zeker even belangrijk als de code functionaliteit, is de code kwaliteit: voor de leesbaarheid, efficiëntie, fout(on)gevoeligheid. Gelukkig zijn er een aantal tools die ons kunnen helpen bij het schrijven van betere code en het opvangen van mogelijke fouten.

layout

Zonder degelijke layout kan je de structuur van je programma niet zien, en dus onmogelijk programmeren. Zolang je zelf de code typt treden geen problemen op; elke editor auto-indenteert tegenwoordig. Als je fragmenten van elders kopieert, kan het zijn dat je de layout handmatig moet goedzetten. Gelukkig heeft elke editor daar een shortcut voor; in VS Code is dat Shift-Alt-F.

linting

Met linting tools wordt de code automatisch gecontroleerd op mogelijke bugs (verdachte/gevaarlijke code) en stijl inconsistentie (b.v. hoofdlettergebruik, layout...). Er zijn veel linting tools in omloop; wij gebruiken de volgende:

• html-validate voor HTML
• stylelint voor CSS
• eslint voor Javascript

Naast de tool zelf (geïnstalleerd als NPM package) heb je meestal ook een extensie nodig om het in VS Code te integreren. Tijdens de installatie van de extensies hebben we dat allemaal al in orde gebracht voor deze drie tools. Een screenshot van typische meldingen:

Het is uiteraard ook de bedoeling dat je de meldingen ook effectief oplost. Dit kan op volgende manieren:

• de fout verbeteren
• de regel lokaal uitschakelen
• het configuratiebestand van de linting tool aanpassen

Het beste is altijd de fout verbeteren — meestal handmatig (lees de melding!), maar soms is er ook een Quick Fix:

Je kan in theorie de melding ook soms uitschakelen voor deze regel, maar dan moet je echt wel een goede reden hebben (en geloof me, dat heb je meestal niet!):

W3C validatie

Lintingtools zullen over het algemeen naast de stijl van je code ook controleren op pure syntaxfouten. Voor HTML worden de syntaxregels onderhouden door het W3C of World Wide Web Consortium. Dit zijn er dermate veel dat de HTML-validate linting tool niet volstaat, en een extra W3C Web Validator extensie nodig is (installatie zie extensies installeren). Deze moet je manueel uitvoeren, bij voorkeur telkens voor het pushen. Soms vindt het toch nog fouten die door de HTML-validate linting tool over het hoofd worden gezien, zoals hier:

Sneller typen

Er zijn twee belangrijke redenen om te investeren in het sneller leren typen:

• snelheid: een programmeur kost al snel 100€ per uur aan zijn werkgever; dankzij shortcuts kan je veel sneller werken
• ontlasting lichaam: met shortcuts werken b.v. is veel minder belastend voor gewrichten en spieren dan telkens te moeten wisselen tussen toetsenbord en muis

Shortcuts

Tabel van de belangrijkste shortcuts die je zo snel mogelijk onder de knie zou moeten krijgen (volledige cheatsheet zie Windows en OSX); probeer ze zoveel mogelijk uit tijdens de oefeningen.

HTML tags aanvullen met TAB

Tags voeg je snel toe door in HTML enkel de naam te typen, gevolgd door de TAB. Demo (animated gif):

Daarnaast is het uiteraard ook belangrijk vlot te kunnen navigeren met pijltjestoetsen en te kunnen copy-pasten, zie shortcuts

htmltagwrap

De veelgebruikte extensie htmltagwrap laat toe makkelijk een element rond een tekst of code te plaatsen met Alt-W:

Emmet HTML shortcodes

Emmet is een standaard ingebouwde shortcode plugin. Demo (animated gif):