Iterate file line-by-line, extract the first number of each line, turn it into an integer, sum. Isn’t Python great? This would be hell to do in JavaScript.

In my case, this prints 856. I hope you get less!

So, how do you get that evil mean output that says your code’s no good when running Webpack? There are 3 steps:

Install some npm packages.

Add 5 lines to Webpack.

Get a sensible .eslintrc config file.

1. npm Packages

It’s 2017, so I’m going to assume you’re using ES6 to write your code. Even if you aren’t, empowering ESLint to understand modern JavaScript can’t hurt.

The packages you need are eslint, babel-eslint, and eslint-loader.

> npm install --save-dev eslint babel-eslint eslint-loader

This installs the packages and saves them as devDependencies in your package.json file. If you’re using Heroku, you have to set them as normal dependencies with --save. Otherwise, your Webpack build will fail when deploying to Heroku because Heroku doesn’t install dev dependencies.

That’s always fun to re-discover.

2. 5 Lines of Webpack Config

Let’s assume you’re already using Webpack and have a config going. To add ESLint to your build step, add these lines to that config:

For every file in include paths that ends with .js, use the eslintloader. The exclude setting might be unnecessary, but I like to add it out of habit.

Yes, the best place to put this is in loa1ders. Not preLoadersand not postLoaders.

Logically speaking, it fits best in preLoaders, doesn’t it? You’d want to run the linter before doing any other transformation. That’s why it can’t go in postLoaders.

That caused strange errors for me that took … cough … hours to figure out. When you use the bang syntax to specify loaders in require() calls, eslint gets confused and constructs file paths that do not exist.

The easiest solution is to use it as a part of normal loaders. Ordering matters.

If I switch places and put eslint before babel-loader, Webpack spits out 883 errors in 178 files. 27 more errors in 3 more files.

I will pretend I didn’t see that.

3. A Sensible ESLint Config

Now, the fun part -> ESLint config in .eslintrc. There are many files out there with varying degrees of annoyingness.

My favorite feature is that it lists all available options, so, in theory, it’s easy to fine-tune. I can already tell that we’ll have to crank up some of the styling rules and tune down some of the “potential error” rules.