提升开发效率必看的VSCode插件与路径映射技巧-VSCode-PHP中文网

要让 import '@/utils/useapi' 正常解析，必须同时满足三处配置：一是在项目根目录的 tsconfig.json（或 jsconfig.json）中正确设置 "baseurl": "." 和 "paths": { "@/*": ["src/*"] }；二是 vite 项目需在 vite.config.ts 中同步配置 resolve.alias；三是 path intellisense 插件需手动配置 "path-intellisense.mappings": { "@": "${workspaceroot}/src" }，并重启 ts server。

提升开发效率必看的vscode插件与路径映射技巧

VSCode 插件不是装得越多越好，关键是要解决你正在卡住的问题；路径映射也不是配完就完事，错一个 baseUrl 或少一个 paths 条目，import 就会报 Cannot find module。

怎么让 import @/utils/useApi 正常解析？

这是 TypeScript/JS 项目里最常遇到的路径别名失效问题。根本原因不是插件没装，而是 VSCode 和 TypeScript 编译器对别名的理解不一致。

VSCode 依赖 jsconfig.json 或 tsconfig.json 中的 compilerOptions.baseUrl 和 compilerOptions.paths 才能跳转、补全
TypeScript 编译器（如 tsc、Vite、Webpack）也必须读同一份配置，否则运行时报错
paths 的值必须是数组，哪怕只配一个路径，也要写成 ["@/*"]: ["src/*"]，不能写成 ["@/*"]: "src/*"
如果项目用 Vite，还需在 vite.config.ts 中显式配置 resolve.alias，否则 HMR 时路径可能不生效

Path Intellisense 插件为什么补全不了 alias？

它默认只识别 node_modules 和相对路径，对 @/ 这类自定义别名无感知，除非你告诉它规则。

VSCode

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

下载

安装后需手动配置 path-intellisense.mappings，例如：

{ "path-intellisense.mappings": { "@": "${workspaceRoot}/src" } }

若项目有多个 workspace folder，${workspaceRoot} 可能指向错误目录，建议改用绝对路径或 ${fileDirname} 动态计算
它不读 jsconfig.json，所以即使 tsconfig 里写了 paths，它也看不到——这是和 TypeScript 语言服务的根本区别
补全触发时机是 Ctrl+Space，不是输入 @ 自动弹出，这点容易误以为“坏了”

插件装了但路径跳转还是失败？检查这三处

跳转失败往往不是插件问题，而是环境链路断在某个环节。

确认当前文件是否在正确的 tsconfig.json / jsconfig.json 作用域内：VSCode 只读**打开文件所在目录向上最近的**配置文件，不是项目根目录那个
检查 files 或 include 字段是否漏掉了当前文件类型（比如没加 "**/*.vue"，.vue 里的 import 就不被识别）
重启 TS Server：命令面板执行 TypeScript: Restart TS server，缓存不刷新会导致路径映射长期不生效

路径映射本质是开发体验层的“约定”，它不改变运行时行为，但一旦配置错，就会在编辑、编译、调试三个环节反复报错。最稳妥的做法是：先确保 tsc --noEmit 能通过，再让 VSCode 插件去适配这套规则，而不是反过来指望插件“猜对”。