Vue项目中模板组件跳转失效时，可通过安装Vue Peek扩展、启用Volar的Template Interpolation Service、配置jsconfig.json路径映射、正确设置.vue文件语言模式四种方式解决。
如果您在使用 VSCode 编辑 Vue 项目时，希望直接从模板中的组件标签跳转到其对应的定义位置，但当前点击无法触发跳转，则可能是 Vue Peek 功能未正确启用或配置缺失。以下是实现该功能的多种方法：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 Vue Peek 扩展
Vue Peek 是一个专为 Vue 模板语法设计的轻量级跳转工具，它通过解析 <template> 中的自定义组件标签，定位到其注册或导入位置。该扩展不依赖 Volar，适合未启用完整 Vue 语言支持的项目。
1、打开 VSCode 的扩展面板（快捷键 Cmd+Shift+X）。
立即学习“前端免费学习笔记（深入）”；
2、在搜索框中输入 Vue Peek，找到作者为 pranaygp 的扩展。
3、点击“安装”，安装完成后重启 VSCode 窗口（无需完全退出）。
4、在任意 .vue 文件的 <template> 区域中，将光标置于组件标签名上（如 <UserCard>），按住 Cmd 键并单击，即可跳转。
二、启用 Volar 并配置 Template Interpolation Service
Volar 是 Vue 官方推荐的语言支持插件，其内置的模板语义分析能力可原生支持组件跳转。启用后无需额外扩展，且兼容 Composition API 和 Options API。
1、卸载旧版 Vetur（如有），避免与 Volar 冲突。
2、安装扩展 Volar（作者：Vue Language Features Team）及 TypeScript Vue Plugin (Volar)。
3、在 VSCode 设置中搜索 “volar.template.interpolationService”，勾选启用该选项。
4、确保工作区根目录存在 tsconfig.json 或 jsconfig.json，且已正确配置 compilerOptions.types 包含 “vue”。
三、手动配置 jsconfig.json 支持组件路径解析
当项目采用别名（如 @/components）导入组件时，VSCode 默认无法识别路径映射，需通过 jsconfig.json 显式声明 baseUrl 和 paths，使跳转功能理解别名指向的实际文件位置。
1、在项目根目录下创建或编辑 jsconfig.json 文件。
2、写入以下内容：
3、在 compilerOptions 中设置 "baseUrl": "."。
4、在 compilerOptions.paths 中添加映射，例如："@/*": ["src/*"] 和 "@/components/*": ["src/components/*"]。
5、保存后，关闭并重新打开 VSCode 窗口，使路径映射生效。
四、检查 Vue 文件语言模式是否正确
VSCode 必须将 .vue 文件识别为 Vue 模式，才能激活模板区域的语义跳转能力。若右下角状态栏显示为 “HTML” 或 “Plain Text”，则跳转功能将被禁用。
1、打开任意 .vue 文件。
2、点击右下角当前语言模式名称（如 “HTML”）。
3、在弹出菜单中选择 Configure File Association for '.vue'。
4、在输入框中键入 vue，回车确认。
5、检查状态栏是否更新为 Vue，且文件图标变为 Vue 彩色徽标。
