JSHint

Todos los desarrolladores Javascript tenemos una gran deuda con JSLint, la herramienta creada por Douglas Crockford para medir la calidad de nuestros códigos Javascript.

El funcionamiento de JSLint es el siguiente: toma nuestro código, lo escanea y, si encuentra un problema, devuelve un mensaje describiéndolo y mostrando su ubicación aproximada. El aviso no tiene que ser necesariamente un error de sintaxis, sino que puede ser de estilo o estructural. Esto no significa que el programa no sea correcto, sino que nos ofrece otro punto de vista para mejorar su construcción a partir de patrones y recomendaciones tomadas de las Convenciones de Código el Lenguaje de Programación Javascript definidas en la especificación ECMAScript.

Sin embargo, JSLint tiene algunos inconvenientes. El más importante es la rigidez de sus estructuras durante la evaluación del código; esto hace que, como indican sus detractores, nuestras aplicaciones termina siendo tiranizadas por la herramienta. Todas las directrices que utiliza, pese a participar de la especificación correspondiente, son el resultado del criterio personal de una única persona, aunque dado el caso, hablemos posiblemente del mejor conocedor del lenguaje.

Es por esto que muchas veces tratamos de validar patrones que han sido definidos por otros desarrolladores obteniendo un sinfín de advertencias que sabemos positivamente que no van a producir error. Esta circunstancia hace que en muchas ocasiones, JSLint no resulte de utilidad al no validar códigos contrastados.

JSHint, una nueva alternativa

Partiendo de este problema, la comunidad de desarrollardores Javascript ha creado una ramificación del proyecto original denominada JSHint cuya finalidad es medir la calidad de un código en el mundo moderno actual. La idea es prescindir de algunas reglas demasiado estrictas presentes en JSLint para ofrecer un conjunto más flexible de estilos y convencioes.

Además, permite configurar una serie de parámetros dependiendo de nuestro estilo de programación para que los pase por alto cuando realice la validación.

Configuración para el proyecto

Como vimos en el tema de Yeoman, al generar la estructura del proyecto se crean dos archivos .jshintrc (uno en la raíz y otro en la carpeta test). Este archivo nos permite configurar cómo se aplican las reglas de jsHint en todos los archivos js en el directorio donde se encuentra .jshint y en todos los subdirectorios de este.

Podemos encontrar el listado de todas las opciones de configuración en jshint.com/docs/options/. A continuación veremos las que aparecen en el .jshint generado por generator-angular en la raíz del proyecto:

    {
      "node": true,          //Evita errores al usar las variables globales de Node
      "browser": true,       //Evita errores al usar las variables globales del navegador
      "esnext": true,        //Indicamos que usamos la versión 6 de Ecma Script
      "bitwise": true,       //Prohibe el uso de operadores bitwise (no suelen usarse)
      "camelcase": true,     //Fuerza variables camelCase o MAYUSCULAS_CON_GUION_BAJO
      "curly": true,         //Impide bloques (if, for, while) sin corchetes {}
      "eqeqeq": true,        //Obliga a usar === y !===
      "immed": true,         //Obliga a cubrir con paréntesis llamadas inmediatas a funciones 
      "indent": 2,           //Número de espacios en blancos de la tabulación (configurar Sublime igual)
      "latedef": true,       //Obliga a definir variables y funciones antes de su uso (true, false, nofunc)
      "newcap": true,        //Fuerza a que los nombres de constructores comiencen por mayúscula
      "noarg": true,         //Impide el uso de arguments.callee y arguments.caller
      "quotmark": "single",  //Obliga a que los String se definan con comillas simples (simple, double, true)
      "regexp": true,        //Valida expresiones regulares
      "undef": true,         //Impide el uso de variables no definidas
      "unused": true,        //Avisa de variables definidas pero no usadas
      "strict": true,        //Fuerza el uso del modo strict de ECMAScript
      "trailing": true,      //Impide que dejemos espacios en blanco al final de la línea
      "smarttabs": true,     //Elimina warnings por uso mezclado de espacios y tabs usados para alinear
      "globals": {           //Permite definir variables globales
        "angular": false     //Permitimos la variable global angular (false = solo lectura)
      }
    }

Configuración en línea

JsHint también nos permite definir cambios en las reglas a aplicar dentro de un mismo archivo Javascript, esto es útil si por alguna razón ese archivo debe cumplir con unos parámetros distintos.

Para ello podemos utilizar dos comentarios al principio del archivo

/* jshint undef: true, unused: true */
/* global MY_GLOBAL */

El primero permite cambiar el valor de alguna de las configuraciones de reglas, el segundo nos permite definir variables globales que se permiten utilizar en este archivo.

A la práctica

Tenemos una tarea jshint configurada por defecto. Vamos a ejecutarla mediante el comando

grunt jshint

Si obtenemos algún error lo solucionaremos, en caso contrario elegiremos alguna de las reglas definidas y modificaremos el código de algún fichero fuente de Javascript hasta que obtengamos un error para comprobar el funcionamiento de jsHint.

---

Esta página está basada en un artículo CC de Carlos Benítez.