Como programadores, entendemos que cualquier elemento puede ser reutilizable si lo diseñamos de manera adecuada. No solo se trata de nuestro código, sino también de la estructura y los patrones que implementamos. Es por ello que existen fragmentos de código diseñados específicamente para ser reutilizables.
Estos fragmentos de código desempeñan un papel fundamental en la reducción del tiempo empleado en la escritura de código, especialmente en situaciones donde se repite de manera frecuente. La capacidad de crear Code Snippets está disponible en prácticamente todos los entornos de desarrollo integrados (IDE), y en este caso, explicaremos cómo hacerlo en Visual Studio Code.
Utilidad
Como comentamos más arriba en el post, los Snippets nos ayudan a reducir el tiempo de escritura de nuestro código. Vamos al ejemplo más común en VSCode, si creamos un archivo html, y comenzamos a escribir en el archivo en blanco html, veremos que se despliega un menú. En este menú tenemos varias opciones, entre ellas html:5. Esta opción no está indicando que tiene un snippet para html 5, seleccionamos y Guala, nos crea todo el código html para la versión.
En el caso de VS Code tenemos muchas disponibles, solo es cuestión de investigar un poco cuales podemos utilizar en la documentación. Además, existen un gran cantidad y gran variedad de extensiones que nos permiten agregar Snippets para cada cualquier lenguaje o framework Por ejemplo, para React, Angular, Python, .Net, etc.
Si bien hay muchas opciones y mucha cantidad de snippets, siempre necesitamos alguno en particular, tal vez sea por un proyecto o por una necesidad específica, cuando nada se ajusta, podemos crear uno a nuestra talla. Veamos cómo hacerlo.
Creando nuestro Snippet
Crear un snippet es verdaderamente sencillo. Lo primero que debes hacer es dirigirnos a la sección de User Snippet que puedes encontrar en la configuración, abajo a la izquierda en VSCode.
Otro camino es presionar ctrl + shift + p que nos abre la paleta de comando y escribiendo sniper nos aparecerán para seleccionar la opción “Configure User Snippets”. Tenemos 2 opciones, la primera es crear un Snippet Global el cual podrá ser invocada sin importar en qué lenguaje estemos programando, y otro For file que podemos hacerlo para un grupo de lenguaje específico. Vamos a crear un Global y le daremos el nombre, nos creará un archivo que se verá similar a este código:
{
"Snippet Name": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
A simple vista podemos identificar que es un archivo JSon. Este archivo no solamente puede tener uno, podemos agregar todos los que necesitemos. Veamos las propiedades que contiene:
- Snippet Name: es el nombre con el cual identificamos a este snippet y aparece en el intellisense cuando lo estamos invocando.
- Scope: detalla por qué lenguaje puede ser utilizado este snippet. Podemos agregar varios lenguajes separados por medio de comas. Si no lo completamos estará disponible para todos los lenguajes.
- Prefix: descubre la palabra disparadora que invocará snippet.
- Body: Es nuestro template de código.
- Description: es la descripción más detallada de nuestro snippet. Si no la completamos tomará el nombre.
probemos este que fue creado por default. Crearemos un archivo js, ya que nuestro snippet está configurado para que cuando el scope sea javascript esté disponible. Luego de crear el archivo, escribiremos el prefix log, aparecerá en intellicen, lo seleccionaremos y veremos que nos crea lo que tenemos en body.
Analizar los $, por ejemplo el $1. Esta simbología nos permite dar un orden de como movernos en el código. Para moverte dentro del snippet una vez creado debes presionar el tag, por medio del $ y un número le damos el orden de secuencia a seguir. Haremos uno en modo de ejemplo para crear una clase en C# que nos permita seleccionar el alcance, el nombre. Usaremos el prefix fclass para llamarlo.
"C-Shapr Class": {
"scope": "csharp",
"prefix": "fclass",
"body": [
"$1 class $2{",
" ",
"}"
],
"description": "Create class, change name and scope"
}
Modificaremos un poco nuestro código para que nos ayude a recordar que es lo que debemos ingresar. Para hacer esto debemos cambiar las declaraciones relacionadas con las tabulaciones de la siguiente manera.
"C-Shapr Class": {
"scope": "csharp",
"prefix": "fclass",
"body": [
"${1:scope} class ${2:ClassName}{",
" ${0:body}",
"}"
],
"description": "Create class, change name and scope"
}
También agregamos $0, este le indicará donde debe terminar luego de completar todas las tabulaciones. También es posible darle una lista de valores para seleccionar a un snippet. En caso del alcance de nuestra variable podemos indicarle 3 opciones a elegir: private, public o internal. cambiamos nuestro $1 por la siguiente línea.
"${1|internal, private, public|} class ${2:ClassName}{",
Les quiero enseñar que es un sitio web muy interesante que nos permite tener una herramienta para hacer nuestros snippets más fácilmente. El sitio es Snippet Generator.
Es un poco más sencillo de utilizar, solo debemos completar los campos de descripción, el prefijo que será el disparador y el body. Tal vez no ayude a no tener que estar lidiando con tantas llaves.
Por último y no menor, les recomiendo utilizar la extensión de VS Code llamada C# snippets creada por Jorge Serrano. Contiene una gran cantidad de snippets muy útiles para los desarrolladores de c#.
Conclusiones
Código altamente parametrizables, una técnica que se traduce en un considerable ahorro de tiempo al escribir código en nuestro lenguaje de preferencia. Además, conocimos una herramienta que simplifica enormemente este proceso y exploramos un componente de lujo que ofrece una variedad de fragmentos de código listos para utilizar.
La creación y utilización de estos pequeños bloques de código no solo aumenta nuestra productividad, sino que también fomenta la consistencia y la eficiencia en nuestro flujo de trabajo. Espero que hayan disfrutado del contenido y que encuentren tan beneficioso como yo el incorporar esta práctica en su día a día como programadores. Si tienen alguna pregunta o desean compartir sus experiencias, ¡estoy ansioso por escuchar sus comentarios!
