Pertanyaan JSHint Gulp ke jendela kesalahan VS2015


Bagaimana saya bisa mendapatkan output dari JSHint untuk muncul di Daftar Kesalahan di Visual Studio 2015 saat menggunakan Gulp, bukan hanya output ke Task Runner?

Saya sudah mencoba paket ini tetapi itu sepertinya tidak melakukan apa-apa kecuali memformat output Gulp dengan sedikit berbeda.

Ini adalah saya gulpfile.js:

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

Output aktual (dalam Task Runner Window):

Actual output

Output yang lebih disukai (dalam Daftar Kesalahan):

Preferred output

Tolong dicatat: Saya menggunakan Visual Studio 2015, jadi Web Essentials tidak lagi menjadi opsi untuk JSHint karena fungsinya telah dihapus.


32
2018-05-27 07:42


asal


Jawaban:


Saya berhasil mendapatkan kata resmi dari ini Mads Kristensen dalam percakapan ini di Twitter:

Tweet

Jadi di VS2015RC (dan RTM juga), tidak ada cara untuk mengirim pesan ke jendela output. Pelari tugas hanya menghasilkan output ke jendela kesalahan jika tugas Gulp mengembalikan kegagalan - tetapi jujur, saya belum berhasil mendapatkan pekerjaan ini.

Dia juga mengkonfirmasi bahwa fungsi semacam ini akan datang pasca-RTM.

Terima kasih kepada Eonasdan untuk menunjukkan ini!


6
2018-06-15 07:30



Kode sumber dari paket Anda (jshint-visual-studio) hanya menambahkan kesalahan errors Array dan log ke console. Kode tidak bisa melakukan apa pun untuk berubah console output, Anda harus melakukannya sendiri.

Kamu dapat memakai plugin ini.

Setelah plugin diinstal, buka Penjelajah Task Runner dari Melihat -> Windows lainnya -> Penjelajah Task Runner menu.

Jendela ini akan menunjukkan kepada Anda semua tugas dalam file gulp dan memungkinkan Anda untuk mengikat tugas-tugas tersebut ke acara Visual Studio tertentu. Dengan cara ini, kita tidak perlu mengingat untuk menjalankan tugas-tugas gulp dari baris perintah. IDE dapat menanganinya untuk kita.

Apa yang saya suka lakukan adalah mengikat menonton tugas ke Beban Solusi acara dan ikat skrip tugas ke Sebelum Dibangun peristiwa.

enter image description here

Dengan binding ini, kita dapat memastikan bahwa all.min.js dibuat dengan benar ketika kita membangun aplikasi dan juga diregenerasi setiap kali saya melakukan perubahan pada file js.

Explorer Task Runner juga menunjukkan output dari semua tugas yang sedang berjalan. Di sini Anda dapat melihat output dari tugas menonton, yang selalu berjalan di latar belakang dalam konfigurasi ini.

enter image description here

Dari artikel ini.


1
2018-05-29 17:42



Menemukan cara sederhana untuk melakukan hal ini di VS2013, tidak tahu apakah berfungsi pada tahun 2015. Di dalam tugas jshint Anda di gulp hanya menangkap kesalahan menggunakan jshints event handler dan log pesan yang diawali "kesalahan:" ke konsol. Visual Studio menggunakan konvensi ini untuk mengidentifikasi kesalahan yang gagal membangun dari output.

.pipe(jshint({

// .... //

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

Anda akan melihat ini di Daftar Kesalahan Anda:

enter image description here


1
2017-11-23 17:19



Anda bisa menggunakannya gulp-jshint dengan definisi tugas berikut:

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

Ini akan membuat gulp keluar dengan kode 1. Dan untuk kode 1 gagal membangun Anda harus pergi ke pengaturan Proyek, tab Bangun Acara dan menambahkan kode berikut ke baris perintah Pra-membangun acara:

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

Ini akan gagal membangun dengan pesan berikut:

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

1
2018-01-27 17:41



Di sini Anda memiliki reporter jshint vs17 saya (seharusnya bekerja dengan versi prev. Juga): img

  1. Sertakan perintah gulp run ke file msbuild process (.csproj) Anda

    <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. Buat file modul 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. Impor modul lokal Anda const vsJsHintReporter = require('./gulp.jshint.vs.reporter');
  2. Gunakan dalam tugas gulp .pipe(jshint(config.jshint)).pipe(jshint.reporter(vsJsHintReporter))

Saya berencana untuk mempublikasikan reporter ke npm.


1
2018-06-23 11:57



Saya telah membangun gagal (dan pelaporan kesalahan) dengan tegukan bekerja (cukup baik bagi saya, mungkin cukup untuk orang lain.)

Inilah yang saya gunakan / lakukan ...

Sesuai ini halaman, saya menambahkan / mengedit ini di saya proyek.json, yang menghubungkan ke acara prebuild ...

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

Sesuai ini halaman, saya termasuk yang berikut untuk tugas jshint saya ...

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

Dua baris terakhir adalah yang paling signifikan. Anda perlu menginstal npm jshint-stylish jika Anda belum memilikinya.

Atau, untuk jshint-stylish, Anda dapat membiarkan VS menanganinya untuk Anda. Tambahkan baris untuk jshint-stylish seperti yang ditunjukkan di bawah ini untuk Anda paket.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"
  }
}

Yang memberi saya ini ketika ada kesalahan (selain gagal membangun) yang cukup bagi saya untuk menggali lebih jauh jika diperlukan ... vs error list window after build

Berbeda dengan info kesalahan yang lebih detail yang saya dapatkan ketika menjalankan tugas yang sama melalui baris perintah atau Task Runner ... gulp default task output via cmd.exe

Saya membayangkan solusi ini dapat diperbaiki tetapi saya pikir saya akan berbagi karena saya belum melihat banyak hal tentang hal itu di tempat lain.

Tepuk tangan.


0
2018-03-25 02:02