How to configure ESLint for React Projects ?

In this article, we will see how to configure ESLint for your React Project from scratch. Before getting started you may refer to a previous article on ESLint introduction although it’s not a necessity.
Talking about ESLint it’s a linting tool that finds and many times fixes problems in your JavaScript code, but the question arises is Why use it? My code is running anyway without eslint so what’s great about it? For this consider a situation where you along with your friends/colleagues are working on a group project or it can be your personal project as well while working biases can occur about the proper code syntax or its styling and you will eventually end up focusing on those problems, but why not we have a tool which will do that work for us and we will just focus on problem-solving and building the project, it sounds good right? So let’s start using ESLint.

Installation: Install ESLint in your React Project as a devDependency by running the following command:

npm install -D eslint

Configuration: You can configure ESLint according to your use case. There are two ways two configure ESLint :

1. Configuration Comments: These are JavaScript comments which are embedded into individual files to configure them
2. Configuration File: ESLint will use JavaScript/JSON/YAML file which contain information to configure the entire directory.

In this particular config, we will use JSON format i.e. `.eslintrc.json` to have our configurations, or else you can create the `eslintConfig`  property in `package.json` and write these configurations in that property.
 

.eslintrc.json file in the root of  the directory

Properties in `.eslintrc.json`: 

“extends” and “plugins”: By adding a file name in extends property we can inherit its configuration, whereas “plugin” works as an extension to ESLint which can perform numerous functions.
Inside our `.eslintrc.json` file add extends and plugin property similar to given below:

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

Note that as we have added various plugins we need to first install them so run the following command to install them as devDependencies : 

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

The `import-plugin` will help us identify common problems while importing and exporting; `jsx-a11y` will catch errors regarding accessibility and the `react` plugin is all about code practices used in React, since we are using `eslint-plugin-react` we will need to inform it which version of React we are using so let’s add this in our “settings” property, instead of stating the current React version we will handover this job to settings by using the keyword “detect” so that it will detect the current React version from `package.json`

..},
  "settings": {
    "react": {
      "version": "detect"
    }
}

“rules”: Rules are used for configuring purposes, you can see all the rules that you can use https://eslint.org/docs/rules/. You can set the error level of rules in three different types :

• “off” or 0: This will turn off the rule.
• “warn” or 1: This will turn the rule on as a warning.
• “error” or 2: This will turn on the rule as an error.

Let’s add some rules to our config, you can add any other rules as per your choice from the list of all rules mentioned above.

"rules": {
    "react/prop-types": 0,
    "indent": ["error", 2],
    "linebreak-style": 1,
    "quotes": ["error", "double"]
},

“env” and “parserOptions”: In the “env” property, we will specify what environments we are working in. In parserOptions, we can specify JavaScript options like jsx support or ecma version

"parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
},
"env": {
    "es6": true,
    "browser": true,
    "node": true
}, 

Last but not least, let’s add some commands in our package.json’s “scripts” property to run ESLint

"scripts": {
    "lint": "eslint \"src/**/*.{js,jsx}\"",
    "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}, 

The “lint” command will run ESLint inside every file in the “src/”, even if your “src/” folder contains multiple directories in it, this regex command will go down recursively on them and run ESLint; If some problems are reported by ESLint which are auto-fixable, then “lint:fix” command will do those auto-fixes.

Step to run lint: Open the terminal and type the following command.

npm run lint

Output:

Running the lint command

Some errors are auto-fixed by running the lint:fix command