Working with two sets of ESLint rules for legacy ES5 and modern JavaScript using Gulp

I've written before about using file extensions to tell webpack and Babel which files are older-style ES5 syntax and which are newer-style JavaScript. What if you've got a project that has both, and you need to run ESLint on the older, *.js files as well as the new *.es6 files?

You can run both in one task with Gulp.

First, set up separate ESLint rules files. These are usually .eslintrc.json files, but since we need two sets of rules, create .eslintrc.es5.json (for the older syntax rules) and .eslintrc.es6.json (for the newer syntax rules).

Then create Gulp task ("validate-es5") to get a glob of the *.js files and apply the rules in the .eslintrc.es5.json rules config and a Gulp task ("validate-es6") to get a glob of the *.es6 files and apply the rules in the .eslintrc.es6.json rules:

const gulp = require("gulp");
const eslint = require("gulp-eslint");
const plumber = require("gulp-plumber");
const paths = {
    es6scripts: "Scripts/**/*.es6",
    es5scripts: "Scripts/**/*.js"
};
const es5eslintGlob = [paths.es5scripts];
const es6eslintGlob = [paths.es6scripts];
 
 
gulp.task("validate-es5", () =>
    eslintPipeline(gulp.src(es5eslintGlob), ".eslintrc.es5.json")
);
 
gulp.task("validate-es6", () =>
    eslintPipeline(gulp.src(es6eslintGlob), ".eslintrc.es6.json")
);
 
function eslintPipeline(stream, rules) {
    return stream
        .pipe(plumber({
            errorHandler: error => {
                console.log(error.message);
                console.log(error.toString());
            }
        }))
        .pipe(eslint(rules))
        .pipe(eslint.format())
        .pipe(eslint.failAfterError());
}

Next, create a Gulp task to run both tasks named "watch" to run a watch on those files and execute ESLint with the correct rule set for each file extension when a file changes:

const print = require("gulp-print").default;
const watch = require("gulp-watch");
 
gulp.task("watch", () => {    
    eslintPipeline(watch(es5eslintGlob)
        .pipe(print(filepath => `ESLint (ES5): ${filepath}`)), ".eslintrc.es5.json")
        .pipe(eslint.failOnError());
    eslintPipeline(watch(es6eslintGlob)
        .pipe(print(filepath => `ESLint (ES6): ${filepath}`)), ".eslintrc.es6.json")
        .pipe(eslint.failOnError());
});