.eslintrc.json

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "plugins": ["@typescript-eslint"],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "react/jsx-filename-extension": [
      "warn",
      { "extensions": [".js", ".jsx", ".tsx"] }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 80,
        "tabWidth": 2,
        "comments": 80,
        "ignoreComments": false,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ],
    "no-plusplus": ["warn", { "allowForLoopAfterthoughts": true }],
    "prettier/prettier": "warn",
    "react/require-default-props": "off",
    "no-await-in-loop": "off",
    "camelcase": "off",
    "import/no-cycle": "off",
    "class-methods-use-this": "off",
    "no-nested-ternary": "off",
    "no-param-reassign": "off",
    "no-restricted-syntax": "off",
    "no-alert": "off",
    "no-bitwise": "off",
    "consistent-return": "off",
    "react/prop-types": "off",
    "react/no-array-index-key": "off",
    "react/jsx-props-no-spreading": "off",
    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    // Disable the normal `dot-notation` in favor of the one in `@typescript-eslint`.
    // From https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/dot-notation.md
    "dot-notation": "off",
    "@typescript-eslint/dot-notation": ["error"],
    // Disable the normal `no-use-before-define` in favor of the one in `@typescript-eslint`.
    // From https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": [
      "off",
      {
        "typedefs": false,
        "functions": false
      }
    ],
    "@typescript-eslint/no-unused-vars": ["warn"],
    // Configure import order
    "import/order": [
      "warn",
      {
        "newlines-between": "always",
        "groups": [
          ["builtin", "external"],
          ["parent", "sibling", "index"]
        ],
        "pathGroupsExcludedImportTypes": [],
        "warnOnUnassignedImports": true,
        "pathGroups": [
          {
            "pattern": "*.{css,scss}",
            "group": "sibling",
            "position": "after",
            "patternOptions": { "matchBase": true }
          }
        ]
      }
    ],
    // Disable false positives for render props
    "react/no-unstable-nested-components": ["error", { "allowAsProps": true }],
    // Allow code like `<>{children}</>` to convert React.ReactNode => React.ReactElement
    "react/jsx-no-useless-fragment": ["error", { "allowExpressions": true }]
  },
  "overrides": [
    {
      // enable the rule specifically for TypeScript files
      "files": ["*.ts", "*.tsx"],
      "rules": {
        "@typescript-eslint/explicit-function-return-type": ["error"]
      }
    },
    {
      "files": ["*.test.tsx", "*.test.ts"],
      "plugins": ["jest"],
      "rules": {
        // Disable unbound-method & replace with jest version
        // https://github.com/jest-community/eslint-plugin-jest/blob/main/docs/rules/unbound-method.md
        "@typescript-eslint/unbound-method": "off",
        "jest/unbound-method": "error",
        // Disable import/no-extraneous-dependencies for dev dependencies in test files
        // -- some test dependencies are be dev dependencies
        "import/no-extraneous-dependencies": [
          "error",
          {
            "devDependencies": true
          }
        ],
        // This rule adds too much noise when using `expect.*` matchers in an object field
        // (since they return `any`), so just disable it
        "@typescript-eslint/no-unsafe-assignment": "off"
      }
    }
  ]
}