Contents

10 essentiële productiviteitstips voor Visual Studio Code

Visual Studio Code is met gemak de beste teksteditor voor programmeren. Voor velen heeft het Sublime Text vervangen als favoriete editor. Het is een op Electron gebaseerde JavaScript-app, maar hij is bliksemsnel en heeft geen last van prestatieproblemen zoals veel JavaScript-apps.

Voor wie nieuwsgierig is, is het de moeite waard om te weten dat Visual Studio Code open-source software is en toegankelijk is via de repository op GitHub. Om de efficiëntie te verhogen en het werkproces te stroomlijnen, is het handig om vertrouwd te raken met een aantal belangrijke functies van deze krachtige code-editor.

Beheers het Command Palette in VS Code

/nl/images/vscode-command-palette.jpg

Sublime Text en zijn voorganger, TextMate, hebben beide een intrigerend hulpprogramma dat bekend staat als het “commandopalet”. Deze innovatieve tool stelt gebruikers in staat om meerdere commando’s snel uit te voeren door middel van handmatige invoer, waardoor de noodzaak voor omslachtige navigatie via de cursor of muis wegvalt.

Het gebruik van het commandopalet zorgt voor een efficiëntere workflow bij het navigeren door verschillende taken binnen je programmeeromgeving. Door gebruik te maken van de Control Ÿ Shift Ÿ P of Command Ÿ Shift Ÿ P sneltoets, kan men toegang krijgen tot een uitgebreide lijst van beschikbare acties die zijn gecategoriseerd onder kopjes zoals “Bestand”, “Git”, “Terminal”, onder anderen. De functionaliteit van het palet stelt gebruikers in staat om hun gewenste actie in te voeren door deze simpelweg in te typen, terwijl tegelijkertijd de weergegeven opties in real-time worden bijgewerkt. Dit stroomlijnt het proces van het vinden en uitvoeren van specifieke functies, wat de algehele productiviteit verhoogt.

Een werkmap voor een project instellen

/nl/images/project-directory-set-vs-code.jpg

Na het klikken op “Verkenner” in de navigatiebalk verschijnt er een nieuw paneel. Dit paneel bestaat uit twee verschillende secties die toegankelijk zijn door op het ellipsmenu te klikken en “Open editors” te selecteren of door het als optie te laten verschijnen. Deze secties zijn “Open editors”, die de lijst met momenteel geopende bestanden en documenten weergeeft, en “No Folder Opened”. Het is de laatste die onze interesse heeft.

Na het klikken op de optie “Map openen” in de menubalk of door ernaar te navigeren via het menu Bestand, kan iemand ervoor kiezen om een map te kiezen die aanwezig is op zijn systeem binnen Visual Studio Code. De gekozen map wordt dan aangewezen als het huidige werkproject, waardoor alle samenstellende bestanden en submappen naadloos toegankelijk zijn zonder dat je vaak hoeft te wisselen tussen de bestandsverkenner.

Meerdere bestanden tegelijk bekijken

/nl/images/viewing-files-side-by-side-vs-code.jpg

De meeste hedendaagse teksteditors kunnen meerdere documenten tegelijk verwerken en vergemakkelijken de navigatie door de documenten via een gebruikersinterface met tabbladen. Sommige hoogontwikkelde teksteditors bieden ook de optie om parallelle tekstbewerking uit te voeren, een voorziening die ook beschikbaar is in Visual Studio Code (hoewel het alleen verticaal werkt).

VS Code blinkt uit in het bieden van een naadloze samenwerkingservaring, zelfs bij het werken met kleinere schermformaten zoals die gevonden worden op laptops of oudere monitoren. Deze functie is vooral handig voor gebruikers die behoefte hebben aan efficiënte samenwerking in realtime terwijl ze door een beperkte schermruimte moeten navigeren.

Met een nieuwe functionaliteit die bekend staat als “dynamische panelen”, past de toepassing op intelligente wijze de breedte van een geopend documentpaneel aan als de afmetingen ervan onvoldoende worden voor een comfortabele weergave terwijl je actief op het betreffende document focust. Deze intuïtieve verbetering kan vooral aantrekkelijk zijn voor gebruikers met een schermresolutie van ongeveer 720p.

Meerdere regels tegelijk bewerken

/nl/images/multiple-cursors-vs-code.jpg

Om op efficiënte wijze meerdere inhoudsdelen in een document te bewerken, wordt een methode gebruikt waarbij meerdere aanwijzers worden gemaakt via de sneltoets Alt (of het equivalent daarvan, Option, voor Mac-gebruikers). Door op verschillende plaatsen in de tekst te klikken, worden deze extra aanwijzers bij elke tik gegenereerd, waardoor het bewerken van lange passages sneller gaat.

Deze techniek blijkt zeer voordelig te zijn wanneer je te maken hebt met situaties waarin dezelfde classificatie herhaaldelijk moet worden toegepast, zoals in HTML-elementen waar meerdere instanties van een specifieke klasse moeten worden toegewezen of bij het aanpassen van een groot aantal hyperlinks aan een bepaalde structuur. Het is essentieel om bedreven te raken in deze methode en de voordelen ervan te omarmen.

Ga naar definitie

/nl/images/go-to-definition-vs-code.jpg

Wanneer je tijdens het programmeren of scripten onbekende variabelen of methoden tegenkomt, kun je een van de twee handige opties gebruiken. Ten eerste, door de cursor op het betreffende element te plaatsen en op F12 te drukken, wordt de gebruiker direct naar de bijbehorende definitie geleid. Ten tweede, door de gewenste entiteit te selecteren met behulp van sneltoetsen, zoals de Control (Windows) of Command (Mac) toets ingedrukt houden terwijl je klikt, wordt de gebruiker naar de betreffende definitie geleid.

Je kunt ook de sneltoets “Alt” en de toets “F12” indrukken of de toets “Cmd” en de toets “F12” op een Mac-computer om de definitie te openen zonder dat deze in het originele document geopend is. Deze functie toont de definitie direct onder de cursorpositie voor meer gemak en efficiëntie.

Om omgekeerd te zoeken naar een geselecteerde variabele of methode, kun je de sneltoets “Shift + F12” gebruiken. Deze actie toont alle instanties van de gekozen entiteit in de codebase, inclusief die op de huidige cursorpositie.

Om deze functionaliteiten effectief te kunnen gebruiken, is het noodzakelijk om de relevante map als het huidige actieve project in te stellen (raadpleeg Tip #2 voor meer informatie).

Alle voorkomens hernoemen

/nl/images/rename-symbol-vs-code.jpg

Refactoring is een cruciaal onderdeel in het maken en behouden van een goed georganiseerde codebase. Het kan echter een uitdagende taak zijn, vooral wanneer je te maken hebt met omvangrijke modules of grote delen van de code. Om deze last te verlichten, biedt Visual Studio Code automatisering die zelfs kleine wijzigingen vereenvoudigt, zoals het opnieuw toewijzen van een label of het bijwerken van een functienaam in meerdere bestanden.

Wanneer u een variabele of methode selecteert en de functietoetscombinatie F2 uitvoert, kunt u de identifier wijzigen, waardoor vervolgens de verwijzing naar deze entiteit in alle instanties binnen het momenteel actieve werkruimteproject wordt bijgewerkt.

Om alleen tekst in dit document te wijzigen, gebruikt u de toetsencombinatie Ctrl/Cmd + F2. Als u dit doet, plaatst Visual Studio Code een cursor naast elk voorbeeld in het hele bestand.

Zoeken in veel bestanden

/nl/images/searching-across-working-directory-vscode.jpg

Als u te maken hebt met bestanden zonder broncode en zinnen of woorden moet identificeren zonder kennis van hun specifieke locatie in het project, moet u terugvallen op de fundamentele functionaliteit “Zoeken” als alternatief voor de niet-beschikbare symboolgeoriënteerde mogelijkheden die eerder in Tip 5 zijn besproken.

Als je de toets “Ctrl” of “Command” ingedrukt houdt en op “F” drukt, kun je zoeken naar een specifieke term binnen het huidige document, terwijl als je tegelijkertijd de toetsen “Shift” en “Cmd” of “Control” indrukt gevolgd door de letter “F”, je uitgebreid kunt zoeken in het volledige werk binnen het huidige werkproject, inclusief alle geneste submappen.

De opdrachtregel gebruiken in VS Code

/nl/images/integrated-terminal-vscode.jpg

VS Code biedt een geïntegreerde terminalinterface waarmee gebruikers opdrachtregeltools kunnen gebruiken en opdrachten kunnen uitvoeren binnen hun projecten. Het uiterlijk van de terminal hangt af van het besturingssysteem van de gebruiker; op Windows wordt het weergegeven als de Command Prompt, terwijl het zich op macOS en Linux presenteert als een Bash prompt. Ongeacht het besturingssysteem start de terminal op in de map van het huidige project, als die bestaat, of anders standaard in de thuismap van de gebruiker.

Terminal is inderdaad ontworpen met veelzijdigheid en gebruiksgemak in het achterhoofd, zodat gebruikers extra virtuele terminalvensters kunnen aanmaken door op het pictogram ‘+’ te klikken in de rechterbovenhoek van het toepassingsvenster. Als alternatief kan een bestaande terminalinstantie worden verwijderd door het prullenbakpictogram naast het gewenste terminalvenster te selecteren. Bovendien maakt het uitklapmenu het mogelijk om naadloos tussen verschillende terminalsessies te navigeren zonder veel schermruimte in beslag te nemen, in tegenstelling tot interfaces met tabbladen die veel schermruimte in beslag nemen.

Een nieuw thema installeren in VS Code

/nl/images/changing-themes-vs-code.jpg

Inderdaad, Visual Studio Code biedt gebruikers de mogelijkheid om de syntax highlighting van tekst en broncode aan te passen door middel van verschillende thema’s. Deze mogelijkheid strekt zich echter niet uit tot de gebruiker. Deze mogelijkheid strekt zich echter niet uit tot het wijzigen van het uiterlijk van de gebruikersinterface zelf. Desalniettemin kan een goed ontworpen thema voor syntax highlighting de efficiëntie van coderingstaken aanzienlijk verbeteren.

Je kunt nieuwe thema’s vinden op de VS Code Marketplace (ze zijn gratis), of je kunt er direct naar zoeken in VS Code. Bekijk onze lijst met de beste VS Code-thema’s voor het geval je aanbevelingen nodig hebt.

Extensies van derden installeren in VS Code

/nl/images/vscode-extensions-marketplace.jpg

De laatste essentiële functie om te benadrukken is de uitbreidbaarheid van VS Code via extensies van derden. Net als bij thema’s kun je ze vinden op de VS Code Marketplace (ja, deze zijn ook gratis), of je kunt ernaar zoeken in VS Code. Open het Extensies-paneel met de sneltoets Ctrl \+ Shift \+ X (of Shift \+ Cmd \+ X).

Extensies zijn een belangrijk middel om de efficiëntie van Visual Studio Code te verbeteren. Deze verzameling bevat een reeks hulpmiddelen zoals code linters, debuggers, snippet managers, prestatie optimalisaties voor de geïntegreerde ontwikkelomgeving (IDE), bouwgereedschappen en zelfs bepaalde add-ons die ChatGPT gebruiken om programmeerprocessen binnen VS Code te stroomlijnen.

Visual Studio Code is de beste teksteditor

Hoewel VS Code een grote schare fans heeft verzameld, blijft de geschiktheid voor elk individu subjectief en zijn imperfecte oplossingen onvermijdelijk. Het moet ook opgemerkt worden dat VS Code voornamelijk functioneert als een teksteditor en niet als een geïntegreerde ontwikkelomgeving (IDE).

Hoewel we uw tevredenheid niet kunnen garanderen, moedigen we u aan om ons product te testen vanuit een onbevooroordeeld perspectief. Onze innovatieve functies kunnen je verwachtingen op een positieve manier overtreffen.