Пакет eslint-plugin-import не может распознать разницу между внешними и внутренними каталогами

Question

В моем.eslintrcУ меня есть:

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

и

        "settings": {
    "import/resolver": {
      "typescript": {
        "alwaysTryTypes": true,
        "project": "./tsconfig.json"
      },
      "node": {
        "paths": "src"
      }
    }
  }

но в одном из моих файлов у меня есть:

и несколькими строками ниже у меня естьimport { ReservationStatus } from "generated/graphql"

react-to-printявляется третьей стороной иgenerated/это что-то локальное, что я генерирую с помощью Apollo, но оно не внешнее

но я получаю жалобу наimport { useReactToPrint } from "react-to-print"говоря

react-to-print import should occur after import of generated/graphql eslint[import/order](https://github.com/import-js/eslint-plugin-import/blob/v2.27.5/docs/rules/order.md)

но это неправильно, так что же я неправильно настроил?

Answer 1

Полный ответ из комментария @RenaldoMateus:

Проблема, с которой вы столкнулись, скорее всего, связана с тем, что ESLint неправильно идентифицирует файл как внутренний импорт. По умолчанию ESLint рассматривает весь импорт, который не попадает в категории «встроенный» или «внешний», как «внутренний». Однако похоже, что в вашем случае он не распознаетgenerated/graphqlкак внутренний импорт.

Чтобы решить эту проблему, вы можете добавить новую группу путей для вашего каталога вpathGroupsмассив в вашем.eslintrcфайл. Это явно укажет ESLint обрабатывать что-либо изgeneratedкаталог в качестве внутреннего импорта.

Вот как вы можете это сделать:

      "pathGroups": [
  {
    "pattern": "react",
    "group": "external",
    "position": "before"
  },
  {
    "pattern": "generated/**",
    "group": "internal",
    "position": "after"
  }
],

В приведенной выше конфигурацииpatternСвойство представляет собой шаблон glob, который соответствует любому импорту, начинающемуся сgenerated/. groupСвойство сообщает ESLint рассматривать этот импорт как внутренний импорт. positionСвойство сообщает ESLint разместить этот импорт после внешнего импорта.

После внесения этого изменения ESLint перестанет жаловаться на порядок импорта.