Enforce code consistency with ESLint

JavaScript’s flexibility leads to inhomogeneous code bases. Make your team’s work easier by enforcing a consistent code style.

Did you ever have to fix a bug in somebody else’s code — but you first had to reformat the code to even understand it? Misplaced spaces, non-standardize line breaks, wrongly sorted imports, etc.

Many articles have been written on the importance of a consistent code style within a team. And this is even more important in the JavaScript world where the language itself adds far less restrictions than e.g. Java or Python.

Luckily, the JavaScript world has great linters that check code against a set of rules. Considering that many developers ignore warnings after a while, you can even make your builds fail whenever a linting rules is violated.

Add linting to a project

We opted for ESLint because it’s well documented, comes with a wide set of rules, and provides good integrations with many IDEs.

To get started, install ESLint to your project:

npm install eslint --save-dev

Next, add a .eslintrc.json file to the project (the example will enforce semicolons to be at the end of each line):

{
"rules": {
"semi": ["error", "always"]
}
}

Finally, add eslint to your build pipeline by adjusting your package.json:

{
"scripts": {
"prepublish": "eslint src",
...
},
...
}

Now, whenever you (or your Continuous Integration tool) builds the project, ESLint will check all JavaScript files in the src/ directory. The build will stop in case there is somewhere a line without a semicolon. Neat!

Use a shared rules set across projects

As you add JavaScript modules, it will become increasingly challenging to keep the ESLint configuration files in sync. For this, ESLint has the concept of a shareable ESLint config. It’s pretty simple to create one (see guide).

To use it, just install your shareable ESLint config as a development dependency:

npm install eslint-config-my --save-dev

And then replace the rules in your .eslintrc.json with a reference to the shared config:

{
"
extends": "eslint-config-my"
}

PS: Need an example? You can install our own configuration and try it out:

npm install --save-dev eslint-config-collaborne

Happy linting!

Want to learn more about coding? Have a look to our other Medium articles.


Photo: Arend