How to Add ESLint to an Reactjs Application

Adding ESLint to a React application helps ensure your code follows consistent style guidelines and catches common coding errors.

Here’s a step-by-step guide to add ESLint to your React application.

Step 1. Install ESLint and Plugins

1. Open your terminal.
2. Navigate to the root directory of your React application.
3. Run the following command to install ESLint and some useful plugins.

npm install eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import --save-dev

Step 2. Initialize ESLint

Run the following command to create an ESLint configuration file.

npx eslint --init

You will be prompted to answer several questions. Here is a recommended setup for a React project.

• How would you like to use ESLint?: To check syntax, find problems, and enforce code style
• What type of modules does your project use?: JavaScript modules (import/export)
• Which framework does your project use?: React
• Does your project use TypeScript?: No (select "Yes" if your project uses TypeScript)
• Where does your code run?: Browser
• How would you like to define a style for your project?: Use a popular style guide
• Which style guide do you want to follow?: Airbnb (or choose another one you prefer)
• What format do you want your config file to be in?: JSON

This command will create a .eslintrc.json file in your project root.

Step 3. Configure ESLint

You might need to tweak the generated .eslintrc.json to suit your needs. A typical ESLint configuration for a React project might look like this.

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended",
    "airbnb"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

Step 4. Add Scripts to package.json

To easily run ESLint, add the following script to your package.json.

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

This script will run ESLint on all JavaScript and JSX files in your src directory.

Step 5. Run ESLint

You can now run ESLint using the following command.

npm run lint

This will light your project and display any issues in the terminal.

Optional. Integrate with Your Code Editor

For a smoother development experience, you can integrate ESLint with your code editor. Most popular editors, like VSCode, have ESLint plugins that provide real-time linting feedback.

For VSCode

1. Install the ESLint extension from the marketplace.
2. Make sure you have the following settings in your settings.json.

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}

This will automatically fix linting issues when you save your files.

Conclusion

By following these steps, you’ve added ESLint to your React project, helping to maintain code quality and consistency. Adjust the .eslintrc.json file and ESLint rules as needed to fit your specific coding standards and requirements.