Vue 3 开发必须用 Volar 而非已停更的 Vetur，它完整支持 setup、defineProps 等语法和类型推导；需禁用 Vetur、启用 sourceMap、遇跳转失效时重启 Volar 服务；VueHelper 仅补全模板指令和 API 缩写，不参与类型检查；CSS Peek 仅支持静态 class 跳转；Bookmarks 命名书签可高效跨文件定位逻辑入口。
VSCode 做 Vue 开发，光靠基础语法高亮和 Emmet 远远不够——跳转不到 setup() 里的响应式变量、ref 和 computed 类型推导不准、defineProps 的参数无法被 ESLint 检查，这些问题不是 Vue 写得不对，而是插件没配对。
Vue 3 项目必须用 Volar，不是 Vetur
Vetur 已停止维护，对 defineProps、defineEmits、withDefaults 等组合式 API 支持极弱，类型提示常为空，跳转经常失效。Volar 是当前唯一能完整解析 .vue 单文件组件语义的语言服务器。
- 安装后需在 VSCode 设置中禁用 Vetur（如有），否则两者冲突导致诊断错误或补全消失
- 确保工作区启用
"vue.experimental.enableSourceMap": true（某些 TS 插件依赖此开关） - 若使用 TypeScript，Volar 会自动接管
.vue文件的类型检查，无需额外配置types字段 - 遇到跳转失效时，先执行
Volar: Restart Server命令，比重启编辑器更快
VueHelper 补全指令和选项，但别依赖它写逻辑
VueHelper 提供 v-if、v-for、key 等模板指令的快捷片段，也支持 onMounted、watch 等组合式 API 的缩写。但它不参与类型校验，也不影响编译行为。
- 输入
v-后按Tab或Enter可展开常用指令；输入on后可快速插入生命周期钩子 - 它生成的代码不含类型标注，
watch(() => count, (n) => {...})中的n不会被推导为number - 与 Volar 共存无冲突，但若已开启 Volar 的自动导入（如自动补全
ref），建议关闭 VueHelper 的重复补全项
CSS Peek 跳转 class 定义，但仅限普通 class 名
当光标停在 HTML 模板的 class="btn-primary" 上，按 F12 可直接跳到 .btn-primary 的 CSS 定义处——前提是这个类名没被动态拼接、没用 :class 绑定、也没经过 scoped 处理。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 对
:class="{ active: isActive }"中的active无效；对scoped样式中的类名，跳转目标是编译后的哈希类（如.btn-primary[data-v-abc123]），而非源码位置 - 若项目用 CSS Modules 或
unplugin-vue-components自动导入，CSS Peek 无法识别生成的类名 - 配合
IntelliSense for CSS class names插件，可在class=""属性内实时提示已定义类名，弥补跳转盲区
Bookmarks 解决跨文件逻辑锚点问题，但命名书签才真正有用
Vue 项目常把逻辑拆到 composables/、stores/、api/ 等目录，调试时频繁在 setup()、useCounter.ts、pinia store 之间跳转。此时靠文件搜索或记忆行号效率极低。
- 用
Cmd+Option+Shift+K（macOS）给关键函数入口打命名书签，如init-store、fetch-user-data，比默认无名书签更可靠 - 命名书签支持命令面板模糊搜索：
Cmd+Shift+P→Bookmarks: Jump to Bookmark→ 输入user就能匹配fetch-user-data - 书签不随 Git 提交，也不会同步到其他同事的机器上，它只服务你当前调试路径——这点反而避免了误跳到别人标记的“已过期”位置
真正卡住 Vue 导航体验的，从来不是插件数量，而是 Volar 是否启用、是否禁用了旧插件、以及命名书签这类轻量但精准的个人导航习惯——它们不改变代码，却决定了你每天花多少时间在找代码上。
