A Complete Guide to ESLint

JavaScript is an easy language to work but while working on a complex problem, the format, and structure of the code are often overlooked. To easily deal with such problems, we use linting tools. ESLint is one of the most popular linting tools that we will be discussing in this article. 

Before discussing ESLint further, we must understand the concept of code linting and why it’s important in JavaScript. 

Suppose you are checking someone’s project on GitHub, what’s the first thing that you notice? 

Styling? Structure? Formatting?

Well-formatted code is more readable and leaves a good impression. If you open a project’s code and it’s chaotic, then you start questioning the functionality of the code before running it. Such a project will have difficulty attracting quality contributors, which is a huge risk in itself. That’s where the linting tools come in. They help us implement coding best practices in our projects.

In this article, we will discuss:

• What is ESLint
• Installation and configuration of ESLint
• ESLint features
• ESLint performance and ease of use
• Pros and cons of ESLint
• ESLint alternatives

What is ESLint?

ESLint is a tool that can identify and report problematic patterns in your JavaScript code. With ESLint, you can make your code more consistent, avoid bugs with the added functionality of making the code more elegant. Most importantly, you can create your own custom rules for the project. 

How to Install and Configure ESLint

There are two ways to install and configure ESLint, locally and globally. Installing ESLint in the working directory (local) is the recommended setting. 

Prerequisite:

Before installing ESLint on your editor, you must have node.js pre-installed. You can download node.js from the following link (https://nodejs.org/en/download/) and install it. 

To check node.js version installed in your computer:

node -v

Install ESLint Locally

The first step in ESLint installation is to set up an ESLint config file but that requires a package.json file. To create a package.json file: 

npm –init

Run the following command to install ESLint in the working directory with npm or yarn:

#for npm

npm install eslint –save-dev

# for yarn

yarn add eslint –dev

Now, you can see the eslint package under dev-dependencies in the package.json file. 

Set up an eslint configuration file:

npx eslint –init

To run eslint in any file or directory (once configured):

npx eslint filename.js

Install ESLint Globally

To install ESLint globally, simply add a -g flag to the install command:

npm install -g eslint 

According to the official ESLint installation and usage guide, installing ESLint globally is not recommended. You still need every plugin and shareable config files to be installed locally. 

Configuration

ESLint is highly configurable. All the rules are pluggable and you can turn them on and off at any time. It allows high flexibility such that you can either run the basic syntax validation, turn off every rule, or work with bundled rules and custom rules.

We can configure ESLint in two ways:

• Configuration comments: make use of JavaScript comments to embed configuration information directly into the file
• Configuration files: make use of json, js, or yml file to specify configuration information to the entire working directory. 

We will be using the configuration file (.eslintrc.js) in this article. 

After setting up the eslint package, we will have a .eslintrc.{js, json, yml} file in your working directory. In my VSCode editor, the .eslintrc file looks like this:

Configuring Rules

ESLint comes with a large set of rules, you can modify those rules and even add your own custom rules. Rules can be created in the .eslintrc file under rules (See the image below).

We can adjust the rule settings to our convenience. Overall, there are three settings available for rules in ESLint:

• Turn off the rule: “off” or 0
• Turn the rules as warnings: “warn” or 1
• Turn the rules as errors: “error” or 2 

The full set of rules and their configuration can be accessed at (https://ESLint.org/docs/rules/).   

ESLint Features

ESLint offers a variety of features that makes our lives as a developer easier. Here, we’ll be discussing the three features that make ESLint stand out from the crowd.

Implementing Coding Best Practices

ESLint allows developers to implement coding best practices. The most basic feature of ESLint which helps us beautify and properly format the code. 

For example, using a semicolon (;) is not necessary if we have a line break (\n) but it is a best practice as it makes the code more readable and less prone to errors in the long run. 

Find Bugs in the code:

In JavaScript, we execute the code to find errors and fix them. With ESLint, developers can find errors in the code before executing it, which makes fixing errors faster. 

It helps with finding (certain) bugs such as:

• Variable scoping 
• Assignment to an undefined variable

Create Linting Rules

The major feature of ESLint is to allow the developers to create their own linting rules. All linting rules in eslint are pluggable and written like any other plugin rule. We have discussed the rules in detail in the configurations section. 

Performance 

ESLint is written in Node.js to provide a fast run-time environment and easy installation via npm or yarn. It’s popular among JavaScript developers due to its features, performance, and reliability. It makes debugging easier and faster. 

Ease of Use

ESLint is very easy to use. You can install, configure, and run it on nearly all code editors. Configuring ESLint can be a bit of a challenge for first-time users. Especially when they are defining custom rules. Other than that, ESLint is an easy to use software. 

Pros of ESLint

Let’s discuss the pros of using ESLint:

• The ruleset is pluggable and highly flexible 
• It offers good ES6 support
• IDE integration like we did with the VSCode
• It’s completely free of cost
• Easy to use and shows clear errors and warnings

Cons of ESLint 

ESLint is a big hit among developers but nothing is perfect. A few cons of ESLint are:

• It requires certain configuration before use
• Documentation can be a little vague to new users

ESLint Alternatives

JavaScript is a dynamic and loosely-typed language. There are a lot of linting tools available in the market. 

A few alternatives to ESLint are:

• JSLint
• JSHint
• TSLint
• Prettier
• JSCS

Key Takeaways

ESLint is an excellent choice if you’re looking for a formatter and code checker in one software. It’s easy to install and use with a lot of great features but the configuration can be a bit of a challenge. 

All in all, it’s an excellent and quite popular linting tool. For a consistent and well-formatted code, be sure to give ESLint a try! 

Tags: code quality, eslint, eslint alternatives, JavaScript, linting

Categorised in: code quality

This post was written by Nearly Done