Como configurar Prettier y Eslint

¿Que es Prettier?

Prettier ofrece soporte para varios lenguajes y frameworks.Lo que hace Prettier es tomar tu código y “re-formatearlo” en base a las configuraciones definidas manteniendo así un estilo consistente. Haciéndolo mucho más facil de leer.

¿Que es Eslint?

ESLin es una herramienta de código abierto enfocada en el proceso de “lintig” para javascript (o más correctamente para ECMAScript). ESLint es la herramienta que se encarga de “limpiar” código javascript, señalando los errores de codigo antes de correr el programa.

Lo primero que debemos de hacer es ir ala consola para instalar las dependencias (para esta parte deberiamos tener instalada node.js), y herramientas de eslint y de prettier, recordar que hay que instalarla con el flag -D para que se einstalen como dependencias de desarrollo

Luego crearemos un nuevo archivo en la raiz del proyecto que se llamara : .eslintrc.js y agregamos la siguiente configuracion.

Para mas configuracines de eslint aqui te dejo la documentacion 📤 Eslint

Y para la configuracion de prettier creamos un archivoen la raiz del proyecto con el nombre: prettier.config.js y escribimos el siguiente codigo

Si quieres conocer mas sobre las configuraciones qui te dejo la documentacion 📤Prettier

Para finalizar la configuracion nos vamos a la carpeta package.json para agregar los siguientes scrips y podremos ejecutar en la terminal los comandos npm run lint y npm run lint:fix

Conclucion

Este tipo de configuraciones nos ayuda a encontrar y reparar errores de sintaxis en nuestro codigo, en este caso es una configuracion basi para un proyecto, las configuracion que hay son bastantes y cada quien lo puede confugurar de acuerdo a sus necesidades y requerimentos de su proyecto.