Tools

# 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

macOS

  1. Visual Studio Code for macOS
  2. Op het Zip-bestand VSCode-darwin-stable.zip LMB ×② om het uit te pakken.
  3. Sleep het bestand Visual Studio Code.app naar de map Programma's (Eng. Applications).
  4. Sleep het bestand uit de map Programma's (Eng. Applications). naar het Dock (opens new window).

# Command-Line Interface

macOS

Om VS Code via de CLI te gebruiken moet het eerst aan de omgevingsvariabele PATH toegevoegd worden. Op macOS gebeurt dit niet automatisch tijdens het installeren.

Open VS Code en open de Command Palette met Cmd ⌘+⇧ shift + p en typ Shell command: install ‘code’ command in PATH.

Opgelet

De nieuwe waarde voor de omgevingsvariabele PATH is pas van kracht bij een nieuw Terminal-venster.

Om VS Code via de CLI te gebruiken open je bijvoorbeeld Terminal 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 Code▸Preferences▸Settings of via de toetsencombinatie Cmd ⌘+, .

# Kleurthema

Het kleurthema (Eng. color theme) kan je wijzigen via het menu Code▸Preferences▸Color Theme of via de toetsencombinatie Cmd ⌘+ k ▸ Cmd ⌘+ 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 Code▸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:

# Lettertype Installeren

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

macOS

# Lettertype Configureren

Als het lettertype op je besturingssysteem geïnstalleerd is, kan je het instellen via het menu Code▸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', Menlo, Monaco, '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 Cmd ⌘+⇧ 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

# Programmeren

# Prettier instellen

Stap 1: Format on Save

Ga naar de instellingen van Visual Studio Code. Dit kan door op cmd + , 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 CMD + 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

# Themes

# Color Themes

# File Icon Themes

Xcode
© 2024 Arteveldehogeschool Laatst bijgewerkt: 24/9/2024, 12:00:17