应停用vetur并启用volar:vetur不支持vue 3的和组合式api,与volar冲突;需禁用/卸载vetur、开启volar的templateinterpolationservice、正确声明defineprops类型、确保vue-language-features启用,并匹配ts版本。

Vue 3 项目里 Vetur 还在报 Unknown html tag 红线?停用它
Vetur 本质不支持 Vue 3 的 <script setup></script> 和组合式 API 模板语义,强行启用只会让 <template></template> 里满屏红线、属性无提示、ref() 解析失败。VSCode 安装了 Vetur,又装了 Volar,两者会冲突——Vetur 优先级更高,直接压垮 Volar 的正确解析。
实操建议:
- 彻底卸载或禁用 Vetur:点击扩展面板 → 搜索
Vetur→ 点击齿轮图标 → 选择「禁用工作区」或「卸载」 - 确认 VSCode 没有全局启用 Vetur:检查
settings.json里是否残留"vetur.*"配置,删掉 - 重启 VSCode:插件切换需完全重启,热重载不生效
Volar 必须开启 experimental.templateInterpolationService
默认情况下,Volar 对 {{ }} 内的表达式(比如 {{ count + 1 }}、{{ props.msg.toUpperCase() }})不做类型检查,也不提示 ref/unref/计算属性,看着没报错,实则 IDE 失明。
开启后,模板内变量、方法、响应式解构都能获得和 <script></script> 区一致的 TS 类型推导和跳转能力。
实操建议:
- 打开 VSCode 设置(Ctrl+,),搜索
volar experimental template - 勾选
Volar > Experimental: Template Interpolation Service - 或手动在
.vscode/settings.json中加:"volar.experimental.templateInterpolationService": true
- 注意:该选项仅对
<script setup></script>有效;Options API 项目需额外配volar.optionsApiSetupHelper
单文件组件里 <script setup lang="ts"></script> 缺少 defineProps 类型提示?补上显式声明
很多人写 defineProps({ msg: String }),TS 不知道 msg 是 string 还是 string | undefined,Volar 就无法推导模板中 {{ msg.trim() }} 是否合法,导致提示缺失或误报红线。
实操建议:
- 永远优先用泛型语法声明 props:
const props = defineProps();
- 避免运行时声明(
defineProps({})),除非配合withDefaults且明确标注可选性 - 如果用了
defineModel,确保 Volar 版本 ≥ 1.6.0,旧版不识别该 API - 检查
tsconfig.json中是否含"types": ["volar"](非必需,但能加固类型服务)
为什么改完配置还是没提示?检查 vue-language-features 是否被禁用
Volar 实际由两个核心部分组成:volar-server(提供语言服务)和 vue-language-features(负责模板高亮、格式化、Emmet 支持)。后者常被误关,结果是语法高亮正常、但所有智能提示消失,看起来像“配置没生效”。
实操建议:
- 打开扩展面板 → 搜索
Volar→ 展开详情 → 查看「其他相关扩展」列表 - 确认
Vue Language Features Extension Pack已安装,并且Vue Language Features子项处于启用状态 - 如果项目根目录有
jsconfig.json或tsconfig.json,确保其中"include"包含**/*.vue,否则 Volar 不加载 Vue 文件 - 大型 monorepo 项目容易漏掉 workspace-level 的插件启用,记得在工作区设置里单独启用
最常被忽略的是:Volar 的模板服务依赖 TS 语言服务版本匹配。如果你用的是 Vue 3.4+,务必升级 VSCode 内置 TS 到 5.0+(通过右下角 TS 版本号点击切换),否则 defineSlots、泛型组件等新特性直接不识别。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











