必须禁用vetur、启用volar才能获得vue 3正确补全；defineprops需用泛型或withdefaults避免类型擦除；setup中变量须显式返回或defineexpose暴露；确保tsconfig.json配置"types": ["vue"]且关闭volar校验以配合eslint。
Vue 文件里写 ref 或 computed 后，变量名不自动提示、props 类型推导失效、defineProps 解构后丢失类型——不是你代码写错了，是 VSCode 没用对语言服务器。
必须禁用 Vetur，启用 Volar 才能获得 Vue 3 正确补全
Vetur 和 Volar 会冲突，且 Vetur 对 <script setup></script> 的类型支持基本停留在 Vue 2 阶段。VSCode 默认可能仍激活 Vetur，导致补全卡在模板层、无法穿透到响应式逻辑内部。
- 打开扩展面板（Ctrl+Shift+X），搜
Vetur，点击「禁用」（不是卸载） - 确认已安装
Volar（Vue 官方维护，ID：vue.volar） - 重启 VSCode：不重启，Volar 不会接管
.vue文件的语言模式 - 打开任意
.vue文件，右下角状态栏应显示「Vue (Volar)」，而非「Vue」或「Vetur」
defineProps 解构后没提示？加 withDefaults 或用泛型声明
直接解构 defineProps 返回的对象会导致 TS 类型擦除，Volar 无法推导属性类型，补全自然消失。
- 错误写法：
const { title, count } = defineProps({ title: String, count: Number })→ 补全失效 - 推荐写法（泛型）：
const props = defineProps()，再用props.title访问 - 若需解构且带默认值，用
withDefaults：const { title, count } = withDefaults(defineProps(), { count: 0 }) - 确保项目根目录有
tsconfig.json，且"compilerOptions": { "types": ["vue"] }已配置，否则泛型推导会退化
template 中 ref 变量不提示？检查 setup 返回是否被正确识别
Vue 模板中使用的变量必须显式返回（或通过 defineExpose 暴露），否则 Volar 不会将其纳入模板作用域补全范围。
-
<script setup></script>中定义的顶层ref、computed默认自动暴露，但需确保没有被包裹在函数/条件块内 - 避免写成：
if (true) { const name = ref('') }→name不会进入模板作用域 - 组合式函数（如
useCounter()）返回的对象，需用defineExpose显式导出：defineExpose({ count, increment }) - 如果用了
shallowRef或customRef，Volar 当前版本（v1.12+）对它们的模板补全支持仍不稳定，优先用ref
ESLint 校验和补全冲突？关掉 Volar 的内置校验，交给 ESLint 插件
Volar 自带语法诊断（如 no-unused-vars）和 ESLint 规则重叠，容易造成重复报错、补全建议被干扰。
- 在
settings.json中关闭 Volar 校验："volar.validation.interpolation": false - 保留 ESLint 插件（
dbaeumer.vscode-eslint）并启用："eslint.enable": true - 确保项目中有
.eslintrc.cjs或.eslintrc.js，且extends包含"plugin:vue/vue3-essential"或更严格的vue3-recommended - 不要同时开启
"vetur.validation.template"（Vetur 已禁用，此项无效）和"volar.validation.template"（它只做基础语法检查，不替代 ESLint）
补全失效最常发生在插件切换后未重启、defineProps 泛型缺失、或 setup 内部逻辑被意外封闭这三处。Volar 的补全能力依赖精确的 TS 类型流，任何一处断开，模板和脚本间的桥梁就塌了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
