Efficiënte webontwikkeling met Visual Studio Code

Visual Studio Code is een van de meest populaire gratis ontwikkelomgevingen, met een groot aanbod uitbreidingen. Met een beetje configureren maak je van die editor op alle besturingssystemen een werkomgeving voor efficiënte webontwikkeling en snelle prototyping met HTML en CSS.

Soms moet het gewoon snel gaan: als je begint met het ontwikkelen van een webproject, een prototype nodig hebt, een nieuwe functie wilt testen of een workshop uitvoert, wil je niet ellenlang bezig zijn met het inrichten van je werkomgeving. Je hebt een lokale webserver nodig, voor de meeste CSS-projecten ook een preprocessor en de editor moet wat meer mogelijkheden bieden dan alleen code-highlighting.

Je kunt voor die taken wel allemaal verschillende tools installeren en configureren, maar het gaat een stuk sneller als je Visual Studio Code (afgekort tot VS Code of VSC) gebruikt in combinatie met de juiste uitbreidingen. Deze IDE is gratis beschikbaar voor Linux, macOS en Windows (zie de link op de laatste pagina van dit artikel). VSC wordt ontwikkeld met een opensourcelicentie en met veel persoonlijke input van Microsoft-medewerkers.

PROJECTSTRUCTUUR

Als voorbeeld voor snelle webontwikkeling nemen we een eenvoudige statische website met een beknopt persoonlijk profiel. Behalve een welkomstbericht moet die een ‘Meer over mij’-pagina en een informatiepagina (impressum) bieden, uiteraard met externe stijlen. Maak voor dat project een nieuwe lege map aan en voeg die met ‘File / Add folder to workspace’ toe in Visual Studio Code. Het werkt begint met het bestand index.html. Als je het voorbeeld niet wilt overtypen, kun je code voor het project downloaden via de link op de laatste pagina van dit artikel.

Het indexbestand ga je eerst voorzien van de complete standaardopbouw voor een HTML-document. Die kun je uit het hoofd in het bestand typen of kopiëren van een bron op internet, maar dat is beide niet erg elegant of efficiënt. Een betere oplossing is de tool Emmet, die standaard beschikbaar is in VSC en bij HTML-documenten actief is. Dankzij Emmet kun je als gebruiker met enkele toetsaanslagen lange HTML-structuren toevoegen. De syntaxis daarvoor is afgeleid van die van CSS-selectors. In plaats van de basis voor een HTML-document zelf te typen, hoef je enkel de afkorting ! in te typen. Zodra je daarna op de Enter- of Tab-toets drukt, wordt die afkorting vervangen door de volgende HTML:

De Emmet-afkortingen voor allerlei HTML-elementen (zoals

, en ) zijn makkelijk te onthouden, je hoeft alleen de vishaken weg te laten en met de Tab- of Enter-toets te bevestigen. Visual Studio Code toont bekende Emmet-afkortingen al tijdens het typen als scherminfo. De Emmet-afkortingen werken echter alleen als je ze intypt, niet bij plakken vanaf het klembord.

Met div krijg je een compleet div- element, oftewel

. Om aan een tag een klasse toe te wijzen, typ je die eenvoudigweg na een punt erachter, een ID creëer je met #. De afkorting div.klasse#test voegt dus het volgende in:

Dat kan zelfs nog korter. Omdat het

div- element als standaardelement wordt gekozen, kun je div ook weglaten en alleen

.klasse#test typen.

Daarna moet de pagina wat elementen in het body-gedeelte krijgen: een

element met de klasse .container met daarin de child-elementen

,

, en

. Om children en siblings in Emmet te maken, hoef je alleen maar de syntaxis van CSS-selectors te kennen. Daar wordt een child opgegeven met >, en een broertje of zusje met een +. Dus de afkorting .container>header+nav+sectie+footer genereert in één keer

VSC stelt ook automatisch tabstops in, oftewel de posities waar je nog inhoud moet opgeven. Spring gewoon door de elementen met de Tab-toets en voer je inhoud in. Je kunt de inhoud van een tag ook direct aan Emmet meegeven door deze in accolades te zetten. Zo zal h1{Dick Voorbeeld} een kop van niveau 1 met die inhoud creëren.

MINDER HERHALING

Een andere nuttige functie die veel typewerk bespaart, is het kopiëren van elementen. Voor het menu moeten drie tags met de klasse .nav-element worden aangemaakt. Zet er gewoon *3 achter om drie identieke elementen te creëren. De afkorting a.nav-element*3 maakt dan drie hyperlinks aan die je met de Tab-toets meteen kunt vullen met verwijzingen. Met het

$- teken kun je beschikken over een teller binnen de herhaling. Dat kun je bijvoorbeeld gebruiken als je ID’s van een oplopend nummer moet voorzien. Om bijvoorbeeld de ID's item1, item2 en item3 toe te voegen aan de hyperlinks, is het enige wat je nodig hebt: a.nav-element#item$*3.

Een andere syntactische verfijning zijn groeperingen, die je maakt met ( ). Een groep definieert welke elementen op hetzelfde niveau in de HTML-structuur staan. Het raamwerk voor de profielpagina krijg je met

.container>( header> h2)+( nav>a. nav-element* 3)+ section+footer

Je ziet het resultaat in het kader op de volgende pagina. Als je bekend bent met de basisfuncties die hier beschreven zijn en alle trucs van Emmet wilt leren, is het de moeite waard om de documentatie te bekijken. Die vind je via de link bij dit artikel.

LIVE SERVER

Terwijl je aan het HTML-raamwerk werkt, wil je misschien al kijken hoe je pagina er op dat moment uitziet. In het eenvoudigste geval kun je een HTML-bestand direct in je browser openen. Maar die methode is niet geschikt voor meer complexe projecten – zelfs het insluiten van afbeeldingen, scripts en stijlen kan, afhankelijk van de browser, problemen veroorzaken als de browser die bestanden van het lokale bestandssysteem moet openen (herkenbaar aan file:// op de adresbalk).

In plaats daarvan heb je een kleine lokale webserver nodig. Ook die kun je eenvoudig integreren in VSC. Populair is de extensie ‘Live Server’ van Ritwick Dey. Die kun je installeren door te zoeken in het zoekvak voor Extensions (via de knop met blokjes erop in de werkbalk links) of via de Marketplace (zie de link op de volgende pagina).

Na het installeren verschijnt er een nieuwe knop met het label ‘Go Live’ op de blauwe statusbalk onderaan. Klik je daarop, dan start op de achtergrond een lokale webserver, die kiest een vrije poort en opent een nieuw tabblad in je standaardbrowser.

Op dat tabblad wordt de inhoud van je projectmap getoond. Als je net een HTML-bestand hebt geopend in de editor, wordt ‘Hot Reloading’ meteen geactiveerd en laadt de browser dat bestand automatisch opnieuw zodra je een wijziging opslaat.

BETERE CSS

Als het raamwerk eenmaal gemaakt is en in de browser te bewonderen is, kan het werk aan het ontwerp beginnen. Ook daarbij is er technische ondersteuning voor je noeste arbeid.

Je kunt je veel typewerk besparen als je de lay-out in SCSS maakt in plaats van CSS. Dat is een meer ontwikkelaarsvriendelijke taal die constructies begrijpt die de CSS-standaard nog niet gehaald hebben. Het meest nuttig voor ontwikkelaars is de mogelijkheid om stijlen in elkaar te nestelen.

Om SCSS om te zetten in pure CSS die browsers begrijpen, heb je een compiler nodig die alle SCSS-bestanden vertaalt naar een browser-compatibele indeling. Je zou daar in theorie aparte software voor kunnen installeren. Maar je kunt ook een uitbreiding installeren: populair is bijvoorbeeld ‘Live Sass Compiler’ van de ontwikkelaar van Live Server. Ook die uitbreiding

kun je weer vinden via de zoekfunctie voor uitbreidingen of via de Marketplace.

Als de uitbreiding geïnstalleerd is, nestelt ook die zich op de statusbalk van VS Code. Met de knop ‘Watch Sass’ start je het monitoren van de projectmap. Als zich daar een bestand bevindt met de extensie .scss of .sass, maakt de uitbreiding meteen een corresponderend CSS-bestand aan. Bij elke wijziging van het SCSS-bronbestand wordt dat bestand meteen opnieuw gegenereerd.

Om SCSS te gebruiken in het voorbeeldproject, maak je het bestand style.scss aan en zet je de tag in de header van het HTML-raamwerk. De Emmet-snelkoppeling link:css bespaart je daarbij weer wat typewerk.

CSS COMPRIMEREN

Als je dat wilt, kun je de uitbreiding via enkele instellingen aanpassen. Je kunt bijvoorbeeld kiezen tussen expanded, oftewel de normale weergave, compact, een soort tussenniveau, en compressed. Aangezien je het CSS-bestand toch niet met de hand gaat bewerken, is de compressed- instelling aanbevolen. Bij een voltooide website bespaart die instelling wat dataverkeer. Het is een goede conventie om gecomprimeerde CSS te markeren met de extensie .min.css.

Je kunt die instellingen globaal voor je gebruikersaccount aanpassen via de Settings (op te roepen met ‘Ctrl+,’). Maar het is zinvoller om de instellingen direct in de projectmap op te slaan. Als jij of een collega die map dan op een andere computer opent (bijvoorbeeld via Git), dan zal de SCSS-compiler direct werken met de juiste instellingen. Om de compressie te activeren, maak je een map ‘.vscode’ aan in de projectmap en creëer je daarin het bestand settings.json. Zet daarin het volgende fragment:

{ "liveSassCompile.settings.formats": [{ "format": "compressed", "extensionName": ".min.css", "savePath": null }] }

Omdat de bestandsnaam van het CSS-bestand is aangepast, moet je die aanpassing verwerken in de HTML. Vervolgens moet je het ontwerp van de pagina verder uitwerken en de uitbreidingen testen in actie. Je kunt de container bijvoorbeeld een vaste breedte geven en die in het midden van de pagina zetten. Emmet kan ook helpen met CSS, er zijn afkortingen voor veel CSS-attributen. Voor de breedte ( width) is dat bijvoorbeeld w.

Het voor het centreren benodigde attribuut marge: auto; maak je bijvoorbeeld met m:a. Experimenteer een beetje met de afkortingen. Overigens kun je met bewondering naar je browser kijken tijdens het automatisch herladen – de SCSS-compiler en de server werken daar hand in hand bij het opslaan.

PRODUCTIEF WERKEN

Als je met verschillende generaties van webontwikkelings-tools hebt gewerkt, zul je misschien verbaasd zijn over hoe elegant je problemen kunt oplossen met een moderne tool als Visual Studio. In plaats van verschillende externe tools en complexe IDE's die het halve besturingssysteem overnemen, kun je veel tijd besparen met een paar uitbreidingen die bijna geen configuratie vergen. De voordelen liggen voor de hand: alle uitbreidingen kunnen centraal vanuit de ontwikkelomgeving bediend worden – en de instellingen komen samen met de code op alle werkmachines terecht.

Visual Studio Code is onder meer door de uitbreidbaarheid in slechts enkele jaren zeer populair geworden. De Marketplace voor uitbreidingen is dan ook groot en ontwikkelt zich snel. Het is daarom de moeite waard om af en toe op zoek te gaan naar nieuwe uitbreidingen, die je leven als ontwikkelaar kunnen vereenvoudigen.

Als Emmet een afkorting herkent, geeft het dat al aan als tooltip. Met de Enter- of Tab-toets kun je de bijbehorende HTML-code invoegen.

Via de vier blokjes op de werkbalk links kun je op zoek gaan naar uitbreidingen.

Newspapers in Dutch

Newspapers from Netherlands

PressReader

• Work with us
• Blog
• Help center
• Download on the App Store
• Get it on App Store

Terms of Use / Privacy Policy / CCPA

© 2003-2024 PressReader