DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Rogerio Taques
Rogerio Taques

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And add the following instructions on it:

{
  "extends": ["airbnb-base"]
}
Enter fullscreen mode Exit fullscreen mode

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']);
Enter fullscreen mode Exit fullscreen mode

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. 🀟

Top comments (3)

Collapse
 
halo_3 profile image
Harry Logan

gulp-eslint used to be a good tool but it has been unmaintained for ages and it works with an outdated version of ESLint that does not recognize new JavaScript syntax (like class fields, top-level await, etc.) and misses literally all new features added in the last couple of years. For new projects I'd highly recommend using gulp-eslint-new instead or another fork of gulp-eslint that works with ESLint 8 or newer.

Collapse
 
itachiuchiha profile image
Itachi Uchiha

Rogerio, thanks. Can you write new articles about this?

Have a nice day!

Collapse
 
rogeriotaques profile image
Rogerio Taques Author

Hey @aligoren πŸ™Œ! Cool, I'll try to post how's the ESLint setup we use here for tVue projects.

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs