How to run Gulp ESLint on HTML script tag JS

Question

I have set up Gulp to ESLint the javascript in my HTML script tags with the following code.

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

The linter works well, but seems to give me line numbers that does not correspond to my HTML files, but the line numbers of the extracted javascript from the script tags, which I never see.

How do I get the line numbers of the HTML file? Or can I lint my HTML script javascript in a better way?

score 1 · Answer 1 · answered Sep 18 '18 at 14:36

I know this question is almost 2 years old, but I also ran into this problem.

This is my solution: I use gulp-html-extract to extra the script tags contents from the files. https://github.com/FormidableLabs/gulp-html-extract

I then set pad to true.

For example:

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());
    });

I hope it's helpful.

score -2 · Answer 2 · answered Oct 05 '16 at 08:44

-2

You can use Atom, It has eslint plugin. http://oceanpad.github.io/2016/08/22/2016-08/To-Introduce-ESLint-to-Atom/

It behave very well.

answered Oct 05 '16 at 08:44

haiyang

310
3
8

2

It's true that Atom has a eslint plugin, but that's irrelevant to this question – henry Oct 05 '16 at 18:20

How to run Gulp ESLint on HTML script tag JS

2 Answers2