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!