volar是vue 3官方唯一支持defineprops等类型推导的语言服务器,必须禁用已废弃的vetur,否则其会劫持.vue文件导致volar静默失效;需确保右下角显示“vue (volar)”、.vue关联为vue语言模式、tsconfig.json含"types": ["vue"]并保存文件。

装 Volar 就够了,其他 Vue 补全插件不是多余就是冲突。Vetur 已废弃,Volar 是 Vue 3 官方唯一支持 defineProps、defineEmits 类型推导和模板跳转的语言服务器。
必须禁用 Vetur,否则 Volar 不会接管 .vue 文件
Vetur 和 Volar 会争夺 .vue 文件的控制权,只要 Vetur 启用,Volar 就静默失效——你看到右下角显示 “Vue (Vetur)” 或干脆是 “HTML”,补全就只剩基础标签提示,ref()、computed()、组件属性、事件签名全丢。
- 打开扩展面板(
Ctrl+Shift+X),搜索Vetur,点击「禁用」(不用卸载) - 确认已安装
Volar(发布者:Vue Language Features)和Volar: Vue Server(部分版本需单独装) - 重启 VSCode,不重启,Volar 的语言服务不会启动
- 打开任意
.vue文件,右下角状态栏必须显示Vue (Volar);若显示空白或HTML,点击它 → 「Configure File Association for '.vue'」→ 手动设为vue
tsconfig.json 或 jsconfig.json 必须存在且含 "types": ["vue"]
没有这个配置,VSCode 就不知道 defineProps() 是 Vue 类型,ref() 返回值会被当成 any,补全直接退化成纯 JS 提示。
审查 Vue 管理后台的变更请求(Vue 2 + Element UI,Vue 3 + Element Plus)。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
- 项目根目录必须有
tsconfig.json(TS 项目)或jsconfig.json(JS 项目) - 在
compilerOptions下添加:"types": ["vue"] - TS 项目建议同时加
"skipLibCheck": true,避免node_modules/vue类型冲突报错 - 改完后执行
Developer: Restart Extension Host(Ctrl+Shift+P输入),不要只刷新窗口
defineProps 没补全?检查泛型写法和是否已保存文件
defineProps 的类型提示严重依赖 TS 编译上下文,不是写了就有,常见断点就两个:写法不对、文件没保存。
- 错误写法:
const { title } = defineProps({ title: String })→ 解构导致类型擦除,补全消失 - 正确写法(推荐):
const props = defineProps(),再用props.title - 若需解构且带默认值,用
withDefaults:const { title } = withDefaults(defineProps(), { title: '' }) - 所有
defineProps、defineEmits补全只在<script setup></script>区域生效,且必须已保存文件(Ctrl+S),否则 TS 语言服务不重解析
补全失效从来不是“插件没装好”,而是语言服务链路断在某个环节:文件没关联对、Vetur 没禁掉、types 没声明、或者连保存都忘了。每一步都可验证,别跳步。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










