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

How to run Gulp ESLint on HTML script tag JS

本文关键字：运行 Gulp ESLint JS 标签 HTML 脚本      更新时间：2023-09-26

我已经用下面的代码设置了Gulp来ESLint我的HTML脚本标签中的javascript。

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吗?

我知道这个问题差不多有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());
    });

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

性能很好。

相关文章：