Does linting make you a better developer?

The benefits of ESLint and how to use it.

Daniel Segovia
Chingu
4 min readAug 31, 2017

--

What is linting?

Lint or a linter is any tool that flags suspicious usage in software written in any computer language.

Random google image.

Essentially, it’s a tool that inspects code and flags bugs, typos, or any potential mistake in the programmer’s input.

Linting helps in two ways. First, it looks for code that will potentially break. Second, it provides a style guide for the programmer or programming team to follow.

Where does ESLint come from?

ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. ESLint comes with some preset rules, but these rules can be modified or deleted.

The idea of this linter is to allow users to create their own rules. Here is where ESLint shines. Since it’s open for users to make their own rules, there are some popular style guides that come from big names (ex. Airbnb, Google) that make new developers like myself write more elegantly.

Why lint when working alone?

In my personal opinion, linting forced me to program cleaner and in a more consistent style. Depending on the depth of the style guide, you can be forced to make good coding decisions and habituate better practices.

Awesome screenshot taken by me, using Airbnb style guide.

One good example is the use of let and const. Why use a let when you are not modifying the variable and just declaring it for later use?

Why lint when working in a team?

Using a style guide will help any current programmer in a project adhere to the rules pre-established by the team, or enormously help a newcomer avoid some undesired writing styles.

Another awesome screenshot by me!

This will probably is the best benefit, since the constraints of a style guide can prevent illegible code. Like the terrible nested ternary operators.

How do I use it?

The most popular ESLint style guide is the Airbnb JavaScript Style Guide(). In this section I will try to explain how to plug it in and use with vscode.

First things first, you will need to install vscode if you haven’t already. Pretty straight forward. (This is an awesome IDE by the way, if you haven’t tried it, I highly suggest you do.)

Download vscode page

Then, we need a package to help vscode interpret ESLint rules inside the IDE, this package is called ESLint by Dirk Baeumer.

Then we need to run the npm command npm install -g eslint to install eslint globally on your machine. This will give you access to the eslint command in your terminal.

Navigate to your desired Node.js project in your terminal and type eslint --init to start a GUI.

eslint GUI

Select Use a popular style guide then Airbnb, then choose whether you are or aren’t using React, and choose a file format (I suggest JavaScript or JSON). After eslint installs the style guide, it will create a .eslintrc.js (or .json). If you are working with a node/express application, I suggest you enter a rules object like the following.

.eslintrc.js file

This will allow console.log() command in your code without sending an error. You can further customize ESLint for this specific project in this file.

That’s it. Now you are good to go!

This is my first programming article, so your harshest most honest feedback is greatly appreciated. Also, if you have any trouble with the ESLint installation let me know!

Thanks for reading, and happy coding!

--

--