Medir la calidad del código JavaScript (Creación de una librería JavaScript 6ª parte)

En entradas anteriores de la serie se explicó cómo crear y evaluar pruebas unitarias en JavaScript. Además de explicar cómo medir el grado de cobertura. En esta entrada se va a explicar cómo medir la calidad del código JavaScript con JSHint. Esta herramienta es muy útil ya que verifica si el código fuente cumple con las reglas de codificación. Indicando la existencia de fallos que puede provocar el fallo en algunos navegadores, afectar el rendimiento o ser potencialmente peligrosos.

Esta entrada pertenece a la serie “Creación de una librería JavaScript” cuyo código se puede encontrar en la cuenta de GitHub de Analytics Lane. Serie compuesta por las siguientes entradas:

• Creación de una librería JavaScript
• Estructurar las funciones JavaScript
• Pruebas unitarias en JavaScript
• Rango en pruebas unitarias en JavaScript
• Cobertura de las pruebas unitarias en JavaScript
• Medir la calidad del código JavaScript
• Compresión del código JavaScript
• Ejecutar múltiples scripts npm

Instalación de JSHint

La instalación de JSHint en el proyecto se realiza como es habitar mediante el comando npm. Indicando que esta se guarde como dependencia en el archivo package.json. Así es necesario escribir

npm install jshint --save-dev

Primeras pruebas con JSHint

Una vez instalado JSHint en el proyecto se puede evaluar la calidad del código, para ello se escribirá en la línea de comandos.

jshint ./lib**/*.js

En la que se le indica a JSHint que analice todos los archivos con extensión js que encuentre en la carpeta lib y subcarpetas de esta. Al hacer esto podemos ver que aparecerán los errores que se muestran a continuación.

./lib/array.js: line 4, col 3, 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
 ./lib/array.js: line 8, col 5, 'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
 ./lib/array.js: line 10, col 10, 'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
 ./lib/array.js: line 32, col 5, 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).
 ./lib/array.js: line 38, col 10, 'let' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).

./lib/jslane.js: line 4, col 3, 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).

Estos aparecen porque en la libraría se utiliza el estándar ECMAScript 6 o ES6. Lo que es necesario indicarle a JSHint para que no informe de estos errores. La mejor opción es utilizar el archivo de configuración para la herramienta. Este se llama .jshintrc y es necesario ubicarlo en la raíz del proyecto. La solución de este problema solo requiere escribir las siguientes líneas.

{
  "esversion": 6
}

Una vez hecho esto se puede volver a ejecutar JSHint para comprobar que no existen errores en los archivos. Para probar al mismo tiempo el código en la carpeta de lib y tests se puede utilizar.

jshint ./lib**/*.js ./tests**/*.js

Al ejecutarlo podemos observar que falta una punto y coma en la línea 23 de archivo array.test.js. Por lo que para solucionarlos solamente es necesario abrir el archivo indicado y añadir el punto y coma.

./tests/array.test.js: line 23, col 75, Missing semicolon.

Creación de un script en package.json

Es obvio que JSHint es una herramienta muy poderosa que permite identificar problemas. Por lo que es muy utilizada. Así se puede crear un nuevo script en el archivo package.json que permite automatizar estas tarea. Simplemente creando una nueva propiedad en scripts con el nombre report y el comando jshint ./lib**/*.js ./tests**/*.js.

Conclusiones

En esta sexta entrada de la serie se ha visto cómo medir la calidad del código JavaScript con JSHint. Una herramienta clave para poder identificar los problemas existentes en el código.