.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier", "simple-import-sort"],
  "rules": {
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "prettier/prettier": ["error"],
    "react/react-in-jsx-scope": "off",
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Packages `react` related packages come first.
          ["^react", "^@?\\w"],
          // Mui.
          ["^(@mui)(/.*|$)"],
          // api.
          ["^(@api)(/.*|$)"],
          // types.
          ["^(@types)(/.*|$)"],
          // utils.
          ["^(@utils)(/.*|$)"],
          // hooks.
          ["^(@hooks)(/.*|$)"],
          // context.
          ["^(@context)(/.*|$)"],
          // Constants.
          ["^(@constants)(/.*|$)"],
          // Internal Components.
          ["^(@components)(/.*|$)"],
          // layouts.
          ["^(@layouts)(/.*|$)"],
          // pages.
          ["^(@pages)(/.*|$)"],
          // images.
          ["^(@images)(/.*|$)"],
          // Side effect imports.
          ["^\\u0000"],
          // Parent imports. Put `..` last.
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Other relative imports. Put same-folder imports and `.` last.
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Style imports.
          ["^.+\\.?(css)$"]
        ]
      }
    ],
    "simple-import-sort/exports": "error",
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["@mui/*/*/*", "!@mui/material/test-utils/*"]
      }
    ]
  }
}