Vue 3项目必须禁用Vetur、改用Volar，因其基于官方语言服务，支持TS精准类型检查和vue-tsc校验，可解决类型提示错乱、ref/computed推导失败、defineProps无法识别及script setup不亮等问题。
Vue项目必须禁用Vetur、改用Volar
Vue 3项目里继续用Vetur会导致类型提示错乱、ref/computed推导失败、defineProps无法识别，甚至script setup语法直接不亮。官方明确推荐切换到Volar——它基于Vue官方语言服务，支持TS精准类型检查和vue-tsc校验。
实操要点：
- 先在VSCode扩展中禁用或卸载
Vetur，否则两者会冲突 - 安装
Volar后，打开任意.vue文件，右下角状态栏点击“Vue”图标，确认语言模式是Vue (Volar)而非Vue（后者是Vetur） -
Volar默认不带格式化能力，需额外装Prettier和ESLint插件，并在settings.json中配置"editor.defaultFormatter": "esbenp.prettier-vscode" - 如果
<style></style>块用了postcss或stylus，要单独装language-postcss或language-stylus，否则样式部分不亮
JavaScript/TypeScript高亮靠Pylance和TypeScript Nightly
新手常以为装了JavaScript and TypeScript Nightly就万事大吉，其实它只提供基础语法高亮和简单补全；真正影响类型提示质量的是Pylance——但注意：Pylance是Python插件，对JS/TS无效。JS/TS的深度类型支持依赖VSCode内置的TypeScript服务，而TypeScript Nightly插件的作用是提前接入TS最新版语言服务器（比如TS 5.6 beta），让const foo = defineComponent({})这类新API能立刻获得正确推导。
常见错误现象：
- 写
ref(123).value时没有自动补全value属性 → 检查是否启用了"typescript.preferences.includePackageJsonAutoImports": "auto" - TS报错
Cannot find name 'defineAsyncComponent'→ 确认项目node_modules/typescript版本 ≥ 4.9，且TypeScript Nightly已启用 - JS文件里
import路径没高亮、跳转失效 → 在jsconfig.json中加"checkJs": true并重启TS服务（Ctrl+Shift+P → “TypeScript: Restart TS server”）
CSS/SCSS颜色值高亮必须配Color Highlight
仅靠VSCode内置CSS支持只能高亮语法结构，#3b82f6、rgb(59, 130, 246)、var(--primary)这些颜色值本身仍是纯文本。不装Color Highlight，你永远不知道自己写的颜色是不是真被识别为色值。
使用场景与细节：
- 支持所有主流颜色写法：
hex、rgb(a)、hsl(a)、named colors、CSS变量（需配合CSS Variables插件增强） - 在
vue单文件组件的<style scoped></style>里同样生效，但若用了postcss-nested等插件，需确保Color Highlight设置中启用了"colorHighlight.languages": ["*"] - 性能影响极小，但若项目含大量内联
style="color: #..."的HTML，可限制只作用于.css/.scss/.vue文件，避免扫描全项目
错误行内高亮靠Error Lens，不是Problems面板
新手盯着左下角Problems面板找报错，效率极低：要手动点开、定位文件、再滚动到行号。而Error Lens把错误信息直接渲染在出错行末尾，像IDEA一样一目了然。
为什么必须装它：
- 它读取的是VSCode原生诊断信息（来自
ESLint、TSC、Volar等），不重复造轮子 - 支持
hover查看完整错误栈，Ctrl+Click直接跳转到规则文档（比如ESLint的no-console说明页） - 默认开启
"errorLens.showOnSaveOnly": false，即实时响应，但大型项目可设为true防卡顿 - 和
TODO Highlight共存时，注意设置"errorLens.exclude": ["TODO", "FIXME"]，避免把待办事项误标为错误
高亮类插件最易被忽略的是协同逻辑：Volar管Vue语法、TypeScript Nightly管TS类型、Color Highlight管颜色字面量、Error Lens管错误呈现——它们不重叠，也不替代，缺一不可。装完别忘了检查状态栏右下角的语言模式和错误图标是否实时响应，这才是高亮生效的真实信号。
