.eslintrc

{
  "root": true,
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "plugins": ["jsx-a11y", "prettier"],
  "rules": {
    "no-param-reassign": [
      "error",
      {
        "props": true,
        "ignorePropertyModificationsFor": ["draft"] // allow reassignment for immer reducers
      }
    ],

    // allow tsx and jsx extensions to have jsx
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".jsx", ".tsx"]
      }
    ],

    // prefer typescript for our typechecking, and https://redux.js.org/introduction/core-concepts for the rest
    "react/no-unused-prop-types": 0,

    // prefer typescript for our typechecking
    "react/prop-types": 0,

    // typescript allows us to spread props more predictably although some options are problematic
    "react/jsx-props-no-spreading": [
      0, // disabled till I can find an alternative in eslint-typescript
      {
        "html": "ignore", // html spread can be problematic so make sure we are using ts for valid props
        "custom": "ignore",
        "explicitSpread": "ignore" // this usage is not very readable/useful
      }
    ],

    // prefer typescript for typechecking
    "react/require-default-props": 0
  },
  "overrides": [
    {
      "files": [
        "**/*.stories.*" // storybook specific rules
      ],
      "rules": {
        // multiple story exports are too common and useful
        "import/no-anonymous-default-export": "off",

        // prefer to create / reuse components in stories quickly vs verbosly
        "react/function-component-definition": [
          0,
          { "unnamedComponents": "arrow-function" }
        ]
      }
    },
    {
      "files": ["**/utils/**", "**/constants/**", "**/helpers/**"],
      "rules": {
        // these modules dirs are typically not going to have a default exports
        "import/prefer-default-export": 0
      }
    }
  ]
}