Online kod till snippet Converter Tool, stödja JavaScript / TypeScript / React / JSX / TSX      

Ange ett namn på utdraget (name)
Ange ett kodavsnittsprefix (prefix)
Ange en beskrivning av utdrag (description)
Vänligen ange kodtexten (code body)
Generationstyp
Genererat utdragsresultat

VSCode Hur man använder kodavsnitt


Snippets in Visual Studio Code
VS-kodavsnitt är ett kraftfullt sätt att öka din kodningsproduktivitet genom att automatisera infogningen av vanliga kodblock. De kan vara enkla textexpansioner eller mer komplexa mallar med platshållare och variabler. Så här använder du dem:

Skapa utdrag:

Gå till Snippets Settings: Gå till Arkiv > Inställningar > Användar Snippets (Kod > Inställningar > Användar Snippets på macOS). Alternativt, använd kommandopaletten (Ctrl+Skift+P eller Cmd+Skift+P) och skriv "Preferences: Configure User Snippets".

Välj ett språk: Du kommer att bli ombedd att välja ett språk för ditt kodavsnitt (t.ex. javascript.json, python.json, etc.). Detta säkerställer att kodavsnittet endast är tillgängligt för det specifika språket. Du kan också skapa en "Global Snippets"-fil om du vill att kodavsnittet ska vara tillgängligt på alla språk.

Definiera Snippet: Snippets definieras i JSON-format. Varje kodavsnitt har ett namn, ett prefix (genvägen du skriver för att utlösa kodavsnittet), en brödtext (koden som ska infogas) och en valfri beskrivning.

Exempel (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
I det här exemplet:

"For Loop": Namnet på kodavsnittet (för din referens).
"forl": Prefixet. Att skriva "forl" och trycka på Tab kommer att infoga kodavsnittet.
"body": Koden som ska infogas. $1, $2, etc. är tabstops (platshållare). $0 är den sista markörpositionen.
"beskrivning": En valfri beskrivning som visas i IntelliSense-förslagen.
Använda Snippets:

Skriv prefixet: Börja skriva prefixet du definierade i en fil av rätt språktyp (t.ex. forl).

Välj kodavsnittet: VS-kodens IntelliSense föreslår kodavsnittet. Välj det med piltangenterna eller genom att klicka.

Använd Tabstops: Tryck på Tab för att navigera mellan tabstops ($1, $2, etc.) och fyll i värdena.

Variabler:

Snippets kan också använda variabler som $TM_FILENAME, $CURRENT_YEAR, etc. För en fullständig lista, se VS Code-dokumentationen.

Exempel med variabler (Python):
{
  "New Python File": {
    "prefix": "newpy",
    "body": [
      "#!/usr/bin/env python3",
      "# -*- coding: utf-8 -*-",
      "",
      "# ${TM_FILENAME}",
      "# Created by: ${USER} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ]
  }
}
Genom att bemästra utdrag kan du avsevärt minska repetitiv skrivning och säkerställa konsistens i din kod. Experimentera med att skapa dina egna kodavsnitt för vanliga kodmönster och se hur din kodningseffektivitet ökar.