Crea tu primer Snippet en Visual Studio Code 🤩

¿Qué es un snippet? Si te estás haciendo esta pregunta, déjame decirte que seguramente los has usado y no te habías dado cuenta.

Crea tu primer Snippet en Visual Studio Code 🤩

¿Recuerdas esos atajos como "html:5" o "!" que usamos para obtener la estructura base de un archivo HTML? Estoy seguro de que tu respuesta es un Sí.

Eso es un atajo que nos da Emmet, este ya viene instalado en nuestro editor de código (Visual Studio Code), pero no esta muy alejado de lo que vamos a aprender el día de hoy.

Con ese atajo o también llamado prefijo en el mundo de los snippets, logramos obtener un fragmento de código que no es más que una estructura previamente definida.

Pero como dicen los chavos hoy en día, musho texto... Vayamos a la acción.

¿Cómo crear mi primer snippet en Visual Studio Code?

Paso 1: Tener instalado Visual Studio Code.

En el caso de que no lo tengas instalado, puedes descargarlo directamente desde su página oficial.

Paso 2: Crear el snippet

Algo que se me había olvidado comentarte es que podemos crear snippets en cualquier lenguaje o tecnología que da soporte Visual Studio Code. Esto quiere decir que si estás trabajando con HTML, CSS, Javascript, PHP, Go, entre muchas más, podrás crear uno o varios snippets para ahorrarte tiempo al momento de escribir código. Incluso puedes crear snippets que trabajen de forma global en todas las tecnologías.

Aunque esto último para casos muy concretos donde un snippet pueda funcionar en varios lados, por ejemplo uno de HTML que igual puedas usar en un archivo de PHP.

Pero lo normal es crear snippets específicos para cada tecnología.

Ahora sí, debemos ubicar los archivos donde crearemos nuestros snippets.

Para lograr esto tenemos 2 formas diferentes.

Forma 1: Presionar "Ctrl + shift + p" si estás en Windows o "Command + shift + p" si estás en Mac OS.

Esto nos abrirá una especie de buscador donde (sin borrar el símbolo de '>'), buscaremos Configure User Snippets (o su equivalencia en el idioma que tengas tu editor) y seleccionaremos esa primera opción que se muestra a continuación.

Forma 2: De forma manual, si estás en Windows nos dirigimos a File > Preferences > Configure User Snippets como se observa a continuación.

Si estás en Mac OS debes dirigirte a Code > Preferences > Configure User Snippets

Uses cualquiera de las 2 formas que te he mostrado, daremos un enter o simplemente lo seleccionaremos y nos mostrará lo siguiente:

No te asustes, podemos ver que nos da la opción de editar o crear un archivo global de snippets o bien seleccionar un archivo en concreto de cierta tecnología para comenzar a editar. Conforme vayas haciendo scroll puedes ir viendo todas las tecnologías en las que puedes crear tus snippets o buscar directamente una.

Para nuestro ejemplo crearemos un primer snippet para archivos CSS. Una de nuestras estudiantes en la comunidad de Discord quería saber como crear estos snippets y este artículo está escrito a partir de esa duda, por lo que es importante enseñar como lograrlo.

Bueno, buscaremos el archivo CSS.json y lo seleccionaremos (Si estás siguiendo el artículo y lo quieres hacer con otra tecnología, selecciona el de dicha tecnología).

Una vez seleccionado, nos abrirá el siguiente archivo donde tenemos de forma resumida y comentada, la estructura para crear nuestros propios snippets.

Como puedes observar, se trabaja sobre una estructura json por lo que nos será más fácil lograr la creación de estos.

Lo que está comentado lo puedes borrar, si así lo deseas, lo que si debes darte cuenta es que los snippets están dentro de una estructura de llaves '{ }' y es ahí donde comenzaremos a escribir el snippet.

Para crear un snippet se solicita lo siguiente:

• Nombre
• Prefijo
• Cuerpo
• Descripción

Si recuerdas tus clases del Curso esencial de JavaScript y el DOM (Si no, te recomiendo que le des una revisada), vamos a estar trabajando con la estructura de un objeto, por lo que tenemos pares de clave:valor y es así como se construirá el snippet.

Te muestro primero el resultado del snippet y a continuación comienzo a explicarlo.

Lo primero es darle un nombre a nuestro snippet, en este caso como estaremos generando un borde para debugguear nuestro código, le he dado el nombre de Borde personalizado. El nombre debe ir dentro de comillas, seguido de dos puntos ":" y un juego de llaves "{ }" donde adentro ira el contenido del snippet.

Dentro de las llaves, lo primero que debemos definir es el "prefix", seguido de dos puntos ":", seguido de su valor entre comillas. Donde el valor será el prefijo o atajo que usaremos para invocar nuestro snippet. En este caso le hemos dado el valor de "br" y escribimos una coma al final para poder añadir la siguiente propiedad o clave con su valor.

Lo siguiente es definir que hará nuestro snippet al momento de usarlo. Esto lo logramos al definir el "body". Por lo que escribimos esa propiedad entre comillas, seguido de dos puntos ":", seguido de corchetes "[ ]", donde adentro escribiremos la línea o líneas de código que lanzara nuestro snippet.

En nuestro ejemplo le diremos que nos lance un borde, de 1px, sólido y de color rojo (debe escribirse entre comillas).

Finalmente se añade una "descripción", donde como su nombre lo dice, describiremos de forma breve lo que hace nuestro snippet.

Cuando hayamos terminado asegurémonos de guardar el archivo, lo puedes hacer con "Ctrl + s" si estás en Windows o con "Command + s" si estás en Mac OS.

Ahora probemos si nuestro snippet funciona. No es necesario reiniciar Visual Studio Code, pero en caso no te funcione, puedes cerrar y volver a abrir el editor.

Abre o crea un archivo con extensión (.css) o con la extensión de la tecnología de la cual hayas creado tu snippet.

En dicho archivo comienza a escribir el prefijo que definimos en el snippet y podrás observar que te sale ya como una opción.

Si presionamos enter o simplemente lo seleccionamos, nos lanzará el código que definimos en el cuerpo del snippet.

Hasta el momento parece ir todo bien con nuestro primer snippet pero te has percatado que el valor de 1px, solid y red son estáticos? Es decir, si quiero que mi borde ahora sea de 5px, con estilo dashed y de otro color, debo hacerlo manualmente...

No te preocupes, podemos anticiparnos a este problema. Lo que haremos es modificar el snippet creado anteriormente (o puedes crear uno nuevo) donde le añadiremos tabuladores y valores de placeholder o valores por defecto que pueden cambiar cuando con la tecla de tabulación lleguemos a determinada posición del snippet.

Si no queda claro, hagamos el ejemplo.

El cambio esta en el valor de "body" donde hemos añadido esa estructura de ${número:valor}. Ese número es acorde a la posición que el cursor va a seguir al presionar sobre la tecla de tabulación.

Es decir, estaremos haciendo una navegación de "tabs". Es por eso que se enumeran comenzando por el número 1. El número 0 se usa para la posición final.

Después de enumerar la posición del cursor mediante los tabs, se define el valor por defecto que se tendrá en cada posición.

Lo bueno de trabajarlo de esta forma es que se tendrán valores definidos por defecto y al navegar mediante los tabs el valor de esa posición queda seleccionado y en el caso de que se requiera cambiarlo, basta con reemplazarlo por el nuevo valor.

Te invito a que hagas la modificación y lo pruebes tu mismo o tu misma para que veas como puedes reemplazar algún valor navegando entre tabs dentro de la línea que lanzo el snippet.

De esta forma podemos comenzar a crear nuestros propios snippets adaptados a nuestras necesidades o simplemente para ahorrarnos el escribir cierto código repetitivo.

Pero esto apenas es el abrebocas de las posibilidades que tenemos al crear un snippet. Si quieres aprender más, te dejo la documentación oficial.

El objetivo del artículo es mostrarte la existencia de los snippets, ahora tu tarea es indagar un poco más y mejorarlos para automatizar ciertas líneas de código que sueles escribir de forma constante.

Si logras crear un snippet que le pueda ayudar a más de uno de tus compañeros o compañeras, compártelo en nuestra comunidad de Discord. Este artículo va a irse actualizando con los aportes de cada estudiante para que se convierta en una de nuestras guías de snippets útiles.