# Visual Studio Code Installeren

# Code editor

Om HTML, CSS en Javascript te schrijven heb je in principe niet meer nodig dan de meest eenvoudige teksteditor, zoals bijvoorbeeld Kladblok dat bij elke Windows installatie wordt geleverd. Toch is het niet zo interessant om een eenvoudige editor te gebruiken, omdat het schrijven van code zeer foutgevoelig is en zulke editors geen hulp bieden bij de verschillende facetten van ontwikkelen. Gelukkig bestaan er gespecialiseerde code editors die je wel bijstaan tijdens het ontwikkelproces, vooral bij het schrijven van de code. Eén zo'n code editor is Visual Studio Code, ontwikkeld door Microsoft en volledig gratis te downloaden.

# Visual Studio Code installeren

Om Visual Studio Code te installeren download je eerst de installer op de officiële site: Visual Studio Code downloaden.

De installatie verloop via een eenvoudige wizard, waarbij je enkel bij de laatste stap even moet stilstaan.

Door bovenstaande opties aan te vinken krijg je een snellere toegang tot het openen van Visual Studio Code via bijvoorbeeld Windows Verkenner.

# Interface

De interface van Visual Studio Code is opzettelijk sober gehouden. Aan de linkerkant vindt je de hoofdonderdelen van de editor.

Voorlopig hoef je je alleen van het eerste en laatste icoontje iets aan te trekken. Het eerste toont de file explorer voor de geopende projectmap. Langs deze weg kan je bestanden openen, aanmaken, hernoemen en verwijderen, zoals je dit in Windows Verkkener of de Finder app op Mac zou doen.

Als je nog geen projectmap geopend hebt kan je dit alsnog doen via de grote knop in de file explorer.

# Extensies installeren

Buiten de standaardfunctionaliteit die Visual Studio Code biedt kan de editor ook uitgebreid worden met verschillende extensies. Deze extensies zijn graties en gemaakt door leden van de webontwikkelinggemeenschap. Je kan extensies installeren via het laatste icoontje in de onderdelenlijst .

Voor een beginnende ontwikkelaar zijn de volgende twee extensies zeer handig:

• Live server: geeft je de mogelijkheid HTML-bestanden rechtstreeks in een browser te openen en vernieuwt de pagina automatisch bij veranderingen in het bronbestand.

• Beautify: formatteert je code om ze overzichtelijk te houden.

Zoek via de zoekbalk in het extensies onderdeel naar deze twee extensies om ze te installeren via de kleine install knop.

# Extensies gebruiken

# Live server

Om de extensie Live Server te gebruiken kan je in eender welk HTML-bestand via een rechtermuisklik "Open in Live Server" kiezen. Dit opent automatisch je standaardbrowser.

# Beautify

Om de extensie Beautify haar werk te laten doen gebruik je in een HTML, CSS of Javascript document de sneltoets SHIFT + ALT + F in Windows of SHIFT + Option + F op Mac.