.eslintrc.json

{
  "extends": [
    "next/core-web-vitals",
    "prettier",
    "plugin:testing-library/react",
    "plugin:jest-dom/recommended",
    "plugin:react/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "rules": {
    "no-unused-vars": "off",
    "react/react-in-jsx-scope": "off", // Disable the rule that requires importing React when using JSX
    "no-unused-expressions": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "import/no-unresolved": "error",
    "import/named": "error",
    "@typescript-eslint/consistent-type-definitions": ["error", "type"],
    "react/no-unknown-property": ["error", { "ignore": ["jsx"] }],
    "react/jsx-props-no-spreading": [
      "error",
      {
        "html": "enforce",
        "custom": "ignore",
        "exceptions": ["Image"] // Add exceptions for specific components
      }
    ],
    "react/prop-types": "off", // Disable prop-types rule if you are using TypeScript
    "react/jsx-handler-names": [
      "error",
      {
        "eventHandlerPrefix": "handle", // Customize event handler naming convention if needed
        "eventHandlerPropPrefix": "on" // Customize event handler prop prefix if needed
      }
    ],

    "camelcase": [
      "error",
      {
        "allow": ["^data-", "^aria-"]
      }
    ]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}