Enklere code snippets i VS Code: lag, del og gjenbruk kode på minutter

Små biter gjenbrukskode kan spare deg for overraskende mye tid, spesielt i frontend- og API-arbeid. Likevel sitter mange og kopierer gamle filer manuelt i stedet for å bruke innebygde snippets i editoren.

Her får du en konkret gjennomgang av hvordan du bruker code snippets i Visual Studio Code til vanlig webutvikling: fra første enkle snippet til en liten personlig “toolbox” du faktisk gidder å vedlikeholde.

Hva er code snippets i praksis?

En snippet er en mal for kode som kan settes inn med en kort trigger. For eksempel kan du skriveclgog få ut en ferdigconsole.log()med markøren plassert der du skal skrive videre.

I VS Code betyr det: du definerer et navn, en forklaring, en trigger og selve koden. Deretter kan du sette inn snippeten på sekunder i filer som matcher språktypen du har valgt.

Hvorfor det faktisk er verdt å bruke snippets

Snippets gir mest gevinst på ting du skriver ofte, som komponentboilerplate, testskjeletter, repetitiv markup eller små hjelpekall. Gevinsten er både mindre tasting og færre slurvefeil.

I tillegg blir koden mer konsistent. Alle nye React-komponenter kan starte likt, alle Jest-tester kan ha samme struktur, og API-ruter kan følge samme mønster for logging og feilbehandling.

Første steg: lag din første globale snippet

Start med noe ekstremt enkelt så du ser hele flyten. Et klassisk eksempel er en mer informativconsole.logsom også viser variabelnavnet.

Gjør slik i VS Code:

• Åpne Command Palette:Ctrl+Shift+P/Cmd+Shift+P
• Søk etterConfigure User Snippets
• VelgNew Global Snippets fileog gi den et navn, for eksempelmy-snippets

VS Code lager nå en JSON-fil. Legg inn denne enkle snippeten:

Eksempel:

{
"Console log with label": {
"prefix": "clg",
"body": ["console.log('$1:', $1);"],
"description": "console.log med label basert på variabelnavn"
}
}

Lagre filen, gå til en JavaScript-fil og skrivclgetterfulgt av Tab. Nå får du opp snippeten med markøren på$1, klar til å skrive variabelnavnet.

Forstå de viktigste snippet-delene

For å lage nyttige snippets trenger du bare noen få konsepter. Resten kan du lære etter hvert som behovene dukker opp.

De viktigste feltene i en snippet er:

• prefix: Triggere som du skriver i koden, for eksempelclgellerrfc.
• body: Selve koden, som en liste med strenger, én per linje.
• $1, $2, $0: Plassholdere der markøren hopper videre.$0er siste posisjon.
• description: Kort tekst som vises i forslagslisten i editoren.

Språkspesifikke snippets: JSX, tests og mer

Globale snippets er fint, men ofte vil du ha noe som bare gjelder i noen typer filer. For eksempel egne snippets for React-komponenter eller Jest-tester.

For å lage språkspesifikke varianter gjør du nesten det samme, men velger ett språk i stedet:

• Åpne Command Palette
• VelgConfigure User Snippets
• Velg for eksempeljavascriptreact.jsonellertypescriptreact.json

Nå gjelder snippeten bare for det språket. Her er et eksempel på en enkel funksjonell React-komponent:

{
"React component": {
"prefix": "rfc",
"body": [
"import React from 'react';",
"",
"function $1(props) {",
" return (",
" <div>$0</div>",
" );",
"}",
"",
"export default $1;"
],
"description": "En enkel React funksjonell komponent"
}
}

Små arbeidsflyter som gjør mest nytte

Når snippeter først er på plass, blir de mest effektive når du kobler dem til konkrete arbeidsvaner, ikke bare som “kjekt å ha”.

Noen enkle ideer som ofte gir god uttelling:

• Standard komponentoppsett: Importer, prop-types eller TypeScript-typer, og en tom JSX-struktur.
• API-ruter: Kode for å lese inn parametere, feilhåndtering og standard JSON-svar.
• Test-skall: En ferdig jest.describe med en eller to it-blokker og nødvendig import.
• CSS/SCSS-mønstre: BEM-blokker, mediespørringer eller ofte brukte utility-klasser.

Slik unngår du snippet-kaos

Det er fristende å lage snippets for alt, men da blir de vanskelige å huske og vedlikeholde. Litt struktur fra starten sparer deg for mye irritasjon senere.

Noen tommelfingerregler:

• Gi konsistente prefix, for eksempelapi-*for HTTP-ruter ogcmp-*for komponenter.
• Hvis du slutter å bruke en snippet, slett den heller enn å la den ligge.
• Hold body kort og fokusert, unngå å gjemme for mye logikk i én mal.
• Ha heller 10 gode snippets du husker, enn 50 som aldri brukes.

Deling av snippets i teamet

Snippets blir ekstra nyttige når flere på teamet jobber likt. I stedet for at alle lager sin egen variant, kan dere samle noen få gjennomtenkte maler i repoet.

En enkel måte å gjøre dette på er å lage en egen mappe, for eksempel.vscode/snippets, og legge språkspesifikke JSON-filer der. Dokumenter kort i README hvordan de brukes, og bli enige om navnekonvensjoner.

Vanlige feil og raske løsninger

Hvis en snippet ikke dukker opp, er det som regel en av disse årsakene: skrevet feil prefix, feil språkfil eller JSON-feil i snippet-filen. Sjekk først at du er i riktig filtype og at prefix ikke kolliderer med en annen snarvei.

Hvis du får feil i snippet-filen, bruker du vanlig JSON-syntaks. Manglende komma eller feil anførselstegn stopper hele filen. VS Code markerer vanligvis dette i margen, så ta en rask titt der hvis ingenting fungerer.

Bygg din egen lille toolbox gradvis

Snippets blir mest verdifulle når du lar dem vokse sakte frem fra ekte behov. Hver gang du tar deg selv i å kopiere den samme blokken kode mer enn to ganger, er det et signal om at du bør lage en snippet.

Hvis du starter med noen få, enkle maler og knytter dem direkte til arbeidsflyten din, blir dette et verktøy du faktisk vil fortsette å bruke, og som gjør neste feature, bugfix og refaktorering litt mindre tung.