如何在 HTML 脚本标签 JS 上运行 Gulp ESLint答案

【问题标题】：How to run Gulp ESLint on HTML script tag JS如何在 HTML 脚本标签 JS 上运行 Gulp ESLint
【发布时间】：2017-02-13 14:39:17
【问题描述】：

我已将 Gulp 设置为使用以下代码对我的 HTML 脚本标签中的 javascript 进行 ESLint。

const eslint = require('gulp-eslint');

gulp.task('process-js', () => {
  const scripts = processInline();

  return gulp.src(['src/*.html'])
    .pipe(errorNotifier())
  
    .pipe(scripts.extract('script'))
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(scripts.restore())

    .pipe(gulp.dest('dist'))
});

linter 运行良好，但似乎给我的行号与我的 HTML 文件不对应，而是从脚本标签中提取的 javascript 的行号，我从未见过。

如何获取 HTML 文件的行号？或者我可以以更好的方式对我的 HTML 脚本 javascript 进行 lint？

【问题讨论】：

标签： javascript gulp eslint

【解决方案1】：

你可以使用 Atom，它有 eslint 插件。 http://oceanpad.github.io/2016/08/22/2016-08/To-Introduce-ESLint-to-Atom/

它的表现非常好。

【讨论】：

Atom 确实有一个 eslint 插件，但这和这个问题无关

【解决方案2】：

我知道这个问题已经快 2 年了，但我也遇到了这个问题。

这是我的解决方案：我使用 gulp-html-extract 从文件中提取脚本标签内容。 https://github.com/FormidableLabs/gulp-html-extract

然后我将 pad 设置为 true。

例如：

var gulp = require('gulp');
var extract = require("gulp-html-extract");
var eslint = require('gulp-eslint');

gulp.task("eslint:html", function () {
    return gulp
        .src("templates/**/*.tpl")
        .pipe(extract({
            sel: "script, code.javascript",
            pad: true,
        }))
        .pipe(eslint())
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
    });

希望对你有帮助。

【讨论】：