.eslintrc.json

{
  "extends": [
    "next",
    "airbnb",
    "airbnb-typescript/base",
    "plugin:import/typescript",
    "plugin:react-hooks/recommended",
    "plugin:unicorn/all",
    "plugin:jsx-a11y/strict",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "plugins": [
    "unicorn",
    "react",
    "import",
    "react-hooks",
    "jsx-a11y",
    "simple-import-sort"
  ],
  "parserOptions": {
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "jsx": true
    },
    "project": [
      "./tsconfig.json"
    ]
  },
  "rules": {
    "react-hooks/exhaustive-deps": "off",
    "class-methods-use-this": "off", // allow private methods as helpers
    "no-restricted-syntax": "off", // allow for...of
    "unicorn/no-array-for-each": "off", // allow forEach
    "unicorn/no-null": "off", // prefer null > undefined
    "unicorn/filename-case": "off", // I use kebab-case but capitalize Components
    "linebreak-style": "off", // allow CRLF
    "unicorn/prefer-at": "off", // allow index acces with array[index]
    "react/prop-types": "off", // only for jsx
    "react/function-component-definition": "off", // allow const Comp:React.FC<Props> = (props) => {}
    "react/react-in-jsx-scope": "off",
    "react/require-default-props": "off",
    "arrow-body-style": "off",
    "unicorn/prevent-abbreviations": "off",
    "unicorn/no-keyword-prefix": "off",
    "unicorn/prefer-spread": "off",
    "unicorn/prefer-logical-operator-over-ternary": "off",
    "@typescript-eslint/no-use-before-define": "off",
    "spaced-comment": "off",
    "simple-import-sort/exports": "warn",
    "react/jsx-props-no-spreading": "off",
    "jsx-a11y/heading-has-content": "off",
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Side effect imports.
          [
            "^\\u0000"
          ],
          // Packages. 'react' related packages come first.
          [
            "^react",
            "^@?\\w"
          ],
          // Parent imports. @/
          [
            "^@/"
          ],
          // Other relative imports. Put same-folder imports and './' last.
          [
            "^\\./(?=.*/)(?!/?$)",
            "^\\.(?!/?$)",
            "^\\./?$"
          ],
          // Style imports. Put modules last.
          [
            "^@?\\w",
            "^.+\\.s?css$"
          ]
        ]
      }
    ],
    "jsx-quotes": [
      "error",
      "prefer-single"
    ],
    // allow JSX inside .TSX
    // https://stackoverflow.com/a/58835704
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [
          ".tsx",
          ".ts"
        ]
      }
    ]
  }
}