Snippets en JavaScript: optimiza tus tareas repetitivas en VSCode.

A veces, en nuestra vida como profesionales de los medios digitales, nos hemos encontrado con tareas repetitivas y monótonas que son similares o incluso iguales. En ese punto llegamos a pensar… “Ey ¿Será que no puedo mejorar el tiempo que me tardo haciendo esto?. para este tipo de situaciones nos pueden servir los snippets o fragmentos de código.

¿Qué son los snippets?

Los snippets son códigos o textos que guardamos y queremos reutilizar de forma ágil en el futuro, hay diversos fragmentos de código creados por la comunidad que permiten optimizar tus tiempos de desarrollo, uno de los más conocidos son los snippets para React, que solo con poner unas siglas te crea un componente vacío que puedes empezar a modificar. Pero…¿Cómo se ven los snippets?

Un ejemplo de estos puede ser el siguiente:

Uso de snippet en VSCode

El código anterior nos deja una plantilla para ejecutar promesas en Angular.js ¿Asombroso no? solo con escribir unas cuantas palabras tenemos un código completo y funcional. Ahora vamos a ver como crear nuestros propios fragmentos de código.

Como crear un snippet (fragmento de código)

Para crear nuestros snippet, necesitamos tener instalado el VSCode, luego hacemos lo siguiente:

Paso 1: acceder al archivo de snippets personalizados.

Abrimos VSCode, luego de esto se deben seguir los siguientes pasos:

1. Presionamos las teclas:
   Windows: [ Ctrl ] + [ ↑ | Shift ]+ [ P ]
   Mac: [ ⌘ | command ] + [ ↑ | Shift ] + [ P ]
2. Escribe en el buscador que te aparece:
   >Configure User Snippets.
3. Luego ingresa el lenguaje de programación al cual quieras crearle tus snippets.
   Ejemplo: javascript
   

Abrir archivo para crear snippets VSCode

Con estos pasos ya estaremos en el lugar correcto para crear nuestros propios snippets.

Paso 2: Definimos las partes del snippet

Para crear nuestro primer fragmento de código, primero vamos a definir un poco el cuerpo que este lleva:

Ejemplo de creación de snippet en VSCode

Donde:

1. "Print to console": texto que nos dara información sobre lo que hace el snippet
2. "prefix": Al escribir lo que pongamos aquí, en este caso la palabra “log”, VSCode nos recomendara el uso del snippet
3. "body": Aquí va todo el código que queremos reutilizar con el uso de snippets
   • $1: Es donde se posicionara el Mouse inicialmente para que escribamos un texto, lo que escribamos se repetirá en todos los lugares que utilicemos en este caso el $1
   • ${2:texto por defecto}: igual que el anterior, salvo que si no escribimos nada, el Snippet utilizará el texto que pongamos entre los dos puntos (:) y la llave de cierre (}).
   • Nota: Existen n cantidades de las variables: $1, $2, $3… podemos agregar todos los que necesitemos.

El Snippet anterior es el ejemplo que nos da VSCode para empezar a crear nuestros fragmentos de código.

Paso 3: Creación de nuestro snippet.

Ahora bien, vamos a crear un snippet que nos permita filtrar una lista de personas, por el nombre y por su edad, utilizaremos el siguiente arreglo de objetos:

El snippet nos quedaría algo así:

"Filtrar por nombre y edad": {
    "prefix": "filtroNombreEdad",
    "description": "Se filtra una lista de personas por nombre y edad",
    "body": [
        "const nombreFiltrar = '$1'.toLowerCase();",
        "const edadFiltrar = $2;",
        "const nuevaLista = personas",
        "  .filter(persona ={">"} persona.nombre.toLowerCase() == '$1'",
        "          && persona.edad == $2);",
        "",
        "console.log(nuevaLista);",
    ],
}

El código podría estar más optimizado pero en este caso, se utilizo de esta forma para que se vea como las variables por ejemplo, la $1, al escribirla una vez, se repite en el resto del código que es llamada.

Al ejecutar el snippet se vería así:

Ejemplo de creación de snippet en VSCode

Ya que hemos visto como crear un snippet, te invito a que empieces a trabajar en los tuyos, sea para proyectos personales, o incluso buscando estandarizar una forma de trabajar, en la empresa que trabajes.

Conclusiones

La creación de snippets nos pueden ayudar a crear nuestros propios “marcos de trabajo”, con código que solemos utilizar y podamos incluso estandarizarlos para una organización/empresa, optimizando la creación de componentes y permitiendo que un equipo siga unos estándares bien definidos y documentados.