Meester VS Code-snippets voor efficiënt coderen – techsyncer

Wanneer je de laatste code aan het schrijven bent in Visual Studio Code (VS Code), betrap je jezelf er dan wel eens op dat je steeds hetzelfde typt? Misschien heb je vandaag al tien keer een functieverklaring getypt of voor de 20e keer dezelfde set parameters op commando gedefinieerd. Wist je dat je je tijd en geestelijke gezondheid terug kunt krijgen door gebruik te maken van Visual Studio Code-snippets?

Visual Studio Code-snippets zijn kleine stukjes tekst die zijn opgeslagen in VS Code. Je kunt deze snippets oproepen via een menu of toetsenreeks en veel tijd besparen wanneer je merkt dat je blokken tekst herhaalt met weinig verschillen tussen elke gebeurtenis.

Bijvoorbeeld, hieronder kun je zien dat door eenvoudigweg wvb in te typen in VS Code, je de optie hebt om veel meer tekst uit te breiden, zoals aangegeven door de tekst Write-Verbose in het vak. Dit is de kracht van snippets!

In dit artikel ga je leren hoe je met VS Code-snippets kunt werken, inclusief het gebruik van standaardsnippets, extensiesnippets en zelfs het maken van je eigen snippets!

Vereisten

Dit wordt een stapsgewijze handleiding om je handen vies te maken. Als je van plan bent om te leren hoe je met VS Code-snippets kunt werken, heb je VS Code versie 1.17 of nieuwer nodig. Ter volledige openheid zal ik VS Code 1.38.1 op Windows gebruiken.

Je kunt de nieuwste versie van VS Code voor jouw specifieke platform downloaden hier.

Het vinden van VS Code-snippets

Voordat je je eigen stukjes code kunt gaan bouwen (wat je zeker zult doen), is het belangrijk om te leren hoe je de ingebouwde stukjes code kunt vinden die beschikbaar zijn voor jou.

Je kunt alle stukjes code vinden in het menu. Het menu stelt je in staat om stukjes code te bekijken en te gebruiken. Om toegang te krijgen tot het menu, kun je ofwel F1 of Ctrl-Shift-P indrukken, “snippet” typen en op Enter drukken. Je ziet dan een menu verschijnen dat vergelijkbaar is met wat je hieronder ziet.

Wanneer je op Enter drukt bij Snippet invoegen, zie je een uitklapmenu met beschikbare stukjes code, zoals hieronder wordt weergegeven. Je zult merken dat er standaard al heel wat stukjes code beschikbaar zijn en je kunt er meer zien door naar beneden te scrollen.

Het uitklapmenu met beschikbare stukjes code stelt je in staat om de ingebouwde stukjes code te bekijken die beschikbaar zijn door een taalextensie toe te voegen in VS Code.

Taalextensies

Je kunt VS Code gebruiken om met veel verschillende talen te werken. Elke taal heeft zijn eigen eigenaardigheden. Om deze verschillen te ondersteunen, ondersteunt VS Code taalextensies.

Taalextensies voorzien VS Code van slimme bewerkingsfuncties voor verschillende programmeertalen. Taalextensies bieden programmeertalen extra ondersteuning, zoals:

Syntaxiskleuring
IntelliSense
Opmaak
Foutcontrole
Aanvulling van stukjes code

Extensies installeer je via het Extensiemenu van VS Code.

Je kunt de definitie van deze snippets bekijken die worden geleverd door de taalextensies door het JSON-bestand op Windows te openen op de locatie C:\Users<UserName>.vscode\extensions\ms-code.-\snippets.

Extensies op zich hebben niets te maken met snippets, maar je zult merken dat veel extensies ingebouwde snippets bevatten waarvan je op de hoogte moet zijn.

Uitbreiden van Snippets

Wanneer je een snippet selecteert via het menu-interface, zie je de inhoud van het snippet in het bestand. Dit proces van het omzetten van de snippetdefinities in bruikbare code wordt uitbreiden genoemd.

Wanneer je de prefix aanroept, leest VS Code die specifieke prefix en voert het de instructies uit die je definieert in het snippet. Deze instructies kunnen variëren van snippet tot snippet. Dit hele proces van aanroepen, omzetten en invoegen van het snippet wordt uitbreiden genoemd.

Gebruik van VS Code Extensie Snippets

Sommige snippets zijn standaard aanwezig in VS Code, maar wanneer je een extensie installeert, worden er soms eigen snippets meegeleverd. Voorbeelden van extensies met ingebouwde snippets zijn de Python-extensie van Microsoft, de PowerShell-extensie van Microsoft en de C#-extensie van Microsoft.

Waar Extensie Snippets Zijn Opgeslagen

Deze extensies worden normaal gesproken geïnstalleerd in Windows onder de map C:\Users<Gebruikersnaam>.vscode\extensions op uw computer, zoals u hieronder kunt zien.

De mappen voor de extensies volgen de ms-vscode.- naamconventie. Elke van deze mappen bevat een snippet map met de snippets die bij de extensie zijn inbegrepen.

Contents of *C:\Users<UserName>.vscode\extensions*

Voorbeeld van Extensiecode-Snippet

Om het gebruik van een extensie-snippet te demonstreren, laten we bijvoorbeeld de PowerShell-extensie nemen. Deze extensie wordt geleverd met een paar handige snippets genaamd region en for om het maken van PowerShell regioblokken en *for* loops te versnellen.

Laten we zeggen dat u een for loop moet maken in een PowerShell-script dat is ingesloten in een regioblok. De code hiervoor wordt hieronder weergegeven. De code in de onderstaande schermafbeelding is 50 tekens lang en maakt een for loop binnen een regioblok dat over de getallen 1 tot 10 itereert.

In plaats van elke letter in dit voorbeeld uit te typen, kunt u twee snippets gebruiken die zijn geïnstalleerd met de PowerShell-extensie van Microsoft genaamd region en for.

Bekijk hieronder hoe gemakkelijk het is om elk van deze snippets te gebruiken om veel typwerk te besparen!

Het maken van aangepaste codefragmenten voor Visual Studio Code

Je hoeft je niet te beperken tot de fragmenten die standaard bij VS Code worden geleverd of die bij extensies horen. Misschien bevatten de bestaande extensies niet de code-opmaak die je nodig hebt, of wil je deze fragmenten zelf opmaken. Gelukkig voor jou kun je je eigen fragmenten maken! In dit gedeelte zie je precies hoe je dat moet doen.

Om een aangepast fragment te maken, open je jouw User Snippets in VS Code door te klikken op Bestand → Voorkeuren → Gebruikersfragmenten. Dit opent het scope-selectiegebied voor de fragmenttaal voor jou. Hier kun je aangeven in welke taal je het fragment wilt maken. Een voorbeeld van hoe dit eruitziet, vind je in de onderstaande schermafbeelding.

Door een taal te kiezen, maakt VS Code een language.json-bestand aan in C:\Gebruikers<Gebruikersnaam>\AppData\Roaming\Code\User\snippets op Windows. Alle door de gebruiker gemaakte fragmenten voor verschillende talen hebben een bestand in deze map.

De talen die voor jou beschikbaar zijn, kunnen verschillen van wat je hierboven ziet. In de bovenstaande VS Code-installatie zijn al veel taaluitbreidingen geïnstalleerd.

Zoek de taal waarvoor je het fragment wilt maken en druk op Enter om het JSON-bestand van de taal te openen. In dit bestand worden je aangepaste fragmenten opgeslagen, en hier kun je je aangepaste fragmenten maken.

Er zijn vier gegevenselementen die je moet specificeren voor een aangepast fragment:

A snippet name (line 9 below)
A prefix, which is what you’ll use to call your snippet (line 8 below)
A body, which is your snippet code that is loaded into your scripts (lines 7 to 3 below)
A description, which will show up in your IntelliSense (line 2 below)

*Example snippet definition of the For statement*

Het maken van een aangepast Python-fragment

Laten we eens kijken wat er nodig is om een aangepast fragment te maken voor de programmeertaal Python. In dit voorbeeld zal het dt-voorvoegsel een aangepast Python-fragment oproepen. Dit fragment zal een bericht afdrukken met de huidige tijd vooringevuld.

Maak het JSON-bestand

Open eerst de fragmenttaalkeuzer en typ Python, en druk op Enter om een python.json-bestand te maken. Dit zal een python.json-bestand in de map Windows C:\Gebruikers\\AppData\Roaming\Code\Gebruiker\snippets oproepen.

Je kunt de standaardstatus ervan zien in de onderstaande afbeelding.

Naam en Voorvoegsel Toewijzen

Het is nu tijd om het JSON-bestand te bewerken. Definieer eerst de naam en het voorvoegsel (dt). Fragmentvoorvoegsels zijn kort en duidelijk, omdat dit de waarde is die wordt getypt om het fragment aan te roepen. Hoe korter het fragmentvoorvoegsel, hoe minder tekens je hoeft te typen wanneer je het wilt aanroepen.

Je kunt hieronder een voorbeeld zien van hoe dit eruitziet.

Lichaam Definiëren

Het lichaam bevat de code die wordt uitgebreid wanneer het fragment wordt aangeroepen. Deze code kan eenvoudige tekst en opmerkingen bevatten. Het kan ook andere functies hebben die je zult zien in latere secties. Als het lichaam veel regels bevat, zijn er een paar dingen waar je op moet letten.

Elke regel moet tussen aanhalingstekens staan
Elke regel moet eindigen met een komma
Alle regels moeten tussen vierkante haken staan (“[” en “]”)

Je kunt hieronder een voorbeeld zien van hoe het voorbeeldfragment eruitziet.

Beschrijving Definiëren

De beschrijving is een bericht dat de voorvoegsel beschrijft zoals hieronder te zien is, zoals gedefinieerd onder de inhoud.

De beschrijving wordt onder het voorvoegsel weergegeven in de fragmentenlijst en biedt meer informatie over wat het fragment doet. Het helpt ook om het fragment te onderscheiden van soortgelijke gemaakte fragmenten.

Hieronder staat een voorbeeldscreenshot van fragmenten die voorvoegsels en beschrijvingen identificeren.

Als je nog geen aangepaste Python-fragmenten hebt gedefinieerd wanneer je klaar bent met het maken van het fragment, zou je een python.json bestand moeten hebben dat eruitziet als het onderstaande codefragment.

{
    "DateTime Snippet": {
        "prefix": "dt",
        "body": [
            "import datetime",
            "dt = datetime.datetime.now()",
            "print(f\"The time is {dt} and this is a message\")"
        ],
        "description": "Prints a message with current time"
    }
}

Sla dit JSON-bestand op en nu is het aangepaste fragment beschikbaar in elk Python-bestand in VS Code.

Wanneer je nu een Python-tabblad opent en het voorvoegsel dt typt, verschijnt het aangepaste fragment hieronder. Als je op Enter drukt, wordt het fragment uitgebreid tot in het Python-tabblad.

Het maken van een aangepast JavaScript-fragment met behulp van de meegeleverde tekst

Fragmenten zijn niet beperkt tot de woorden die je definieert in het fragment. Fragmenten kunnen ook tekst bevatten uit het bestand waaruit je ze oproept.

VS Code heeft interne variabelen die je kunt gebruiken. Dit zijn aanduidingen die momenteel geselecteerde tekst nemen en deze in het fragment invoegen. Door bijvoorbeeld de variabele $TM_SELECTED_TEXT in het fragment te plaatsen, kun je de geselecteerde tekst weergeven. Bekijk de VS Code-variabelenreferentiepagina voor een volledige uitleg van alle interne VS Code-variabelen.

Om te demonstreren, laten we een fragment maken dat eenvoudigweg een regel creëert om de geselecteerde tekst naar de console uit te voeren, genaamd log-it.

Open de fragmenttaalselector, typ JavaScript en druk op Enter om een bestand javascript.json aan te maken. Dit bestand zal lijken op het python.json bestand dat in het vorige gedeelte is aangemaakt. Hoewel het deze keer voorbeeld-Javascript-code bevat in plaats van Python-code. U kunt de standaardstatus ervan zien in de onderstaande schermafbeelding.

Maak nu een fragment met behulp van de volgende JSON:

{
	"Print selected line to console": {
		"prefix": "log-it",
		"body": [
			"console.log('$TM_SELECTED_TEXT');"
		],
		"description": "Log highlighted text output to console"
	}
}

Sla dit JSON-bestand op en je kunt dit fragment nu gebruiken in je JavaScript-bestanden.

Wanneer je dit fragment aanroept met gemarkeerde tekst, wordt $TM_SELECTED_TEXT vervangen door de geselecteerde tekst. Wanneer je dit fragment aanroept zonder gemarkeerde tekst, is $TM_SELECTED_TEXT leeg. Dit is te zien in actie in de onderstaande schermafbeelding.

*JavaScript `$TM_SELECTED_TEXT`Snippet in Action*

Creëer een aangepast PowerShell-fragment met tabstops

Tot nu toe waren de voorbeelden die je hebt gezien compleet wanneer ze worden aangeroepen. Zelfs de JavaScript veronderstelt dat je tekst van tevoren hebt gemarkeerd. Maar wat als je waarden in het fragment moet typen nadat het is aangeroepen?

Wat als je de waarde in de console.log() wilt typen in plaats van de gemarkeerde tekst te gebruiken? Wat als je op verschillende plaatsen in het fragment wilt typen?

In dit gedeelte leer je hoe je tabstops gebruikt om tekst in te voeren in de gegenereerde code waar het fragment naar uitbreidt. Tabstops zijn vaste posities in je fragment waar de cursor naartoe gaat. Deze posities worden telkens in volgorde bezocht wanneer je op tab drukt. Met deze tabstops kun je waarden invoeren in het fragment nadat het is uitgebreid.

Tabstops, gedefinieerd door het gebruik van de fragmentvariabelen $0, $1, $2 , en verder in het fragmentlichaam, geven aan waar de cursor naartoe gaat wanneer je het fragment aanroept en op tab drukt.

De tabstops volgen een normale volgorde (1 volgt op 2 volgt op 3, enz.) met één uitzondering: Tabstop 0 is de positie waar de cursor zal zijn na alle andere tabstops. Om dit te demonstreren, wordt het onderstaande fragment uitgebreid tot een Write-Output-bericht met de huidige datum en een plaats voor meer tekst.

Dit lichaam met twee tabstops

$1 aan het einde van het Write-Output-bericht
$0 op de volgende regel zodat het fragment eindigt op een lege regel

{
    "DateTime Snippet PS": {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message "The time is $((Get-Date).ToLocalTime()) and $1"","$0"
        ]
        "description": "PSCustomObject with 3 lines"
    }
}

Sla dit fragment op en roep het aan door de prefix dtPS in een PowerShell-bestand te typen.

Wanneer het fragment wordt uitgebreid, springt je cursor naar de positie van tabstop 1. Voeg vanaf hier de waarde of code toe die je wilt en druk op tab om de cursor naar de volgende tabstop te verplaatsen. Dit zal doorgaan totdat je alle gespecificeerde tabstops hebt doorlopen.

Je kunt dit in actie zien in de onderstaande schermafbeelding.

Het toevoegen van standaardwaarden aan tabstops

Hoewel tabstops geweldig zijn om mee te beginnen, wat als je specifieke waarden nodig hebt op die plekken, maar wel de mogelijkheid wilt hebben om ze indien nodig te wijzigen? Nu is het tijd om standaardwaarden op te nemen.

Het voorbeeld hierboven had een tabstop, maar toen het fragment werd uitgebreid, stond er geen tekst op zijn plaats. De cursor sprong naar de locatie van de tabstop en toen moest de gebruiker het overnemen.

Als er nu maar een manier was waarop een waarde kon staan waar de tabstop is – op die manier kon het fragment worden uitgebreid en die waarde wordt ermee uitgebreid. Wanneer de tabstop op die locatie komt, kan de standaardwaarde worden overschreven of er kan voorbij worden getabt met behoud van de standaardwaarde.

Laten we eens kijken hoe je standaardwaarden kunt toevoegen aan aangepaste fragmenten. Je doet dit door het bovenstaande PowerShell fragment JSON-bestand te bewerken.

Om te beginnen, open de fragmenttaalselector, kies PowerShell en wijzig de tabstops van $1 naar ${1:dit is mijn standaardbericht}. De waarde na de dubbele punt wordt de standaardwaarde. Deze waarde wordt uitgebreid met het fragment.

Wanneer die tabstop wordt bereikt, kunnen twee dingen gebeuren. De standaardwaarde kan worden overschreven, of er kan voorbij worden getabt en het behoudt zijn standaardwaarde.

Hieronder zie je de wijziging in de inhoud.

{
	"DateTime Snippet PS" {
		"prefix": "dtPS",
		"body" : [
			"Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and $1{1:this is my default message}\"",
			"$0"
		],
		"description": "PSCustomObject with 3 lines"
	}
}

Zodra bijgewerkt en opgeslagen, worden deze standaardwaarden uitgebreid en verschijnen ook in het IntelliSense-venster wanneer ze worden aangeroepen, zoals te zien is in de onderstaande schermafbeelding.

Standaardberichten zijn goede voorbeelden van wat je kunt doen met tabstops. Tabstops geven je ook de mogelijkheid om een keuze te maken. In de volgende sectie zie je een voorbeeld van het toevoegen van keuzes aan je tabstops.

Keuzes Toevoegen aan Tabstops

Tabstops zijn niet beperkt tot het hebben van een standaardwaarde of helemaal geen waarde. Ze kunnen worden gedefinieerd in de VS Code-snipterdefinitie om de gebruiker opties te geven wanneer de snippet wordt uitgebreid.

Misschien heb je een situatie waarin je een andere waarde of opdracht wilt kiezen in een snippet. In plaats van drie verschillende snippets te maken met verschillende keuzes, kun je de snippet bewerken om een keuze te presenteren met een tabstop, zoals te zien is in de onderstaande schermafbeelding.

Tabstops presenteren een keuze wanneer de volgende syntaxis wordt gebruikt in de body van de snippet:

${N|Choice1,Choice2,Choice3[,Choice]|}

De hierboven getoonde tabstop is aangepast om de keuze te geven uit:

Write-Output
Write-Warning
Write-Error

Dit is gedaan door twee pijpjes ( | ) na de tabstop te plaatsen. Keuzes worden binnen de pijpjes geplaatst, gescheiden door komma’s. Je kunt dit zien in het onderstaande codeblok.

${1|
    Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Keuze 1 
    Write-Warning -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", // <-- Keuze 2
    Write-Error -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\" // <-- Keuze 3
|}

Hieronder zie je het voorbeeldsnippet.

{
    "DateTime Snippet PS" {
        "prefix": "dtPS",
        "body" : [
            "Write-Output -Message \"The time is $((Get-Date).ToLocalTime()) and this is my default message\", Write-Warning -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\", Write-Error -Message \"The time is $(Get-Date).ToLocalTime()) and this is my default message\"|}",
            "$0"
        ],
        "description": "PSCustomObject with 3 lines"
    }
}

Wanneer het aangepaste snippet nu wordt uitgebreid, zal de keuze van welke optie te kiezen verschijnen in een IntelliSense-venster, zoals te zien is in de onderstaande schermafbeelding.

Vanaf hier kunt u de keuze selecteren die u wilt en zien hoe deze keuze wordt uitgebreid. In ons voorbeeld hieronder wordt de volledige regel code vervangen door de mogelijkheid om te kiezen uit drie verschillende Write-commando’s, en het laat zien dat elk commando zonder problemen kan worden opgeroepen en uitgevoerd.

Samenvatting

Aangepaste snippets kunnen eenvoudige tekst of code zijn. Ze kunnen tabstops hebben, zodat u berichten, standaardwaarden of keuzes kunt opnemen, evenals gemarkeerde tekst.

Het hoeft geen zware taak te zijn om elke letter van elk codeblok te typen. Met snippets hoeft u niet telkens de exacte syntaxis te onthouden voor een for-loop, een foreach-lus of een switch-verklaring. Snippets zijn perfect voor deze situaties.

I’ve shown Python, JavaScript, and PowerShell snippets in this post. VS Code snippets are available for many, many more languages. Your limits are only what you use and what you can think of!

Verdere lectuur

Inleiding tot PowerShell-functies