.eslintrc

{
  "env": {
    "browser": true,
    "node": true,
    "amd": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "airbnb",
    "airbnb/hooks",
    "plugin:prettier/recommended"
  ],
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    // TODO proper check for custom babel & plugins config
    // Currently when a babelrc is added to the project, it will override our babelOptions
    "babelOptions": {
      "presets": ["babel-preset-gatsby"]
    },
    "requireConfigFile": false
  },
  "plugins": ["react"],
  "ignorePatterns": ["**/*.min*"],
  "settings": {
    "react": {
      "version": "detect" // React version. "detect" automatically picks the version you have installed.
      // You can also use "16.0", "16.3", etc, if you want to override the detected value.
      // It will default to "latest" and warn if missing, and to "detect" in the future
    },
    "formComponents": [
      // Components used as alternatives to <form> for forms, eg. <Form endpoint={ url } />
      "CustomForm",
      { "name": "Form", "formAttribute": "endpoint" }
    ],
    "linkComponents": [
      // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
      "Hyperlink",
      { "name": "Link", "linkAttribute": "to" }
    ]
  },
  "globals": {
    "__PATH_PREFIX__": true,
    "__BASE_PATH__": true, // this will rarely, if ever, be used by consumers,
    "videojs": true
  },
  "rules": {
    "react/prop-types": "off",
    // New versions of react use a special jsx runtime that remove the requirement
    // for having react in scope for jsx. Once the jsx runtime is backported to all
    // versions of react we can make this always be "off".
    // I would also assume that eslint-config-react-app will switch their flag to "off"
    // when jsx runtime is stable in all common versions of React.
    "react/react-in-jsx-scope": "error",
    "import/no-webpack-loader-syntax": [0],
    "react/jsx-pascal-case": [
      "warn",
      {
        "allowNamespace": true
      }
    ],
    // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/tree/master/docs/rules
    // "jsx-a11y/accessible-emoji": "warn", Deprecated
    "jsx-a11y/alt-text": "warn",
    "jsx-a11y/anchor-has-content": "warn",
    "jsx-a11y/anchor-is-valid": "warn",
    "jsx-a11y/aria-activedescendant-has-tabindex": "warn",
    "jsx-a11y/aria-props": "warn",
    "jsx-a11y/aria-proptypes": "warn",
    "jsx-a11y/aria-role": "warn",
    "jsx-a11y/aria-unsupported-elements": "warn",
    "jsx-a11y/autocomplete-valid": [
      "warn",
      {
        "inputComponents": []
      }
    ],
    "jsx-a11y/click-events-have-key-events": "warn",
    "jsx-a11y/control-has-associated-label": [
      "warn",
      {
        "ignoreElements": [
          "audio",
          "canvas",
          "embed",
          "input",
          "textarea",
          "tr",
          "video"
        ],
        "ignoreRoles": [
          "grid",
          "listbox",
          "menu",
          "menubar",
          "radiogroup",
          "row",
          "tablist",
          "toolbar",
          "tree",
          "treegrid"
        ],
        "includeRoles": ["alert", "dialog"]
      }
    ],
    "jsx-a11y/heading-has-content": "warn",
    "jsx-a11y/html-has-lang": "warn",
    "jsx-a11y/iframe-has-title": "warn",
    "jsx-a11y/img-redundant-alt": "warn",
    "jsx-a11y/interactive-supports-focus": [
      "warn",
      {
        "tabbable": [
          "button",
          "checkbox",
          "link",
          "progressbar",
          "searchbox",
          "slider",
          "spinbutton",
          "switch",
          "textbox"
        ]
      }
    ],
    // "jsx-a11y/label-has-for": "warn", was deprecated and replaced with jsx-a11y/has-associated-control in v6.1.0
    "jsx-a11y/label-has-associated-control": "warn",
    "jsx-a11y/lang": "warn",
    "jsx-a11y/media-has-caption": "warn",
    "jsx-a11y/mouse-events-have-key-events": "warn",
    "jsx-a11y/no-access-key": "warn",
    "jsx-a11y/no-autofocus": "warn",
    "jsx-a11y/no-distracting-elements": "warn",
    "jsx-a11y/no-interactive-element-to-noninteractive-role": "warn",
    "jsx-a11y/no-noninteractive-element-interactions": [
      "warn",
      {
        "body": ["onError", "onLoad"],
        "iframe": ["onError", "onLoad"],
        "img": ["onError", "onLoad"]
      }
    ],
    "jsx-a11y/no-noninteractive-element-to-interactive-role": "warn",
    "jsx-a11y/no-noninteractive-tabindex": "warn",
    // "jsx-a11y/no-onchange": "warn", Deprecated
    "jsx-a11y/no-redundant-roles": "warn",
    "jsx-a11y/no-static-element-interactions": "warn",
    "jsx-a11y/role-has-required-aria-props": "warn",
    "jsx-a11y/role-supports-aria-props": "warn",
    "jsx-a11y/scope": "warn",
    "jsx-a11y/tabindex-no-positive": "warn",
    "import/extensions": "off",
    "no-underscore-dangle": "off",
    "no-restricted-exports": "off",
    "no-restricted-syntax": "off",
    "react/jsx-filename-extension": "off",
    "no-shadow": "warn",
    "spaced-comment": "warn",
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],

    // Disabled until all the occurrences are fixed in the code
    "react/jsx-props-no-spreading": "off",
    "react/no-array-index-key": "off"
  }
}