如何在NRWL NX仓库中让VSCode支持共享UI库的深度路径自动导入提示？

问题背景 #

我通过以下命令创建了NX集成式Monorepo（基于Next.js + SASS）：

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

我需要在apps/nx-next-import-suggest/app/page.tsx里写代码时，VSCode能自动提示并插入深度路径导入，比如import { Button } from '@nx-next-import-suggest/shared-ui-next-lib/Button'——这么做是为了减小打包体积，避免引入未使用的组件。

目前已经在tsconfig.base.json里配置了路径映射：

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

手动写这个导入语句能正常用，但输入<Button>时VSCode根本不触发对应的深度路径导入提示。试过在库的根index.ts里逐个导出组件，还是没用。

解决方案 #

要让VSCode识别深度路径并给出自动导入提示，按以下步骤配置：

1. 给每个组件做独立导出入口
   在libs/shared-ui-next-lib/src/lib下，给每个组件单独建目录和index.ts。比如Button组件的结构：

   libs/shared-ui-next-lib/src/lib/
   └── Button/
       ├── Button.tsx
       └── index.ts
   

   在Button/index.ts里导出组件：

   export { Button } from './Button';
   

2. 更新库的package.json（关键步骤）
   在libs/shared-ui-next-lib/package.json里添加exports字段，明确每个组件的深度路径对应关系：

   "exports": {
     ".": "./src/index.ts",
     "./Button": "./src/lib/Button/index.ts",
     // 其他组件照此添加，比如./Card、./Input等
     "./package.json": "./package.json"
   }
   

   这个字段会告诉TypeScript和VSCode，每个深度路径对应的实际文件位置，是触发自动提示的核心。

3. 优化路径映射（可选）
   可以把tsconfig.base.json里的路径映射改成更简洁的别名：

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

   之后导入就能写成import { Button } from '@shared-ui/Button'，更清爽。

4. 重启TypeScript服务
   按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），执行TypeScript: Restart TS Server，让所有配置生效。

原理说明 #

VSCode的自动导入依赖TypeScript的模块解析能力，package.json的exports字段相当于给TypeScript指明了每个深度路径的模块位置，这样输入组件标签时，VSCode就能准确识别并给出对应的导入提示。同时，深度路径导入能让打包工具只打包实际用到的组件，有效减小最终包体积。

内容的提问来源于stack exchange，提问作者Chan Echo