JSHint Gulp 到错误窗口 VS2015

Question

在使用 Gulp 时，如何让 JSHint 的输出显示在 Visual Studio 2015 的 错误列表 中，而不仅仅是输出到 Task Runner？

我已经尝试过this package，但除了格式化 Gulp 输出的格式略有不同之外，这似乎没有任何作用。

这是我的 gulpfile.js：

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

实际输出（在任务运行器窗口中）：

首选输出（在错误列表中）：

请注意：我使用的是 Visual Studio 2015，因此 Web Essentials 不再是 JSHint 的选项，因为该功能已被删除。

Answer 1

在 Twitter 上的对话中，我设法从 Mads Kristensen 那里得到了官方消息：

所以在 VS2015RC（和 RTM 也是）中，没有办法让消息进入输出窗口。如果 Gulp 任务返回失败，任务运行程序只会输出到错误窗口 - 但老实说，我也没有设法让它工作。

He did also confirm 这种功能将在 RTM 之后出现。

_{感谢 Eonasdan 指出这一点！}

Answer 2

your package 的Source code (jshint-visual-studio) 只需将错误添加到errors 数组并将其记录到console。代码不能做任何改变console输出的事情，你必须自己做。

您可以使用this plugin。

安装插件后，从 View 打开 Task Runner Explorer –> Other Windows –> Task Runner Explorer 菜单。

此窗口将显示 gulp 文件中的所有任务，并允许您将这些任务绑定到某些 Visual Studio 事件。这样，我们就不需要记住从命令行运行 gulp 任务。 IDE 可以为我们处理。

我喜欢做的是将 watch 任务绑定到 Solution Load 事件，并将 scripts 任务绑定到 Before构建 事件。

通过这些绑定，我们可以确保在构建应用程序时正确生成 all.min.js，并在我对 js 文件进行更改时重新生成。

Task Runner Explorer 还显示所有正在运行的任务的输出。在这里你可以看到 watch 任务的输出，在这个配置中它总是在后台运行。

From this article.

Answer 3

在 VS2013 中找到了一种简单的方法，不知道它是否在 2015 年有效。在 gulp 中的 jshint 任务中，只需使用 jshint 错误事件处理程序捕获错误并记录前缀为 “错误：”的消息 到控制台。 Visual Studio 使用此约定从输出中识别导致构建失败的错误。

.pipe(jshint({

// .... //

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

你会在你的错误列表中看到这个：

Answer 4

您可以将gulp-jshint 与以下任务定义一起使用：

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

它会让 gulp 退出，代码为 1。 对于代码 1 构建失败，您需要转到项目设置，构建事件选项卡并将以下代码添加到预构建事件命令行：

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

它将导致构建失败并显示以下消息：

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

Answer 5

这里有我的 jshint vs17 记者（也应该使用以前的版本）： img

1. 将 gulp run 命令包含到您的 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. 创建模块文件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");
            }
        }
    }
}

4. 导入本地模块const vsJsHintReporter = require('./gulp.jshint.vs.reporter');
5. 在 gulp 任务中使用 .pipe(jshint(config.jshint)).pipe(jshint.reporter(vsJsHintReporter))

我打算将记者发布到 npm。

Answer 6

我在 gulp 工作的情况下构建失败（和错误报告）（对我来说已经足够了，对其他人来说可能就足够了。）

这是我使用/做过的...

根据this 页面，我在我的 project.json 中添加/编辑了它，它与 prebuild 事件挂钩...

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

根据this 页面，我为我的 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'))
});

后两行是最重要的。如果您还没有，则需要 npm install jshint-stylish。

或者，对于jshint-stylish，您可以让 VS 为您处理。如下所示将jshint-stylish 的行添加到您的 package.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"
  }
}

当出现错误（除了失败的构建）时，这给了我这个，这足以让我在必要时进一步挖掘......

与通过命令行或 Task Runner 运行同一任务时获得的更详细的错误信息相反...

我想这个解决方案可以改进，但我想我会分享，因为我在其他地方没有看到太多关于它的信息。

干杯。