.eslintrc.json

{
  "extends": ["opencollective", "plugin:styled-components-a11y/recommended", "plugin:import/typescript"],
  "ignorePatterns": ["./lib/graphql/types/*"],
  "env": { "jest": true },
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint/eslint-plugin",
    "react-hooks",
    "simple-import-sort",
    "formatjs",
    "styled-components-a11y"
  ],
  "rules": {
    "no-console": "error",
    "no-process-env": "error",
    "require-atomic-updates": "off",
    // Typescript
    "node/no-missing-import": ["error", { "tryExtensions": [".js", ".ts", ".tsx"] }],
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"],
    // -- End of typescript-specific config
    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "react-intl",
            "importNames": ["FormattedHTMLMessage"],
            "message": "FormattedHTMLMessage is not allowed, please rely on the standard FormattedMessage."
          }
        ]
      }
    ],
    "no-restricted-properties": [
      "error",
      {
        "object": "it",
        "property": "only",
        "message": "it.only should only be used for debugging purposes and is not allowed in production code"
      },
      {
        "object": "describe",
        "property": "only",
        "message": "describe.only should only be used for debugging purposes and is not allowed in production code"
      }
    ],
    "react-hooks/rules-of-hooks": ["error"],
    "react/jsx-fragments": ["error", "element"],
    // We can be stricter with these rules
    // because we don't have any occurences anymore
    "react/react-in-jsx-scope": ["error"],
    "react/prop-types": ["off"],
    "react/sort-comp": ["error"],
    "react/no-this-in-sfc": ["error"],
    // simple-import-sort
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Side effect imports.
          ["^\\u0000"],
          // Node.js builtins. You could also generate this regex if you use a `.js` config.
          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
          [
            "^(_http_agent|_http_client|_http_common|_http_incoming|_http_outgoing|_http_server|_stream_duplex|_stream_passthrough|_stream_readable|_stream_transform|_stream_wrap|_stream_writable|_tls_common|_tls_wrap|assert|async_hooks|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|http2|https|inspector|module|net|os|path|perf_hooks|process|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|trace_events|tty|url|util|v8|vm|worker_threads|zlib)(/|$)"
          ],
          // Packages.
          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
          ["^react$", "^prop-types$", "^@?\\w"],
          // Libs
          ["(.*)/lib/", "(.*)/server/", "(.*)/test/"],
          // Components
          ["(.*)/components/"],
          // Parent imports. Put `..` last.
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Other relative imports. Put same-folder imports and `.` last.
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Styles
          ["^.+\\.s?css$"],
          // Images
          ["public/static/images", "^.+\\.svg$", "^.+\\.png$"]
        ]
      }
    ],
    // formatjs
    "formatjs/enforce-default-message": ["error"],
    "formatjs/enforce-plural-rules": ["error"],
    "formatjs/no-multiple-whitespaces": ["error"],
    "formatjs/no-offset": ["error"],
    "formatjs/enforce-placeholders": ["off"],
    "formatjs/no-camel-case": ["off"],
    "formatjs/no-emoji": ["off"],
    "formatjs/no-multiple-plurals": ["off"],

    // styled-components-a11y
    "jsx-a11y/anchor-is-valid": ["off"], // Not playing well with NextJS links
    // This is deprecated and replaced by jsx-a11y/label-has-associated-control;
    // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
    "jsx-a11y/label-has-for": ["off"],
    // The rational behind this is; https://github.com/brendanmorrell/eslint-plugin-styled-components-a11y/issues/18#issuecomment-837229005
    "jsx-a11y/label-has-associated-control": [
      "error",
      {
        "required": {
          "some": ["nesting", "id"]
        }
      }
    ]
  },
  "overrides": [
    {
      "files": ["scripts/*.ts"],
      "rules": {
        "no-console": "off"
      }
    },
    {
      "files": [".jsx", ".jsx", "*.ts", "*.tsx"],
      "processor": "@graphql-eslint/graphql",
      "parserOptions": {
        "schema": "./lib/graphql/schemaV2.graphql"
      }
    },
    {
      "files": ["*.graphql"],
      "parser": "@graphql-eslint/eslint-plugin",
      "plugins": ["@graphql-eslint"],
      "parserOptions": {
        "schema": "./lib/graphql/schemaV2.graphql"
      }
    }
  ]
}