/ Grunt

Cómo Usar JSHint para comprobar errores de JavaScript con Grunt

Hace tiempo escribí un tip sobre como comprobar errores de JavaScript utilizando Sublime Text. Hoy lo que vengo a compartir es como hacer esto mismo pero automatizado a través de Grunt.

jshint

Lo primero que necesitamos es instalar JSHint como paquete de node y de manera global para poder utilizarlo desde cualquier directorio en nuestro equipo. Esto lo conseguimos con:

$ npm install -g jshint

Después creamos un archivo .jshintrc en el directorio principal de nuestro proyecto. Este archivo es un JSON donde le indicamos por medio de pares “llave”: “valor” que condiciones queremos que JSHint verifique en nuestro código. Un ejemplo podría ser este:

{
    "node": true, // Enable globals available when code is running inside of the NodeJS runtime environment.
    "browser": true, // Standard browser globals e.g. `window`, `document`.
    "es5": true, // Allow EcmaScript 5 syntax.
    "esnext": true, // Allow ES.next specific features such as `const` and `let`.
    "bitwise": false, // Prohibit bitwise operators (&, |, ^, etc.).
    "camelcase": false, // Permit only camelcase for `var` and `object indexes`.
    "curly": false, // Require {} for every new block or scope.
    "eqeqeq": true, // Require triple equals i.e. `===`.
    "immed": true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );`
    "latedef": true, // Prohibit variable use before definition.
    "newcap": true, // Require capitalization of all constructor functions e.g. `new F()`.
    "noarg": true, // Prohibit use of `arguments.caller` and `arguments.callee`.
    "quotmark": "single", // Define quotes to string values.
    "regexp": true, // Prohibit `.` and `[^...]` in regular expressions.
    "undef": true, // Require all non-global variables be declared before they are used.
    "unused": true, // Warn unused variables.
    "strict": false, // Require `use strict` pragma in every file.
    "trailing": true, // Prohibit trailing whitespaces.
    "smarttabs": false, // Suppresses warnings about mixed tabs and spaces
    "globals": { // Globals variables.
        "angular": true
    },
    "predef": [ // Extra globals.
        "define",
        "require",
        "exports",
        "module",
        "describe",
        "before",
        "beforeEach",
        "after",
        "afterEach",
        "it"
    ],
    "indent": 4, // Specify indentation spacing
    "maxlen": 120, // Max line lenght
    "devel": false, // Allow development statements e.g. `console.log();`.
    "noempty": true // Prohibit use of empty blocks.
}

Este es un archivo bastante completo, para ver todas las condiciones que podemos utilizar las tenemos en la documentación del proyecto.

Seguido de esto ya estamos listos para automatizar nuestra tarea en Grunt. Primero de ello, instalamos en nuestro proyecto el paquete [grunt-contrib-jshin](https://github.com/gruntjs/grunt-contrib-jshint) y lo salvamos en el package.json y también el grunt-contrib-watch ya que lo utilizaremos para automatizar:

$ npm install grunt-contrib-jshint --save-dev
$ npm install grunt-contrib-watch --save-dev

Ahora ya sólo nos queda crear nuestra tarea dentro del Gruntfile.js donde le indicaremos que archivos queremos que compruebe y que parámetros utilizar gracias al archivo .jshintrc

// Watch vigila los cambios que hacemos 
// en el código y cuando los detecta ejecuta
// las tareas
watch: {
    js: {
       files: ['public/js/**', 'app/**/*.js'],
       tasks: ['jshint'],
    }
},
jshint: {
   all: ['Gruntfile.js', 'public/js/**/*.js', 'app/**/*.js']
}

Con esto, cada vez que ejecutemos el comando grunt jshint o hagamos un cambio en algún archivo JS dentro de las carpetas /public/js/ o /app/ se ejecutará la tarea y comprobará si tenemos errores de JS.

Por supuesto esto lo podemos automatizar aún más con nodemon o forever y ya no tendremos necesidad de parar la aplicación y volverlo a arrancar cada vez que hagamos un cambio.

Carlos Azaustre

Carlos Azaustre

CTO y Cofundador de Chefly. Formador en tecnologías web: JavaScript, Node, Firebase, React y Vue.

Leer más