如何启用 VSCode 自动导入建议以从 NRWL NX 存储库中的共享 UI 库导入深层路径？

Question

我希望寻求一些帮助来设置 NX 存储库，并使用来自共享 UI 库的 VSCode 导入建议

我正在通过以下命令为我的 next.js 项目设置 NX 存储库：

npx create-nx-workspace nx-next-import-suggest --packageManager=yarn
# > Integrated monorepo
# > next.js
# > SASS

yarn nx generate @nx/next:library shared-ui-next-lib --no-interactive

我希望在应用程序文件夹中编码时自动从

shared-ui-next-lib

导入组件（即

apps/nx-next-import-suggest/app/page.tsx

）

具体来说，我想通过深层路径导入组件，例如

import { Button } from '@shared-ui-next-lib/Button'

所以我在

tsconfig.base.json

中添加了以下内容：

    "paths": {
      "@nx-next-import-suggest/shared-ui-next-lib/*": [
        "libs/shared-ui-next-lib/src/lib/*"
      ]
    }

它确实有效！但是……

我必须手动编写以下导入语句

import { Button } from '@shared-ui-next-lib/Button'

如果我从编写

<Button

开始并期望 VSCode 为我建议上述导入语句，它只是不会这样做

如何使导入建议发挥作用？

此处的示例存储库： https://github.com/ecchochan/nx-next-import-suggest

---

我能做的最好的就是在最外面将组件一一导出

index.ts

但它仍然没有建议深层路径：S

---

我想通过

import { Button } from '@shared-ui-next-lib/Button'

导入并避免

import { Button } from '@shared-ui-next-lib'

的原因是：

我预计深度导入将使包大小更小（通过不导入所有组件，下一个新的小型项目不会使用这些组件）

Answer 1

我想在我的存储库中进行相同的设置，并且该库没有私有部分（共享组件、utils 函数）。 使用不带桶文件的

nx:lib

对我来说是一种不错的选择，因为我不想从 index.ts 重新导出所有内容。 下面使用您的库名称和目录结构描述了对我有帮助的内容。 我还删除了设置中的

lib

文件夹。

1.修改

tsconfig.base.json

paths部分

• 这使得可以使用@（作用域导入）

"paths": {  
  "@shared-ui-next-lib/*": ["libs/shared-ui-next-lib/src/lib/*"]
}

2. 修改您的申请

   tsconfig.json

   包括部分

"include": [
   "../../libs/shared-ui-next-lib/src/lib/**/*.ts"
]

• 请注意，此设置基本上使您还可以使用

  libs/...

  导入代码，并打破

  nx:lib

  和桶文件（库的公共/私有部分）的想法