.eslintrc

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["@typescript-eslint", "prefer-arrow", "simple-import-sort"],
  "extends": [
    "react-app",
    "eslint:recommended",
    "plugin:import/warnings",
    "plugin:import/typescript",

    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended"
    // "plugin:@typescript-eslint/recommended-requiring-type-checking", // @debt enable this + fix the issues in a standalone PR
  ],
  "rules": {
    // @debt uncomment one by one and fix them in separate PRs
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-non-null-assertion": "error",
    "@typescript-eslint/adjacent-overload-signatures": "error",
    "@typescript-eslint/ban-ts-comment": "warn",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-array-constructor": "off",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-empty-interface": "off",
    "@typescript-eslint/no-extra-non-null-assertion": "off",
    "@typescript-eslint/no-extra-semi": "off",
    "@typescript-eslint/no-inferrable-types": "off",
    "@typescript-eslint/no-misused-new": "off",
    "@typescript-eslint/no-namespace": "off",
    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
    "@typescript-eslint/no-this-alias": "off",
    "@typescript-eslint/no-var-requires": "off",
    "@typescript-eslint/prefer-as-const": "off",
    "@typescript-eslint/prefer-namespace-keyword": "off",
    "@typescript-eslint/triple-slash-reference": "off",

    "@typescript-eslint/no-redeclare": "warn",
    "@typescript-eslint/no-use-before-define": "warn",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": "warn",
    "no-case-declarations": "off",
    "no-prototype-builtins": "off",
    // these base rules can report incorrect errors when using TypeScript, see the corresponding @typescript-eslint versions
    "no-redeclare": "off",
    "no-use-before-define": "off",
    "prefer-arrow/prefer-arrow-functions": [
      "warn",
      {
        "disallowPrototype": true,
        "singleReturnOnly": false,
        "classPropertiesAllowed": false
      }
    ],
    "prefer-arrow-callback": ["error", { "allowNamedFunctions": true }],
    "func-style": ["error", "expression", { "allowArrowFunctions": true }],
    "no-restricted-imports": [
      "error",
      {
        "name": "react-redux",
        "importNames": ["useSelector", "useDispatch"],
        "message": "Import typed version from hooks/{useSelector|useDispatch}"
      },
      {
        "name": "react-redux-firebase",
        "importNames": ["useFirestoreConnect"],
        "message": "Import typed version from hooks/useSparkleFirestoreConnect"
      },
      {
        "name": "firebase",
        "message": "Use firebase/app instead"
      },
      {
        "name": "lodash",
        "importNames": ["default"],
        "message": "Avoid importing all of lodash; import only what you need"
      },
      {
        "name": "mixpanel-browser",
        "message": "Import safe version from hooks/useAnalytics instead"
      }
    ],
    "react/prop-types": "off",
    "react/display-name": "warn",
    // @see https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks#advanced-configuration
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "(useAsync)"
      }
    ],
    // "simple-import-sort/imports": "error"
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Node.js builtins. You could also generate this regex if you use a `.js` config.
          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
          [
            "^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)"
          ],
          // Packages. `react` related packages come first.
          ["^react", "^@?\\w"],

          ["secrets"],
          ["settings"],
          // Internal packages.
          ["^(api)(/.*|$)"],
          ["^(store)(/.*|$)"],
          ["^(types)(/.*|$)"],
          ["^(utils)(/.*|$)"],
          ["^(forms)(/.*|$)"],
          ["^(hooks)(/.*|$)"],
          ["^(pages)(/.*|$)"],
          ["^(components/templates)(/.*|$)"],
          ["^(components/organisms)(/.*|$)"],
          ["^(components/molecules)(/.*|$)"],
          ["^(components/atoms)(/.*|$)"],
          // Side effect imports.
          ["^\\u0000"],
          // Parent imports. Put `..` last.
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Other relative imports. Put same-folder imports and `.` last.
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Theme
          ["^(theme)(/.*|$)"],
          // Assets
          ["^(assets)(/.*|$)"],
          // Style imports.
          ["^.+\\.s?css$"]
        ]
      }
    ]
  },
  "globals": {
    "React": true,
    "JSX": true
  }
}