ESLint - разрешает только абсолютные пути импорта, не относительные

#angular #eslint #eslintrc #angular11

Вопрос:

Я работаю в проекте Angular 11. Многие импорта в этом проекте используют относительный путь или абсолютный путь.

У меня есть настройка ESLint для этого проекта, я хочу запретить относительные пути импорта и разрешать только абсолютные пути. Но я не нахожу правила для этого.
Я нашел: no-relative-parent-imports , но это не вызывает у меня проблем с такими путями, как: import { HttpService } from "../http/http.service"; или import { RouterService } from "../../services/router/router.service"; (оба не являются абсолютными путями, абсолютными путями для них будут import { HttpService } from "app/services/http/http.service"; и import { RouterService } from "app/services/router/router.service"; соответственно.

Я прочитал эту статью: https://medium.com/@aayush123/escaping-relative-import-hell-react-native-eslint-atom-57dc2cae5bcc
Но я хочу избежать добавления еще одной вещи, подобной Babel, если смогу этого избежать.

Существует ли правило для ESLint для предотвращения любого типа относительных путей? Разрешить только абсолютные пути?

Ответ №1:

Вы можете добавить eslint-no-restricted-imports в свой .eslintrc файл следующим образом:

 "no-restricted-imports": ["error", {
  "patterns": [".*"]
}],

Если есть некоторые файлы, в которых требуется относительный импорт, вы можете добавить переопределения eslint-config следующим образом:

 "overrides": [
  {
    "files": ["*-test.js"],
    "rules": {
      "no-restricted-imports": "off"
    }
  }
]

1. Я хочу это правило, но мне также нужно, чтобы мое приложение работало. Это правило помогает выделить это как проблему: import foo from './middleware/foo'; , и я могу это исправить и устранить ошибку linting и VSCode, удалив ./ . Даже щелчок правой кнопкой мыши CMD открывает файл в IDE с не относительным путем! Но я должен запустить приложение и получить: Ошибка: не удается найти модуль ‘промежуточное программное обеспечение / foo’ Я пытался реализовать не относительные пути между другими задачами в течение 3 недель. Есть понимание? Я опубликовал вопрос, ответов нет. Чувствую, что я прочитал половину Интернета безрезультатно.

2. @NeilGuyLindberg Я смог сделать это в приложении TypeScript CLI, следуя инструкциям здесь: bgxcode.com/posts/typescript/ts-absolute-import-paths . Теперь вместо import foo from './middleware/foo'; этого у меня есть import foo from '@app/middleware/foo'; where @app — псевдоним для моего базового каталога src.

3. Спасибо @adashrod. Я могу использовать этот метод. Однако я не понимаю, почему я могу сделать это в проекте JS без @app /, но мне нужно добавить это сюда? Как и в проекте JS, я могу просто: middleware/foo … и команда хочет того же.

Ответ №2:

Кто-то недавно создал новое правило ESLint специально для вашего варианта использования.

Он поддерживает исправление проблемы для вас и возможность разрешить родительские папки.

Ответ №3:

Вы можете попробовать мой новый плагин eslint-plugin-absolute-imports-only

 ...
settings: {
  "absolute-imports-only": {
    project: path.resolve(__dirname, 'tsconfig.json'),
  },
},