Herramienta de conversión de código a fragmentos en línea, compatible con JavaScript, TypeScript, React, JSX y TSX      

Por favor, introduzca un nombre para el fragmento (name)
Por favor, introduzca un prefijo de fragmento (prefix)
Por favor, introduzca un fragmento de descripción (description)
Por favor ingrese el texto del código (code body)
Tipo de generación
Resultado del fragmento generado

VSCode Cómo utilizar fragmentos de código


Snippets in Visual Studio Code
Los fragmentos de código de VS Code son una forma eficaz de aumentar la productividad de la codificación al automatizar la inserción de bloques de código de uso común. Pueden ser simples expansiones de texto o plantillas más complejas con marcadores de posición y variables. A continuación, se muestra cómo aprovecharlos:

Creación de fragmentos de código:

Acceda a la configuración de fragmentos de código: vaya a Archivo > Preferencias > Fragmentos de código del usuario (Código > Preferencias > Fragmentos de código del usuario en macOS). Como alternativa, use la paleta de comandos (Ctrl+Shift+P o Cmd+Shift+P) y escriba "Preferencias: Configurar fragmentos de código del usuario".

Elija un idioma: se le solicitará que seleccione un idioma para su fragmento de código (por ejemplo, javascript.json, python.json, etc.). Esto garantiza que el fragmento de código solo esté disponible para ese idioma específico. También puede crear un archivo de "Fragmentos de código globales" si desea que el fragmento de código sea accesible en todos los idiomas.

Definir el fragmento: los fragmentos se definen en formato JSON. Cada fragmento tiene un nombre, un prefijo (el atajo que escribirá para activar el fragmento), un cuerpo (el código que se insertará) y una descripción opcional.

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

"For Loop": el nombre del fragmento (para su referencia).
"forl": el prefijo. Si escribe "forl" y presiona la tecla Tab, se insertará el fragmento.
"body": el código que se insertará. $1, $2, etc. son tabulaciones (marcadores de posición). $0 es la posición final del cursor.
"description": una descripción opcional que se muestra en las sugerencias de IntelliSense.
Uso de fragmentos:

Escriba el prefijo: en un archivo del tipo de idioma correcto, comience a escribir el prefijo que definió (por ejemplo, forl).

Seleccione el fragmento: IntelliSense de VS Code sugerirá el fragmento. Selecciónelo con las teclas de flecha o haciendo clic.

Uso de tabulaciones: presione la tecla Tab para navegar entre las tabulaciones ($1, $2, etc.) y complete los valores.

Variables:

Los fragmentos de código también pueden utilizar variables como $TM_FILENAME, $CURRENT_YEAR, etc. Para obtener una lista completa, consulte la documentación de VS Code.

Ejemplo con 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}"
    ]
  }
}
Si domina los fragmentos de código, podrá reducir significativamente la escritura repetitiva y garantizar la coherencia de su código. Experimente creando sus propios fragmentos de código para patrones de código de uso común y observe cómo aumenta la eficiencia de su codificación.