vue 3 项目必须用 volar,vetur 已停更且对 和 typescript 支持差,易致跳转失效、类型丢失;vue 2 项目可暂用 vetur,但建议升级。

Vue 项目该用 Vetur 还是 Volar?
Vue 3 项目必须用 Volar,Vetur 在 Vue 3 + TypeScript 场景下会频繁卡顿、跳转失败、<script setup></script> 无法识别,甚至导致 CPU 占用飙升。Volar 是 Vue 官方推荐的语言支持插件,基于 @vue/reactivity 实现按需计算,对组合式 API 和类型推导支持更原生。
Vue 2 项目可继续用 Vetur,但注意它已停止维护,新特性(如 ESLint 插件兼容性)不再更新。若项目计划升级 Vue 3,建议提前在 settings.json 中禁用 Vetur 并启用 Volar:
{
"vetur.ignoreProjectWarning": true,
"typescript.preferences.includePackageJsonAutoImports": "auto"
}
-
Volar需配合TypeScript Vue Plugin (Volar)扩展才能获得完整 TS 支持 - 启用 Volar 后,VSCode 默认的 TypeScript 语言服务会自动降级为“TypeScript Vue Plugin”,这是正常行为
- 如果
Ctrl+Click跳转不到组件定义,检查是否误启用了Vetur或未关闭其语言服务器
Tailwind CSS 类名补全失效怎么办?
Tailwind CSS IntelliSense 不只是高亮,核心价值是类名实时提示和 hover 预览样式。失效常见原因不是插件没装,而是配置没对:
- 项目根目录必须有
tailwind.config.js(哪怕内容为空),否则插件不激活 - 若使用
content配置扫描路径,请确保包含所有模板文件,例如:content: ["./src/**/*.{vue,js,ts,jsx,tsx}"] - VSCode 设置中开启
"tailwindCSS.experimental.classRegex": []可支持自定义 class 绑定语法(如:class="['foo', bar ? 'active' : '']") - 重启 VSCode 或运行命令
Developer: Restart Language Server常比重装插件更有效
React/TSX 文件里 JSX 语法不着色?
默认情况下,VSCode 对 .tsx 文件使用 TypeScript 语言模式,但 JSX 渲染依赖额外语法支持。单纯装 ESLint 或 Prettier 不能解决高亮问题。
必须安装 JavaScript and TypeScript Nightly(微软官方实验版)或确认已启用 TypeScript React Plugin —— 后者由 Volar 或 ESLint 插件间接提供,但容易被忽略。
- 打开一个
.tsx文件,右下角查看语言模式是否为TypeScript React,不是则点击手动切换 - 若仍无 JSX 高亮,检查
settings.json是否存在冲突配置:"files.associations": {"*.tsx": "typescript"}应改为"*.tsx": "typescriptreact" -
ES7+ React/Redux/React-Native snippets插件本身不提供高亮,只提供代码片段;高亮能力来自语言服务层
颜色值不显示色块预览?
Color Highlight 和 Color Info 都能实现颜色可视化,但行为差异明显:
-
Color Highlight在编辑器内直接渲染色块,支持 HEX、RGB、HSL、CSS 变量(如var(--primary)),但不支持悬停查看详情 -
Color Info不渲染色块,仅在悬停时弹出调色板和多格式值(HEX/RGB/HSL/CMYK),适合需要精确复制某一种格式的场景 - 两者可共存,但若发现颜色不响应,先检查是否被
Material Theme或其他主题插件覆盖了 color token 样式 - CSS-in-JS(如 styled-components)中颜色字符串默认不被识别,需在
settings.json中添加:"colorHighlight.languages": ["javascript", "typescript", "typescriptreact"]
高亮类插件真正起效的前提,是 VSCode 正确识别了当前文件的语言模式和语法范围 —— 很多人装了插件却没效果,其实是语言标识没对,而不是插件本身有问题。











