Crear un proyecto en Nodejs con Express 3

Antes de comenzar y si estás interesado en los pasos que he seguido para conformar el proyecto, puedes llegarte a los primeros capítulos de la serie: - [Creación del proyecto, pruebas y herramienta de desarrollo nodemon](https://binary-coffee.dev/post/crear-un-proyecto-en-nodejs-con-express) - [Migrando el código de es5 a es6 utilizando babel](https://binary-coffee.dev/post/crear-un-proyecto-en-nodejs-con-express-2) # Sumario - ¿Qué son las herramientas de linter? - Configurando ESLint # ¿Qué son las herramientas de linter? En pocas palabras, una herramienta de linter, es algo que podemos utilizar para definir y monitorizar tanto el estilo de código que se utiliza en la aplicación como detectar posibles errores que puedan convertirse en bugs. ## ¿Qué es el estilo de código y para qué sirve? Pues el estilo de código es una norma o referencia que definimos en un proyecto para tener homogeneidad en el código. Imaginemos un proyecto con más de 10 desarrolladores. Cada desarrollador con un estilo de código distinto, resultado: un caos total y un código literalmente ilegible. Encontramos desarrolladores que les gusta el clásico lower camel case para nombrar a sus variables: ``` int thisIsMyVariable = 0; ``` Pero por otro lado tenemos aquellos que les gusta más el snake case: ``` int this_is_my_variagle = 0; ``` pero no siendo esto suficiente, tenemos los que no les gusta ninguna de estas variantes y andas a su bola: ``` int thisismyvariable = 0; ``` y un código que en otro caso pudiera haber sido una obra de arte, se convierte en algo como esto: ``` bool Binary_Search(vector<int> array,int Element) { int start=-1,end=array.size()-1; while(start+1<end) { int Middle=(start+end)/2; if(array[Middle]>=Element) end=middle; else start=Middle; } return array[end]==Element; } ``` **Nota**: la tabulación también es parte del estilo del código. Puedo asegurar que el código anterior funciona, ahora lo que pueden claramente notar que se pasa más trabajo, tratando de enlazar los bloques lógicos del código y el estilo, que analizando el código en sí. Por esto es importante tener definidos los estilos del código de un proyecto y que todos los integrantes del mismo los sigan al pie de la letra. ## ¿Qué errores se pueden encontrar con estas herramientas? Las herramientas de linter, pueden brindar una gran variedad de errores comunes entre desarrolladores que a priori pueden parecer inofensivos, pero a la larga pueden llevar a bugs. Ejemplo de esto es que muestra cuando una variable es re-declarada o simplemente se puede forzar a hacer uso de patrones para homogeneidad del código, como es el caso de evitar que se retornen valores en un set o que no se retorne un valor en un get. ``` // eslint getter-return: "error" class P{ get name(){ // no returns. } } // correct use of getter-return class P{ get name(){ return "nicholas"; } } ``` Esta son algunas de las facilidades que brinda ESLint y el listado completo de reglas puede ser encontrado en su [documentación oficial (rules)](https://eslint.org/docs/rules/). ## ¿Solo para JavaScript están disponibles las herramientas de linter? Pues no, las herramientas de linter están disponibles para todos los lenguajes de programación. Así que si no usas todavía estas herramientas en tu día a día, ya va siendo hora de que te unas al siglo XXI de estándares de programación. # Configurando ESLint ESLint es una de las herramientas más conocidas para el lenguaje de programación JavaScript, y a continuación lo configuraremos en el proyecto y veremos cómo utilizarlo y definir las reglas de estilos que deseemos. Primeramente instalaremos ESLint en el proyecto: ``` $ npm install eslint --save-dev ``` Una vez instalado crearemos el archivo *.eslintrc* en el directorio raíz del proyecto, y le pondremos la siguiente configuración: ``` // .eslintrc { "extends": "eslint:recommended", "rules": { "semi": ["error", "always"], "quotes": ["error", "single"] }, "parserOptions": { "ecmaVersion": 6, "sourceType": "module" }, "env": { "node": true, "mocha": true } } ``` Explicando un poco más a detalle el archivo de configuración: - *extends: eslint:recommended*: con esta configuración, estamos extendiendo las configuraciones por defecto que ESLint brinda y que generalmente están en base al estado del arte de estilos de programación en JavaScript (luego puedes cambiar las que gustes) - *rules*: aquí definimos las reglas por nosotros mismo, como son el uso obligatorio del punto y coma y el uso obligatorio de comillas simples. - *parseOptions*: se define la versión del lenguaje en que se encuentra el código. Una vez instalado y configurado ESLint en el proyecto, solo queda utilizarlo. Para esto crearemos un script en el *package.json* y quedaría de la siguiente manera: ``` { "name": "nodejs-express-api", ... "scripts": { "lint": "eslint .", ... }, ... } ``` Luego de este paso, solo resta ejecutar el script: ``` $ npm run lint ``` En el caso del proyecto que estamos creando, esta fue la respuesta: ``` /nodejs-express-api/app.js 1:18 error Strings must use singlequote quotes 3:21 error Strings must use singlequote quotes 4:26 error Strings must use singlequote quotes 5:20 error Strings must use singlequote quotes /nodejs-express-api/routes/users.js 8:44 error 'next' is defined but never used no-unused-vars /nodejs-express-api/test/integration/users.js 1:18 error Strings must use singlequote quotes 2:22 error Strings must use singlequote quotes ``` Estos errores pueden ser manualmente arreglados, pero utilizando el siguiente comando que brinda el mismo ESLint, la mayoría de estos errores pueden ser arreglados sin esfuerzo extra: ``` $ eslint . --fix ``` Este comando arregla todos esos errores que no implican cambios importantes en el código. Tomando el ejemplo anterior, en el caso del error *8:44 error 'next' is defined but never used no-unused-vars*, cómo implica borrar una variable, ESLint deja al usuario la decisión. # Enlaces - [Proyecto en github](https://github.com/dcs-community/nodejs-express-api) - [ESlint website](https://eslint.org/) - [Creando el proyecto y pruebas unitarias](https://binary-coffee.dev/post/crear-un-proyecto-en-nodejs-con-express) - [Migrando de es5 a es6 con babel](https://binary-coffee.dev/post/crear-un-proyecto-en-nodejs-con-express-2) # Conclusiones Y es así como de una manera muy sencilla se integra ESLint en un proyecto. Próximamente continuaremos con la integración de MongoDB en el proyecto y refactorizando un poco el código. Si te gustó el artículo o simplemente aprendiste algo nuevo, no dudes en dejar tus comentarios y compartirlo en tus redes sociales. > Happy coding!!!