Using ESLint on your projects to have better consistency and readability


Misc - JS

October 09, 2019

Do you use linting tools? Today we'll talk a bit about ESLint - a linting utility for JavaScript/EcmaScript. A linter is basically a tool that helps you identify issues on your code. So what's the value of a tool like this for your projects?

First of all, ESLint helps you set a style for your code so you can be consistent with it on a project. When you install it, you can even choose a specific design style for your project. Besides this, ESLint is awesome for finding specific bugs, scope related bugs, duplicate blocks of code, unreachable code, infinite loops, undefined variables, unused variables, wrong syntax, etc.

This is great to avoid errors and bugs that may appear in the long run. It's also good to keep a readable code by following best practices and making sure that nothing is missing ( correct spaces, semicolons, etc)

In this post I show a little video example of using ESLint on development. I created a little code snippet with some errors and bad practices so we can see this tool in action. Basically, in the code itself, I get red underlines that, when hovered, show me what exactly is the problem. Besides that, there's a 'PROBLEMS' panel where all the errors are visible and explained. When I click on one of these errors I go straight to the line of the code where this error exists so I can fix it straight away.

There's much more to this tool that you can find, but this is a simple demonstration of how ESLint can really help you writing good code. Honestly, at the beginning, i never used these type of tools, thinking that they weren't needed. I now see the value they have and how they can really help developers. So, if you haven't used it, give it a try!