What is linting? What are linting tools? How do you set up ESLint in a ReactJS Project?

Fixing bugs is something software developers do almost every single day. It would be so much easier if we could identify them before execution. This is where linting comes into play.

What is Linting? and What are Linting Tools?

Linting is the process of identifying programming errors, performance, stylistic errors, and suspicious constructs without executing the source code.

Programming errors:

In programming languages like Java, you can identify and fix programming errors at the compile time. Is there a way to fix it before execution??? And how to fix them in interpreted programming language like JavaScript that doesn’t have a compile-time???

Performance:

When programming a software developer should follow the best practices that would increase the performance of the source code. But beginners don’t have much knowledge about best practices and even skilled programmers could miss a better approach to increasing performance. How to make sure the code is optimized???

Stylistic Errors:

Multiple people make commits to the same GitHub repository. Now imagine one person having a CRLF line break and another having an LF line break. After each pull request, each person has to spend time fixing the stylistic errors. Is there a way to have standardization throughout the code base???

Suspicious Constructs:

Securing the code is a primary duty of a software developer but since they are humans they could miss a potential security issue or two. How to make sure all the potential security issues are dealt with??

Linting tools

are the solution for all the above-mentioned problems. Linting tools are Static Analysis Tools. Static Analysis Tools scrutinize the code before running it and flag potential errors and bugs.

There are multiple linting tools out there that can be used with a JS project. In my opinion, the best one is ESlint.

ESLint is completely plug-able, every single rule is a plugin and we can add more rules at run-time. It is the most recent out of the three libraries. It is designed to be easily extensible, comes with a large number of custom rules, and it’s easy to install more rules in the form of plugins. It gives concise output, and also includes the rule name by default so you always know which rules are causing the error messages.

Pros

Completely configurable — we can configure/enable/disable any rule

Extensible — We can create our own rules

Has a rich set of existing rules as per best practices

Completely supports ES6 and React

Easy to understand output with rule names

Rules are very well documented with examples

Configured through a configuration file (json/yaml/js) — Easy to share configuration across team members

Easy integration with IDE

Cons

Needs initial configuration to get started

A bit slow

How do you set up ESLint in a ReactJS Project?

First, let’s create a react app called eslint-tester

npx create-react-app eslint-tester
cd eslint-tester

Now let’s install and configure ESLint

npm init @eslint/config

After running this command it would ask you a series of questions. Please note that I am selecting the options that suit my needs.

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

Since I want to check syntax, find problems, and enforce code style, I am going to pick the last option.

? What type of modules does your project use? … 
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? … 
❯ React
  Vue.js
  None of these

? Does your project use TypeScript? › No / Yes

Since I prefer JavaScript modules and this is a ReactJS project without TypeScript these are the options I picked.

? Where does your code run? 
✔ Browser
✔ Node

My project is a web app hence I picked Browser here.

? How would you like to define a style for your project? … 
❯ Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? … 
❯ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

There are four popular style guides available for eslint. They are Airbnb, Google, Standard, and XO. Since we are picking the Airbnb style guide. To get a better understanding please look into the below links.

https://npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-eslint-config-recommended-vs-eslint-config-standard

https://betterprogramming.pub/comparing-the-top-three-style-guides-and-setting-them-up-with-eslint-98ea0d2fc5b7

https://devstephen.medium.com/style-guides-for-linting-ecmascript-2015-eslint-common-google-airbnb-6c25fd3dff0

? What format do you want your config file to be in? … 
  JavaScript
  YAML
❯ JSON

Now you have to pick the format you want your config file to be in.

ESLint supports configuration files in several formats:

JavaScript — use .eslintrc.js and export an object containing your configuration.

JavaScript (ESM) — use .eslintrc.cjs when running ESLint in JavaScript packages that specify "type":"module" in their package.json. Note that ESLint does not support ESM configuration at this time.

YAML — use .eslintrc.yaml or .eslintrc.yml to define the configuration structure.

JSON — use .eslintrc.json to define the configuration structure. ESLint’s JSON files also allow JavaScript-style comments.

package.json — create an eslintConfig property in your package.json file and define your configuration there.

If there are multiple configuration files in the same directory, ESLint only uses one. The priority order is as follows:

.eslintrc.js

.eslintrc.cjs

.eslintrc.yaml

.eslintrc.yml

.eslintrc.json

package.json

Checking peerDependencies of eslint-config-google@latest
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-google@latest eslint@>=5.16.0
✔ Would you like to install them now? · No / Yes
✔ Which package manager do you want to use? · npm

Once they check for peer dependencies of eslint-config-google@latest they will ask the above questions. For the package manager, you can select npm, yarn, or pnpm.

Now it will install and create the config file in your chosen format.

{
    "env": {
        "browser": true,
        "es2021": true,
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {}
}

If you go into your App.test.js file you will see eslint errors.

This lint error occurs when undeclared variables are used.

Please note that Jest is a JavaScript testing framework that comes built-in with ReactJS. For further reading on Jest please click on the below link.
https://jestjs.io/

To fix the issue we are going to add the jest: true inside env in .eslintrc.js

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {}
}

And this is how I added ESLint to my project.

You can configure your .eslintrc.js to meet your needs. Please refer to the official documentation when configuring ESLint.

Hope you learned something new.

Happy Coding :)