How to set up ESLint for React Projects?

ESLint it’s a linting tool that finds and many times fixes problems in your JavaScript code. So, in this article, we will see how to set up ESLint for React Projects.

How to set up ESLint for React Projects?

The first question that will arrive in your mind is why to use ESLint. Let’s say your code is running anyway without ESLint so what’s great about it? While working on project in-group biases can occur about the proper code syntax or its styling. So,  you will eventually end up focusing on those problems. But we have a tool that will do that work and you can just focus on problem-solving and building the project.

Installation: Install ESLint in your React Project as a dev Dependency 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 :

• Configuration Comments: These are JavaScript comments which are embedded into individual files to configure them
• 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.

Properties in `.eslintrc.json`: 

1) “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 ‘slint-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"
}
}

2) “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"]
},

3) “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
},

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.

Conclusion:

So, in this article, we have been through how to set up ESLint for React Projects. Also, feel free to comment with your suggestions and feedback on the post. Moreover, at BOSC Tech Labs, we have a team of highly experienced React JS developers. They can assist you in developing your customized web app. So contact us to hire experienced ReactJS developers.