Относительный импорт в следующем приложении, созданном с помощью nx с использованием VS Code

#typescript #visual-studio-code #next.js #nrwl-nx

Вопрос:

Я столкнулся с проблемой Next.js проект, загруженный с помощью nx и VS Code:

Когда я пытаюсь автоматически импортировать компонент с помощью VS Code, он генерирует абсолютный импорт, который немедленно запускает @nrwl/nx/enforce-module-boundaries правило eslint, делая текущий файл недействительным.

Например, со структурой папок:

 apps/my-app/
  pages/
    entity/
      new/
        index.tsx
  components/
    Loading.tsx

Сгенерированный импорт будет:

 // in my-app/pages/entity/new/index.tsx
import Loading from 'apps/my-app/components/Loading'

Хотя я ожидаю:

 import Loading from '../../../components/Loading'

В VS Code есть настройка, позволяющая всегда использовать относительные пути для импорта, но это помешает мне импортировать библиотеки надлежащим образом ( @scope/lib ).

Есть ли какие-либо возможные настройки, которые могут заставить автоматический импорт работать должным образом?

1. Настройка автоматического импорта VS codes обычно определяет, что такое библиотека, и оставляет ее в качестве простого спецификатора. Иногда это становится очень запутанным, хотя

Ответ №1:

Вы можете настроить paths свойство в tsconfig.base.json файле в корне вашего проекта. Если вы добавите его в другие файлы tsconfig, он не будет работать, правильным будет tsconfig.base.json файл в корне вашего проекта.

Исходя из вашего примера, вы можете добавить следующее к paths опции.

 "@my-app/*": ["apps/my-app/*"]

Теперь вы можете перейти ../../../components/Loading на @my-app/components/Loading .

Более подробный пример (примечание: я удалил кучу других параметров, которые должны быть в вашем tsconfig.base.json файле для удобства чтения)

 {
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@my-app/*": [
                "apps/my-app/*"
            ]
        }
}

Источник и дополнительная информация в официальном руководстве TS: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

1. Я не понимаю, почему это не работает, если переопределить пути к tsconfig в библиотеках или папках приложений, я думал, что baseUrl по-прежнему должен быть корневой папкой. Хотя я могу добавить псевдонимы путей в tsconfig.base, но я получил Projects should use relative imports to import from other files within the same project. Use "./path/to/file" instead of import from ошибку eslint

2. Это приведет к запуску nx правила eslint, как следует из другого комментария. На данный момент, похоже, для этого нет подходящего рабочего процесса, кроме использования baseUrl: '.' в tsconfig.spec.json и дублирования путей в базовом tsconfig