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

Source code（jshint-visual-studio）的

your package只是将错误添加到errors数组并将其记录到console。代码无法更改console输出，您必须自己完成。

您可以使用this plugin。

安装插件后，从 View - ＆gt;打开 Task Runner Explorer 。 其他Windows - ＆gt; Task Runner Explorer 菜单。

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

我想要做的是将监视任务绑定到解决方案加载事件，并将脚本任务绑定到之前构建事件。

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

Task Runner Explorer还显示任何正在运行的任务的输出。在这里，您可以看到监视任务的输出，该输出始终在此配置的后台运行。

From this article.

Answer 3

您可以将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 4

在这里你有我的jshint vs17记者（也应该使用prev。版本）： 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

＆＃13;
＆＃13;
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");
            }
        }
    }
}
＆＃13;
＆＃13;
＆＃13;
1. 导入您的本地模块const vsJsHintReporter = require('./gulp.jshint.vs.reporter');
2. 在gulp任务中使用.pipe(jshint(config.jshint)).pipe(jshint.reporter(vsJsHintReporter))

我打算将记者发布到npm。

Answer 5

我使用gulp工作构建失败（和错误报告）（对我来说足够好，对其他人来说也足够了。）

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

根据this页面，我在项目 .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'))
});

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

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

session_start();

$_SESSION['user_id'] = 1;

$db = new PDO('mysql:host=localhost;dbname=project', 'root', '');

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

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

我想这个解决方案可以改进，但我想分享一下，因为我在其他地方看不到很多。

干杯。