Gulp eslint 找不到我的 .eslintrc 文件

Question

It looks like my .eslintrc file is not found my gulp-eslint

I defined a lint task:

gulp.task('lint', function () {
  gulp.src(['src/**/*.js', 'src/**/*.jsx'])
  .pipe(eslint())
  .pipe(eslint.format());
})

It runs but doesn't show any error.

My .eslintrc file is defined in src folder. I tried to move it to the root folder of my project but it didn't change anything.

It's a pretty simple file:

{
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "classes": true,
    "jsx": true
  },
  "plugins": [
    "react"
  ],

  "extends": "eslint-config-airbnb"
}

When I run eslint src in the terminal, I get a bunch of eslint errors, which is fine.

Any idea what is not properly working?

Answer 1

According to the docs you need to fail on error in the pipe.

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(['**/*.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())
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failAfterError last.
        .pipe(eslint.failAfterError());
});

Answer 2

Just a heads-up, the documentation is extremely useful and succinct on using configuration files, their precedence of usage and how they are located. You can also add the path to specify the location of your configuration file for a particular pipe:

gulp.task('lint', function () {
  gulp.src(['src/**/*.js', 'src/**/*.jsx'])
  .pipe(eslint({ configFile: '.eslintrc'}))
  .pipe(eslint.format())
  .pipe(eslint.failAfterError())
})

In the gulp-eslint documentation it should be noted that usage of the failOnError() and failAfterError() methods are advisable in that the task/stream is stopped and hence there is no invalid code written to the output.

If you use neither then the error is still caught but displayed only in the console output. So dependent on your task flow and design the destination file may still be written but you can conveniently correct the error immediately and carry on without having to start up your pipe processing/watch task again. An alternative is to look into gulp-plumber or some other means whereby you're not breaking out of a gulp watch task and yet also not writing a file containing code that doesn't pass linting validation.