Como programadores sabemos que todo puede ser reutilizable si lo diseñamos de la forma correcta. No solamente nuestro código, si no estructura o patrones Por esta razón existen fragmentos de código que pueden ser reutilizables.
Estos fragmentos de código nos ayudan a reducir el tiempo que tardamos en escribir código, que en la mayoría de los casos, es repetitivo. Es posible crear Code Snippets en casi todos los IDE existentes, en este caso, veremos 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
En el post estuvimos aprendiendo cómo podemos crear pequeños fragmentos de código parametrizables que nos permitan ganar mucho tiempo al escribir código en el lenguaje de nuestra preferencia. También vimos una herramienta que nos permite realizarlos más fácilmente y un componente de lujo que nos trae muchos preparados. Espero que lo hayan disfrutado y que les sea tan útil como a mi.
