JSHint Gulp到错误窗口VS2015

Question

How can I get the output from JSHint to show up in my Error List in Visual Studio 2015 when using Gulp, rather than just output to the Task Runner?

I've tried this package but that doesn't seem to do anything except format the Gulp output slightly differently.

This is my gulpfile.js :

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

Actual output (in Task Runner Window):

Preferred output (in Error List):

Please Note: I'm using Visual Studio 2015, so Web Essentials is no longer an option for JSHint as the functionality has been removed.

Answer 1

I managed to get an official word on this from Mads Kristensen in this conversation on Twitter:

So in VS2015RC (and RTM too), there is no way to get messages to go to the output window. The task runner only outputs to the error window if the Gulp task returns a failure - but honestly, I haven't managed to get this working either.

He did also confirm that this kind of functionality will be coming post-RTM.

_{Thanks to Eonasdan for pointing this out!}

Answer 2

Source code of your package (jshint-visual-studio) just add errors to errors array and log it to console . The code can't do anything to change console output, you must do it by yourself.

You can use this plugin .

Once the plugin is installed, open the Task Runner Explorer from the View –> Other Windows –> Task Runner Explorer menu.

This window will show you all the tasks in the gulp file and allow you to bind those tasks to certain Visual Studio events. This way, we don't need to remember to run the gulp tasks from the command line. The IDE can handle it for us.

What I like to do is bind the watch task to the Solution Load event and bind the scripts task to the Before Build event.

With these bindings, we can make sure that all.min.js is correctly generated when we build the application and also regenerated anytime I make changes to the js files.

The Task Runner Explorer also shows the output of any running tasks. Here you can see the output from the watch task, which is always running in the background in this configuration.

From this article.

Answer 3

Found a simple way to do this in VS2013, don't know if it works in 2015. Inside your jshint task in gulp just catch the error using jshints error event handler and log a message prefixed "error:" to the console. Visual Studio uses this convention to identify the errors that failed the build from the output.

.pipe(jshint({

// .... //

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

You'll see this in your ErrorList:

Answer 4

You could use gulp-jshint with following task definition:

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

It will make gulp exit with code 1. And for code 1 to fail build you need to go to Project settings, Build Events tab and add following code to Pre-build event command line:

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

It will fail the build with following message:

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

Answer 5

Here you have my jshint vs17 reporter (should work with prev. version too) : img

1. Include the gulp run command to your msbuild process (.csproj) file

    <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. Create module file 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. Import your local module const vsJsHintReporter = require('./gulp.jshint.vs.reporter');
5. Use in gulp task .pipe(jshint(config.jshint)).pipe(jshint.reporter(vsJsHintReporter))

I'm planning to publish the reporter to npm.

Answer 6

I have build fail (and error reporting) with gulp working (well enough for me, maybe sufficient for others.)

Here is what I used/did...

As per this page, I added/edited this in my project .json, which hooks into the prebuild event...

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

As per this page, I included the following for my jshint task...

// =============================
// 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'))
});

The latter two lines being the most significant. You will need to npm install jshint-stylish if you don't already have it.

Alternatively, for jshint-stylish , you can let VS handle it for you. Add the line for jshint-stylish as indicated below to your 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"
  }
}

Which gives me this when there is an error (in addition to the failed build) which is sufficient for me to dig further if/as necessary...

As opposed to the more detailed error info I get when running the same task via command line or Task Runner...

I imagine this solution can be improved but figured I would share as I hadn't seen a whole lot about it elsewhere.

Cheers.