使用 VS Code 使用 nx 创建的下一个应用程序的相对导入

Question

我遇到了使用nx和 VS Code引导的 Next.js 项目的问题：

当我尝试使用 VS Code 自动导入组件时，它将生成绝对导入，立即触发@nrwl/nx/enforce-module-boundarieseslint 规则，使当前文件无效。

例如，文件夹结构：

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)。

是否有任何可能的设置可以使自动导入按预期工作？

Answer 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