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.

Joel Domínguez Merino

Joel Domínguez Merino

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.

Configurar Snippets - Forma 1Configurar Snippets - Forma 1

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

Configurar Snippets - Forma 2Configurar Snippets - Forma 2

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

Configurar Snippets - Mac OSConfigurar Snippets - Mac OS

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

Seleccionar tecnologíaSeleccionar tecnología

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).

Buscar snippets de CSSBuscar snippets de CSS

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

Configurar snippets de CSSConfigurar snippets de CSS

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.

Primer snippet de CSSPrimer snippet de CSS

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.

Uso del snippetUso del snippet

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

Snippet funcionandoSnippet funcionando

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.

Modificando el snippetModificando el snippet

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.

Snippet con tabulaciones y valores por defectoSnippet con tabulaciones y valores por defecto

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.

Ilustracion que representa como crece alguien profesionalmente

Ent√©rate de las √ļltimas novedades

Streamings, Noticias y Early Adopter bonus. Sé el primero en enterarte de todo.