如何让 Vue 项目告别格式混乱？Vetur + Prettier 实战配置全解析
你有没有遇到过这样的场景？
团队里有人写代码偏爱双引号，有人坚持单引号；缩进用Tab还是 4 个空格争执不休；提交 Git 的时候，一行逻辑没变，却因为多了几个空格被标红……更别提.vue文件里模板嵌套一堆标签挤在一行，看得人头晕眼花。
这些问题看似琐碎，实则严重影响协作效率和代码可维护性。而解决它们的关键，并不是开会定规范、贴墙上提醒，而是——把格式交给机器自动处理。
在 Vue 项目中，最成熟、最实用的自动化格式方案之一，就是Vetur 集成 Prettier。这套组合拳能让你的<template>、<script>、<style>块在保存时自动“整容”，变得清爽一致。
本文将带你从零开始，手把手完成 Vetur 与 Prettier 的深度整合，不仅告诉你怎么配，更讲清楚为什么这么配，帮你避开常见坑点，真正实现“开箱即用”的团队级代码规范。
为什么选 Vetur + Prettier？
先说结论：这不是唯一选择，但对大多数 Vue 2 或过渡期 Vue 3 项目来说，它依然是最稳定、兼容性最好、学习成本最低的方案。
Vetur 到底是什么？
简单说，它是 VS Code 上专为 Vue 打造的“全能助手”。由尤雨溪亲自维护，支持语法高亮、智能补全、跳转定义、错误提示，当然也包括我们关心的——多语言块格式化。
一个.vue文件本质上是三种语言的混合体：
<template> <!-- HTML --> <div>Hello</div> </template> <script> <!-- JavaScript / TypeScript --> export default {} </script> <style> <!-- CSS / SCSS / Less --> .container { font-size: 14px; } </style>Vetur 的厉害之处在于，它能把这三块拆开，分别调用对应的解析器去处理，然后再拼回去。这就为接入 Prettier 提供了可能。
Prettier 又强在哪？
Prettier 不是一个普通的格式化工具，它是“有立场的”（opinionated）。什么意思？就是它不跟你商量：“我觉得这样好看”，而是直接告诉你：“就这样排版，别改了”。
这种“强制统一”的哲学，恰恰是团队协作中最需要的。它消除了主观审美差异，让所有人输出的代码长得一模一样。
而且 Prettier 支持的语言足够广：JS、TS、Vue、HTML、CSS、JSON、Markdown……一套配置走天下。
更重要的是，它可以完美嵌入 Vetur 的流程中，成为其背后的实际“美容师”。
核心配置思路：谁来负责哪一块？
要让 Vetur 调用 Prettier，关键在于搞清楚两者的分工：
- Vetur：负责识别
.vue文件结构，把不同区块分发出去。 - Prettier：作为具体的格式化引擎，真正执行重写任务。
所以我们的目标很明确：
👉 在 VS Code 中设置默认格式化器为 Vetur；
👉 再告诉 Vetur，每个语言块都去找 Prettier 处理。
这就像是医院里的导诊台（Vetur）把病人按科室分流到各个医生（Prettier）那里看病。
实战配置五步走
下面进入正题，一步步搭建你的自动格式化流水线。
第一步：安装依赖
推荐在项目本地安装 Prettier，避免团队成员因全局版本不同导致格式差异。
npm install --save-dev prettier✅ 小贴士：永远优先使用项目级依赖，这是保证一致性的重要前提。
第二步：创建 Prettier 配置文件
在项目根目录新建.prettierrc：
{ "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5", "printWidth": 80, "arrowParens": "avoid", "htmlWhitespaceSensitivity": "ignore" }解释几个关键配置：
| 参数 | 说明 |
|---|---|
singleQuote: true | 使用单引号，更适合 JS 生态 |
trailingComma: “es5” | 对象/数组末尾加逗号，便于 Git diff 和后续添加 |
arrowParens: “avoid” | 单参数箭头函数省略括号(x) => x→x => x |
htmlWhitespaceSensitivity: “ignore” | 重点！Vue 模板中空格敏感可能导致布局错乱，必须设为ignore |
⚠️ 如果你不加
htmlWhitespaceSensitivity: "ignore"，Prettier 可能会把你原本有意留白的模板结构给“压扁”了，尤其在使用v-if/v-for时容易出问题。
第三步：配置 VS Code（settings.json）
打开.vscode/settings.json（没有就创建），加入以下内容：
{ "editor.defaultFormatter": "octref.vetur", "editor.formatOnSave": true, "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier", "vetur.format.defaultFormatter.json": "prettier", "vetur.format.defaultFormatter.vue": "prettier", "vetur.validation.script": true, "vetur.validation.style": true, "vetur.validation.template": true }逐条解读：
"editor.defaultFormatter": "octref.vetur"
设置默认格式化工具为 Vetur。注意 ID 是octref.vetur，别写错。"editor.formatOnSave": true
保存即格式化，开发体验丝滑的关键。"vetur.format.defaultFormatter.*": "prettier"
明确指定所有语言块都交由 Prettier 处理。特别是js和ts，很多人忘了设，结果 script 块还是用 Vetur 内建规则排版。"vetur.validation.*": true
启用语法校验，及时发现拼写错误或语法问题。
💡 建议把这个
settings.json提交进 Git，确保新同事 clone 项目后也能一键获得相同环境。
第四步：处理 ESLint 冲突（重要！）
如果你的项目已经集成了 ESLint，这里有个大坑：ESLint 也有格式化规则，比如quotes、semi、indent等，会和 Prettier “打架”。
解决方案：让 ESLint只管语义错误（如未定义变量、类型错误），不管格式问题。
安装冲突消除插件：
npm install --save-dev eslint-config-prettier然后修改.eslintrc.js：
module.exports = { extends: [ 'eslint:recommended', '@vue/typescript/recommended', 'prettier' // 关闭所有与 Prettier 冲突的规则 ], rules: {} };顺序很重要：prettier必须放在最后，才能正确覆盖前面的格式规则。
✅ 成功标志：你在代码里故意写
double quotes或漏掉分号，ESLint 不再报错 —— 因为这些事归 Prettier 管了。
第五步：验证效果
新建一个Test.vue测试一下：
<template> <div class="container"><p>Hello {{ name }}</p></div> </template> <script> export default { data(){ return {name:"World"} } } </script> <style scoped> .container{font-size:14px;} </style>按下Shift+Alt+F（Windows/Linux）或Shift+Option+F（Mac）执行格式化，应该变成：
<template> <div class="container"> <p>Hello {{ name }}</p> </div> </template> <script> export default { data() { return { name: "World" }; }, }; </script> <style scoped> .container { font-size: 14px; } </style>看到变化了吗？
- 模板自动换行；
- JS 自动加分号、空格；
- CSS 属性展开并加上大括号；
- 对象末尾加了逗号；
一切都在你保存时悄然完成。
高阶技巧：让规范融入 CI/CD
光本地生效还不够，我们要防止有人绕过规则直接提交“脏代码”。
可以用husky+lint-staged在提交前自动格式化变更文件。
安装依赖：
npm install --save-dev husky lint-staged启用 Husky 并设置钩子：
npx husky install npx husky add .husky/pre-commit "npx lint-staged"配置package.json：
{ "lint-staged": { "*.{js,ts,vue}": [ "prettier --write", "git add" ] }, "scripts": { "prepare": "husky install" } }现在每次git commit之前，都会自动运行 Prettier 格式化修改过的文件，并重新加入暂存区。
🎯 效果：再也看不到“fix whitespace”这类无意义的提交记录了。
常见问题与避坑指南
❌ 问题一：格式化没反应？
检查点：
1. 是否安装了 Prettier？
2..vscode/settings.json中是否设置了vetur.format.defaultFormatter.js等字段？
3. 当前文件是否被识别为 Vue 类型？右下角看语言模式是不是 “Vue”。
4. 是否有其他格式化插件干扰？比如 Beautify、Prettier - Code formatter 插件同时启用？
🔧 解法：禁用其他格式化插件，确保只有 Vetur 是默认 formatter。
❌ 问题二：script 块没格式化？
最常见的原因是：忘了配置vetur.format.defaultFormatter.js和ts！
Vetur 默认对 script 使用内置格式化器，除非你显式指定要用 Prettier。
务必确认 settings.json 包含这两行：
"vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier"❌ 问题三：模板格式异常，标签被压缩？
一定是htmlWhitespaceSensitivity没设成ignore！
请立即检查.prettierrc是否包含：
"htmlWhitespaceSensitivity": "ignore"否则 Prettier 会严格按照 HTML 规范处理空白，破坏 Vue 中常见的布局习惯。
🔄 关于 Volar 的未来考量
对于纯 Vue 3 项目，官方推荐使用Volar替代 Vetur，原因如下：
- 更好的性能；
- 更强的 TypeScript 支持；
- 支持
<script setup>语法； - 同样支持 Prettier 集成。
迁移建议：
- 新项目直接上 Volar；
- 老项目逐步过渡，可在 VS Code 中关闭 Vetur，启用 Volar；
- Volar 的 Prettier 配置方式类似，但更简洁，通常只需安装@volar/vue-language-plugin-prettier。
不过目前 Vetur 仍在积极维护，且对 Vue 2 支持更好，不必急于替换。
写在最后：让工具替你“吵架”
曾经，团队为了“要不要分号”开了半小时会。今天，我们可以笑着回答：“不用吵，Prettier 说了算。”
技术的本质，是解放人力。当你把格式这种低价值决策交给工具后，你就能把精力集中在更有意义的事上：写更好的逻辑、设计更优雅的架构、解决更复杂的业务问题。
Vetur + Prettier 的整合，不只是一个配置教程，更是一种工程思维的体现：用自动化建立共识，用工具守护规范。
下次当你按下Ctrl+S，看着代码自动变得整洁有序时，你会感谢今天的自己。
如果你在配置过程中遇到了其他问题，欢迎留言交流。也别忘了把
.prettierrc和.vscode/settings.json分享给队友，一起享受“零格式焦虑”的开发体验。
