vscode设置nextjs项目使用别名

Posted by 蓝染君

2025年12月12日

On 2025年12月12日

nextjs默认选择使用别名但是vscode导入模块时候还是会有相对路径，以下是解决办法。

tsconfig.js 确保以下配置正确

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

确保 VSCode 用 alias 自动导入

或者在 .vscode/settings.json 里写：

{
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

{
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

这样 VSCode 自动导入就会生成：

import { CreateDocumentSchema } from "@/types/form-schema";

import { CreateDocumentSchema } from "@/types/form-schema";

而不是相对路径 ../../_types/form-schema