.eslintrc.json

{
  "root": true,
  "extends": [
    "eslint:recommended", // Eslint recommended configuration by eslint.
    "plugin:import/recommended", // Linting of ES2015+ import/export syntax.
    "plugin:react/recommended", // Recommended react linting configs.
    "plugin:react-hooks/recommended", // Recommended react hooks linting configs.
    "plugin:jsx-a11y/recommended", // Turns on a11y rules for JSX.
    "plugin:@typescript-eslint/recommended", // Turns on rules from TypeScript-specific plugin.
    "prettier" // Turns off all rules that are unnecessary or might conflict with Prettier.
  ],
  "plugins": [
    "react",
    "react-hooks",
    "jsx-a11y",
    "@typescript-eslint",
    "import",
    "simple-import-sort" // Plugin for sorting imports in file.
  ],
  "rules": {
    "react/prop-types": "off",
    "react/react-in-jsx-scope": "off",
    "import/first": "error",
    "import/newline-after-import": "error",
    "import/no-duplicates": "error",
    "import/no-named-as-default-member": "off",
    "react/jsx-sort-props": [
      "warn",
      {
        "callbacksLast": true,
        "shorthandFirst": true,
        "ignoreCase": true,
        "reservedFirst": true,
        "noSortAlphabetically": true
      }
    ],
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Things that start with a letter (or digit or underscore), or `@` followed by a letter.
          // Packages. `react` related packages come first.
          ["^react", "^@?\\w"],
          // Absolute imports and other imports such as Vue-style `@/foo`.
          // Anything that does not start with a dot.
          ["^[^.@]"],
          ["^@"],
          ["^\\x00?[^.].*\\.css$"],
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          ["\\.s?css$"]
        ]
      }
    ],
    "simple-import-sort/exports": "error"
  },
  "env": {
    "es6": true, // enable ES2015 features.
    "browser": true, // enable use of global browser variables like `windows`.
    "node": true // enable use of global node variables like `process`.
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser", // Allows Eslint to understand TypeScript syntax.
  "parserOptions": {
    "project": "./tsconfig.json", // Specify where to find the root tsconfig file of your project.
    "ecmaVersion": 2021, // ECMAScript version supported in the project.
    "sourceType": "module", // set to `module` because we ue ECMAScript modules.
    "ecmaFeatures": {
      "jsx": true // enable jsx for React.
    }
  },
  "settings": {
    "react": {
      "version": "detect" // auto-detect React version from package.json.
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"] // use typescript-eslint parser for .ts|tsx files.
    },
    "import/resolver": {
      "typescript": {
        "projectConfig": "./tsconfig.json",
        "alwaysTryTypes": true // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`.
      }
    }
  },
  "overrides": [
    {
      "files": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[jt]s?(x)"
      ], // Override config for same files pattern as jest `testMatch` default value
      "extends": [
        "plugin:jest-dom/recommended",
        "plugin:testing-library/react"
      ],
      "plugins": ["jest-dom", "testing-library"],
      "rules": {
        "testing-library/await-async-query": "error",
        "testing-library/no-await-sync-query": "error",
        "testing-library/no-debugging-utils": "warn",
        "testing-library/no-dom-import": "off"
      }
    }
  ]
}