# Visual Studio Code

Visual Studio Code (opens new window) – of korter VS Code – is een gratis, open source broncode-editor ontwikkeld door Microsoft (opens new window).

VS Code ondersteunt out of the box onder andere HTML, CSS, JavaScript, TypeScript en PHP, maar kan dankzij extensions (opens new window) (Ned. uitbreidingen) nog vele andere programmeertalen en -frameworks aan.

Opmerking

Visual Studio Code is het lichtgewicht, crossplatform (Windows, macOS en Linux) broertje van Visual Studio 2019 (opens new window) en Visual Studio for Mac (opens new window). Deze laatste zijn volledige IDE’s en een stuk zwaarder om te draaien.

Zie ook

# Installeren

Windows

Visual Studio Code for Windows
Voer het gedownloade bestand VSCodeUserSetup-x64-«versienummer».exe uit.
De standaardmap is %HOMEPATH%\AppData\Local\Programs\Microsoft VS Code.

# Command-Line Interface

Om VS Code via de CLI te gebruiken open je bijvoorbeeld Opdrachtprompt en type je code.

code «mapnaam»

Om een nieuw venster te openen.

code

Om de huidige map (.) te openen.

code .

# Voorkeuren en Instellingen

Je voorkeuren (Eng. preferences) en instellingen (Eng. settings) voor de VS Code kan je wijzigen via het menu File▸Preferences▸Settings of via de toetsencombinatie Ctrl +, .

# Kleurthema

Het kleurthema (Eng. color theme) kan je wijzigen via het menu File▸Preferences▸Color Theme of via de toetsencombinatie Ctrl + k ▸ Ctrl + t .

Zie ook

Uitbreidingen▸Color Themes

Tip

Kies een kleurthema dat past bij de omgeving. Een licht thema is comfortabeler in een lichtrijke omgeving.

# Bestandsiconenthema

Het Bestandsiconenthema (Eng. file icon theme) kan je wijzigen via het menu File▸Preferences▸File Icon Theme.

Zie ook

Uitbreidingen▸File Icon Themes

# Lettertype

Het lettertype (Eng. font) kan je wijzigen om onder andere de leesbaarheid te verhogen door een duidelijker onderscheid te maken tussen bijvoorbeeld de letter O en het cijfer 0 of de letter l en het cijfer 1.

Tip

Kies een monospace-lettertype voor code. Bij een dergelijk lettertype heeft elk teken (Eng. character) dezelfde breedte waardoor code netjes verticaal uitlijnt.

Tip

VS Code ondersteunt ook ligaturen. Een ligatuur (Eng. font ligature) is een nieuw teken die in de plaats komt van aangrenzende tekens en de vormen beter doet samenhangen. Voor programmeren zie je dat onder andere in de vorm van pijlen die gemaakt zijn uit = en > (=> wordt ⇒).

Het lettertype moet ligaturen ondersteunen en bovendien moet je de optie aanzetten ("editor.fontLigatures": true).

Opgelet

Als je pas begint met coderen is het beter om ligaturen af te zetten tot je de afzonderlijke tekens zeer goed kent.

# Lettertype Downloaden

Enkele gratis monospace-lettertypes die speciaal voor code ontworpen zijn:

Cascadia Code (opens new window) (Microsoft)
Fira Code (opens new window) (Nikita Prokopov) Aangeraden
Hack (opens new window) (Chris Simpkins & David van Gemeren)
Hasklig (opens new window) (Ian Tuomi)
JetBrainsMono (opens new window) (JetBrains)

# Lettertype Installeren

Het gedownloade bestand moet je eerst uitpakken (decomprimeren) en daarna installeren.

Windows

# Lettertype Configureren

Als het lettertype op je besturingssysteem geïnstalleerd is, kan je het instellen via het menu File▸Preferences▸Settings en in Search settings font te typen. Stel dat je Fira Code wil gebruiken, dan wijzig je de waarde voor Editor: Font Family in 'Fira Code', Consolas, 'Courier New', monospace.

Zie ook

Setting Fira Code as your default Visual Studio Code font (opens new window) (Tahoe Ninjas)

# Uitbreidingen

Met extensions (Ned. uitbreidingen) voeg je functionaliteiten, ondersteuning voor nieuwe talen of visuele thema’s toe. Je opent Extensions door op het icoon links te klikken of met de toetsencombinatie Ctrl +⇧ shift + x .

Hieronder staan enkele van onze aanraders uit Visual Studio Code Marketplace (opens new window).

Opgelet

Installeer niet te veel uitbreidingen, want ze vertragen de applicatie en kunnen elkaar ook tegenwerken.

Tip

Kijk naar de relevantie, populariteit en ratings van de uitbreidingen om de juiste keuze te maken.

# Algemeen

Code Spell Checker (opens new window) (Street Side Software) Aangeraden
- Dutch - Code Spell Checker (opens new window) (Street Side Software) Aangeraden
DotENV (opens new window) (milkstead)
Git History (opens new window) (Don Jayamanne)
indent-rainbow (opens new window) (oderwat) Aangeraden
Peacock (opens new window) (John Papa)
Peep (opens new window) (nwallace)
Sort lines (opens new window) (Daniel Imms) Aangeraden
Smart Sort (opens new window) (Suguru Yamamoto) Aangeraden

# Programmeren

Auto Close Tag (opens new window) (Jun Han) Aangeraden
Auto Complete Tag (opens new window) (Jun Han) Aangeraden
Auto Rename Tag (opens new window) (Jun Han) Aangeraden
ESLint (opens new window) (Dirk Baeumer) Verplicht
npm Intellisense (opens new window) (Christian Kohler)
Prettier - Code Formatter (opens new window) (Prettier) Verplicht
Visual Studio IntelliCode (opens new window) (Microsoft)
Live Server (opens new window) (Ritwick Dew) Verplicht
CSS Peek (opens new window) (Pranay Prakash) Aangeraden
Colorize (opens new window) (kamikillerto) Verplicht
Turbo Console Log (opens new window) (Anas Chakroun) Verplicht

# Prettier instellen

Stap 1: Format on Save

Ga naar de instellingen van Visual Studio Code. Dit kan door op CTRL + , te drukken. Zoek in de zoekbalk naar Format On Save en vink deze optie aan.

Stap 2: Prettier Configuratie

Blijf in de instellingen. Zoek in de zoekbalk naar Default formatter. In de dropdown van Default Formatter kies je voor Prettier

Stap 3: HTML

Voor HTML willen we Prettier liever niet gebruiken.

Gebruik de toetsenombinatie CTRL + SHIFT + P en typ Preferences: Open User Settings. Dit opent een bestand.

In dit bestand voeg je het volgende toe:

"[html]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    "editor.defaultFormatter": "vscode.html-language-features"
},

1
2
3
4
5

Vergeet niet op te slaan!

# Talen en Frameworks

language-stylus (opens new window) (sysoev)
Markdown All in One (opens new window) (Yu Zhang)
Sass (opens new window) (Syler)
Vetur (opens new window) (Pine Wu)

# Themes

# Color Themes

Material Theme Kit (opens new window) (Microsoft)
One Dark Pro (opens new window) (binaryify)
Palenight Theme (opens new window) (Olaolu Olawuyi)

# File Icon Themes

Material Icon Theme (opens new window) (Philipp Kief)
vscode-icons (opens new window) (VSCode Icons Team)

Windows Terminal