Volar是Vue 3官方推荐插件，必须禁用Vetur；启用Take Over Mode并确认右下角显示“Volar (Take Over)”；确保.vue文件语言模式为vue；项目根目录需有tsconfig.json且未排除node_modules。
Volar 必须启用，Vetur 在 Vue 3 中已失效
Vue 3 项目里用 Vetur，defineProps、defineEmits、ref 类型推导基本不工作，编辑器报红或跳转失败是常态。Volar 是 Vue 官方语言服务器，原生支持 <script setup lang="ts"></script> 的完整类型系统，不装它，TS 提示就只是“看起来有”，实际点不进、补不全、类型报错不准。
- 卸载 Vetur 后必须重启 VS Code —— 缓存不清理，Volar 的语言服务不会接管 .vue 文件
- 确保项目根目录有
tsconfig.json或jsconfig.json，否则 Volar 无法解析模块路径和类型定义 - 若
compilerOptions.types未包含"@vue/runtime-dom"，组件 props 的类型提示会大面积丢失
Vue 3 Snippets 补齐高频 API 快捷输入
光靠 Volar 能跳转、能推导，但写 onMounted(() => {}) 这类代码仍要手敲。Vue 3 Snippets 提供 vs-setup、vs-onm、vs-ref 等前缀触发的片段，按 Tab 就展开带类型标注的模板，比纯记忆快且不易拼错。
立即学习“前端免费学习笔记（深入）”；
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
-
vs-setup生成标准<script setup lang="ts"></script>结构，自动引入defineProps和defineEmits -
vs-ref插入const count = ref<number>(0)</number>，光标停在泛型和初始值处，可直接修改 - 不建议与旧版 Vue Snippets 混用，冲突会导致片段不触发或覆盖错误
路径补全失效？不是插件问题，是 jsconfig.json 配置没生效
写 import { utils } from '@/utils' 时没提示，第一反应常是 Path Intellisense 没装好。其实它默认只识别物理路径（如 ./src/utils），对 @/ 别名无感知 —— 这是 TypeScript 模块解析的事，得靠 jsconfig.json 告诉编辑器“@ 指向哪”。
- 在项目根目录新建
jsconfig.json，内容含"baseUrl": ".", "paths": {"@/*": ["src/*"]} - 改完必须执行
Cmd+Shift+P→Developer: Reload Window，否则缓存不刷新，补全永远不出现 - 别依赖插件级的
path-intellisense.mappings设置，它无法同步 Webpack/Vite 的真实解析逻辑，容易误导
组件名跳转不到定义？检查 Volar 是否被其他插件抢占语言模式
在模板中点击 <mybutton></mybutton> 按 F12 却跳到空白或报 “No definition found”，大概率是 Volar 的语言服务没真正激活。常见干扰源是 Auto Import 或某些旧版语法高亮插件，它们会注册 vue 语言 ID 并拦截请求。
- 打开命令面板，运行
Developer: Show Language Extensions，确认volar是vue文件的默认语言服务器 - 临时禁用 Auto Import、Vetur、Vue Syntax Highlight 等插件，逐个排查是否冲突
- 如果项目用了
unplugin-vue-components自动导入，需在volar.config.json中显式配置"plugins": ["auto-import"]，否则组件名无法索引
最易被忽略的是：Volar 的能力高度依赖项目配置的真实性和一致性。.vue 文件里写错一个 lang="tsx"，或者 tsconfig.json 里漏了 "include"，智能提示就会局部退化成“猜”，而不是“知道”。
