Info over Visual Studio Code

Visual Studio Code (VSC) is een gratis editor. Daarin tik je de html-code voor de webpagina's en de css-code voor de stijlbladen.

De editor is verkrijgbaar in een webversie en uitgebreidere volledige versie. Helaas is het programma Engelstalig, er is geen Nederlandstalige versie.

Verschillen tussen de webversie en de volledige versie:

De webversie van VSC hoeft niet geïnstalleerd te worden zoals de volledige versie. Je start de webversie door simpelweg de website https://vscode.dev/ te openen.
Daar staan enkele nadelen tegenover:

Tip: Probeer eerst de webversie van VSC, zeker als je Edge of Chrome als browser hebt. Heb je last van de genoemde nadelen van de webversie, dan kan je altijd de volledige versie downloaden en installeren.

Installatie

Voor de webversie hoef je niets te installeren, voor de volldige versie doe je het volgende:

Korte handleiding

Het openingsscherm

Als je VSC start kom je in het openingsscherm. De eerste keer ziet dat er ongeveer zo uit:

Tegen de linkerkant van het venster staat de Activity Bar, vrij vertaald de Werkbalk. Op de balk staan 8 knoppen, waarvan je in de praktijk voornamelijk knop 1, 2 en 8 nodig zult hebben. Direct rechts daarvan staat de Side Bar (zijbalk). Wat daarin wordt getoond is afhankelijk van de activiteit die met de Activity Bar is ingesteld.

Onderaan het venster vind je de Status Bar, de statusbalk. Die toont gegevens als de plaats van de cursor en het aantal fouten in de code. In de figuur geeft de aanduiding Layout: US rechts op de balk aan dat een toetsenbord met VS-indeling gebruikt wordt.
De groene pijltjes helemaal links op de Status Bar vind je alleen op de webversie van VSC. Met die knop kan je de volledige versie van VSC downloaden.

Bovenin het venster staat wat ik noem de Introbalk. Op deze balk staan hyperlinks naar een artikel over de ontwikkeling van VSC, de privacy en cookies instellingen, de gebruiksvoorwaarden en een extra link naar het downloadscherm van de volledige versie van VSC.

Het grote vak rechts van de Side Bar is het werkveld. Hier komen de webpagina's die je gaat maken.
Bij eerste opening staat hier de pagina 'Get started' met allerlei links naar info en hulp over het programma.

Instellingen

Het openingsscherm kan je helemaal aanpassen aan je wensen. Hieronder vind je een aantal suggesties.

De menubalk permanent in beeld

Met de menuknop (knop 1 op de Activity Bar) open je het menu. Omdat je het menu vaak nodig hebt zou je het menu permanent open kunnen zetten:

De Introbalk verwijderen

Als je de informatie op de 'Introbalk' bovenaan het scherm gelezen hebt (Cookies, gebruiksvoorwaarden) heb je die niet meer nodig. Je kan de Introbalk gerust sluiten met de sluitknop x.

Goed om te weten. Als je de balk eenmaal verwijderd hebt, kan je hem niet meer terughalen - ik weet in elk geval niet hoe. Je kan de info op de balk later nog wel lezen:

De welkomstpagina 'Get started' niet tonen

Standaard zet VSC na de start de welkomstpagina 'Get Started' op het werkblad, met informatie en demo's over aspecten van VSC. Na verloop van tijd heb je Get Started waarschijnlijk niet meer nodig. Haal dan onderaan het werkblad het vinkje weg bij 'Show welcome page on startup'. Bij de volgende start toont VSC Get Started niet meer.

Kleurenschema

Ben je net als ik niet tevreden bent met de kleuren van het scherm - ik word wat depri van al dat zwart - dan kan je als volgt een ander kleurenschema kiezen: Klik op Manage (knop 8 van de Activity Bar) > Color Theme > Klik een van de mogelijkheden aan. Ik heb gekozen voor het thema 'Light+ (default light).
Het openingsscherm ziet er dan als volgt uit.

In de rest van deze handleiding ga ik ervan uit dat je de menubalk open hebt staan, zoals hierboven is beschreven.

Standaard map

Als je een nieuw project start is het handig om eerst de standaard map in te stellen, de map waarin je je bestanden wilt opslaan:

[In de webversie van VSC werkt dit alleen als je de internetbrowser Edge of Chrome gebruikt.]

Nieuw bestand

[Zolang je het bestand niet hebt opgeslagen werkt 'automatisch aanvullen' niet goed. Zie bij 'Intikken van html of css'.]

Een bestand openen

Een bestand in de standaard map is zichtbaar in de zijbalk en te openen door er op te klikken.
Een bestand uit een andere map open je met File > Open File ...

Een bestand bewerken

Hulp bij het intikken

Bij het intikken geeft VSC bijna voortdurend hulp. Mogelijke elementen/attributen/eigenschappen worden tijdens het intikken getoond.

Als je bijvoorbeeld <body> wilt intikken, zie je na het intikken van <b al meteen body bij de mogelijkheden staan. Klik op body om het woord af te maken. Je moet alleen het sluithaakje nog zetten. (Natuurlijk mag je het woord ook gewoon zelf intikken.)

Ook wordt automatisch de sluit-tab gezet. Als je dus <p> intikt, zet VSC daar automatisch </p> achter. Door van die hulp gebruik te maken maak je minder fouten.

Stukken van een document 'inklappen'

In een lang bestand is het soms handig om stukken tekst 'in te klappen'. Daartoe staan in de kantlijn op verschillende plaatsen ∨-tekens. (Je ziet die tekens alleen als je met de cursor direct achter de regelnummers wijst.)
Klik op zo'n ∨-teken om het betreffende element in te klappen tot één regel. Het ∨-teken verandert in een >-teken.
Om het element weer uit te klappen en alle code zichtbaar te maken klik je op het >-teken.

Op die manier kan je alle elementen inklappen behalve de elementen die je wilt aanpassen.

Begin- en eind-tag gemarkeerd

Als je de cursor op de begin-tag van een element zet, wordt de eind-tag gemarkeerd. En als je de eind-tag aanwijst, wordt de begin-tag gemarkeerd. Handig om te controleren of de begin- en eind-tags juist zijn geplaatst.

Tip voor het achteraf plaatsen van begin- en eindtag

Soms overkomt het me dat ik een stuk tekst heb ingetikt, maar dat ik vergeten ben de <p> en </p> te zetten. Dat gaat dan het snelst als volgt:

Een bestand opslaan

[In de websversie werkt dit alleen bij gebruik van de browsers Edge of Chrome. In andere browsers wordt het bestand in gedownload en moet jevhet zelf in een map plaatsen.]

Een geopend bestand in de browser bekijken

Als je in VSC een bestand bewerkt, wil je vaak weten of de code die je hebt ingetikt werkt. Dat kan je controleren door het bestand in de browser te bekijken. Daar zijn 2 methoden voor:

Hulp

Met een klik op Help kom je in het help menu met een keur aan (engelstalige) video's en documentatie. Hier vind je ook het Get started scherm dat in beeld was toen je VLC voor het eerst opende.

Websites met stijl