Eina de conversió de codi en línia a fragments, admet JavaScript / TypeScript / React / JSX / TSX      

Introduïu un nom de fragment (name)
Introduïu un prefix de fragment (prefix)
Introduïu una descripció del fragment (description)
Introduïu el text del codi (code body)
Tipus de generació
Resultat del fragment generat

VSCode Com utilitzar fragments de codi


Snippets in Visual Studio Code
Els fragments de codi VS són una manera potent d'augmentar la vostra productivitat de codificació automatitzant la inserció de blocs de codi d'ús habitual. Poden ser simples expansions de text o plantilles més complexes amb marcadors de posició i variables. A continuació s'explica com aprofitar-los:

Creació de fragments:

Accediu a la configuració del fragment: aneu a Fitxer > Preferències > Fragments d'usuari (Codi > Preferències > Fragments d'usuari a macOS). Alternativament, utilitzeu la paleta d'ordres (Ctrl+Maj+P o Cmd+Maj+P) i escriviu "Preferències: Configurar fragments d'usuari".

Trieu un idioma: se us demanarà que seleccioneu un idioma per al vostre fragment (p. ex., javascript.json, python.json, etc.). Això garanteix que el fragment només estigui disponible per a aquest idioma específic. També podeu crear un fitxer "Fragments globals" si voleu que el fragment sigui accessible en tots els idiomes.

Definiu el fragment: els fragments es defineixen en format JSON. Cada fragment té un nom, un prefix (la drecera que escriureu per activar el fragment), un cos (el codi que cal inserir) i una descripció opcional.

Exemple (JavaScript):
{
  "For Loop": {
    "prefix": "forl",
    "body": [
      "for (let i = 0; i < $1; i++) {",
      "  $0",
      "}"
    ],
    "description": "For loop with index"
  }
}
En aquest exemple:

"For Loop": el nom del fragment (per a la vostra referència).
"forl": El prefix. Si escriviu "forl" i premeu Tab, s'inserirà el fragment.
"body": el codi a inserir. $1, $2, etc. són tabuladors (marcadors de posició). $0 és la posició final del cursor.
"descripció": una descripció opcional que es mostra als suggeriments d'IntelliSense.
Ús de fragments:

Escriviu el prefix: en un fitxer del tipus d'idioma correcte, comenceu a escriure el prefix que heu definit (p. ex., forl).

Seleccioneu el fragment: IntelliSense de VS Code us suggerirà el fragment. Seleccioneu-lo amb les tecles de fletxa o fent clic.

Utilitzeu les tabulacions: premeu Tab per navegar entre les tabulacions ($1, $2, etc.) i ompliu els valors.

Variables:

Els fragments també poden utilitzar variables com $TM_FILENAME, $CURRENT_YEAR, etc. Per obtenir una llista completa, consulteu la documentació del VS Code.

Exemple amb variables (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}"
    ]
  }
}
En dominar els fragments, podeu reduir significativament l'escriptura repetitiva i garantir la coherència del vostre codi. Proveu de crear els vostres propis fragments per als patrons de codi que s'utilitzen habitualment i observeu que augmenta l'eficiència de la codificació.