How to fix files with gulp-eslint?

Question

I'm using gulp with eslint.

Without gulp, I just run eslint ./src --fix. I can't figure out how to make this happen with gulp. I tried below, setting fix to be true, but it doesn't fix any files:

gulp.task('lint', ['./src/**.js'], () => {
return gulp.src()
    .pipe($.eslint({fix:true}))
    .pipe($.eslint.format())
    .pipe($.eslint.failAfterError());
});

I want all the files under ./src to be fixed. How do I achieve this?

Justiceship

Answer 1

Here is the right way that is working in my project:

var gulp = require('gulp'),
    eslint = require('gulp-eslint'),
    gulpIf = require('gulp-if');


function isFixed(file) {
    // Has ESLint fixed the file contents?
    return file.eslint != null && file.eslint.fixed;
}


gulp.task('lint', function () {
    // ESLint ignores files with "node_modules" paths.
    // So, it's best to have gulp ignore the directory as well.
    // Also, Be sure to return the stream from the task;
    // Otherwise, the task may end before the stream has finished.
    return gulp.src(['./src/**.js','!node_modules/**'])
        // eslint() attaches the lint output to the "eslint" property
        // of the file object so it can be used by other modules.
        .pipe(eslint({fix:true}))
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // if fixed, write the file to dest
        .pipe(gulpIf(isFixed, gulp.dest('../test/fixtures')))
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failAfterError 
        // last.
        .pipe(eslint.failAfterError());
});

gulp.task('default', ['lint'], function () {
    // This will only run if the lint task is successful...
});

Corded

WHY is this the "right way"? Particularly, why should "FailAfterError()" be removed? – Vesuvius

You are using the "gulp-if" package, correct? It's not referenced in your example. With that in mind, and with the naming style used in the packages example, I have the following working code for output: .pipe(gulpif(isFixed, gulp.dest('./'))); – Vesuvius

Answer 2

Old question but adding .pipe(gulp.dest(file => file.base)) is what got it to work for me. As in:

gulp.task('lint', ['./src/**.js'], () => {
return gulp.src()
    .pipe($.eslint({fix:true}))
    .pipe($.eslint.format())
    .pipe(gulp.dest(file => file.base)) // <-- NEW: Output fixed version of file.
    .pipe($.eslint.failAfterError());
});

Cylix

Answer 3

I use gulp-eslint-new because gulp-eslint is unmaintained.

It has a method gulpESLintNew.fix() to fix files, which is explained in the readme.

Overwrite files with the fixed content provided by ESLint. This should be used in conjunction with the option fix in gulpESLintNew(options). Files without a fix and files that were not processed by ESLint will be left untouched.

And an example:

function lintNFix() {
  return src('demo/**/*.js').pipe(gulpESLintNew({ fix: true }))
                            .pipe(gulpESLintNew.format())
                            // If a file has a fix, overwrite it.
                            .pipe(gulpESLintNew.fix());
}

Fortna