Software systems to innovate and grow

Advantages of Using ESLint

By Engineering Team October 23, 2017 10 mins read

At Gistia, we use ESLint in all of our coding to help smooth out the editing process. If you’re a JavaScript developer, linting is going to save your life.

Here’s why ESLint works…

  • You will find bugs and errors before they happen.
  • You will spend less time testing new features.
  • Your code (and your team’s code) will be more consistent.

Which makes you…

A less stressed and more productive developer (and I hope that’s something you want).

ESLint is a tool that supercharges linting and makes you feel like a superhero (no joke).

What is Linting?

Nip It In The Bud!

JavaScript is not a compiled language. What this means is there is no way for you to know beforehand if your code is free of simple syntax errors and mistakes.

Let’s take a look at this example:

As is, the improper coding of this function is going to bug out. Linting will help to catch this code before it causes a problem.

You: “I don’t need linting to find the a+c error because I already have unit tests that cover the function, will I still benefit from linting?”

Yes.

Linting doesn’t only help you find bugs, it also helps you keep your code style consistent.

Look at this example:

Notice the two different function styles and inconsistent spacing? Imagine how sloppy your work will look when you have large teams working on this project, and no cohesive style.

To summarize, linting is a type of static code analysis that helps you:
1. Find bugs and errors before they cause problems.
2. Keep your code style consistent across functions, files, developers and even projects.

A Brief History of Linting in JavaScript

Once upon a time in the land of web development, the wise ScriptMan fell to his knees after spending a lifetime in the pursuit of clean code, he failed.
Every time he deployed his code, his users would complain.

“There’s a bug”, they would say.

ScriptMan had to do something to check his code before he pushed it to the clouds. He had to find a solution. But how?

He searched the WiseNet for days…

Weeks…

Months…

(not years, the WiseNet wasn’t that bad)

And then he found it!

JSLint

JSLint worked great! Configured out of the box and ready to go.

His users started to grow. Now, he needed a team of wise scripters. So he traveled the seven seas to find the best scripters earth had to offer.

This presented a new challenge…

ScriptMan could not configure JSLint for his team! JSLint’s configuration was set in stone. (The documentation wasn’t that helpful either.)

He had no choice. ScriptMan had to consult…. the Oracle.

JSHint

He walked out of his meeting feeling on top of the world.

JSHint allowed him to use a configuration file and configure every single rule. His scripters could now be consistent with their code style. JSHint also integrated with their text editor!

The modern scripters were able to use this with the mighty ES6.

It was perfect… Or was it?

JSHint made it difficult to know which rule was causing an error. The configuration was confusing. And the worst part…

ScriptMan could not add his own custom rules!

And then…

ESLint

A scripter bumped into the ESLint package while foraging through the NPM savannah.

“Alas! A tool that gives me power,” he exclaimed.

ESLint saved the clouds. With ESLint, ScriptMan was able to do much more…

Advantages of Using ESLint

Here’s why ESLint is better –

1. Toggle Any Rule

ESLint does not enforce strict standards on you. You choose the rules you want to enable.

The standard is –

  • 0 – disable the rule
  • 1 – emit a warning when the code breaks the rule
  • 2 – emit an error when the code breaks the rule

Here’s an example:

The config above will –

  • do nothing if your code uses an alert.
  • display a warning if you use a console.log.
  • throw an error if you use undefined anywhere in your code.

Some rules allow you to define additional config for the rule using arrays.

The rule above requires every statement to end with a semicolon.

For a list of rules, you can refer to the list of ESLint rules.

2. Configuration Levels

ESLint has a configuration hierarchy.

  • Within Project – We can specify project-wide linting rules in the .eslintrc.* file in the project root. These rules apply to all non-excluded files in the directory.

  • Within Directory – We can place a .eslintrc.* file in any directory to specify directory-wide rules. For example, you can add .eslintrc.* to a global testing folder to allow undefined in tests.

  • Within File – We can disable or change rules in a file by using an eslint comment.

  • Disable all rules in file – /* eslint-disable */.
  • Disable specific rules in a file (comma separated) – /* eslint-disable no-console,no-alert */.
  • Tweak a rule in a file – /* eslint no-undef:1 */.

Read more about hierarchical configuration here.

3. Community Created Plugins

The best part about most popular open source tools is if you’re looking for a plugin to do something with ESLint, it probably exists.

Here’s a list of plugins, configs, and other ESLint stuff you can use straight out of the box.

ES6 and JSX Support

With community created plugins, you can lint ES6 and JSX syntax with ease.

4. Add Custom Rules, Parsers, and Reporters

If you can’t find what you’re looking for in the community, you can write your own parser.

The sky is the limit for code standards with this level of customization.

6. Easy Migration

You don’t need to be perfect on your linting journey. If you’re starting out, you can use simple rules and grow from there.

The setup section (below) gives more info on setting up ESLint with an existing project.

7. Great Documentation

ESLint has great documentation. You won’t have any problems finding a rule or answers to common questions.

How to Setup ESLint

Now let’s add ESLint to our project.

Basic Setup

1. Install the ESLint dev dependency.

2. Add a lint script to your package.json file

This will lint all your files. We can use the .eslintignore file or the --ignore-pattern <pattern> flag to ignore paths that we don’t want to lint (eg. node_modules/).

3. Configure ESLint

ESLint comes with a very handy command line tool to get you started. You can launch the tool by running the command below from the project root. ESLint will install any required dependencies for you.

You can go down one of three paths with the setup wizard –

a. Answer Questions About Your Code

This might be the best option if you’re starting a new project. ESLint will ask you a few questions about your project. Then, it will create a configuration file in your preferred format.

b. Use a Popular Styleguide

You can choose from –

  • Airbnb
  • Google
  • Standard

c. Inspect Single or Multiple JavaScript Files

This is a good option if –

  • You have a large project and you don’t want to change your code style on one go. In this case, you would gradually increase the code style requirements.
  • You want to use one developer’s style for the whole team. In this case, you would point the setup wizard to code written by your specified developer.
  • You want to create an ideal code file and enforce those requirements on other files in your project.

This list isn’t all inclusive of course. There are many other cases where using the inspect option is useful.

4. Run It

ESLint will lint all your files and print any errors and warnings in the console.

Configuration File Types

With ESLint, you can choose the kind of configuration file you’d like to use –

  • JSON
  • JavaScript
  • YAML

Note: There are other ways to use ESLint. You can use it as a webpack loader as well. But, we recommend a standalone setup to reduce bundling time.

Our Suggestions on Using ESLint

1. Lint Early and Lint Often

Most people don’t test or lint their code because the process can be overwhelming. You can reduce your future workload by linting often.

I know, I know. Developers are lazy… But that’s why we have automation. You can –

  • add it to your CI flow
  • use a pre-commit hook
  • use it with webpack as a loader
  • or use it any way you like

The goal is to lint your code as often as possible and fix any issues. You need to nip it in the bud.

2. Start Small and Keep Growing

If you’re working with a large codebase and have never used linting, start small. Set up some simple rules and keep adding more as your project grows.

With time, your code quality will get better and linting will not seem overwhelming.

Depending on the size of your project (and team), it might be a good idea to use a preset. You can find presets from large companies such as Google and Airbnb.

3. Use an IDE Plugin

Using an ESLint-support plugin with your IDE feels like magic. Most plugins can lint your code while you’re writing. That means that you can see errors and warnings as you type.

The visual cues in most IDEs make it easy to locate and fix linting errors.

4. Exclude, Don’t Include

We mentioned this in the setup process (above) as well.

It’s much better to point the ESLint binary to the whole directory with ./node_modules/.bin/eslint .. The period (.) means “current directory”.

You can use .eslintignore to ignore paths you don’t want to lint.

The reason we do this is so we don’t forget to lint any new files/folders we add to the project.

Conclusion

Now that you know the advantages of using ESLint, go ahead and use it. Set it up and lint often.

Other readers will appreciate your comments (below). Tell us about how you implemented linting or the challenges you are facing. Don’t hesitate to post your questions below.