.eslintrc.json

{
  "extends": ["prettier"],
  "overrides": [
    {
      "files": ["**/*.{mjs,ts,tsx}"],
      "extends": ["eslint:recommended"],
      "env": { "jest": true, "es6": true }
    },
    {
      "files": ["**/*.{mjs,ts,tsx,mdx}"],
      "extends": [
        "next",
        "next/core-web-vitals",
        "plugin:storybook/recommended"
      ]
    },
    {
      "files": ["**/*.ts?(x)"],
      "plugins": ["@typescript-eslint", "no-relative-import-paths"],
      "extends": ["plugin:@typescript-eslint/recommended"],
      "parser": "@typescript-eslint/parser",
      "rules": {
        "@typescript-eslint/consistent-type-imports": "error",
        "no-relative-import-paths/no-relative-import-paths": [
          "warn",
          { "allowSameFolder": true, "prefix": "@" }
        ]
      }
    },
    {
      "files": ["**/*.md?(x)"],
      "extends": ["plugin:mdx/recommended"],
      "rules": { "react/jsx-no-undef": "off" }
    },
    {
      "files": ["**/*.{mdx,tsx}"],
      "rules": {
        "react/function-component-definition": [
          "error",
          {
            "namedComponents": "arrow-function",
            "unnamedComponents": "arrow-function"
          }
        ],
        "no-restricted-syntax": [
          "error",
          {
            "selector": "ImportDeclaration[source.value='react'][specifiers.0.type='ImportDefaultSpecifier']",
            "message": "Default React import not allowed since we use the TypeScript jsx-transform. If you need a global type that collides with a React named export (such as `MouseEvent`), try using `globalThis.MouseHandler`"
          },
          {
            "selector": "ImportDeclaration[source.value='react'] :matches(ImportNamespaceSpecifier)",
            "message": "Named * React import is not allowed. Please import what you need from React with Named Imports"
          }
        ],
        "@typescript-eslint/consistent-type-definitions": ["error", "type"]
      }
    }
  ]
}