reactjs - How to catch react errors like use className instead of class or key missing for a loop while linting without ejecting cra

Question

How to catch react errors like use className instead of class or key missing for a loop while linting without ejecting cra.

It's better to catch these errors in the lint itself as you usually don't see them unless the component itself is loaded and control these checking via pre-commit hooks like husky.

Answer 1

Package eslint-plugin-react-hooks is usefull to trap such error / warning.

yarn add eslint-plugin-react -D

Edit your package.json to enable the plugin and you can turn off, error, warn the rules which you prefer.

"eslintConfig": {
    "plugins": [
      "react"
    ],
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:react/recommended"
    ],
    "rules": {
      "eqeqeq": "off",
      "no-useless-escape": "off",
      "jsx-a11y/alt-text": "off",
      "react/prop-types": "off",
      "react/display-name": "off",
      "react-hooks/exhaustive-deps": "off",
      "react/no-unknown-property": "warn",
      "react/jsx-key": "warn"
    }
  }