Slik lager du dine egne VS Code snippets som faktisk sparer tid

Snippets i Visual Studio Code kan kutte mye gjentatt tasting, men mange nøyer seg med standardoppsettet. Med noen få egne snippets kan du både skrive kode raskere og gjøre den mer konsistent i teamet.

I denne artikkelen ser vi på hvordan du lager, organiserer og vedlikeholder egne snippets, med fokus på praktiske eksempler og vanlige fallgruver som ofte gjør at folk gir opp før de får nytten ut av verktøyet.

Hva er snippets i VS Code, og når er de nyttige?

En snippet er en snarvei som utvider seg til en større kodebit. Du skriver et kort prefiks, trykker Tab eller Enter, og VS Code fyller inn resten for deg, gjerne med plasser der du kan hoppe mellom variabler og tekst du må tilpasse.

Snippets er mest nyttige for mønstre du gjentar ofte: standardfunksjoner, testmaler, logger, kommentarer, API-kall og små kodeblokker som alltid har omtrent samme struktur. Poenget er ikke å lagre hele filer, men å gjøre de kjedelige 20 prosentene nesten automatiske.

Global, prosjektspecifikke og språkspesifikke snippets

VS Code støtter tre hovednivåer: globale snippets som er tilgjengelige i alle filer, språkspesifikke snippets som bare vises for for eksempel JavaScript eller HTML, og prosjektspecifikke snippets som ligger i repoet ditt og deles med teamet.

For gjenbruk på tvers av prosjekter kan globale snippets være fristende, men det gir fort rot. Ofte er det bedre med språkspesifikke snippets som ligger i prosjektet, slik at de følger kodebasen og versjoneres sammen med resten av koden.

Steg for steg: lag din første snippet

For å komme i gang åpner du kommandopaletten (Ctrl+Shift+P eller Cmd+Shift+P) og skriver “Configure User Snippets”. Der kan du velge enten et bestemt språk, eller “New Global Snippets file” hvis du vil teste noe enkelt først.

VS Code oppretter en JSON-fil der hver snippet er et objekt. Her er et enkelt eksempel som lager en testmal for JavaScript med Jest:

Eksempel på snippet:

{
"Jest test template": {
"prefix": "jtest",
"body": [
"describe('$1', () => {",
" it('should $2', () => {",
" // arrange",
" $3",
"",
" // act",
" $4",
"",
" // assert",
" expect($5).toBe($6);",
" });",
"});"
],
"description": "Standard Jest teststruktur"
}
}

Forstå feltene: prefix, body og description

prefixer koden du skriver for å trigge snippetet. Velg noe kort som ikke kolliderer med vanlige ord du skriver ofte. Unngå generiske navn som “test” eller “func”, bruk heller noe prosjektspesifikt.

bodyer selve innholdet. Hver linje i body er en streng i en liste. VS Code setter dem sammen til en flerlinjet blokk når snippetet brukes. Du kan bruke spesialtegn som tabstops og variabler for å gjøre snippetet mer dynamisk.

Tabstops: slik hopper du smart mellom felter

Tabstops er det som gjør snippets virkelig nyttige. Med $1, $2, $3 og så videre bestemmer du rekkefølgen markøren skal hoppe i. I Jest-eksemplet ovenfor vil markøren først stå på $1 (describe-tittelen), så på $2 (beskrivelse av testen), deretter på resten.

Hvis du vil at samme verdi skal gjenbrukes flere steder, kan du bruke samme nummer flere ganger. For eksempel kan du skrive $1 både i funksjonsnavn og i en kommentar, slik at de oppdateres samtidig når du endrer den første forekomsten.

Enkle snippets for hverdagsoppgaver

Start med små ting du faktisk gjør flere ganger om dagen. Her er noen forslag mange utviklere har nytte av:

• En standardlogg med kontekst, for eksempel logreq som lager console.log('Request', { url, body });.
• En HTTP-feilhåndterer med riktig struktur for ditt rammeverk.
• En kommentarblokk for TODO med navn og dato, slik at alle på teamet følger samme format.

Poenget er å ta ting du alltid “bare kopierer fra en annen fil” og gjøre dem ett tastetrykk unna, uten å måtte lete.

Snippets i team: legg dem inn i repoet

Hvis flere skal ha glede av de samme snippets, kan du legge dem i prosjektet under .vscode-mappen. Opprett for eksempel .vscode/project.code-snippets, og legg inn teamets mest brukte mønstre.

Fordelen er at alle som kloner repoet får de samme verktøyene, uten ekstra oppsett. I tillegg kan dere kodegjennomgå snippetene på lik linje med øvrig kode, og fjerne eller oppdatere dem når mønstrene i prosjektet endrer seg.

Unngå rot: rydding, navngivning og vedlikehold

Snippets blir fort et virvar hvis du aldri sletter gamle eller passer på navngivningen. Lag deg noen enkle regler: prefiks skal være korte og gjenkjennelige, beskrivelsen skal være tydelig nok til at du skjønner bruken om et halvt år, og du bør jevnlig fjerne varianter som aldri brukes.

En praktisk strategi er å starte med én fil per språk, og heller splitte hvis den blir for stor. Har du mange miljøer eller rammeverk, kan du lage egne filer som react-snippets.code-snippets eller api-snippets.code-snippets, men unngå unødvendig fragmentering.

Feilsøking: når snippetene ikke dukker opp

Hvis snippetet ditt ikke vises i listen, er det ofte ett av noen få problemer: du er i feil filtype i forhold til snippet-filen, JSON-en har en liten syntaksfeil, eller prefikset kolliderer med noe annet.

Start med å sjekke View > Output > Log (Window) eller lagre snippet-filen på nytt for å trigge en reinnlasting. Test gjerne med et veldig enkelt snippet og et unikt prefiks, så ser du fort om problemet er oppsettet eller selve innholdet.

En liten sjekkliste før du lager neste snippet

Før du legger til en ny snippet, kan du stille deg noen spørsmål: Gjør dette mønsteret meg treg minst et par ganger i uken? Kan jeg forenkle slik at snippetet ikke blir for “smart” og vanskelig å lese? Og er det andre på teamet som ville hatt nytte av den samme koden?

Hvis svaret er ja, er det verdt jobben. Start smått, juster underveis og la snippetene utvikle seg sammen med kodebasen. Etter noen uker merker du at stadig mer av det kjedelige arbeidet håndteres av editoren, ikke fingrene.