Binary Coffee

Crear un proyecto en Nodejs con Express 3

expressjs javascript nodejs
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!!!
Opiniones