安装Volar扩展并禁用Vetur，可在VSCode中实现Vue.js语法高亮；Volar支持Vue 2/3，提供智能提示与错误检查，Vue 2项目需启用兼容模式或配置vueCompilerOptions指定版本。
要让 VSCode 支持 Vue.js 语法高亮，只需安装合适的扩展并确保配置正确。Vue 文件（.vue）包含模板、脚本和样式三部分，需要专门的语法支持才能正确高亮。
安装 Volar 扩展
Vue 官方推荐使用 Volar 来支持 Vue 3 项目。如果你使用的是 Vue 2 或 Vue 3，Volar 都能提供完整的语法高亮、智能提示和错误检查。
- 打开 VSCode，进入扩展市场（快捷键 Ctrl+Shift+X）
- 搜索 "Volar"（作者：Vue Language Features）
- 点击安装
安装完成后，.vue 文件中的 template、script 和 style 区域都会被正确解析和高亮。
如果是 Vue 2 项目，启用兼容模式
某些老项目使用 Vue 2，可能需要开启 Volar 的 Vue 2 支持：
立即学习“前端免费学习笔记（深入）”；
- 在 VSCode 设置中搜索 "volar"
- 找到 Volar: Take Over Mode 或相关设置
- 确保其启用以兼容 Vue 2 的语法结构
你也可以在项目根目录添加 vueCompilerOptions 到 jsconfig.json 或 tsconfig.json 中，指定 Vue 版本：
{
"vueCompilerOptions": {
"target": 2
}
}
禁用旧的 Vetur 扩展（如有）
如果你之前安装过 Vetur，建议禁用它，避免与 Volar 冲突：
- 进入扩展列表
- 找到 Vetur
- 点击“禁用”或卸载
Volar 已成为 Vue 官方主推工具，功能更全面，尤其对组合式 API 和 TypeScript 支持更好。
基本上就这些。安装 Volar 后，重启 VSCode，打开 .vue 文件就能看到语法高亮正常显示了。
