必须卸载vetur、安装volar及配套插件、在tsconfig.json中添加"types": ["vue"]并重启ts服务，否则defineprops报错、ref类型退化为any、路径跳转失效。
VSCode 里 Vue 开发环境配不起来，90% 不是插件没装全，而是关键开关没开、配置项写错位置、或旧插件在后台抢资源——比如 Vetur 没禁用，defineProps 就永远报 Cannot find name 'defineProps'；又比如 tsconfig.json 里漏了 "types": ["vue"]，连 ref() 的类型提示都会退化成 any。
为什么 defineProps 和 ref() 总是报错或没提示
根本不是代码写错了，而是 TypeScript 编译上下文没加载 Vue 类型定义。Volar 依赖 TS 服务注入声明，而这个注入的前提是项目级配置显式声明了类型来源。
-
tsconfig.json的compilerOptions.types必须包含"vue"，不能靠插件自动补全 - 如果用了
extends（比如继承./tsconfig.base.json），得去被继承的文件里改，只改当前文件无效 -
skipLibCheck: true会跳过@vue/runtime-core的类型，必须设为false - 改完后必须手动触发
Restart TS server（Ctrl+Shift+P → 输入该命令），重载窗口不够
Vue 文件里输 vue 按 Tab 没反应，到底卡在哪
触发代码片段只有两个硬性条件：语言模式必须是 Vue，且 snippet 的 scope 字段必须严格等于 "vue"。其他任何偏差都直接失效。
- 右下角状态栏显示的是
HTML或Plain Text？点它 → 选Vue（前提是已启用Volar） - 检查
vue.code-snippets文件里有没有"scope": "vue"—— 写成"html"、"javascript"或漏掉这一行，都不行 - 文件后缀是
.vue，但 VS Code 没关联：打开设置搜files.associations，加一行"*.vue": "vue" - 用了
Vetur而非Volar？Vue 3 项目中Vetur完全不支持scope: "vue"，必须禁用
为什么组件跳转、路径别名（如 @/components）点不进去
这不是插件功能缺失，而是 tsconfig.json 的路径映射和运行时配置没对齐。Volar 只读 tsconfig.json（或 jsconfig.json），完全 ignore vite.config.ts 里的 resolve.alias。
-
tsconfig.json的compilerOptions必须同时有："baseUrl": "./"和"paths"（例如"@/*": ["src/*"]） - 如果项目用的是 JS，必须用
jsconfig.json，且要设"checkJs": true，否则连基础类型推导都没有 -
paths值必须和 Vite/Webpack 的 alias 完全一致，大小写、斜杠方向、通配符都不能差 - 别名含
~或#？同样得在paths里显式声明，Volar 不解析任何运行时别名语法
格式化一保存就炸开？别让 Prettier 碰 .vue 文件
Prettier 对 Vue SFC 的模板结构理解有限，尤其在 <script setup></script> 和指令缩进上容易和 Volar 冲突。官方推荐由 Volar 全权接管格式化。
- 在设置里搜
prettier.vue，把Prettier: Vue Files Suffixes清空（留空或删掉vue） - 确保
Editor: Default Formatter设为Volar，不是Prettier - 如果用了 ESLint 自动修复，建议关掉 Prettier 的保存格式化，改用
eslint.format.enable，避免反复拉扯 - 确认
files.associations已设"*.vue": "vue"，否则 Volar 根本不会激活格式化能力
最常被忽略的一点：所有配置修改后，真正生效往往需要完整重启 VS Code 窗口（不是重载窗口），尤其是涉及 Volar 的语言服务、宏支持（experimental.vueMacros）和 tsconfig.json 变更——重载扩展或重载窗口都不够彻底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
