.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "airbnb",
    "airbnb-typescript",
    "next/core-web-vitals",
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    // 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,
    // Use semicolon as member delimiter for interfaces and type
    "@typescript-eslint/member-delimiter-style": 2,
    "@typescript-eslint/semi": 0,
    "semi": [
      2,
      "never"
    ]
  }
}