Snippets VSCode: Rapidito y con buena letra.

Hace menos de un mes fue mi primer aniversario como programadora Front End, o hizo un ao 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 da de referencia siempre para todo, y repasar das mentalmente de vez en cuando para ir memorizando poco a poco un montn de fechas! (ya, no estoy bien, pero tampoco hago dao a nadie).

Total, que me he dado cuenta de que durante este ao as a lo tonto he conocido a un montn de personas que programan (entre cursos y proyectitos y trabajo y chacharetas as en general...) y creo que a estas alturas tengo suficiente informacin para aseverar que en desarrollo cada persona tiene su sper poder: estn las Sper Detallistas (que enganchan una docu y la exprimen hasta el ltimo punto y coma), las Sper Recordadoras (que no necesitara fechas en los commits porque sabe siempre qu se hizo dnde y por qu), las Sper 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 Sper Rapiditas (que a priori parece que muy bien pero luego tienes un da 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 Sper Dev es tranquilizar un poquito sus instintos e intentar encontrar el equilibrio perfecto.

Vamos, que si tienes muchsima atencin 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 cdigo 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 ms calma y centrarte ms 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 ensea mis errores en el momento y me obliga a parar a revisar, los tests me ayudan porque me obligan a refactorizar mi cdigo para facilitar la tarea, y por tanto a revisar el cdigo tal y como termino de escribirlo... (tengo algunos truquillos caseros tambin, 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 cdigo.

Y estars pensando Amiga, los snippets de cdigo no te ayudan a escribir mejor cdigo, escriben cdigo por ti y s, efectivamente, pero a la vez no, porque el cdigo que escriben los snippets es la paja, el cdigo repetitivo. Y esto me lleva a los motivos por los que en efecto, me ayuda:

• Como deca, los snippets sirven para automatizar la escritura de cdigo repetitivo, donde los errores suelen ser: no he visto que me faltaba un corchete, no he visto que me faltaba ese parntesis 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 frustracin 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 cdigo.

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 fcil): nicamente tenemos que hacer click en settings y seleccionar User Snippets:

Se abrir arriba un cuadro de opciones de la que elegiremos la que ms nos convenga (si es la primera vez tendrs 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:

Tambin nos da la opcin de configurar los snippets a nivel proyecto.

Una vez seleccionada la opcin (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 cdigo,    "body": [ Una o varias lneas de cdigo que queremos que se inserte de forma automtica. Tiene formato array de strings, donde cadastring es una lnea de cdigo. En el ejemplo a continuacin se insertara 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 automticamente en el punto donde incluir la variable del mismo (la palabra a consolear).        "console.log('$1');",        "$2"    ],    "description": Descripcin opcional para mostrar cuando se introduzca el prefix en el cdigo, 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 ests 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 todava no conoces toda tu suerte.

Resulta que esa es la opcin difcil, la de sper pro, la de se me ha ocurrido una cosa que no se le ha ocurrido a nadie antes y que no se le ocurre ms que a un genio (yo todava no he tenido que crear ninguno, as un poco para probarlo y tal... poco ms). Para lo que es el da a da, 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 montn de extensiones del marketplace que te proveen con un montn dependiendo del lenguaje que quieras que sea SNIPPEADO (es tarde ya y empiezo a perder un poco el pie):

• JavaScript Snippet Pack:

• HTML Snippets:

• Bootstrap 4 CDN Snippet:

• React:

Y un montn ms que se pueden consultar en el MarketPlace del VS Code y que me tienen loca.

Y creo que hasta aqu mi Oda a los Snippets... Como siempre cualquier feedback (si es con amor o gatos) es bien recibido.

Referencias:

• Documentacin oficial VS Code
• MarketPlace VS Code