如何让VSCode自动导入本地模块-VSCode-PHP中文网

vscode需通过tsconfig.json或jsconfig.json的baseurl和paths配置识别本地模块别名；未配置则无法解析@/等路径，导致自动导入失效，必须重启ts server并保存文件后才能生效。

如何让vscode自动导入本地模块

VSCode 能自动导入本地模块，但前提是它得“认出”那些模块在哪——不是靠猜，而是靠 tsconfig.json 或 jsconfig.json 里明确定义的路径规则。没这层配置，import { utils } from '@/lib/utils' 这种写法 VSCode 根本解析不了，更别说自动补全了。

为什么本地路径别名（如 @/、~/）不被自动识别

VSCode 的 TypeScript/JavaScript 语言服务完全不读 Webpack、Vite 或 Rollup 的 resolve.alias。它只信任 tsconfig.json（TS 项目）或 jsconfig.json（JS 项目）里的 baseUrl 和 paths 配置。

常见现象：输入 useApi 后回车，只插入函数名，不加 import；或者 Ctrl+. 弹出菜单里没有“Import from '@/hooks'”选项
根本原因：项目根目录缺失 tsconfig.json，或虽有但没配 paths，或配了但没重启 TS Server
验证方式：打开命令面板（Ctrl+Shift+P），运行 TypeScript: Restart TS server，再试

tsconfig.json 中 paths 配置必须这样写

paths 不是字符串替换，而是模块路径解析规则，必须和 baseUrl 配合使用，且键值都需以 * 结尾（表示通配）。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"],
      "@utils": ["src/utils/index.ts"]
    }
  }
}

@/* 匹配 @/hooks/useApi → 解析为 src/hooks/useApi
@utils 是精确匹配，只能用于 import { foo } from '@utils'，不能带后缀路径
改完 tsconfig.json 后必须重启 TS Server，否则新规则不生效
如果用的是 JS 项目，确保 jsconfig.json 内容结构一致，且启用了 "checkJs": true

Ctrl+. 是唯一可靠触发方式，别等输入完回车

依赖“输完 useState 回车就自动 import”大概率失败——尤其对本地模块，IntelliSense 往往不主动推建议。真正稳定的做法是：光标停在未定义符号上，手动唤起 Quick Fix。

把光标放在红色波浪线的标识符上（例如刚打完 fetchUser 但没 import）
按 Ctrl+.（Windows/Linux）或 Cmd+.（macOS）
从弹出菜单中选 “Import ‘fetchUser’ from '@/api/user’”
如果菜单里没对应项，说明路径没被索引到：检查文件是否在 src/ 下、是否已保存、是否被 tsconfig.json 的 include 覆盖

Auto Import 插件对本地模块的支持有限制

steoates 的 Auto Import 插件能增强本地模块识别，但它仍依赖语言服务的基础索引。它不会绕过 tsconfig.json 自行扫描文件夹。

启用插件后，需在设置中打开 auto-import.showImportInSuggestions
它对 paths 别名的支持比原生 IntelliSense 更灵敏，但依然要求 baseUrl + paths 存在
若项目用的是相对路径（如 ../../utils），插件反而可能推荐冗长路径而非别名——这时要关掉 auto-import.filter.enabled 避免干扰
注意：不要同时启用旧版 Auto Import (wix)，它会劫持 Ctrl+Space，导致原生 Ctrl+. 失效