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:

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).

驴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

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