How I learned to write cleaner code using ESLint

I have been a professional front-end web developer for almost 2.5 years now. I started out using mostly jQuery, but began using vanilla JavaScript more and more instead of jQuery in the months after. A few months ago, at the start of a new project, a senior developer on my team suggested we get rid of jQuery all together for new projects. At first, I was a bit nervous about it, but I realized I would learn vanilla JavaScript faster if I couldn’t use jQuery to fall back to.

To help us both write consistent and clean code, the senior developer also introduced ESLint to our projects. We decided to use the ESLint config from Airbnb.

Up to this time, I mostly wrote my vanilla JavaScript in the old syntax (ES5). ESLint with the Airbnb config helped me convert my code to the new syntax, which was surprisingly easy.

For example, previously I would have written this:

Technically, there isn’t anything wrong with this code. But let’s see what ESLint thinks of it:

As you can see, there are quite some things that can be improved. ESLint has the --fix option, which you can use to automatically fix some errors. But let’s do it ourselves, because that’s how we learn faster.

Let’s start at the top. unexpected var, use let or const instead (no-var) indicates we use var, where it is better to use either let or const. I will not be going into details about the differences between these three, but if you want to read more about it, you can do that here and here. Because the variables will not change further in the code, it’s best to use const.

On to the next error: 'i' is not defined. This error appears no less than 5 times, but it’s easily fixed by adding a tweaking the for loop a bit, and defining the i variable using let. This eliminates all 5 errors at once.

In the same for loop, there’s another error. Unary operator '++' used. We can fix this by changing ++i into i += 1, but because we are looping a nodeList, we can also use the forEach method to loop through the nodeList. If you’re not familiar with this method, check out the MDN reference page for more information. To loop through a nodeList using forEach, we can use the spread operator. Our code now looks like this:

As you can see, we don’t need the imageCount constant anymore, because it’s not used in the forEach method, and it also fixes the unary operator '++' used error (Side note: This constant wasn’t necessary to begin with, but I added it for the sake of clarity).

So let’s run ESLint again.

As you can see, most errors are fixed now, but the refactoring also resulted in a new error (and a warning). Luckily, both the error and warning can be fixed by converting function(i) to an arrow function.

Only one error remains: unexpected string concatenation (prefer-template). ES6 introduced template literals, where you can use variables and strings together using backticks.

Conclusion

Not only did we refactor our old syntax code to ES6 syntax with almost no effort, we also managed to make the code 27% smaller. Of course, this is just a very simple example and there are way more new functions and methods introduced in ES6+ that ESLint doesn’t help you with, but it’s a great start and also a great tool to keep you on edge every single day.

Do you want to start using ESLint but don’t know where to start? Check out the Getting Started section on their website or read this article. You can also read more about Airbnb’s ESLint config and their JavaScript style guide here. If you use React, I recommend using this config, if not, use their base config.

More where this came from

This story is published in Noteworthy, where thousands come every day to learn about the people & ideas shaping the products we love.

Follow our publication to see more product & design stories featured by the Journal team.