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 Server
6. Quick HTML Previewer
7. Stylelint
8. W3C Web Validator

repository openen

Voor elk vak zul je een repository moeten maken, zie dit hoofdstuk. Als je oefeningen maakt, open je altijd eerst de volledige repository in VS Code. Het makkelijkste is via Verkenner of via Github Desktop:

Je krijgt alle mappen te zien (screenshot voor Basic Web Development):

packages installeren

We hebben nu een aantal extensies als html-validate, stylelint en eslint geïnstalleerd. Deze extensies hebben om te kunnen werken een aantal Node packages nodig. Dit zijn code libraries met specifieke functionaliteit. Je repository bevat een bestand package.json, waarin alle nodige packages staan:

Installeer ze met het npm install commando in de Terminal (Terminal, new Terminal... of Shift-Ctrl-`).

Opmerking: als je volgende foutmelding krijgt, run je eerst dit commando:

Het commando:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

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:

Dit zijn er gemakkelijk een paar honderd! Dit zijn duizenden bestanden en tientallen megabytes die je eenvoudig kan herstellen door opnieuw npm install uit te voeren. We zullen de map node_modules daarom uitsluiten van versiebeheer (i.e. het wordt niet meegepushed naar Github.com) met deze regel in .gitignore:

Je moet er alleen aan denken elke keer je een clone van de repository maakt (b.v. op een andere PC) opnieuw even npm install uit te voeren om de map node_modules te herstellen.

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

stap 1: maak de oefening aan

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 MijnEerstePagina
2. voeg een bestand index.html toe
3. maak de HTML basiscode aan (b.v. met de html:5 + tab shortcut)
4. geef de pagina een titel

stap 2: werk de oefening uit

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... Let er op dat alle resources correct gelinkt zijn:

VS Code herkent een git repository en geeft in kleur aan welke veranderingen er zijn sinds de laatste commit:

stap 3: commit en push

Open nu Github Desktop (zie dit hoofdstuk). Je ziet gelijkaardige kleurcodes met alle wijzigingen:

Geef een commit message, commit en push je de wijzigingen naar Github.com.

Controleer zeker online op github.com eens of alles er goed op staat:

Live previewen

Er zijn twee manieren om je werk te bekijken tijdens het werken:

• Preview, standaard ingebouwd in VS Code: weergave in VS Code (zie screenshot hierboven)
• Live Server via de Live Server extensie: weergave in de browser met live update

VS Code Preview

De previewfunctie toont de pagina in VS Code in een tabblad:

Het heeft een paar belangrijke beperkingen:

• werkt niet goed voor complexere CSS of Javascript
• previewvenster is eigenlijk te klein om bruikbaar te zijn
• geen debuggingmogelijkheden zoals developer tools in browsers

Live Server extensie

Wegens de beperkingen van de previewfunctie, gebruik je — tenzij misschien voor snelle previews — altijd de Live Server. Je pagina zal openen in de browser, en elke keer als je opslaat bijgewerkt worden. 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 VS Code hebben we dat allemaal al in orde gebracht voor de 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 dit deel). 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, gevoldg 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):