Coding better with ESLint + Gulp

Yo, there!

If you don’t lint your javascript code yet, you must start doing it right now!

Let me share how to setup ESLint alongside with Gulp to improve the quality of your Javascript code, reduce the chances of you find stupid bugs on your apps, and make your life easier. 😉

This content was originally posted here.

I am assuming here you already have your project up and running with Gulp, so what I am gonna tell you is how to attach ESLint on it. However, ESLint can be used with Webpack, Parcel and any other bundler (or task manager, as Gulp) out there.

1- First, let’s add the gulp-eslint and other needed modules to your package.json by running the following code in a terminal window:

$ npm i -D gulp-eslint 
$ npm i -D eslint-config-airbnb-base eslint-plugin-import

2- Then let’s create a ESLint setting file to your project. Touch a file called .eslintrc to the root folder of your project:

$ touch .eslintrc 
$ nano .eslintrc

And add the following instructions on it:

{
  "extends": ["airbnb-base"]
}

Or, you may rather get the one I am using.

3- The next step is creating a gulp task for ESLint. Open the Gulpfile.js from your project and write the following block of code there:

// The lint task
gulp.task('lint', function() {
  return gulp    
    // Define the source files
    .src('src/**/*.js').pipe(eslint({}))
    // Output the results in the console
    .pipe(eslint.format());
});

// The default task
// You might have one already, in that case, just add ['lint']
gulp.task('default', ['lint']);

Good, good! It is done. 🙌

Now, once you have all settings done, you can already start checking your code lint reports, basically outputted in the terminal where you’re running Gulp.

Happy coding. 🤟