Detectar errores en tu código JavaScript con JSHint y Gulp

Como ves, llevo varios días publicando tareas con Gulp para que tengas todo cubierto con el editor que prefieras, sin perder las funcionalidades que te puede dar un IDE. Hoy vengo a contarte cómo puedes integrar Gulp con JSHint y así poder detectar errores y/o malas prácticas en tu código.

Antes de crear la tarea necesitarás instalar  un nuevo módulo: gulp-jshint

npm install --save-dev gulp-jshint

En tu archivo gulpfile.js añade la siguiente tarea:

var gulp = require('gulp'),
    jshint = require('gulp-jshint');

gulp.task('lint', function () {

    gulp.src('src/**/*.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default', { verbose: true }));

});

Debes utilizar gulp.src para localizar todos los archivos JavaScript que quieres analizar, jshint para ejecutar JSHint con un archivo de configuración (opcional) y por último jshint.reporter para indicar cómo se mostrará la salida con los resultados. Con verbose: true podrás saber a qué codigo de los mensajes de JSHint corresponde cada uno de los errores que aparezcan.

Como te comentaba, el archivo de configuración .jshintrc no es obligatorio pero si necesario si queremos modificar algunas de las opciones por defecto. Para este ejemplo, he añadido algunas reglas basándome en la documentación de la herramienta:

{
    "unused": true,
    "strict": true,
    "indent": 2,
    "maxparams": 3,
    "curly": true
}

Si ejecutas la tarea a través de gulp lint, o desde Visual Studio Code con Control + P > task lint podrás ver todos los errores encontrados en tu código como una tarea más dentro de Gulp.

Gulp - task lint
Gulp – task lint

¡Saludos!

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.