根本原因是prettier、eslint、vetur职责未厘清；应禁用vetur格式化，统一由prettier接管vue文件的html/js/ts格式化，并通过.vscode/settings.json、.prettierrc、.eslintrc.js三配置协同确保团队格式一致。
Vue 文件在 VSCode 里格式化不一致，根本原因不是插件没装全，而是 Prettier、ESLint、Vetur 三者职责没划清——谁该管 HTML？谁该管 script？谁该被禁用？
为什么保存后 Vue 文件还是乱套？
常见现象：Ctrl+S 后，<template></template> 部分缩进正常，但 <script></script> 里箭头函数突然被加了括号、console.log 没被删、属性换行错乱。这通常是因为：
- Vetur 默认启用自己的
js-beautify-html和prettier混用，而两者对wrap_attributes、arrowParens等规则理解不同 -
editor.formatOnSave开启了，但"[vue]"块里没明确指定默认格式化器，VSCode 随机选一个 -
vetur.format.enable为true，却没关掉它对 JS/TS 的格式化（它和 Prettier 冲突最猛）
如何让 Prettier 全权接管 Vue 文件？
核心动作：把 Vetur 降级为「语法高亮 + 补全」工具，格式化全部交给 Prettier。关键配置项必须写进项目根目录的 .vscode/settings.json（优先级高于用户设置）：
-
"editor.defaultFormatter": "esbenp.prettier-vscode"—— 全局兜底，防漏 -
"[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }—— 强制 Vue 文件走 Prettier -
"vetur.format.defaultFormatter.html": "prettier"—— 连 HTML 也交出去 -
"vetur.format.defaultFormatter.js": "prettier"、"vetur.format.defaultFormatter.ts": "prettier"—— JS/TS 不留给 Vetur -
"vetur.format.enable": false—— 最彻底：直接关掉 Vetur 的格式化引擎（2025 年后推荐）
ESLint 和 Prettier 能不能一起用？
能，但必须避免双重修复。错误做法是同时开启 editor.formatOnSave 和 eslint.autoFixOnSave；正确链路是：
- 只开
"editor.formatOnSave": true，靠 Prettier 做格式统一 - 开
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }，让 ESLint 只修语义问题（比如no-console、no-unused-vars），不碰空格缩进 - 确保
eslint-plugin-prettier已安装，并在.eslintrc.js中加入extends: ["plugin:prettier/recommended"]，屏蔽 ESLint 自带的格式类规则 - 删掉所有类似
"eslint.validate": ["vue"]的旧写法，改用"eslint.validate": ["javascript", "typescript", "vue"]（新版 ESLint 支持直接验 Vue）
格式化后 HTML 标签还是不对齐？
这是 Prettier 对 Vue 模板的默认行为限制所致。它不会强制 wrap_attributes，也不会按属性名长度自动对齐。如果你团队真需要这种「列对齐」效果（例如所有 v-model 垂直对齐），Prettier 本身做不到——得换方案：
- 保留
vetur.format.defaultFormatter.html: "js-beautify-html"，但仅用于<template></template> - 在
vetur.format.defaultFormatterOptions中配"js-beautify-html": { "wrap_attributes": "force-aligned" } - 同时把
vetur.format.defaultFormatter.js和ts改回"prettier"，保持逻辑层干净 - 注意：
js-beautify-html不读.prettierrc，它的缩进、引号等需单独配，且和 Prettier 规则可能冲突
真正难搞的从来不是「怎么配」，而是「同一份代码，在不同人机器上保存后是否生成完全一致的 diff」——这要求 .prettierrc、.eslintrc.js、.vscode/settings.json 三者严格共存，缺一不可。任何一方脱离版本控制，就等于埋了个格式炸弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
