Qué son y como usar los Snippets de código

¿Qué son los snippets?

En programación, un Snippet quiere decir un «fragmento de código» que puedes reutilizar en cualquier lugar que lo necesites y que suele solventar un problema en especifico. Estos te ayudan a trabajar mas rápidamente, ya que no necesitas escribir nuevamente métodos y etiquetas, sino que los llamas normalmente de una fuente externa para luego incrustarlos en tu proyecto.

Los snippets pueden crearse para cualquier tipo de archivo (html, css, js, php, entre otros), lo realmente importante es que sean precisos y limpios. Hoy te mostrare como utilizarlos y crearlos para que tu mismo(a) puedas practicar y tomar nota de sus beneficios.

¿Como utilizar un snippet?

Puedes gestionar su uso de muchas formas, en mi caso utilizo dos maneras.

1. Guardándolos en un editor de código (como Visual Studio Code).
2. Guardándolos en un repositorio como Gist de Github.

Opcion 1: Desde el editor de VS Code

Abrimos Visual Studio Code, vamos al icono de ajustes y seleccionamos «User Snippets»

Luego nos aparecerá el siguiente desplegable de donde seleccionaremos el lenguaje en el que estará escrito nuestro fragmento de código

Al seleccionar nos abrirá un archivo con extensión «.json». El cual contiene un snippet de ejemplo para guiarnos al editar los nuestros.

Como ejemplo crearemos un snippet para guardar la estructura de un articulo HTML, para ello abrimos nuestro html.json y escribimos

• «pix-article»: es el nombre del snippet, no pueden haber dos iguales.
• «prefix»: es la palabra como lo llamáramos en el archivo donde lo utilizaremos, para este ejemplo he colocado «pix-article» igual que su nombre, pero puedes colocarlo distinto.
• «body»: aquí pondremos nuestro código, va encerrado en un arreglo donde cada linea debe ir entre comillas (»») finalizando con una coma (,).
• Para tabular nuestras lineas colocamos «\t», y para que nuestro cursor aparezca en un sitio determinado usamos variables como «$1, $2, $3 y $4», de esta forma al oprimir tab o tabulador el cursor cambiara de posición.
• «description»: finalmente la description es el texto descriptivo de nuestro snippet.

Guardamos y vamos a utilizar nuestro snippet en un nuevo archivo HTML, solo necesitamos escribir el prefijo «pix-» y nos dará como sugerencia nuestro snippet que al oprimir Enter o Tab aparecerá automáticamente incrustado en nuestro código.

Opción 2: Utilizando Gist de Github

Una forma un poco menos practica al momento de escribir pero mucho mas útil si queremos guardar nuestro código sin miedo a perderle y usarlo desde cualquier PC. Para esto, Github nos ofrece «Gist«.

Puedes iniciar sesión con tu cuenta de github e inmediatamente crear gists desde el panel principal

Debes añadir la descripción, el título incluyendo la extensión del archivo y el código, luego decidir si quieres que el gist sea público o privado, darle clic al botón de crear y listo, guardaste tu snippet

Puedes usarlo como forma de almacenar snippets, e incluso puedes pegar tus gist en cualquier sitio si necesitas compartir tu código.

También puedes integrarlo con Visual Studio code mediante el plugin del mismo nombre «Gist».

Luego de instalar necesitaras un token de GitHub que puedes conseguir aquí «https://github.com/settings/tokens«. Oprimiendo el botón «Generate new token». Al crear asegúrate de marcar la casilla de Gist.

En visual studio code oprimes F1 > Escribes «select profile» y pegas el token proporcionado por Github.

Para utilizarlo y pegar tus snippets debes pulsar F1 > Escribes «gist insert text from gist file» > seleccionas tu gist y oprimes Enter.

Es un poco mas rebuscado pero vale la pena saber utilizarlo, sobre todo si eres de los que han perdido una PC y con ella todos los snippets configurados.

Espero que te haya sido de utilidad y puedas mejorar tu productividad utilizando el poder de estas herramientas. Pronto estaré subiendo contenido relacionado con snippets que puedan servir en tus proyectos, de modo que mantente atento, compártelo con alguien que lo necesite y si no entendiste algo no dudes en preguntar .

Gracias por llegar hasta aquí y nos estaremos leyendo.