Add ESLint To 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.

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:

🚨 For more tutorials visit MyDevPage

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.

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.

If you're a Junior Software Engineer make sure you check out this article Junior to Senior Software Engineer: Helpful Tips