Kommer du på dig själv med att ofta skriva samma kod om och om igen när du använder VS Code? Skapa några snippets, det är smidigt och man kan dela dem. Det gör det definitivt roligare och mindre tidskrävande att hantera återkommande uppgifter.

VS Code snippets är relevanta för i princip alla språk. De är baserade på TextMates syntax för snippets. Visual Studio Codes utmärkta dokumentation om snippets hittar du här.

Skriver man function i en .js-fil ser man:

Fyrkanten och texten till vänster indikerar en snippet. Väljer man den genom att trycka på enter eller tab får man en funktionsdeklaration.

Man kan se tillgängliga snippets genom att välja "insert snippet" i kommandopaletten (ctrl-shift-p).

Man kan lägga till egna snippets genom att i kommandopaletten (ctrl-shift-p) söka på "Preferences: Configure user snippets".

När man valt språk öppnas en ny fil och den inledande kommentaren i filen är allt man behöver för att komma igång.

Ett enkelt javascript-exempel:

När vi sparat och går in i en .js-fil får vi följande förslag när vi skriver "todo".

Som expanderar till

Tabbstopp

Efter att en snippet expanderas sätts markören efter texten, som i exemplet med todo ovan. Det går att ange vart markören skall hamna. Vill man byta plats på slutläge använder man $0. Man kan ha fler stopp, $1, $2, $3 osv. Om man t.ex. har $0, $1, $2 med hamnar man först på $1 sen på $2 och sist på $0. Man kan skriva på varje stopp och gå vidare till nästa tabbstopp med tabb. Här är en liten snippet för en funktionskomponent i React.

Efter expandering står vi vid (), där vi kan skriva namnet på komponenten. Vid nästa tabbning flyttas markören till $0 i funktionskroppen.

Man kan också ha fler av samma tabbstopp.

Man skriver alla $1 samtidigt, så om ett värde skall stå på flera ställen behöver vi bara skriva det en gång. Vi tabbar sedan vidare till interfacet, sen vidare till inparametrar och slutligen till funktionskroppen.

Man kan ha defaultvärde för ett tabbstopp genom att skriva ${1:valfri text}. Skriver man när man står på tabbstoppet ersätts defaultvärdet och tabbar man behålls det. Man kan också ha flervalsalternativ, ${1|number,string,any|}, det ser ut så här:

Variabler

En användbar funktion är variabler. De skrivs med inledande dollartecken följt av variabelnamn, t.ex. $CURRENT_DATE. Dokumentationen för VS Code har en lista här.

Vissa variabler beror på vald text, och om man vill använda dem behöver man välja "insert snippet" från kommandopaletten eller skapa en keybinding för insert snippet.

Om vi vet att varje komponent ligger i en fil med samma namn som komponenten kan man skriva om vår snippet så här:

$TM_FILENAME_BASE utvärderas till filnamnet utan filändelse. Om man har efterföljande text utvärderas inte variabeln, men det går att lösa med måsvingar runt variabelnamnet, som med ${TM_FILENAME_BASE}Props i exemplet. I filen MyComponent.tsx expanderar det till:

Det är också möjligt att manipulera variabelvärden med regex, se dokumentationen.

Scopning

När man lägger till snippets för ett språk genom kommandopaletten, blir de globala för den användaren på datorn och specifika för språket, så de kan inte användas för flera språk eller enkelt delas i ett gitrepo.

Om man går in på "Preferences: Configure User Snippets" i kommandopaletten så finns det två alternativ till. Globala snippets, som gäller globalt och eventuellt för gälla flera språk och projektsnippets, som skapas som en fil under .vscode-mappen, som enkelt kan versionshanteras med resten av koden.

Om man väljer "New snippets file for ..." så får man fylla i ett filnamn och en fil skapas under .vscode-mappen. Både projekt-snippets och globala snippets har ett värde, scope, som anger vilka språk den skall användas för.

Slutligen

Snippets är ett av alla verktyg i verktygslådan för att snabba upp utvecklingen. Prova att skapa några och spara några sekunder eller minuter varje gång.

Testa gärna dina nyvunna kunskaper i det här enkla quizet. Ta dig också några minuter och prova lite praktiskt i Visual Studio Code.