volar是vue3唯一推荐插件，必须禁用vetur；启用take over mode并确认右下角显示“volar (take over)”；确保.vue文件语言模式为vue；项目根目录需有tsconfig.json且未排除node_modules。
Vue 文件在 VSCode 里报红，90% 不是代码错了，而是语言服务没对上 —— Vetur 和 Volar 在打架。
为什么 Vetur 会让 Vue3 文件满屏红波浪线
Vetur 是为 Vue2 设计的，它硬编码了 export default、props: {} 这类 Options API 的解析逻辑，根本看不懂 defineProps()、defineEmits() 或 withDefaults。一旦启用，它就会强行把 <script setup></script> 当成普通 JS 解析，括号配对失效、类型推导中断、{{ }} 里变量标红、ref 跳转失灵 —— 全是表象，根子在语义解析崩了。
- 打开命令面板（Ctrl+Shift+P），输入
Developer: Toggle Developer Tools，看 Console 里有没有failed to load language service for vue或大量Vetur相关报错 - 鼠标悬停红波浪线处，提示里若带
Vetur字样，基本可锁定 - 即使项目跑得通，只要编辑器报红，说明 IDE 层面已放弃类型服务，后续 ref 补全、props 提示、模板内类型检查全不可用
怎么确认并启用正确的语言服务（Volar）
Volar 是 Vue 官方维护的 Vue3 专用语言服务器，它能把 .vue 拆成 TS 可理解的虚拟模块，括号匹配、跳转、补全、模板内类型推导才真正生效。但它的启用有明确前提：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 必须禁用或卸载 Vetur：扩展面板搜
Vetur→ 点击齿轮 → 选「禁用工作区」或「卸载」；再检查settings.json里是否残留"vetur.*"配置项，删掉 - 安装两个核心插件：
Vue Language Features（提供 SFC 支持）和TypeScript Vue Plugin（提供 TS 类型桥接），二者缺一不可 - 重启 VSCode：热重载不生效，必须完全退出再打开
- 验证是否生效：打开一个
.vue文件，在<script setup></script>里写const props = defineProps();，然后在<template></template>里敲{{ props.—— 如果能自动补全msg并显示类型，说明 Volar 已接管
为什么开了 Volar 还是报红？常见漏掉的三件事
Volar 启用只是第一步，以下配置不补全，照样红得理直气壮：
-
volar.experimental.templateInterpolationService默认关闭：这个开关控制{{ }}里的表达式是否做类型检查。不开它，{{ count + 1 }}、{{ props.msg.toUpperCase() }}全当字符串处理，无提示、无报错、也无类型保护。手动加到.vscode/settings.json："volar.experimental.templateInterpolationService": true -
defineProps类型声明太弱：写defineProps({ msg: String })，TS 推不出msg是string | undefined，模板里调msg.trim()就会红。必须用泛型：defineProps()或defineProps() -
tsconfig.json没包含自动生成的声明文件：比如用了unplugin-auto-import，生成了auto-imports.d.ts，但tsconfig.app.json里没写"include": ["*.d.ts"]，TS 就当它不存在，ref、computed等全局导入就标红
tsconfig.json 首行 { 报红怎么办
这不是 Vue 问题，是 VSCode 自带的 JavaScript 语义检查跟项目 TS 配置冲突。VSCode 默认对所有 JSON 文件启用 JS 检查，但 tsconfig.json 是纯配置文件，不该被 JS 引擎校验。
- 打开设置（Ctrl+,），搜
check js - 勾选
JavaScript > Implicit Project Config: Check JS—— 这个选项会让项目级tsconfig.json优先于 VSCode 内置检查 - 如果项目用了多配置（如
tsconfig.app.json引用tsconfig.node.json），确保主配置文件路径正确，且没有语法错误（比如末尾多逗号）
最常被忽略的是：Volar 的 template interpolation service 和 defineProps 泛型声明，这两项不设，等于只装了引擎却不点火 —— 看似启动了，实际模板里全是盲区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
