VSCode代码提示增强工具_VSCode插件快速切换Vue页面【实战】-VSCode-PHP中文网

先检查 jsconfig.json 或 tsconfig.json 是否配置 "paths": {"@/": ["src/"]}，确保 vscode 识别 @ 别名；再确认禁用 vetur（vue 3 项目）、重启 vscode 窗口重建索引；最后验证工作区为整个项目根目录。

vscode代码提示增强工具_vscode插件快速切换vue页面【实战】

跳转失败不是插件没装，而是 VSCode 根本不知道 @ 指向哪。Vetur 或 Volar 本身不处理路径别名，必须靠额外配置或插件补全。

确认项目根目录下有 jsconfig.json 或 tsconfig.json，且含 "baseUrl": "src" 和 "paths": { "@/*": ["*"] }
若用 @/api/user 这类写法，paths 必须显式声明："@/*": ["src/*"]，不能只写 ["*"]
装了 @ext:lihuiwang.vue-alias-skip 插件后，还需在设置中手动填入 alias 配置，它不会自动读取 tsconfig
改完配置或插件设置后，**必须重启 VSCode 窗口**（仅重载窗口不够），否则跳转索引不会重建

Volar 是 Vue 3 官方推荐语言服务，Vetur 是 Vue 2 时代产物；两者同时启用会互相覆盖类型推导，尤其在 <script setup></script> 中表现为变量无定义、ref/computed 不提示。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

Vue 3 项目：卸载 Vetur，只保留 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar)
Vue 2 项目：禁用 Volar 相关插件，只启用 Vetur，并确保 vetur.validation.script 设为 true
检查当前文件是否被正确识别：右下角状态栏应显示 Vue (Volar) 或 Vue (Vetur)，而非 Vue 纯文本
若仍无提示，尝试在 .vue 文件内右键 → Setup Vue Server（Volar）或 Restart Vetur Server（Vetur）

Ctrl+P 默认只索引「当前工作区根目录下」的文件，不是所有打开过的标签页。用 File → Open File… 单独打开的 user.vue，哪怕正在编辑，也不会出现在 Ctrl+P 结果里。

务必使用 File → Open Folder… 打开整个 Vue 项目根目录（含 package.json 和 src/）
检查设置中 files.exclude 和 search.exclude 是否误加了 "src/**/*" 或 "**/*.vue" 类规则
搜索时加前缀提速：user.vue 直接输，git: 查未提交文件，@useUser 查 user.vue 内的 useUser 函数
如果组件在 node_modules 或子工作区（.code-workspace），需额外配置 typescript.preferences.includePackageJsonAutoImports

vue-helper 的 Alt+Enter 增强功能只在 <template></template> 区域内有效，且依赖编辑器当前语言模式为 vue。常见失效原因是：

文件未被识别为 Vue：右下角状态栏显示 HTML 或 JavaScript，此时需点击切换为 Vue
快捷键冲突：Auto Rename Tag 或 Emmet 可能占用了 Alt+Enter，在键盘快捷方式设置里搜 editor.action.insertLineAfter 确认绑定
该功能仅支持双引号包裹的属性值（如 :class="xxx"），单引号或模板字符串（`xxx`）不触发
若用 Volar，部分版本需在设置中开启 volar.autoImport.suggestion 才能联动提示