Vue项目导航需Volar（禁用Vetur）、CSS Peek（仅支持静态class）、Path Intellisense（依赖jsconfig.json路径映射）和Bookmarks协同，缺一不可。
VSCode 里 Vue 项目导航卡顿、跳转不到定义、模板里点不进 class 对应的样式，基本不是 Vue 版本或配置问题，而是缺了对的插件组合——Volar 是必须项，但光靠它不够，得配 CSS Peek、Path Intellisense 和 Bookmarks 才能闭环。
Volar 必须启用，且不能和 Vetur 共存
Volar 是 Vue 3 官方推荐的语言服务器，替代已停止维护的 Vetur。如果同时启用两者，Ctrl+Click 跳转会随机失效，尤其在 <script setup> 里无法推导 defineProps 类型。
- 卸载 Vetur（即使项目是 Vue 2，也建议改用 Volar 的兼容模式）
- 确保
vue文件关联语言模式为Vue（右下角状态栏点击，选 Vue，不是 HTML 或 Plain Text） - 在
settings.json中显式禁用 Vetur："vetur.validation.template": false - 如用 TypeScript，确认
tsconfig.json中"compilerOptions.types"包含"volar"（部分版本需手动加）
CSS Peek 要配合 class 名自动跳转，不是所有 class 都能点
CSS Peek 只对标准写法生效：HTML 中 class="btn primary" 可跳，但 :class="{ active: isActive }" 或 class="item-{{ id }}" 不行——它不解析运行时表达式，只匹配静态类名字符串。
- 确保 CSS/SCSS 文件已正确导入（如
@import "@/styles/main.scss"），否则跳转提示“no definition found” - 若用 CSS Modules，
CSS Peek默认不支持，需额外装Vue CSS Modules插件并开启"vue-css-modules.enable": true - 在
<style scoped>里定义的类，只能被同组件内 HTML 引用；跨组件引用会失败，这不是插件问题，是 scoped 机制本身限制
Path Intellisense 补全路径时，别忽略别名（@/）的配置依赖
Path Intellisense 能自动补全 import { foo } from "@/utils"，但前提是 VSCode 知道 @ 指向哪。它不读 jsconfig.json 或 vite.config.ts，只认 jsconfig.json 中的 compilerOptions.paths。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 检查项目根目录是否有
jsconfig.json，内容类似：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - 没有该文件？新建一个，否则
@/补全会退化成普通相对路径提示 - 使用 Vite 的
resolve.alias但没配jsconfig.json？补全照样失效——这是常见盲区
Bookmarks 解决“我刚看的那块逻辑在哪”的临时导航需求
Vue 单文件组件常把逻辑拆到 <script>、<template>、<style> 三块，来回滚动易丢上下文。Bookmarks 不是替代跳转，而是标记“此刻我关心的位置”，比如：setup 函数开头、某个 watch 块、关键的 v-if 条件行。
- 快捷键
Cmd+Option+K（macOS）设书签，Cmd+Option+L下一个，Cmd+Option+J上一个——比反复Cmd+F搜关键词快得多 - 命名书签（
Cmd+Option+Shift+K）适合长期标记，比如 “api-error-handler” 或 “form-validation-rules”，但名称别带空格或特殊符号，否则命令面板过滤可能异常 - 书签默认不跨窗口持久化，如需重启后保留，在
settings.json加："bookmarks.saveToWorkspace": true
真正卡住 Vue 导航的，往往不是单个插件没装，而是 Volar 和 CSS Peek 的协作边界没理清，或者 Path Intellisense 依赖的 jsconfig.json 缺失——这些细节不处理，装再多插件也白搭。
