Als je een ontwikkelaar of programmeur bent, ben je waarschijnlijk altijd op zoek naar nieuwe tools om je workflow te verbeteren. Gelukkig voor jou is een van de beste code-editors die je kunt vinden Visual Studio Code op Mac.
Visual Studio Code (VS Code) biedt veel functies om je te helpen code efficiënter te schrijven. En in dit artikel leer je hoe je VS Code op je Mac kunt installeren en door enkele van de beste extensies en thema’s kunt gaan om je op weg te helpen.
Lees verder en maak je klaar om je workflow naar een hoger niveau te tillen!
Vereisten
Deze tutorial zal een praktische demonstratie zijn. Als je wilt volgen, zorg er dan voor dat je een macOS-apparaat hebt. Deze tutorial gebruikt Apple Silicon (M1), dus de stappen kunnen enigszins verschillen als je een Mac hebt met een Intel-processor.
Visual Studio Code downloaden voor Mac
Visual Studio Code (VS Code) is een gratis, open-source code-editor van Microsoft die beschikbaar is voor Windows, Linux en macOS. Maar net als bij andere tools, moet je VS Code downloaden en installeren op je systeem.
1. Open je favoriete webbrowser en ga naar de downloadpagina van VS Code.
2. Klik vervolgens op Apple Silicon onder het Mac-pictogram om de pakketinstallateur van VS Code voor Mac te downloaden in een ZIP-bestand. Deze versie van Apple Silicon (M1) is de nieuwste chip ontwikkeld door Apple.
Als je een oudere Mac hebt met een Intel-processor, klik dan in plaats daarvan op Intel Chip.
3. Ten slotte, open uw terminal en voer het volgende ls commando uit om de VS Code’s pakketinstaller die u hebt gedownload te verifiëren.
De uitvoer hieronder toont de locatie van het zipbestand.
Visual Studio Code installeren op Mac
Nu u de VS Code-installer hebt gedownload, bent u klaar om VS Code op uw Mac te installeren en een opnieuw gedefinieerde code-editor te ervaren. VS Code is geoptimaliseerd zodat u modernere web- en cloudtoepassingen effectiever kunt bouwen en debuggen.
Nog een geweldige functie van VS Code is dat het tonnen programmeertalen ondersteunt via het gebruik van extensies die u kunt vinden in de marktplaats.
Om VS Code op Mac te installeren:
1. Selecteer het gedownloade VS Code-zipbestand → klik op het ellips-icoon (rechtsboven) → Openen om het ZIP-bestand uit te pakken.
Zodra het is uitgepakt, zou u een nieuwe Visual Studio Code-toepassing moeten hebben in uw Downloads map.
2. Voer vervolgens het ls-commando hieronder uit om het toepassingsbestand te verifiëren. Dit commando geeft de inhoud van het Visual Studio Code toepassingsbestand weer.
Het \ symbool is een escape-karakter dat de terminal vertelt om de spatie als een regulier karakter te behandelen. U moet het escape-karakter gebruiken wanneer er een spatie in de bestandsnaam staat.
3. Voer het open commando hieronder uit om de installateur in een nieuwe instantie (-n) te starten.
4. Klik nu op Open om door te gaan met de installatie wanneer u het onderstaande prompt krijgt.
Deze waarschuwing verschijnt omdat u de toepassing van internet hebt gedownload, wat u veilig kunt negeren.
Eenmaal geïnstalleerd, opent de VS Code-toepassing en wordt u begroet met de pagina Aan de slag hieronder.
Het navigeren door de GUI van VS Code
U hebt VS Code met succes geïnstalleerd op uw Mac, maar voordat u gaat coderen, maakt u eerst vertrouwd met de GUI en functies van VS Code.
VS Code wordt geleverd met veel functies waarmee u kunt:
- Kies thema’s en verander hoe uw editor eruitziet.
- Open uw projectmap, zodat u snel heen en weer kunt gaan naar uw bestanden en ervoor kunt zorgen dat uw bestandsstructuur correct is.
- Voeg een versiebeheersysteem toe, zoals Git.
- Snel extensies toevoegen vanuit de marktplaats enzovoort.
Dit zijn slechts een klein deel van wat VS Code te bieden heeft. Zie zelf hoe elke functie je helpt in je workflow. Misschien is het wijzigen van je thema een goed begin.
1. Kies een thema voor je editor zoals je wilt vanaf de Get Started-pagina, laat andere instellingen op hun standaardwaarden staan en klik op Mark Done (linksonder).
Als lichte en donkere thema’s niet goed bij je smaak passen, klik dan op See More Themes en zoek er een die je interesseert.
2. Verken vervolgens de meest linkse kant van VS Code, de Activity Bar, die zeven hoofdsecties heeft. Begin echter met een van de belangrijkste secties, de EXPLORER (Ctrl+Shift+E / Cmd+Shift+E).
De Explorer toont de bestanden en mappen in je project, waar je een repository kunt klonen. Bovendien stelt de Explorer je in staat verschillende acties uit te voeren zoals:
- Bestanden en mappen maken, verwijderen en hernoemen in je project.
- Bestanden en mappen verplaatsen door ze binnen je projectmap te slepen en neer te zetten.
Merk op dat “slepen en neerzetten” werkt bij het verplaatsen van bestanden naar de Explorer van buiten VS Code. Maar als de Explorer leeg is, opent VS Code het bestand in plaats daarvan in je editor.
3. Klik op het Zoeken-icoon (Ctrl+Shift+F / Cmd+Shift+F), wat de ZOEKEN-sectie opent, waar je kunt zoeken in je project naar bestanden, symbolen en tekst.
4. Klik nu op het Broncontrole-icoon (Ctrl+Shift+G / Cmd+Shift+G) om de BRONCONTROLE-sectie te openen, waar je je project kunt beheren met Git of een ander broncontrolesysteem.
VS Code wordt geleverd met geïntegreerd broncontrolebeheer (SCM) met standaard ondersteuning voor Git inbegrepen.
5. Na de SCM, klik op het Uitvoeren en Debuggen-icoon (Ctrl+Shift+D / Cmd+Shift+D), wat de Uitvoeren en Debuggen: Uitvoeren-sectie opent, waar je je project kunt uitvoeren en debuggen.
6. Ten slotte, klik op het Extensies-icoon (Ctrl+Shift+X / Cmd+Shift+X) om toegang te krijgen tot de EXTENSIES-sectie, waar je extensies kunt installeren vanuit de marktplaats.
Het starten van VS Code via een opdrachtregelomgeving
Misschien breng je het grootste deel van je tijd door in een opdrachtregelomgeving maar moet je snel wat code schrijven. Als dat het geval is, zal het configureren van VS Code om te starten via een opdrachtregelomgeving je ten goede komen.
1. Druk op (Cmd+Shift+P of Ctrl+Shift+P) in VS Code om de Opdrachtpallet te openen, waar je toegang hebt tot alle functionaliteiten van VS Code.
2. Typ Shell Command: Installeer ‘code’-opdracht in PATH in de Opdrachtpallet, en druk op Enter. Deze opdracht voegt de uitvoerbare VS Code toe aan de PATH-variabele van je systeem.
3. Nadat je dit hebt toegevoegd, herstart je terminal om de wijzigingen van kracht te laten worden. Het code-commando is nu beschikbaar in je terminal.
4. Maak nu een tekstbestand aan, voeg wat tekst toe, en sla het bestand op en sluit het.
5. Voer tot slot de volgende commando’s uit om VS Code (code) te starten, waarbij je het bestandspad van je tekstbestand (text.txt) doorgeeft, in dit geval vanuit de werkmap.
Je ziet VS Code (aan de rechterkant) geopend met de inhoud van je text.txt-bestand weergegeven in het editorvenster. Je kunt dit bestand nu bewerken met de geweldige functies van VS Code.
Extensies installeren voor toegevoegde functionaliteiten
Een van de beste dingen aan VS Code is dat het zeer aanpasbaar is. Hoe? Je kunt extensies installeren om nieuwe functionaliteit toe te voegen, en er zijn veel verschillende extensies beschikbaar.
Misschien wil je de macOS Color Picker-extensie installeren. Met deze extensie kun je de native macOS-kleurkiezers selecteren bij het werken met CSS-, HTML- en JavaScript-bestanden.
1. Ga naar het menu Extensies in de Activiteitenbalk, die drie secties heeft:
- GEÏNSTALLEERD – Deze sectie toont de reeds geïnstalleerde extensies.
- AANBEVOLEN – Deze sectie toont aanbevolen extensies op basis van het geopende bestandstype. Bijvoorbeeld, je zult aanbevolen JavaScript-extensies zien als je met een JavaScript-bestand werkt.
- POPULAIR – Deze sectie toont de meest populaire VS Code-extensies.
2. Typ macOS Color Picker in het zoekvak en druk op Enter. Een lijst met overeenkomende extensies wordt weergegeven in aflopende volgorde (meest overeenkomende extensies eerst).
Zodra je de gewenste extensie ziet, klik je op de knop Installeren naast de extensie. De knop Installeren verandert in een groene knop Inschakelen, dus klik erop om de extensie in te schakelen.
Nadat je de extensie hebt geïnstalleerd, wordt er een overzichtspagina voor de extensie weergegeven aan de rechterkant, zoals hieronder getoond.
3. Open nu een CSS-, HTML- of JavaScript-bestand om de nieuwe macOS Color Picker-extensie te testen.
4. Open ten slotte de Command Palette (Cmd+Shift+P / Ctrl+Shift+P), typ Open Color Picker en druk op Enter. Het macOS Color Picker-paneel wordt geopend, zoals hieronder getoond.
Gebruik de kleurkiezer om een kleur te selecteren, die in je code zal worden ingevoegd. Deze extensie is een geweldige manier om snel de kleurwaarden te krijgen die je nodig hebt, zonder de hexadecimale codes te hoeven onthouden.
Conclusie
In deze tutorial heb je geleerd hoe je VS Code op je Mac installeert en extensies toevoegt om meer functionaliteiten toe te voegen, waardoor het schrijven van code leuker wordt. Op dit punt kun je volledig profiteren van wat VS Code te bieden heeft bij het werken aan je volgende project.
Maar stop hier niet! Met deze nieuwe kennis, waarom gebruik je geen versiebeheer met Git en GitHub om je werk bij te houden?
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/