如何在NextJS@13.x项目中强制VSCode自动导入始终使用别名？

要实现所有场景下自动导入都使用模块别名（比如把import { Navbar } from "./components"替换为import { Navbar } from "@/components"），需要完成两个核心配置：项目别名定义 + VSCode自动导入偏好设置，以下是具体步骤：

1. 配置Next.js项目的模块别名 #

首先确保项目已正确配置模块别名，让Next.js和VSCode都能识别别名对应的路径：

在项目根目录的tsconfig.json（TypeScript项目）或jsconfig.json（JavaScript项目）中添加baseUrl和paths配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"] // 这里@指向src目录，可根据你的项目结构调整（比如指向app目录）
    }
  },
  "include": ["src/**/*", "app/**/*"], // 覆盖你的源码目录，App Router项目需包含app目录
  "exclude": ["node_modules"]
}

保存配置后，重启VSCode让配置生效。

2. 修改VSCode自动导入偏好 #

VSCode的自动导入行为由内置的TypeScript/JavaScript语言服务控制，需要调整设置强制使用非相对路径（即别名）：

1. 打开VSCode设置界面（快捷键Ctrl+, / Cmd+,）
2. 根据你的项目类型搜索对应设置：
   • TypeScript项目：搜索Typescript > Preferences: Import Module Specifier
   • JavaScript项目：搜索JavaScript > Preferences: Import Module Specifier
3. 将该选项的值设置为non-relative
4. 同时开启同分类下的Prefer Non Relative Imports选项，进一步强化非相对导入的优先级

设置完成后，当你在代码中触发自动导入时，VSCode会优先使用你配置的模块别名，而非相对路径，哪怕是导入同级或父级目录的组件。

3. 可选：用ESLint规则兜底（防止手动输入相对路径） #

如果需要约束手动编写的导入路径，避免出现相对路径，可以通过ESLint规则强制规范：

安装eslint-plugin-import后，在.eslintrc.json中添加规则：

{
  "rules": {
    "import/no-relative-parent-imports": "error", // 禁止导入父级目录的相对路径
    "import/no-absolute-path": "off" // 允许使用别名形式的绝对路径
  }
}

若需要更精细的导入排序和别名强制，可使用eslint-plugin-import-helpers，配置示例：

{
  "plugins": ["import-helpers"],
  "rules": {
    "import-helpers/order-imports": [
      "error",
      {
        "newlinesBetween": "always",
        "groups": ["module", "/^@/", ["parent", "sibling", "index"]],
        "alphabetize": { "order": "asc", "ignoreCase": true }
      }
    ]
  }
}

这样既能保证自动导入用别名，也能约束手动编写的导入路径符合要求。

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