02. 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

Installatie

downloaden

Download en installeer VS Code

installatie packages

Node packages kan je zien als code bibliotheken die kunnen gebruikt worden door allerhande extensies of VS Code zelf. Om deze packages te kunnen installeren en beheren heb je NodeJS nodig, dus mocht je dat nog niet geïnstalleerd hebben, ga dan terug naar stap 2 en installeer het eerst.

Open een nieuwe terminal in VS Code, en voer één voor één volgende vijf commando's uit:

> npm install -g html-validate
> npm install -g eslint@8.57.0
> npm install -g stylelint
> npm install -g stylelint-config-recommended
> npm install -g stylelint-csstree-validator

Een screenshot van het eerste commando:

Als je niet zeker bent of je dit al gedaan hebt of niet, voer deze commando's gerust nog eens uit, dat kan geen kwaad. Je krijgt in het beste geval nieuwere versies. Je kan altijd controleren welke packages al geïnstalleerd zijn met het npm list -g commando in terminal:

extensies

Extensies zijn plugins waarmee je de functionaliteit van VS Code kan uitbreiden of aanpassen. Sommige extensies hebben de Node packages uit vorige stap nodig, dus als je die nog niet geïnstalleerd hebt, doe dat dan eerst. 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

configuratie

In de root van je project kunnen allerhande configuratiebestanden voorkomen. Wij gebruiken de volgende:

• editorConfig: algemene editor instellingen
• eslintrc.json: ESLint Javascript linter opties
• 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

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. De exacte configuratie verschilt van vak tot vak; voor Basic Web Development en Dynamic Web Development zul je een template vinden op Toled. Een screenshot voor BWD::

Hoe oefeningen maken

stap 1: open je repository in VS Code

Voor elk vak zul je een repository moeten maken, zie dit hoofdstuk. Elke keer als je een oefening maakt, open je de volledige repo in VS Code. Enkel één oefening kan ook, maar dan is het moeilijker om code uit andere lessen terug te vinden om te gebruiken. Er zijn meerdere manieren. Het makkelijkste is via Verkenner of via Github Desktop:

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

stap 2: 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 3: 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:

stap 4: commit en push

Als je klaar bent met de oefening, commit en push je de wijzigingen naar Github. De eenvoudigste en meest universele manier is met Github Desktop; meer details in dit hoofdstuk.

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):