答案是通过配置VSCode使用Prettier作为Vue文件的默认格式化工具，并正确设置vetur.format.defaultFormatter各项语言为prettier，同时确保项目中安装Prettier依赖并配置.prettierrc文件，可解决Vetur与Prettier的格式化冲突，实现保存时自动统一格式化。
要在VSCode里搞定Vue文件的自动格式化，尤其是当Vetur时不时给你添堵的时候，其实没那么复杂，核心就是告诉VSCode，你到底想让谁来做这个“美化”工作。通常，这涉及到明确指定一个格式化器（比如Prettier），并确保它的配置是正确的，同时让VSCode知道在保存文件时自动执行。
解决方案
说起来，解决VSCode中Vue文件格式化问题，特别是Vetur可能带来的那些小麻烦，我通常会从几个层面入手，这套组合拳下来，基本上能把问题搞定。
首先，最直接的办法是确保VSCode知道你希望用哪个格式化器来处理Vue文件。很多时候，Vetur自带的格式化器可能不是我们最想要的，或者它的默认配置不符合团队规范。所以，我一般会强制指定Prettier作为Vue文件的默认格式化工具。你可以在
.vscode/settings.json（项目级设置，推荐）或者用户设置中添加：
{
"editor.defaultFormatter": "esbenp.prettier-vscode", // 全局或特定文件类型的默认格式化器
"editor.formatOnSave": true, // 开启保存时自动格式化
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" // 专门为Vue文件指定Prettier
},
"vetur.format.defaultFormatter.html": "prettier", // 告诉Vetur，HTML部分用Prettier
"vetur.format.defaultFormatter.css": "prettier", // CSS部分用Prettier
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "prettier",
"vetur.format.defaultFormatter.js": "prettier", // JS部分用Prettier
"vetur.format.defaultFormatter.ts": "prettier", // TS部分用Prettier
"vetur.format.defaultFormatter.json": "prettier",
// 甚至可以考虑禁用Vetur自带的一些格式化，让Prettier全权接管
// "vetur.format.enable": false // 如果Prettier能完全处理，可以考虑禁用Vetur的格式化功能
}这里面有几个关键点：
editor.defaultFormatter是通用设置，但
[vue]块是专门针对Vue文件类型的，它的优先级更高。我还会明确告诉Vetur，它内部的HTML、CSS、JS等部分都交给Prettier来处理，这样可以避免Vetur使用它自己的内置逻辑，导致格式化风格不一致。
立即学习“前端免费学习笔记（深入）”；
其次，你需要确保你的项目里安装了Prettier相关的依赖和VSCode扩展。如果没有
esbenp.prettier-vscode这个扩展，上面的设置自然就无效了。在项目根目录安装
prettier：
npm install --save-dev prettier # 或者 yarn add --dev prettier
然后，在项目根目录创建一个
.prettierrc文件（或者在
package.json中配置
prettier字段），这是Prettier的配置文件，你可以根据团队规范来定义格式化规则，比如单引号、末尾逗号、tab宽度等。这个文件是决定Prettier如何工作的核心。
// .prettierrc
{
"singleQuote": true,
"trailingComma": "es5",
"printWidth": 100,
"tabWidth": 2,
"semi": false,
"vueIndentScriptAndStyle": true // Vue文件特有，让script和style标签内容也缩进
}最后，如果还遇到问题，我会检查VSCode的输出面板（
View -> Output），选择“Vue Language Server”或“Prettier”查看是否有报错信息。有时候，插件冲突或者某个配置写错了，这里会有提示。
Vetur与Prettier格式化冲突的根本原因及解决之道
我经常听到有人抱怨Vetur和Prettier在Vue文件格式化上“打架”，导致格式化效果不尽如人意，甚至出现反复横跳的情况。这其实不难理解，Vetur作为Vue的语言支持扩展，它本身就内置了一套格式化机制，而Prettier则是一个独立的、更“专精”的代码格式化工具。当两者都想对同一个文件进行格式化时，冲突就产生了。
Vetur内部会根据文件类型（HTML、CSS、JS/TS）调用不同的格式化器，比如它可能会用
vscode-typescript来格式化
