Snippets VSCode: Rapidito y con buena letra.

#spanish #codenewbie #vscode #snippets

Hace menos de un mes fue mi primer aniversario como programadora Front End, o hizo un año que acabé el bootcamp... Como quieras verlo. El tema de poner fechas de aniversarios ya se sabe... siempre hay discordia y no se sabe muy bien desde qué punto empezar a contar, pero a mí me gusta escoger un día de referencia siempre para todo, y repasar días mentalmente de vez en cuando para ir memorizando poco a poco un montón de fechas! (ya, no estoy bien, pero tampoco hago daño a nadie).

Total, que me he dado cuenta de que durante este año así a lo tonto he conocido a un montón de personas que programan (entre cursos y proyectitos y trabajo y chacharetas así en general...) y creo que a estas alturas tengo suficiente información para aseverar que en desarrollo cada persona tiene su súper poder: están las Súper Detallistas (que enganchan una docu y la exprimen hasta el último punto y coma), las Súper Recordadoras (que no necesitaría fechas en los commits porque sabe siempre qué se hizo dónde y por qué), las Súper Resolutivas (que siempre tienen un pseudo-elemento en la manga),... Y yo creo que ya veis por donde voy. Pues bien, yo creo que soy un poco de las Súper Rapiditas (que a priori parece que muy bien pero luego tienes un día un poco tonto y escribes cosas como “error.massage” y te quedas tan ancha y luego no sabes qué pasa y todo mal). Y es que al final todo gran poder conlleva una gran responsabilidad, y yo creo que la de cada Súper Dev es tranquilizar un poquito sus instintos e intentar encontrar el equilibrio perfecto.

Vamos, que si tienes muchísima atención por el detalle está genial, pero tienes que intentar no perderte en tus lecturas e investigaciones, y si tienes muchos recursos tienes que intentar no acabar haciendo un código que solo tú entiendes... y si a veces se te va un poquito la mano con las prisas tienes que intentar hacer las cosas con más calma y centrarte más en el detalle. O así lo veo yo, que al final es lo que viene a cuento que para eso estoy escribiendo yo (como con la radio del coche el que conduce).

En definitiva! A ver si me centro que no me centro. Que hace unos meses que estoy muy interesada en herramientas que me ayuden a eso, a afinar mejor, sea como sea la ayuda: el linter, por ejemplo, me ayuda porque me enseña mis errores en el momento y me obliga a parar a revisar, los tests me ayudan porque me obligan a refactorizar mi código para facilitar la tarea, y por tanto a revisar el código tal y como termino de escribirlo... (tengo algunos truquillos caseros también, por qué no decirlo). Pero hay una en concreto que nunca hubiera dicho que me fuera a ayudar, y resulta ser que sí, y son los Snippets de código.

Y estarás pensando “Amiga, los snippets de código no te ayudan a escribir mejor código, escriben código por ti” y sí, efectivamente, pero a la vez no, porque el código que escriben los snippets es la “paja”, el código repetitivo. Y esto me lleva a los motivos por los que en efecto, me ayuda:

Como decía, los snippets sirven para “automatizar” la escritura de código repetitivo, donde los errores suelen ser: “no he visto que me faltaba un corchete”, “no he visto que me faltaba ese paréntesis” o “ostras, la coma”. Es decir, no es que pienses que la flecha de una arrow function se escribe así =< , es que estabas mojando la galleta en el colacao y has soltado el shift antes de tiempo, y evitar esos errores evita mucha frustración y deja muy limpita la cabeza para pensar y razonar.
Al automatizar esas construcciones dedico menos tiempo a pensar en tareas repetitivas y dedico tiempo de calidad al resto del código.

En fin, que los Snippets son mis nuevos mejores amigos.

Crear un snippet es muy sencillo, al menos en VS Code (y me da a mí por pensar que en todos los IDE será igual de fácil): únicamente tenemos que hacer click en settings y seleccionar “User Snippets”:

Se abrirá arriba un cuadro de opciones de la que elegiremos la que más nos convenga (si es la primera vez tendrás que crear un nuevo archivo global como se indica en la imagen, en caso contrario puedes elegir de la lista de los archivos existentes el que quieres modificar:

También nos da la opción de configurar los snippets a nivel proyecto.

Una vez seleccionada la opción (si hemos elegido crear un nuevo archivo nos preguntará el nombre que le queremos dar), accederemos al archivo .json donde configuraremos nuestros snippets siguiendo la siguiente estructura:

"Nombre del snippet": {
    "scope": El ámbito al que pertenece el snippet (para que se muestren únicamente los relevantes a cada caso). Pueden ser lenguajes o 
proyectos,
    "prefix": La palabra con la que llamaremos al snippet desde el código,
    "body": [ Una o varias líneas de código que queremos que se inserte de forma automática. Tiene formato array de strings, donde cada
string es una línea de código. En el ejemplo a continuación se insertaría un console.log de un string, el $1 indica que el cursor se 
posicionará en ese punto en primera instancia, y el $2 será a donde iremos haciendo el primer tab. De esta forma al meter el snippet nos 
situará automáticamente en el punto donde incluir la variable del mismo (la palabra a consolear).
        "console.log('$1');",
        "$2"
    ],
    "description": Descripción opcional para mostrar cuando se introduzca el prefix en el código, para identificar la utilidad de cada uno 
de los snippets que se muestran.
 }

Si es la primera vez que oyes hablar de los snippets seguramente ahora mismo estés pensando la cantidad de estructuras que vas a crear y lo bonita que va a ser tu vida a partir de ahora, pero espera, porque todavía no conoces toda tu suerte.

Resulta que esa es la opción “difícil”, la de súper pro, la de “se me ha ocurrido una cosa que no se le ha ocurrido a nadie antes y que no se le ocurre más que a un genio” (yo todavía no he tenido que crear ninguno, así un poco para probarlo y tal... poco más). Para lo que es el día a día, para empezar a usarlo ya mismo, no he tenido que montar ni un snippet porque como suele ocurrir en este mundillo... ya lo ha hecho alguien.

Y es que, a parte de los Snippets que trae el propio VS Code (se consultan haciendo ctrl+shift+p para abrir la Paleta de Comandos y seleccionando “Insert Snippet”), existen un montón de extensiones del marketplace que te proveen con un montón dependiendo del lenguaje que quieras que sea SNIPPEADO (es tarde ya y empiezo a perder un poco el pie):