.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "airbnb",
    "next/core-web-vitals",
    "next",
    "prettier"
  ],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "extends": ["plugin:@typescript-eslint/recommended", "airbnb-typescript"],
      "plugins": ["@typescript-eslint"],
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": "./tsconfig.json"
      },
      "rules": {
        "@typescript-eslint/semi": [2, "always"],
        // Use semicolon as member delimiter for interfaces and type
        "@typescript-eslint/member-delimiter-style": 2
      }
    }
  ],
  "plugins": ["react", "react-hooks"],
  "rules": {
    // Checks rules of Hooks
    "react-hooks/rules-of-hooks": "error",
    // Checks rules of Hooks
    "react-hooks/exhaustive-deps": "warn",
    // https://stackoverflow.com/questions/69928061/struggling-with-typescript-react-eslint-and-simple-arrow-functions-components
    "react/function-component-definition": [
      2,
      {
        "namedComponents": ["function-declaration", "arrow-function"]
      }
    ],
    // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/anchor-is-valid.md#case-i-use-nextjs-and-im-getting-this-error-inside-of-links
    "jsx-a11y/anchor-is-valid": 0,
    // airbnb config configures stricter rules, change assert to "either".
    // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/718
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "assert": "either"
      }
    ],
    // Since we do not use prop-types
    "react/require-default-props": 0,
    "semi": [2, "never"]
  }
}