Como crear tus propios “Snippets” en VSCode

Te voy a mostrar cómo crear snippets y así vas a poder ahorrar tiempo evitando la repetición innecesaria de código.

¡Hola! Soy Esteban y me dicen “elCapi”. Este es mi primer artículo, por lo tanto les pido un poco de paciencia hasta que mis habilidades de escritura y enseñanza mejoren.

¡Spoiler alert! Voy a decir muchas veces “Snippet”.

Crear snippets en VSCode es bastante simple, pero igualmente vamos a ver cómo hacerlo en cuatro simples pasos.

Antes de explicar cómo crear uno, vamos a decir qué son y para qué sirven.

Un snippet es una plantilla que puede ser invocada desde cualquier archivo que estemos codeando. Es una porción de código especifica que nos puede servir para evitar tener que escribir lo mismo una y otra vez, o incluso en el caso de un conjunto de acciones que no recordemos con exactitud; en cualquier instancia, nos ayuda evitando que tengamos que buscar en internet o en la documentación.

Ahora que ya sabemos lo que es un snippet, vamos al grano:

1. Primer paso — Preferencias

Primero, tenemos que buscar dónde están las opciones de los snippets. Para eso, nos dirigimos a File> Preferences > User Snippets. Aquí nos encontramos con una lista y a continuación podemos crear un snippet de manera global o dentro del archivo que contiene a los snippets de cada lenguaje.

2. Segundo paso — Estructura

Luego, tenemos la estructura del mismo.

1{
2  "name": {
3    "prefix": "atajo",
4    "body": "Cuerpo del snippet",
5    "description": "Descripción del mismo",
6    "scope": "javascript"
7  }
8}

• Name: Esto es algo obvio, pero aquí vamos a nombrar a nuestro snippet.
• Prefix: Este va a ser nuestro atajo. Dentro de nuestro código, cuando escribamos el atajo, va a aparecer de forma automática la opción de poder llamar a nuestro snippet. Por ejemplo: “forEach”.
• Body: Aquí vamos a tener que crear el cuerpo del mismo. El contenido de esta sección va ser el mismo que luego se verá reflejado en el código. Esto incluye a cada tag, espacio, tabulación, etc.
• Description: También podemos agregar una descripción explicando lo que hace o intenta hacer el snippet.
• Scope: Por último, tenemos la posibilidad de setear el scope, es decir que podemos especificar a que lenguaje pertenece el snippet. Esto va a impedir que nos aparezca el snippet en un archivo de otro lenguaje que no sea el que previamente hayamos definido.

3. Tercer Paso — Placeholder

Otra caracteristica que podemos agregar a nuestro snippet es la de los placeholders. Estos se definen de la siguiente manera: ${1:condition}. Pueden ser agregados cuantas veces sean necesarias y son palabras que el usuario deberá intervenir y remplazarlas. Estas guías van a aparecer de forma ordenada (siguiendo la numeración), teniendo la posibilidad de avanzar entre una y otra apretando la tecla “Tab”.

Veamos los placeholders en acción:

1{
2  "name": {
3    "prefix": "forthis",
4    "body": [
5      "for (${1:condition}) {",
6      " ",
7      "}"
8     ]
9  }
10}

Este cuerpo va a verse en el código de la siguiente manera:

1for (condition) { }

“Condition” representa la porción que deberá ser reemplazada por el desarrollador ingresando un valor, una variable o lo que sea requerido.

4.Cuarto Paso— Y finalmente…

¡Listo! Ya podes guardar los cambios y concluir con la creación de tu primer SNIPPET.

Gracias por llegar al final de este artículo. Prometo que voy a ir mejorando paso a pasito.

¡Cambio y fuera!