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

【问题标题】：Relative imports on next app created with nx using VS Code使用 VS Code 使用 nx 创建的下一个应用程序的相对导入
【发布时间】：2021-04-23 07:49:04
【问题描述】：

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

当我尝试使用 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)。

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

【问题讨论】：

VS 代码自动导入设置通常会找出什么是库并将其保留为空的说明符。有时它会变得很困惑

标签： typescript visual-studio-code next.js nrwl-nx

【解决方案1】：

您可以在项目根目录下的tsconfig.base.json 文件中配置paths 属性。如果你把它添加到其他 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

【讨论】：