.eslintrc.json

{
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "es6": true
  },
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": ["src"],
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "overrides": [
    {
      "files": [
        "**/*.test.js",
        "**/*.test.jsx"
      ],
      "env": {
        "jest": true
      }
    }
  ],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier"
  ],
  "rules": {
    // Disabled default rules
    "no-plusplus": "off",
    "no-continue": "off",
    "react/jsx-props-no-spreading": "off",
    "react/destructuring-assignment": "off",
    "react/prop-types": "off", // TODO: on when we add typescript

    // customized rules
    "no-param-reassign": [
      "error", {
        "props": true,
        "ignorePropertyModificationsFor": ["state"]
      }
    ],
    "no-unused-vars": ["error", { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }],
    "no-use-before-define": ["error", {
      "functions": false,
      "variables": false
    }],
    "react/no-unknown-property": ["error", { "ignore": ["initial", "animate", "exit"] }], // TODO: Replace framer-motion with css animate
    "react/jsx-filename-extension": [1, { "allow": "always" }], // TODO: as-needed
    "jsx-a11y/label-has-associated-control": ["error", { "assert": "either" } ]
  }
}