应安装Volar并禁用Vetur，手动将.vue文件语言模式设为Vue，配置files.associations为"*.vue":"vue"，关闭冲突格式器，确保typescript.tsdk指向本地TypeScript版本。
Vue 文件在 VSCode 中不显示语法高亮或格式化失效，基本就是语言模式没识别对、插件没装全、或者格式化器之间在“打架”。直接上解决路径，别绕弯。
确认 Vue 文件被识别为 vue 语言模式
VSCode 不会自动把 .vue 文件当 Vue 处理——它默认可能当成 html 或 plaintext。右下角状态栏点击当前语言标签（比如显示 “HTML”），手动选成 Vue 或 Vue HTML。如果列表里没有，说明核心插件没装。
- 必须安装
Volar（Vue 3 项目）或Vetur（Vue 2 项目），二者不能共存；Volar 已取代 Vetur 成为 Vue 3 官方推荐语言服务 - 禁用所有冲突插件：卸载
Vetur后再装Volar，否则高亮和跳转会错乱 - 打开一个
.vue文件后，按Ctrl+Shift+P输入Change Language Mode，确认生效语言是vue
保存时自动格式化 Vue 文件但缩进/引号错乱
这是 Prettier 和 VSCode 自带格式器或 Volar 内置格式器抢着干活导致的。关键不是“加功能”，而是“关干扰”。
- 关闭 VSCode 默认 JS/CSS 格式器：在设置里搜
javascript.format.enable和css.format.enable，都设为false - 确保
editor.defaultFormatter设为Vue.volar（Vue 3）或octref.vetur（Vue 2），而不是esbenp.prettier-vscode—— 后者只管 JS/TS/JSON，对<template>无效 - 如果要用 Prettier 统一风格，得靠 Volar 集成：在
settings.json里加"volar.format.defaultFormatter.js": "prettier"和"volar.format.defaultFormatter.html": "prettier"，并确保项目里有.prettierrc
beautify 插件对 Vue 的支持已过时且不可靠
HookyQR.beautify 是个老插件，2024 年起就不再维护，对 Vue 单文件组件的 <script setup>、<style scoped> 等新语法完全无法解析，强行启用会导致 <template> 被错误换行、属性挤成一行、甚至破坏响应式语法。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 别再往
beautify.language.html里加"vue"—— 这个配置只对旧式<template>生效，且和 Volar 冲突 - 删除本地
.jsbeautifyrc文件，它和 Prettier 规则不兼容，尤其brace_style和wrap_attributes会跟 Volar 的prettier模式打架 - 如需快捷键，直接绑定
editor.action.formatDocument，它会走 Volar 或 Prettier 当前激活的 formatter，不硬编码插件名
高亮颜色淡、括号不匹配、组件名没提示
这通常不是配置问题，而是主题或语言服务器没加载成功。Volar 启动需要时间，首次打开大项目可能延迟 2–5 秒，别急着关。
- 检查右下角是否显示
Volar Server: Ready；若显示Starting...或报错，删掉node_modules/.volar重开 VSCode - 换主题试试：有些轻量主题（如
GitHub Light）对 Vue 特有语法（v-if、@click、defineProps）支持弱，换成One Dark Pro或Monokai更稳 - 禁用所有非必要插件，尤其是
Auto Close Tag、Auto Rename Tag—— 它们和 Volar 的标签补全逻辑冲突，会导致高亮闪烁或丢失
真正卡住的点往往不在“怎么配”，而在“哪个插件该留、哪个必须杀”。Volar 和 Prettier 能共存，但前提是 VSCode 默认格式器、beautify、vetur 全部退场。留一个入口，规则才不会互相覆盖。
