ESLint

Introducción al validador de código js ESLint

Madeline von Foerster

archivado en: JavaScript / 22 Diciembre, 2015

urf, urf, después de varias semanas concatenando una trabajera tras otra, por fin encuentro algo de tiempo para retomar el blog. En fin, en mi próxima vida me haré astronauta... Bueno, vamos ya con cosas más interesantes que mis lamentelas.

Hay varios validadores formales de código en javaScript, esto es, herramientas que advierten errores comunes, como la ausencia de un punto y coma al final de una sentencia, un alert o un debugger olvidados o una variable no declarada. Son muy útiles y realmente imprescindibles en un proyecto profesional, pues entre miles y miles de líneas de código es normal que se produzcan numerosas erratas. De hecho, hay sitios donde los tienen enlazados con el git mediante pre-hooks, de tal manera que no se pueda comitear nada que no pase todas las pruebas.

El validador js más antiguo entre los más célebres es el JSLint, desarrollado a principios de siglo por Douglas Crockford, una de las mayores eminencias del mundo javaScript. A partir de este, Con el tiempo, la comunidad sacó un fork mucho más adaptable denominado JSHint, que a día de hoy sea probablemente el más popular. Más reciente aún es ESLint, de Nicholas C. Zakas, otra referencia imprescindible del desarrollo js. A mí es el que me parece más cómodo y flexible y es sobre el que hablaré en esta entrada.

Quick Start

Se instala de forma bien sencilla con el npm del node:

npm install -g eslint

Luego hay que crear un archivo de configuración denominado .eslintrc.js, que se puede preparar también por consola.

eslint --init

Si escogemos la opción de configurar uno personalizado, el resultado final podría ser algo así:

module.exports = {

"rules": {

"indent": [

2,

"tab"

],

"quotes": [

2,

"double"

],

"linebreak-style": [

2,

"windows"

],

"semi": [

2,

"always"

]

},

"env": {

"browser": true

},

"extends": "eslint:recommended"

};

Ahora ya podemos pasarlo sobre los archivos que queramos analizar. Por ejemplo, podemos crear un archivo como este:

codigo.js

var cadenaErronea = 'Soy una cadena con comillas simples y sin punto y coma final'

Y luego pasarle el eslint escribiendo en la consola:

eslint codigo.js

Y a pesar de que es un archivo miserable, con solo una sentencia de código, nos daría un montón de errores, pues es una variable que no se usa, que contiene una cadena con comillas sencillas en lugar de dobles y que encima no tiene un punto y coma al final. ¡Un desastre!

1:5 error "cadenaErronea" is defined but never used

1:21 error Strings must use doublequote

1:83 error Missing semicolon semi

Las reglas del juego

Podemos definir muchas reglas de validación, e incluso crearlas propias desde cero. Están muy bien documentadas en la página oficial y, además, el lector interesado puede profundizar en su por qué con el libro Maintainable JavaScript de Nicholas Zachas (O'Reilly, 2012), fundamental, creo, para todo desarrollador front.

En general, para definir una regla basta con indicar si está desactivada (0), si solo debe lanzar un warning (1) o si es un error (2); aunque algunas pueden recibir un segundo parámetro para matizar algún detalle. En el caso anterior, por ejemplo, de esta manera indicábamos que las comillas dobles eran obligatorias:

"quotes": [ 2, double" ]

No tiene sentido exponer aquí todas las reglas, pues como decía están muy bien documentadas. Si acaso algún día hablaré de alguna particularmente enrevesada, como la complejidad ciclomática, pero sí muestro unas que acabo de utilizar para un proyecto del banco de santander a modo de ejemplo.

{

"env": {

"browser": true

},

"globals": {

"$": true,

"jQuery": true,

"Handlebars": true,

"IScroll": true

},

"rules": {"

comma-dangle": 2,

"no-undef": 2,

"no-cond-assign": 2,

"no-console": 2,

"no-alert": 2,

"no-debugger": 2,

"no-dupe-args": 2,

"no-constant-condition": 2,

"no-control-regex": 2,

"no-duplicate-case": 2,

"no-empty-character-class": 2,

"no-empty": 2,

"no-ex-assign": 2,

"no-extra-boolean-cast": 2,

"no-extra-semi": 2,

"no-func-assign": 2,

"no-inner-declarations":2,

"no-invalid-regexp": 2,

"no-irregular-whitespace": 2,

"no-negated-in-lhs": 2,

"no-obj-calls": 2,

"no-regex-spaces": 2,

"no-sparse-arrays": 2,

"no-unexpected-multiline": 2,

"use-isnan": 2,

"valid-jsdoc": 2,

"valid-typeof": 2,

"block-scoped-var": 2,

"consistent-return": 2,

"curly": 2,

"default-case": 2,

"dot-notation": 2,

"no-caller": 2,

"no-case-declarations": 2,

"no-div-regex": 2,

"no-else-return": 2,

"no-empty-label": 2,

"no-empty-pattern": 2,

"no-eq-null": 2,

"no-eval": 2,

"no-extend-native": 2,

"no-extra-bind": 2,

"no-fallthrough": 2,

"no-floating-decimal": 2,

"no-implicit-coercion": 2,

"no-implied-eval": 2,

"no-iterator": 2,

"no-lone-blocks": 2,

"no-loop-func": 2,

"no-magic-numbers": 2,

"no-multi-str": 2,

"no-octal": 2,

"no-param-reassign": 2,

"no-redeclare": 2,

"no-return-assign": 2,

"no-script-url": 2,

"no-self-compare": 2,

"no-sequences": 2,

"no-throw-literal": 2,

"no-unused-expressions": 2,

"no-useless-call": 2,

"no-useless-concat": 2,

"no-void": 2,

"no-with": 2,

"radix": 2,

"vars-on-top": 2,

"wrap-iife": [2, "outside"]

}

}

Grunt

Como hemos visto, ESLint se puede lanzar desde la consola sin más herramientas que node; pero es más cómodo si lo integramos entre los procesos de algún automatizador de tareas como grunt o gulp. Para el grunt hay que instalar el paquete grunt-eslint

$ npm install --save-dev grunt-eslint

Luego, lo más cómodo es instalarse el load-grunt-tasks:

npm install --save-dev load-grunt-tasks

Se saca la configuración en un archivo aparte (por ejemplo, eslint.json) y ya solo hay que indicar qué archivos debe analizar.

module.exports = function(grunt) {

require('load-grunt-tasks')(grunt);

grunt.initConfig({

eslint: {

options: {

'configFile': 'eslint.json',

reset: true

},

target: ['public/js/*.js']

}

});

grunt.registerTask('default', ['eslint']);

};

 

Bueno, pues por hoy lo dejo aquí.

|| Tags: , , ,

valoración de los lectores sobre ESLint

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 3.3 sobre 5 (3 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario

*