VS Code中NX创建的Next.js项目自动导入配置方案

核心思路是把「应用内部文件引用」和「跨工程共享包引用」的生成规则做明确边界划分，既满足同应用内引用生成相对路径的需求，也不破坏NX约定的共享库@scope/lib导入规范，从根源上避免生成触发@nrwl/nx/enforce-module-boundaries校验的导入语句。

第一步：调整TS解析配置，从根源上隔离两类导入的生成逻辑 #

NX默认配置中，根tsconfig的baseUrl指向项目根目录，TS解析自动导入候选路径时，会把所有从项目根开始的绝对路径作为可选项，这就是为什么会生成apps/my-app/xxx形式导入、触发eslint模块边界校验的核心原因。
调整逻辑是给当前应用建立独立的解析基准，明确路径生成的判断规则：

• 修改根目录tsconfig.base.json，仅把跨工程的共享库配置为路径别名，不要把apps目录下的内部路径加入映射列表：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@你的工程标识/共享库名称": ["libs/共享库名称/src/index.ts"]
      }
    }
  }
  

• 修改当前应用的apps/my-app/tsconfig.json，在继承根配置的基础上，把当前应用根目录设为独立的解析基准：

  {
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
      "baseUrl": ".",
      "rootDir": "."
    }
  }
  

  配置完成后，TS在生成导入路径时会自动做判断：如果目标文件和当前文件同属应用rootDir的覆盖范围，就生成相对路径；如果目标文件是通过根配置映射的跨工程共享库（不在当前应用的rootDir范围内），就生成@scope/xxx形式的别名导入。

第二步：VS Code工作区偏好配置 #

全局强制设置所有导入为相对路径的方案会破坏共享库的导入规范，只需要在项目根目录的.vscode/settings.json中配置自动识别模式的偏好即可，配套TS的解析逻辑完成路径生成：

{
  "typescript.preferences.importModuleSpecifier": "auto",
  "typescript.preferences.importModuleSpecifierEnding": "minimal",
  "javascript.preferences.importModuleSpecifier": "auto"
}

配置生效后的实际表现 #

• 同应用目录下的文件互导，自动生成相对路径，比如从my-app/pages/entity/new/index.tsx导入同应用的Loading组件，会生成../../../components/Loading
• 导入libs目录下的共享模块，自动生成@scope/xxx形式的别名导入，不会生成跨数层目录的长相对路径
• 不会再自动生成apps/my-app/components/Loading这类命中模块边界校验规则的路径

兜底校验配置 #

为了避免手动编写导入时漏写相对路径、触发eslint规则，可以在当前应用的apps/my-app/.eslintrc.json中补充规则，让这类绝对导入可以被一键自动修复：

{
  "rules": {
    "import/no-absolute-path": "error"
  }
}

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