eslint import/order react typescript

Question

I want to configure eslint import/order to a custom configuration, but I cannot make it work in react typescript files.

Here is my rule:

"import/order":[
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups":[{
          "pattern": "react",
          "group": "external",
          "position": "before"
        }],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive":true
        }
      }
    ]

.eslintrc.json file:

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 6,
    "project": "./tsconfig.json"
  },
  "env": {
    "browser": true,
    "jest": true,
    "es6": true
  },
  "extends": [
    "airbnb-typescript",
    "airbnb/hooks",
    "prettier",
    "prettier/react",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jest/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "react",
    "react-hooks",
    "import",
    "@typescript-eslint",
    "prettier",
    "jest"
  ],
  "rules": {
    "no-console": 2,
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true
      }
    ],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "off",
    "react/jsx-filename-extension": [
      "off"
    ],
    "react/jsx-closing-bracket-location": [
      1,
      "tag-aligned"
    ],
    "import/no-extraneous-dependencies": 1,
    "import/order":[
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups":[{
          "pattern": "react",
          "group": "external",
          "position": "before"
        }],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive":true
        }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".ts", ".tsx"],
        "moduleDirectory": [
          "node_modules",
          "src/"
        ]
      },
      "typescript": {
        "alwaysTryTypes": true
      }
    },
    "react": {
      "version": "detect"
    }
  }
}

Current package.json dependencies

"@typescript-eslint/eslint-plugin": "^4.9.1",
    "@typescript-eslint/parser": "^4.9.1",
    "eslint": "7.2.0",
    "eslint-config-airbnb": "18.2.1",
    "eslint-config-airbnb-typescript": "^12.0.0",
    "eslint-config-prettier": "^7.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.2.0",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "4.0.0",

Also in tsconfig.json

 "baseUrl": "src",

The rule works fine in .ts files:

rule-working-ts

But it does not work with .tsx files.

Answer 1

Fixed by adding this dependency

yarn add -D eslint-import-resolver-typescript