Generación de snippets en vscode

Generación de snippets en vscode

Una de las principales dificultades implementando CQRS en .NET core es la repetición de código que se debe realizar al momento de escribir nuestros command handlers o query handlers en cada llamado a nuestra capa de aplicación.

public class NewClass {

    public class Query : IRequest<ReturnObject> { }

            public class Handler : IRequestHandler<Query, ReturnObject>
            {
                private readonly DataContext _context;
                public Handler(DataContext context)
                {
                    _context = context;
                }

                public async Task<ReturnObject> Handle(Query request, CancellationToken cancellationToken)
                {

                }
            }
}

Para nuestro caso usamos la libreria MediatR, tanto los command handlers como los query handlers tienen la siguiente estructura.

Una clase newclass que contiene dos clases anidadas, una para los parámetros denominada query (query, command) y otra clase Handler, que ejecuta la consulta de acuerdo a los parámetros definidos en la clase (query o command)

En el ejemplo anterior por usar entityframework decidimos agregar nuestro DataContext al constructor de la clase Handler, con el fin de tener siempre a la mano las consultas a la base de datos, dependiendo el requerimiento se pueden inyectar diferentes objetos en nuestro Handler (logs, errores, seguridad,validaciones, etc)

Por cada llamado a nuestra capa de aplicación tendríamos que construir una estructura similar, que llega a ser algo molesto en el tiempo, además que se vuelve una tarea repetitiva.

Para disminuir el tiempo de desarrollo y la molestia que nos puede causar tener que escribir muchas veces la misma estructura de clases, podemos hacer uso de snippets en vscode con el fin de generar de forma automática este código y modificar lo que necesitemos en el código generado.

Para realizar esto:

Ingresamos a la pagina snippet-generator.app Seleccionamos el editor que usemos, para nuestro caso vamos a seleccionar vscode

image.png

Asignamos un nombre a nuestro snippet, este nombre será el que escribamos en nuestro editor de código para que vscode se encargue de poner el código que pongamos en el snippet. Y pegamos el código que vimos anteriormente en el campo your snippet..

image.png

El código generado por snippet-generator.app es:

"qhandler": {
  "prefix": "",
  "body": [
    "public class NewClass {",
    "",
    "    public class Query : IRequest<ReturnObject> { }",
    "    ",
    "            public class Handler : IRequestHandler<Query, ReturnObject>",
    "            {",
    "                private readonly DataContext _context;",
    "                public Handler(DataContext context)",
    "                {",
    "                    _context = context;",
    "                }",
    "    ",
    "                public async Task<ReturnObject> Handle(Query request, CancellationToken cancellationToken)",
    "                {",
    "                  ",
    "                }",
    "            }",
    "}"
  ],
  "description": "qhandler"
}

en el archivo json generado encontramos:

"qhandler" : corresponde al nombre de nuestro snippet, el cual saldrá cuando querramos usarlo en el editor de texto.

"prefix": esta llave contiene el texto que disparara o mostrara nuestro snippet.

"body" : esta llave contiene un arreglo de strings, cada elemento del arreglo corresponde a una linea de codigo que nuestro snippet generará.

"description": en esta llave podemos agregar un texto que permita al usuario tener una explicación o funcionalidad del snippet.

Ingresamos a vscode, Preferences->User Snippets

image.png

Hacemos clic en new global Snippets file, el sistema preguntara por el nombre del archivo

image.png

vscode generara el siguiente espacio para insertar el código generado por snippet generator

{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //     "scope": "javascript,typescript",
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
}

Pegamos el código generado por el sitio y guardamos

image.png

Ahora cada vez que necesitemos generar el código de nuestros commands o querys solo tendremos que escribir dentro del editor el nombre de nuestro snippet (qhandler) presionamos tab y listo

image.png

image.png

Solo queda agregar dependencias, y cambiar los objetos propios de la lógica a implementar, esto mismo se puede realizar con cada fragmento de código que sea repetitivo al momento de desarrollar.