Online code naar snippet converter tool, ondersteunt JavaScript / TypeScript / React / JSX / TSX      

Voer een fragmentnaam in (name)
Voer een fragmentvoorvoegsel in (prefix)
Voer een fragmentbeschrijving in (description)
Voer de codetekst in (code body)
Generatietype
Gegenereerd fragmentresultaat

VSCode Hoe codefragmenten te gebruiken


Snippets in Visual Studio Code
VS Code snippets zijn een krachtige manier om uw codeerproductiviteit te verhogen door het invoegen van veelgebruikte codeblokken te automatiseren. Het kunnen eenvoudige tekstuitbreidingen zijn of complexere sjablonen met tijdelijke aanduidingen en variabelen. Zo kunt u ze benutten:

Snippets maken:

Toegang tot Snippet-instellingen: Ga naar Bestand > Voorkeuren > Gebruikerssnippets (Code > Voorkeuren > Gebruikerssnippets op macOS). U kunt ook het opdrachtpalet gebruiken (Ctrl+Shift+P of Cmd+Shift+P) en 'Voorkeuren: Gebruikerssnippets configureren' typen.

Kies een taal: U wordt gevraagd een taal voor uw snippet te selecteren (bijv. javascript.json, python.json, enz.). Dit zorgt ervoor dat de snippet alleen beschikbaar is voor die specifieke taal. U kunt ook een bestand 'Globale snippets' maken als u wilt dat de snippet in alle talen toegankelijk is.

Definieer het fragment: fragmenten worden gedefinieerd in JSON-formaat. Elk fragment heeft een naam, een voorvoegsel (de snelkoppeling die u typt om het fragment te activeren), een body (de code die moet worden ingevoegd) en een optionele beschrijving.

Voorbeeld (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
In dit voorbeeld:

"For Loop": De naam van het fragment (ter referentie).
"forl": Het voorvoegsel. Als u "forl" typt en op Tab drukt, wordt het fragment ingevoegd.
"body": De code die moet worden ingevoegd. $1, $2, etc. zijn tabstops (plaatsaanduidingen). $0 is de uiteindelijke cursorpositie.
"description": Een optionele beschrijving die wordt weergegeven in de IntelliSense-suggesties.
Snippets gebruiken:

Typ het voorvoegsel: Begin in een bestand met het juiste taaltype met het typen van het voorvoegsel dat u hebt gedefinieerd (bijv. forl).

Selecteer het fragment: IntelliSense van VS Code stelt het fragment voor. Selecteer het met de pijltjestoetsen of door te klikken.

Tabstops gebruiken: Druk op Tab om tussen de tabstops ($1, $2, etc.) te navigeren en vul de waarden in.

Variabelen:

Snippets kunnen ook variabelen gebruiken zoals $TM_FILENAME, $CURRENT_YEAR, etc. Voor een volledige lijst, zie de VS Code-documentatie.

Voorbeeld met variabelen (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}"
    ]
  }
}
Door snippets onder de knie te krijgen, kunt u repetitief typen aanzienlijk verminderen en consistentie in uw code garanderen. Experimenteer met het maken van uw eigen snippets voor veelgebruikte codepatronen en zie hoe uw coderingsefficiëntie omhoog schiet.