web-dev-qa-db-ja.com

JSHintGulpからエラーウィンドウVS2015

タスクランナーに出力するだけでなく、Gulpを使用しているときにJSHintからの出力をVisual Studio 2015のエラーリストに表示するにはどうすればよいですか？

私は このパッケージ を試しましたが、Gulp出力のフォーマットが少し異なる以外は何もしないようです。

これは私のgulpfile.jsです：

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

実際の出力（タスクランナーウィンドウ内）：

Actual output

優先出力（エラーリスト内）：

Preferred output

注意：Visual Studio 2015を使用しているため、機能が削除されたため、WebEssentialsはJSHintのオプションではなくなりました。

gulpjshintvisual-studio-2015
32
CodingIntrigue

Twitterでのこの会話で Mads Kristensen からこれに関する公式の言葉を得ることができました：

Tweet

したがって、VS2015RC（およびRTMも））では、メッセージを出力ウィンドウに送る方法はありません。タスクランナーは、Gulpタスクが失敗を返した場合にのみ、エラーウィンドウに出力します。正直なところ、私もこれを機能させることができませんでした。

彼も確認しました この種の機能はRTM後に提供される予定です。

これを指摘してくれたEonasdanに感謝します！

6
CodingIntrigue

ここに私のjshintvs17レポーターがあります（以前のバージョンでも動作するはずです）： 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");
            }
        }
    }
}_
  1. ローカルモジュールをインポートするconst vsJsHintReporter = require('./gulp.jshint.vs.reporter');
  2. Gulpタスクで使用する.pipe(jshint(config.jshint)).pipe(jshint.reporter(vsJsHintReporter))

レポーターをnpmに公開する予定です。

1
Konrad Ślusarczyk

次のタスク定義で gulp-jshint を使用できます。

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

コード1でgulpを終了します。コード1でビルドに失敗するには、プロジェクト設定の[ビルドイベント]タブに移動し、ビルド前のイベントコマンドラインに次のコードを追加する必要があります。

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

次のメッセージでビルドが失敗します。

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

VS2013でこれを行う簡単な方法を見つけましたが、2015年に機能するかどうかはわかりません。gulpのjshintタスク内で、jshintsエラーイベントハンドラーを使用してエラーをキャッチし、プレフィックスのメッセージをログに記録します。 "エラー： "コンソールに。 Visual Studioはこの規則を使用して、ビルドに失敗したエラーを出力から識別します。

.pipe(jshint({

// .... //

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

これはErrorListに表示されます。

enter image description here

1
garryp

ソースコード of パッケージ （jshint-visual-studio）errors配列にエラーを追加し、consoleに記録します。コードはconsole出力を変更するために何もできません。自分で変更する必要があります。

このプラグイン を使用できます。

プラグインがインストールされたら、Task Runner ExplorerfromView–>その他のウィンドウ–>タスクランナーエクスプローラーメニュー。

このウィンドウには、gulpファイル内のすべてのタスクが表示され、それらのタスクを特定のVisualStudioイベントにバインドできます。このように、コマンドラインからgulpタスクを実行することを覚えておく必要はありません。 IDEは私たちのためにそれを処理することができます。

私がやりたいのは、watchタスクをSolution Loadイベントにバインドし、scriptsビルド前イベントへのタスク。

enter image description here

これらのバインディングを使用すると、アプリケーションのビルド時にall.min.jsが正しく生成され、jsファイルに変更を加えるたびに再生成されることを確認できます。

Task Runner Explorerには、実行中のタスクの出力も表示されます。ここでは、この構成では常にバックグラウンドで実行されている監視タスクからの出力を確認できます。

enter image description here

この記事から。

1
Pinal

Gulpが機能しているビルドの失敗（およびエラー報告）があります（私にとっては十分、他の人にとっては十分かもしれません）。

これが私が使った/したものです...

this ページに従って、prebuildイベントにフックするproject。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'))
});

後者の2行が最も重要です。まだインストールしていない場合は、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"
  }
}

これは、（失敗したビルドに加えて）エラーが発生したときにこれを提供します。これは、必要に応じてさらに掘り下げるのに十分です... vs error list window after build

コマンドラインまたはタスクランナーを介して同じタスクを実行したときに取得するより詳細なエラー情報とは対照的に... gulp default task output via cmd.exe

この解決策は改善できると思いますが、他の場所ではあまり見ていなかったので、共有したいと思いました。

乾杯。

0
t.j.