React Code Quality Rules

The following rules are used to maintain a high standard of code quality for React projects.

react/jsx-filename-extension

This rule requires that all React component files should have the file extension .jsx.

react/prop-types

This rule requires that all React components declare the type of their props. If a prop is not declared, this rule will skip it.

jsx-a11y/label-has-for

This rule requires that all label elements in a React component should have a for attribute. The rule specifies that some form of nesting or an id is required, and that child elements cannot be used as the target of the for attribute.

import/no-unresolved

This rule ensures that all imports are resolved properly, but it allows files imported using the @/ prefix to be ignored.

complexity

This rule sets a maximum complexity threshold of 10. This means that a code block should not have too many nested statements or conditions, as it can become hard to understand and maintain.

react/sort-comp

This rule requires that the methods and variables in a React component are sorted in a specific order. The order is defined as:

Static methods Instance variables Lifecycle methods Event handlers (methods starting with on) Getters Setters Other instance methods Everything else Rendering

react-hooks/rules-of-hooks

This rule ensures that the React Hooks API is used correctly.

react-hooks/exhaustive-deps

This rule requires that all dependencies for a React Hook are declared. If a dependency is missing, this rule will produce a warning.

Implementing this rules in your repo

1. Install all this npm packages by the following code:

   npm install eslint-plugin-airbnb@latest eslint-plugin-import@latest eslint-plugin-jsx-ally@latest eslint-plugin-react-hooks@latest eslint-plugin-stylumia-rule@latest  --save-dev

2. In your .eslintrc.json file

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "stylumia-rule"],
  "extends": ["plugin:stylumia-rule/recommended"],
  "rules": {
    "stylumia-rule/comment-before-func": "error", // you add to add all custom rule like this
    "import/no-unresolved": "off" // customize the existance the code <package-name/<rule-name>>: "error | warn | off"
  }
}