Uw VS-code aanpassen

Visual Studio Code
maatwerk
code-editor-thema's
Uw VS-code aanpassen cover image

Introductie

Visual Studio Code (VS Code) is een van de meest populaire code-editors in de technische industrie, omdat het robuuste functies en een lichtgewicht ontwerp biedt waardoor het de favoriete code-editor is voor ontwikkelaars over de hele wereld. De populariteit kan gedeeltelijk worden toegeschreven aan het aanpasbare uiterlijk, waardoor we mooie en opvallende codeerruimtes kunnen creëren. In dit artikel onderzoeken we hoe u het uiterlijk van de code kunt aanpassen aan uw voorkeuren, inclusief code-editorthema's, pictogramthema's en kleurwijzigingen in de werkbalk.

Pictogramthema's

Ook al zijn de standaardpictogrammen van Visual Studio Code prima, waarom zou u zich hiertoe beperken als u er een visueel feest van kunt maken? U kunt het uiterlijk van uw bestandsverkenner wijzigen met pictogramthema's, waardoor zowel de visuele aantrekkingskracht als de bruikbaarheid worden verbeterd.

Een van de meest populaire keuzes onder ontwikkelaars is de Material Icon Theme-extensie. Met deze extensie beschikt uw bestandsverkenner over een kleurrijke en overzichtelijke verzameling pictogrammen, gemodelleerd naar Google's Material Design. Elk soort bestand heeft zijn eigen onderscheidende en direct herkenbare pictogram, waardoor uw werkruimte er in het algemeen beter uitziet.

Volg deze stappen om de Material Icon Theme-extensie te installeren:

  1. Open Visual Studio-code.

  2. Ga naar de weergave Extensies door op het pictogram Extensies in de werkbalk aan de linkerkant van het venster te klikken.

  3. Zoek naar "Materiaalpictogramthema" en klik op installeren.

Na de installatie klikt u op het tandwielpictogram in de linkerbenedenhoek en selecteert u "Bestandspictogramthema" om het materiaalpictogramthema te kiezen.

Code-editor-thema's

Nu uw bestandsverkenner er goed uitziet, gaan we ons concentreren op de code-editor zelf. Hoewel de standaard lichte en donkere thema's van VS Code geweldig zijn, zijn er momenten waarop je iets persoonlijker en stijlvoller wilt.

Een goede optie als thema, vooral voor degenen die liever in het donker coderen, is de thema-extensie Night Owl. Night Owl, gemaakt met contrast en leesbaarheid in het achterhoofd, heeft een rustgevend kleurenschema dat de vermoeidheid van de ogen helpt verlichten tijdens uitgebreide codeersessies.

Om de Night Owl-thema-extensie te installeren:

Navigeer naar de weergave Extensies.

Zoek naar "Night Owl" en klik op installeren.

Na de installatie kiest u Night Owl als thema door het opdrachtenpalet te openen (Ctrl+Shift+P op Windows/Linux, Cmd+Shift+P op macOS), 'Kleurthema' te selecteren en Night Owl te kiezen uit de lijst met geïnstalleerde thema's in uw code-editor.

Werkbalkkleur

Nu het uiterlijk en het gevoel van uw code-editor perfect zijn, gaan we de kleur van de werkbalk aanpassen om de kers op de taart te maken. Hier komt de pauwextensie in het spel.

Dankzij de Peacock-extensie kunt u uw werkruimte aanpassen door de kleur van de werkbalk aan de zijkant van uw code-editor te wijzigen. Dit is niet alleen esthetisch aantrekkelijk, maar als u meerdere exemplaren van VS Code open heeft, kan dit u ook helpen onderscheid te maken tussen deze exemplaren.

Om de Peacock-extensie te installeren:

  1. Ga naar de weergave Extensies.

  2. Zoek naar "Peacock" en klik op installeren.

Na de installatie kunt u de kleur van de werkbalk aanpassen door het opdrachtenpalet te openen, te zoeken naar 'Peacock: Voer een kleur in' en vervolgens de hexadecimale waarde in te voeren van de kleur die u wilt instellen voor uw vs code-werkbalk.

Conclusie

Het aanpassen van Visual Studio-code is meer dan alleen het veranderen van kleuren. U moet ook een codeeromgeving creëren die bij uw stijl past en de productiviteit verhoogt. Voel je dus vrij om te spelen en een codeergebied te creëren dat je fantasie stimuleert op het gebied van uiterlijk en om andere mooie functies van de geweldige VS Code te verkennen. Veel codeerplezier!


Career Services background pattern

Carrièrediensten

Contact Section background image

Laten we in contact blijven

Code Labs Academy © 2024 Alle rechten voorbehouden.