&w=3840&q=75)
En snippet är ett stycke kod som du kan kalla på och som skrivs ut utan att du behöver skriva långa stycken kod själv. Det är väldigt smidigt för kodstycken som man skriver ofta.
Exempel på snippets som existerar i VS Code som grund för javascript är t.ex log som skriver ut en console.log() eller for som skriver ut en for-loop.
Men, man kan väldigt enkelt lägga in egna snippets i VsCode för att anpassa sitt workspace efter sina egna behov!
Så, hur gör man?
Öppna kommandopaletten i VS Code med ⌘+Shift+P på Mac eller Ctrl+Shift+P på windows och skriv in “configure user snippets” (alternativt tryck på Code > preferences > configure user snippets på Mac eller File > preferences > Configure user snippets på Windows).
Härifrån kan man antingen välja att lägga in en ny global fil i VS Code, en global fil i mappen för projektet eller skriva i filer specifika för olika språk.
För det här exemplet kommer vi att skapa en ny global fil för VS Code, efter att vi namngett den så är det bara att börja skriva ihop egna snippets och lägga in.
Här har vi skrivit en enkel liten fetch funktion som exempel på en snippet:
Json
{
"Simple Fetch": {
"scope": "javascript",
"prefix": ["fetch", "ftc"],
"body": [
"const url = '${1}';",
"const payload = {",
"\t${2}",
"};",
"",
"fetch(url,{",
"method: 'POST',",
"headers: {",
"'Content-Type': 'application/json'",
"},",
"body: JSON.stringify(payload)",
"})",
".then((res) => res.json())",
".then(data => console.log(data))"
],
"description":
"A simple fetch with url and payload. Logs data"
}
}
Som vi kan se så är vår snippet skriven i JSON och består av ett namn, scope, prefix, body och description.
Namn - Här skriver man in ett namn på sin snippet. I vårt fall “Simple Fetch”. Namnet är även vad VsCodes intellisense kommer att skriva ut om man inte anger en beskrivning när man kallar på snippeten.
Json"Simple Fetch": {
Scope - Scope är vilket språk eller projekt som snippeten används inom, i vårt fall “javascript”. Att ange scope gör det enklare att hålla reda på var och hur din snippet används. Om man lägger in snippet i en språk-specifik fil så kommer snippeten att vara scopad till det språket. Om man lägger snippet i en global fil kommer den att vara ospecificerad för språk om man utelämnar scope.
Json"scope": "javascript",
Prefix - Här skriver man in vilken förkortning eller vilket/vilka ord man vill kunna skriva in för att kalla på snippeten. Man kan även lägga flera prefix i en array för att kunna ha mer än ett prefix som leder till samma snippet. VsCode använder Substring matchning för att söka på ordet, så t.ex. log kommer dyka upp som ett val i menyn redan vid l och lo. I vårt exempel använder vi prefixen [“fetch”, ”ftc”], det betyder att vi kan kalla på vår snipper med både ftc och med fetch.
Json"prefix": ["fetch", "ftc"],
Här kan vi se att vår snippet “Simple Fetch” dyker upp i listan på både ftc och på fetch.
Body - Här skriver man in koden man vill att snippeten genererar ut när man kallar på den. Som vi kan se i exemplet så ligger all kod inuti bodyn omsluten av hakparenteser, och varje rad är omsluten av citattecken och avslutas med kommatecken. För att göra blankrader kan vi lägga in en rad med bara citattecken och kommatecken.
För att göra det lite enklare för oss själva sen när vi använder snippeten i kod kan vi även lägga till ${1} och ${2}. Det gör att markören automatiskt förflyttar sig till position ${1} när man kallar på snippeten, så man bara kan fortsätta att skriva in sin variabel, och vid nästa tab-tryckning kommer den flytta sig till ${2}. Vid tvåan har vi även lagt till \t vilket tabbar in ett steg så att formatteringen ser lite snyggare ut sen när den skrivs ut.
Lite snabbare, lite smidigare!
Json"body": [
"const url = '${1}';",
"const payload = {",
"\t${2}",
"};",
"",
"fetch(url,{",
"method: 'POST',",
"headers: {",
"'Content-Type': 'application/json'",
"},",
"body: JSON.stringify(payload)",
"})",
".then((res) => res.json())",
".then(data => console.log(data))"
],
Description - Kort beskrivning som berättar vad snippeten gör. Den kommer att dyka upp när man skriver in prefixet för att kalla på snippeten, så att man se över vad just den här snippeten gör.
Json"description":
"A simple fetch with url and payload. Logs data"
}
Slutligen
Efter det är det bara att börja använda den och tacka sig själv lite varje gång man behöver skriva en fetch! 🙌
Om man är nyfiken på att titta mer på Visual Studio Codes dokumentation för ännu fler tips och tricks för att komma igång att skriva egna snippets: https://code.visualstudio.com/docs/editor/userdefinedsnippets