Pregunta JSHint Gulp a la ventana de error VS2015


¿Cómo puedo obtener la salida de JSHint para aparecer en mi Lista de errores en Visual Studio 2015 cuando usas Gulp, en lugar de simplemente enviarlo a Task Runner?

He intentado este paquete pero eso no parece hacer otra cosa que formatear la salida de Gulp de forma ligeramente diferente.

Este es mi gulpfile.js:

gulp.task('default', function () {
    gulp.src(["Scripts/**/*.js"])
        .pipe(jshint(".jshintrc"))
        .pipe(jshint.reporter("jshint-visual-studio"));
});

Salida real (en la ventana del corredor de tareas):

Actual output

Salida preferida (en lista de errores):

Preferred output

Tenga en cuenta: Estoy usando Visual Studio 2015, por lo que Web Essentials ya no es una opción para JSHint ya que la funcionalidad se ha eliminado.


32
2018-05-27 07:42


origen


Respuestas:


Logré obtener una palabra oficial sobre esto de Mads Kristensen en esta conversación en Twitter:

Tweet

Por lo tanto, en VS2015RC (y RTM también), no hay forma de obtener mensajes para ir a la ventana de salida. El corredor de tareas solo muestra la ventana de error si la tarea Gulp devuelve un error, pero sinceramente, tampoco he logrado que funcione.

Él también confirmó que este tipo de funcionalidad vendrá después de RTM.

¡Gracias a Eonasdan por señalar esto!


6
2018-06-15 07:30



Código fuente de tu equipaje (jshint-visual-studio) solo agrega errores a errors Array y logueo a console. El código no puede hacer nada para cambiar console salida, debe hacerlo usted mismo.

Puedes usar este complemento.

Una vez que el complemento está instalado, abra el Task Runner Explorer desde el Ver -> Otros Windows -> Task Runner Explorer menú.

Esta ventana le mostrará todas las tareas en el archivo gulp y le permitirá vincular esas tareas a ciertos eventos de Visual Studio. De esta manera, no necesitamos recordar ejecutar las tareas de trago desde la línea de comando. El IDE puede manejarlo por nosotros.

Lo que me gusta hacer es atar el reloj tarea para el Carga de la solución evento y vincular el guiones tarea para el Antes de construir evento.

enter image description here

Con estos enlaces, podemos asegurarnos de que all.min.js se genera correctamente cuando creamos la aplicación y también se regenera en cualquier momento que realizo cambios en los archivos js.

Task Runner Explorer también muestra el resultado de cualquier tarea en ejecución. Aquí puede ver el resultado de la tarea de vigilancia, que siempre se ejecuta en segundo plano en esta configuración.

enter image description here

De este articulo


1
2018-05-29 17:42



Encontré una manera simple de hacer esto en VS2013, no sé si funciona en 2015. Dentro de la tarea jshint en trago solo atrapa el error usando el controlador de eventos de error jshints y registra un mensaje con prefijo "error:" a la consola. Visual Studio usa esta convención para identificar los errores que fallaron la compilación a partir de la salida.

.pipe(jshint({

// .... //

.on('error', function (e) {
    console.log("error: JSHint failed.");
})

Verás esto en tu ErrorList:

enter image description here


1
2017-11-23 17:19



Podrías usar gulp-jshint con la siguiente definición de tarea:

gulp.task('lint', function () {
    gulp.src(["Scripts/**/*.js"])
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(jshint.reporter('fail'))

Hará que Gulp salga con el código 1. Y para que el código 1 falle la compilación, debe ir a la configuración del proyecto, a la pestaña Generar eventos y a agregar el siguiente código a la línea de comandos del evento de precompilación:

gulp -b $(ProjectDir) --gulpfile $(ProjectDir)gulpfile.js lint

Fallará la construcción con el siguiente mensaje:

Error   242 The command "ATTRIB -R gulp -b --gulpfile lint" exited with code 1. 

1
2018-01-27 17:41



Aquí tienes mi reportero jshint vs17 (también debería funcionar con la versión anterior): img

  1. Incluya el comando run gulp en su archivo de proceso msbuild (.csproj)

    <Target Name="BeforeBuild">
         <Exec Condition=" '$(IsTfsServerBuild)' == 'true' " Command="npm install" />
         <Exec Condition=" '$(Configuration)' != 'Release' " Command="gulp --gulpfile &quot;$(ProjectDir)gulpfile.js&quot; --targetDir &quot;$([System.String]::Copy('$(TargetDir)').TrimEnd('\\'))&quot; --projectDir &quot;$([System.String]::Copy('$(ProjectDir)').TrimEnd('\\'))&quot; --configuration &quot;$(Configuration)&quot; --isTfs $(IsTfsServerBuild)" />
    

  2. Crear archivo de módulo gulp.jshint.vs.reporter.js

module.exports = jshintVSReporter;

function logVsError(file, line, col, message, code) {
    console.error(formatVsOutput("error", file, line, col, message, code));
}

function logVsWarning(file, line, col, message, code) {
    console.warn(formatVsOutput("warning", file, line, col, message, code));
}

/**
 * Formats the proper visual strudio output messange
 * @param {string} type - the messange type
 * @param {string} file - the file path
 * @param {number} line - the line no in file
 * @param {number} col - the cloumn no in line 
 * @param {string} message - the messange
 * @param {string} code - the error code
 * @returns {string} - vs-output-formated string
 */
function formatVsOutput(type, file, line, col, message, code, program) {
    var vsLine = (program ? program + ":" : "") + file;
    if (line) {
        vsLine += "(" + line;
        if (col) { vsLine += "," + col; }
        vsLine += ")";
    }
    vsLine += ": " + type;//(type||"warning");
    if (code) vsLine += " : " + code;
    if (message) { vsLine += ": " + message; }
    return vsLine;
}

/**
 * @typedef {Object} JSHintError
 * @property {string} id - usually '(error)'
 * @property {string} code - error/warning code ('WXXX' - warnings, 'EXXX' - errors, 'IXXX' - informations)
 * @property {string} reason - error/warning message
 * @property {string} evidence - a piece of code that generated this error
 * @property {number} line - the line in file number
 * @property {number} character - the erro cloumn in line numer
 * @property {string} scope - message scope, usually '(main)' unless the code was eval'ed
 *
 * @typedef {Object} JSHint
 * @property {string} file - file name
 * @property {JSHintError} error - the error description
 * 
 * The custom visual studio jhint reporter
 * @param {Array<JSHint>} errors - the jshint error list
 */
function jshintVSReporter(errors) {
    if (errors) {
        var file, i, error, isError, msg;
        for (i = 0; i < errors.length; i++) {
            file = errors[i].file;
            error = errors[i].error;

            isError = error.code && error.code[0] === "E";
            msg = error.reason + " (jshint:" + error.code + ")";
            if (isError) {
                logVsError(file, error.line, error.character, msg, error.code, "JSHint");
            } else {
                logVsWarning(file, error.line, error.character, msg, error.code, "JSHint");
            }
        }
    }
}

  1. Importa tu módulo local const vsJsHintReporter = require('./gulp.jshint.vs.reporter');
  2. Usar en la tarea de trago .pipe(jshint(config.jshint)).pipe(jshint.reporter(vsJsHintReporter))

Estoy planeando publicar el reportero en npm.


1
2018-06-23 11:57



Tengo el error de compilación (y el informe de errores) con el trago funcionando (lo suficientemente bueno para mí, tal vez suficiente para los demás).

Esto es lo que usé / hice ...

Según esta página, agregué / edité esto en mi proyecto.json, que se engancha en el evento prebuild ...

  "scripts": {
    "prebuild": [ "gulp default" ]
  }

Según esta página, incluí lo siguiente para mi tarea jshint ...

// =============================
// jsHint - error detection
// =============================
gulp.task("jshint", function () {
    var jshGlobals = [
        '$',
        'jQuery',
        'window',
        'document',
        'Element',
        'Node',
        'console'
    ];

    gulp.src([paths.jsFiles, norefs])
        .pipe(jshint({
            predef: jshGlobals,
            undef: true,
            eqnull: true
        }))
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(jshint.reporter('fail'))
});

Las últimas dos líneas son las más significativas. Necesitarás instalar npm jshint-stylish si aún no lo tienes.

Alternativamente, para jshint-stylish, puede dejar que VS lo maneje por usted. Agrega la línea para jshint-stylish como se indica a continuación a su paquete.json ...

{
  "name": "ASP.NET",
  "version": "0.0.0",
  "devDependencies": {
    "es6-promise": "~3.1.2",
    "gulp": "^3.8.11",
    "del": "^2.2.0",
    "jshint": "~2.9.1",
    "jshint-stylish": "~2.1.0",
    "gulp-jshint": "~2.0.0",
    "gulp-flatten": "~0.2.0",
    "gulp-rename": "~1.2.2",
    "gulp-cssmin": "0.1.7",
    "gulp-uglify": "1.2.0",
    "gulp-postcss": "~6.1.0",
    "autoprefixer": "~6.3.3"
  }
}

Lo que me da esto cuando hay un error (además de la compilación fallida) que es suficiente para seguir excavando si / como sea necesario ... vs error list window after build

A diferencia de la información de error más detallada que obtengo al ejecutar la misma tarea a través de la línea de comandos o Task Runner ... gulp default task output via cmd.exe

Me imagino que se puede mejorar esta solución, pero pensé que la compartiría, ya que no había visto mucho sobre ella en ningún otro lado.

Aclamaciones.


0
2018-03-25 02:02