JSHint Gulp a la ventana de error VS2015
visual-studio-2015 (6)
¿Cómo puedo obtener el resultado de JSHint para que aparezca en mi lista de errores en Visual Studio 2015 cuando utilizo Gulp, en lugar de simplemente enviarlo a Task Runner?
He probado este paquete, pero parece que no hace nada más que formatear la salida de Gulp de forma ligeramente diferente.
Este es mi archivo 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):
Salida preferida (en lista de errores):
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.
Aquí tienes mi reportero jshint vs17 (también debería funcionar con la versión anterior): img
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 "$(ProjectDir)gulpfile.js" --targetDir "$([System.String]::Copy(''$(TargetDir)'').TrimEnd(''//'))" --projectDir "$([System.String]::Copy(''$(ProjectDir)'').TrimEnd(''//'))" --configuration "$(Configuration)" --isTfs $(IsTfsServerBuild)" />Crear el archivo del 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");
}
}
}
}
- Importe su módulo local
const vsJsHintReporter = require(''./gulp.jshint.vs.reporter''); - Úselo en la tarea Gulp
.pipe(jshint(config.jshint)).pipe(jshint.reporter(vsJsHintReporter))
Estoy planeando publicar el reportero en npm.
Encontré una manera simple de hacer esto en VS2013, no sé si funciona en 2015. Dentro de su tarea jshint en trago simplemente atrape el error usando el controlador de eventos de error de jshints y registre un mensaje con el prefijo "error" en 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:
Logré obtener una palabra oficial sobre esto de Mads Kristensen en esta conversación en Twitter:
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.
También confirmó que este tipo de funcionalidad vendrá después de RTM.
¡Gracias a Eonasdan por señalar esto!
Puede 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 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.
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 this página, agregué / edité esto en mi proyecto .json, que se engancha en el evento prebuild ...
"scripts": {
"prebuild": [ "gulp default" ]
}
Según this 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. Deberá instalar jshint-stylish si aún no lo tiene.
Alternativamente, para jshint-stylish , puede dejar que VS lo maneje por usted. Agregue 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 ...
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 ...
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.
El código fuente de su paquete (jshint-visual-studio) simplemente agrega errores a la matriz de errors y lo registra a la console . El código no puede hacer nada para cambiar la salida de la console , debe hacerlo usted mismo.
Puedes usar este plugin
Una vez que el complemento está instalado, abra el Explorador de tareas del Explorador en el menú Ver -> Otro Windows -> Explorador de tareas .
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 vincular la tarea de vigilancia al evento Solution Load y vincular la tarea de scripts al evento Before Build .
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.