vue 3项目必须用volar而非vetur，因vetur已停止维护；vue 2项目可用vetur但需禁用其格式化并交由prettier统一处理，且须确保vscode语言模式识别为vue。
Vue 3 项目必须用 Volar，Vetur 已不维护；Vue 2 项目可用 Vetur，但需禁用其默认格式化，交由 Prettier 统一处理。
Vue 2 项目中 Vetur 格式化失效的常见原因
Vetur 默认启用自己的格式化器，但它对 <script setup></script>、<style scoped lang="scss"></style> 等现代写法支持有限，且容易与 Prettier 冲突。保存无反应、CSS 不缩进、JS 部分被跳过，基本都源于此。
- 未显式关闭
vetur.format.enable，导致 Vetur 和 Prettier 同时抢格式化权 -
vetur.format.defaultFormatter.js仍设为vscode-typescript或prettier但未安装prettier依赖 - 项目根目录缺少
.prettierrc，VSCode 读不到规则，Prettier 退回到默认行为（如保留分号、双引号） -
[vue]语言块配置缺失或拼写错误，例如写成"[Vue]"或"vue"（没加方括号）
Vue 3 项目必须用 Volar + Prettier 组合
Volar 是 Vue 官方推荐的语言服务器，Vetur 已于 2023 年停止维护。Volar 本身不内置格式化器，它把格式化完全交给 Prettier，因此配置更干净、冲突更少。
- 安装插件：
Vue - Volar（非Vue2 - Vetur），并确保禁用同名旧插件 - 在
.vscode/settings.json中只需两行核心配置："[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }和"editor.formatOnSave": true - 无需设置
volar.format.*类配置项——Volar 没有这类选项，写了也无效 - 若使用
<script setup lang="ts"></script>，确保 Prettier 版本 ≥ 2.8.0，否则会忽略 script 区域
Prettier 配置文件必须存在且语法合法
VSCode 的 Prettier 插件只在检测到项目级配置文件（.prettierrc、prettier.config.js 等）时才真正“激活”全部规则。没有它，插件可能仅做基础缩进，不处理引号、分号、尾逗号等关键风格。
- 推荐用 JSON 格式的
.prettierrc，避免module.exports = {}在 ESM 项目中静默失败 - 必配项示例：
{"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 120, "vueIndentScriptAndStyle": false} - 若项目同时用 ESLint，务必安装
eslint-config-prettier并在.eslintrc.js中extends它，否则 ESLint 的 auto-fix 可能覆盖 Prettier 格式 - 检查状态栏：打开一个
.vue文件，右下角应显示Prettier，而非None或ESLint
最容易被忽略的是语言模式识别——哪怕所有配置都对，如果 VSCode 把 .vue 文件识别为 HTML 或 Plain Text，格式化根本不会触发。务必点击右下角语言模式，手动选成 Vue（Volar）或 Vue (Vetur)（Vue 2）。这个动作只做一次，但决定整个流程是否启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
