How To Add ESLint In A React Project

Adding Linting rules to a React project is must when it comes to improving code quality, making code more consistent and avoiding bugs.

This article was first published on MyDevPa.ge blog, check it out for helpful tutorials for Software Developers.

There is a popular open-source JavaScript linting tool called ESLint, which is used for automatically detecting incorrect patterns found in JavaScript code.

Here’s a step-by-step method to add linting rules to React projects:

Installing ESLint

First, we need to install ESLint in our React project as a devDependencies because we don’t need them in production.

To Install, we will use the command below.

npm i -D eslint

Initialize ESLint

Next, we will have to initialize ESLint configuration, by adding a configuration file .eslintrc.json in our project’s root folder.

Here is a sample example configuration.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Inside our .eslintrc.json add extends and plugin property.

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

As we have added various plugins we need to first install them as devDependencies by running the given command below.

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

Adding Rules

Rules are used for configuration purposes. We can set the error level of rules in three different ways.

• 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 the rule on as an error.

🚨 JavaScript Strings cheatsheets all methods

Let’s add some rules to our configuration file, we can add any other rules as per our choice from the list of all rules mentioned above.

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

Adding Scripts for Linting

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

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

Congrats, now if you try to run either of these commands it should do the trick!

After this you can continue to customize the linting rules to your liking to ensure code consistency and quality.

Visit MyDevPa.ge to create your free portfolio website in a minute for free!