Al empezar a usar VSCode me enteré de los snippets y cree algunos muy buenos, pero por alguna razón no los uso mucho. Recordar los prefijos muy cortos que puse no me ayudó de mucho y creo que ese fue mi punto débil.

Tabla de contenido

1. ¿Qué son los snippets?
2. Scope en los snippets
3. Crear-snippets propios
4. Llamar a los snippets
5. Conclusión

¿Qué son los snippets?

Los snippets son fragmentos reutilizables de código personalizado que puedes llamar con un atajo de teclado o con prefijos mientras escribes en el editor.

VSCode te sugiere ayuda con IntelliSense al estar escribiendo. Entre ellas se encuentran los snippets que se identifican por un cuadrado, el prefijo utilizado y el título del snippet.

Scope en los snippets

Gracias al scope de los snippets es que VSCode sugiere los snippets que puedas usar en el archivo basado en el lenguaje y/o proyecto.

• Scope global: Es útil porque se pueden usar todos los snippets que definas independietemente del proyecto y del lenguaje que usemos. Para definirlo se dirije a abrir las opciones con ctrl+shift+p y buscar preferences: Configure User Snippets > new global snippets file, te pedira un nombre del archivo global y creará el archivo json donde se puede empezar a crear los snippets.
• Scope de lenguaje: Estos son snippets basados en el lenguaje que usemos, este lenguaje se puede cambiar con ctrl+k seguido de la tecla m. Al igual que scope global preferences: Configure User Snippets se busca el lenguaje deseado y abrirá el archivo donde se pueden empezar a crearlos.
• Scope de proyecto: Solo se pueden usar en un proyecto específico. Es útil porque se puede compartir con el proyecto. Al igual en las opciones se busca por New Snippets file for "project name" te pedirá el nombre del archivo y crea una carpeta si no existe llamada .vscode donde se encuentra el archivo que tenemos que editar.

Crear snippets propios

Una vez elegido el scope y ya dentro de nuestro archivo podemos crear nuestro primer snippet donde el primer key es el nombre, dentro de este van 3 elementos:

• Prefix: Es el prefijo con el que llamaremos al snippet. Algunas personas le algo al inicio para identicarlos como por ejemplo _c, pero por gusto personal y facilidad no lo hago.
• Body: Es el código a usar.
• Description: (opcional) es la descripción de ayuda que aparecerá al darle en más detalles como se vio al inicio.

{
  "Comment": {
    "prefix": "c",
    "body": "$LINE_COMMENT $0 $LINE_COMMENT",
    "description": "set a comment"
  },
}

El anterior snippet es el ya visto comentario, expliquemos que pasa en el body: Primero tenemos a $LINE_COMMENT esto es una variable predefinida por visual studio code, la sintaxis de variables empieza por el símbolo $ esta variable nos ayuda a poner comentarios sin tener que preocuparnos por el lenguaje, ya que algunos ya están soportados. Lo que hace este snippet perfecto para que sea de scope global.

El símbolo $0 es muy importante. $0 indica donde va a acabar siempre la posición cursor al seguir pulsando tab. Si este valor es mayor a 0 irá de manera ascendente hasta llegar al final 0.

Orden en body	$1	$0	$3	$2
Posición del cursor	1	4	3	2

Variables predefinidas y variables con opciones

Para darle un nombre predeterminado a una variable se le agrega:nombre después del número de variable. Y para crear una variable con opciones, al igual seguido del número separamos las opciones por coma y las envolvemos dentro de los símbolos ||.

En el siguiente ejemplo tenemos dos variables predefinidas y una opcional.

• Variables predefinidas: ${1:document} y ${0:element}.
• Variable opcional: ${2|querySelector, getElementById, getElementsByClassName, getElementsByTagName|}.

{
  "Get Dom Node": {
    "prefix": "getDom",
    "body": "${1:document}.${2|querySelector,getElementById,getElementsByClassName,getElementsByTagName|}(\"${0:element}\");"
  },
}

Múltiples líneas

Por ahora hemos visto snippets de una sola línea, pero el body también puede ser un array de multiples cadenas de texto, donde cada cadena de texto sería un salto de línea y podemos identarlo con \t, si es el caso que queramos usar todo en una sola línea podemos usar el salto de línea de \n.

{
  "Default Component": {
    "prefix": "dc",
    "body": [
      "const ${TM_FILENAME_BASE} = ($1) => {",
      "\treturn (",
      "\t\t${0:// body...}",
      "\t);",
      "};",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ],
    "description": "Arrow function default Component, takes the file name"
  },
}

Transformaciones

El siguiente ejemplo contiene un caso común si estás familiarizado con React, crea un fragmento que envuelve al texto con variable predefinida del texto seleccionado.

{
  "Fragment (Wrapper)": {
    "prefix": "frag",
    "body": "<>\n\t${TM_SELECTED_TEXT}$0\n</>",
    "description": "Wrap the selected content in a fragment"
  },
}

Podemos transformar las variables, ya que aceptan expresiones regulares. En el siguiente ejemplo transforma un arrow function a una verbose function, los pasos para realizarlo son los siguientes:

1. Escribe primero la primera línea export default function.
2. Toma el nombre del archivo con la variable TM_FILENAME_BASE.
3. Pega el texto seleccionado. Este contiene la expresión regular que hace match con la primera y última línea y las remplaza por un espacio vacío.

En la parte final es donde se remplaza lo que hace match de regex en //gm /<texto a remplazar>/gm y g es el contexto global de regex y la m que tomará en cuenta que contenga múltiples líneas para poder seleccionar ambas.

{
  "Export default function (Wrapper)": {
    "prefix": "df",
    "body": [
      "export default function ${TM_FILENAME_BASE}() {${TM_SELECTED_TEXT/^(?:(?<![\f\n\r])(?:.*))(?=[\f\n\r])|^.*(?![\f\n\r])$//gm}"
    ],
    "description": "Wrap a arrow function component and transform it into a function component"
  },
}

El fragmento y la transformación se verían de la siguiente manera:

Llamar a los snippets

Ya hemos visto una forma de llamar a los snippets que es con los prefijos que definimos, pero hay otras formas.

En las opciones ctrl+shift+p buscamos insert snippet y nos dará una lista con los snippets que podemos usar.

Otra opción que podemos usar con los snippets que más usamos a diario es con atajos de teclado. Es una forma un poco más rápida, pero con la desventaja de tener menos opciones a la mano y que sean difícil de olvidar si tenemos muchos.

Estos atajos los podemos definir en el archivo keybindings.json, lo podemos encontrar usando el atajo ctrl+p y escribiendo en la barra de búsqueda keybindings. En este archivo podemos definir igual un snippet de la siguiente forma:

{
  "key": "ctrl+;",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log($0);"
  }
}

También podemos referenciar nuestros snippets ya creados de la siguiente forma:

{
  "key": "ctrl+'",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "langId": "javascriptreact",
    "name": "Default Component"
  }
}

Conclusión

Los snippets nos pueden acelerar a la hora de codear, pueden ser texto simple o código dinámico incluyendo opciones y valores predefinidos. Son de ayuda, ya que de esta forma no necesitamos recordar la sintaxis exacta de una porción de código, la guardamos en un snippet y la reutilizamos.

Gracias por leer.

Este artículo ha sido publicado originalmente en: https://marcomadera.com/blog/snippets-en-vscode