Прерывание импорта / порядка eslint при использовании псевдонимов машинописного текста

Question

Я использую псевдонимы путей машинописного текста в большом проекте реакции. Так, например, в моем tsconfig.json я указываю несколько псевдонимов пути:

      {
  "baseUrl": "./src",
    "paths": {
      "@common/*": ["common/*"],
      "@settings/*": ["settings/*"],
      // other paths
    }
}

Хорошо, теперь, когда я хочу импортировать некоторые модули, я могу использовать эти псевдонимы. Мы также используем eslint, и одним из правил, которые мы используем, является. Он требует, чтобы все, что выходит из node_modules, должно быть импортировано перед любыми локальными модулями. Мне нравится это правило. Без использования моих псевдонимов:

      import React, { useEffect } from "react";
import SomeDistantComponent from '../../common/components/SomeDistantComponent'
import { Formik } from 'formik'

Это вызовет ошибку линтинга, но форматирование файла в соответствии с eslint автоматически переместит импорт formik выше импорта, чего я и хочу.

Однако, при использовании моих псевдонимов, это не выдаст ошибку:

      import React, { useEffect } from "react";
import SomeComponent from '@common/components/SomeComponent'
import { Formik } from 'formik'

Это как если бы псевдонимы пути машинописного текста обманули import/order правило, и теперь это правило нарушается.

Вопрос: Как мой линтер может по-прежнему распознавать пути этих псевдонимов? Могу ли я настроить groups или же pathGroups параметры этого плагина, чтобы правильно сгруппировать и упорядочить мои локальные модули с псевдонимом, которые должны следовать за моими модулями узла?

Бонусный вопрос:

Мне не обязательно различать модули с псевдонимом и модули без псевдонима с точки зрения порядка. Например

      import React, { useEffect } from "react";
import SomeCloseComponent from './SomeCloseComponent'
import SomeComponent from '@common/components/SomeComponent'
import AnotherCloseComponent from './AnotherCloseComponent'
import { Formik } from 'formik'

Я бы в порядке оставил заказ на импорт SomeCloseComponent, SomeComponent, а также AnotherCloseComponent, пока formikимпорт идет раньше всех. Можно ли поместить импорт с псевдонимом на тот же уровень «приоритета», что и импорт без псевдонима, то есть они не будут переупорядочены между собой, но все будут происходить после импорта node_module?

Answer 1

Вам необходимо использовать свойство, чтобы указать eslint что правильное положение путей, начинающихся с @/ находится до / после одной из других групп.

Я предпочитаю использовать ~ символ вместо того, чтобы создавать разницу между импортом из моей папки src и импортом из внешней библиотеки, которая начинается с @, как этот, например:

      import {makeStyles} from '@material-ui/core/styles';
import Bar from '~/components/Bar'

Итак, теперь мой файл выглядит так:

      import React from 'react'; // external
import Bar from '~/components/Bar'; // SPECIAL
import {ReactComponent as Logo} from '../logo.svg'; // parent
import './App.css'; // sibling

И это мое определение import/order править в моем .eslintrc файл:

          "import/order": [
      "error",
      {
        "pathGroups": [
          {
            "pattern": "~/**",
            "group": "external",
            "position": "after"
          }
        ],
        "groups": [
          "builtin",
          "external",
          "internal",
          "unknown",
          "parent",
          "sibling",
          "index",
          "object",
          "type"
        ]
      }
    ]
  }

Как видите, я использую pathGroups чтобы сообщить eslint, что правильная позиция любого импорта, начинающегося с ~/ является after в external группа.

Поскольку каждый импорт здесь принадлежит другой группе, любое изменение, которое я внесу в этот порядок, приведет к ошибке ESLint.

PS В какой-то момент у меня были проблемы с самим импортом, которые были решены после того, как я обновил eslint-plugin-import к версии 2.23.4

Answer 2

у меня такие псевдонимы~const/и~helpers/. Я смог заставить его работать, используя этот шаблон:

      {
    "pattern": "~*/**",
    "group": "external",
    "position": "after"
}

Это дикая карта для всего, что начинается с~, и любой каталог или файл внутри.