JSHint Gulp 到错误 window VS2015

Question

当使用 Gulp 时，如何让 JSHint 的输出显示在 Visual Studio 2015 的 错误列表 中，而不仅仅是输出到任务运行器？

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

这是我的gulpfile.js:

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

实际输出（在 Task Runner Window 中）：

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

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

Answer 1

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

您可以使用 this plugin.

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

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

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

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

Task Runner Explorer 还显示任何运行ning 任务的输出。在这里您可以看到 watch 任务的输出，在此配置中，它始终在后台运行ning。

From this article.

Answer 2

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

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

He did also confirm 这种功能即将到来 post-RTM。

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

Answer 3

在 VS2013 中找到了一个简单的方法来执行此操作，不知道它在 2015 年是否有效。在 gulp 中的 jshint 任务中，只需使用 jshints 错误事件处理程序捕获错误并记录一条前缀为 "error:" 到控制台。 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 构建失败，您需要转到项目设置、构建事件选项卡并将以下代码添加到 Pre-build 事件命令行：

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

构建失败并显示以下消息：

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

Answer 5

我在 gulp 工作时构建失败（和错误报告）（对我来说已经足够了，也许对其他人来说已经足够了。）

这是我used/did...

根据 this 页面，我 added/edited 在我的项目 .json 中，它与预构建事件挂钩...

  "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 的行添加到您的包 .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"
  }
}

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

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

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

干杯。

Answer 6

这是我的 jshint vs17 记者（应该也适用于以前的版本）： img

将 gulp 运行命令包含到您的 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)" />

创建模块文件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");
            }
        }
    }
}

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

我打算将报告器发布到 npm。

JSHint Gulp 到错误 window VS2015

JSHint Gulp to error window VS2015

jshint

gulp

visual-studio-2015