Vue项目Prettier+ESLint全局格式化配置指南
1. Vue项目全局格式化配置的必要性
在团队协作的前端开发中，代码格式化问题总是让人头疼。我刚加入现在这个团队时，每次拉取代码都会看到满屏的红色波浪线——不是因为语法错误，而是因为缩进、分号、引号这些格式问题。更糟的是，不同成员提交的代码风格差异巨大，导致代码审查时50%的时间都在讨论该用双引号还是单引号这种无关功能的问题。
Vue项目的格式化配置尤其重要，因为单文件组件(SFC)包含了HTML、CSS和JavaScript三种语言，每种语言都有自己的风格规范。没有统一的格式化配置，一个.vue文件里可能出现HTML属性用双引号而JS字符串用单引号这种混乱情况。
2. 工具选型：Prettier + ESLint黄金组合
2.1 为什么选择Prettier
Prettier已经成为前端格式化的事实标准，相比其他工具它有三大优势：
- 零配置开箱即用：安装后立即产生效果，不像ESLint需要大量规则配置
- 强制一致性：团队中不允许个性化配置，所有成员输出完全一致的代码
- 多语言支持：完美处理Vue单文件组件中的HTML、CSS、JS/TS混合代码
我们团队最终放弃使用StandardJS这类预设规范，因为Prettier的格式化能力更全面。特别是在处理JSX和模板字符串时，Prettier的表现明显优于其他工具。
2.2 ESLint的互补作用
虽然Prettier负责代码风格，但代码质量检查还是需要ESLint。两者配合使用时要注意：
npm install eslint eslint-config-prettier eslint-plugin-prettier --save-deveslint-config-prettier的作用是关闭ESLint中所有与Prettier冲突的规则，而eslint-plugin-prettier则是将Prettier作为ESLint规则运行。
3. 完整配置流程
3.1 初始化项目配置
首先创建必要的配置文件：
touch .prettierrc .eslintrc.js .editorconfig.prettierrc推荐配置：
{ "semi": false, "singleQuote": true, "printWidth": 100, "tabWidth": 2, "useTabs": false, "trailingComma": "none", "bracketSpacing": true, "arrowParens": "avoid", "endOfLine": "auto" }特别注意：endOfLine设置为"auto"可以避免Windows和Unix系统间的换行符问题，这是很多新手容易忽略的坑。
3.2 VS Code工作区配置
在项目根目录创建.vscode/settings.json：
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "javascriptreact", "vue"], "vetur.format.defaultFormatter.html": "prettier", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.css": "prettier" }这个配置实现了：
- 保存时自动格式化
- Vue文件各部分的格式化委托给Prettier
- 自动修复ESLint可自动修复的问题
3.3 解决常见冲突问题
当同时使用Vetur和Prettier时，可能会遇到模板格式化问题。解决方案是在.prettierrc中添加：
"overrides": [ { "files": "*.vue", "options": { "parser": "vue" } } ]4. 进阶配置技巧
4.1 Git提交时自动格式化
安装husky和lint-staged：
npm install husky lint-staged --save-dev然后在package.json中添加：
"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,vue}": [ "eslint --fix", "prettier --write", "git add" ] }这样每次提交前都会自动格式化修改过的文件，确保代码库风格一致。
4.2 自定义规则覆盖
有时团队需要覆盖Prettier默认规则，比如强制使用分号。这时可以在.prettierrc中指定：
"semi": true但要注意，这种覆盖应该谨慎使用，太多自定义规则会失去使用Prettier的意义。
5. 疑难问题解决方案
5.1 Prettier不生效的情况排查
- 检查VS Code右下角是否显示"Prettier"为当前格式化工具
- 确认文件类型被正确识别（特别是.vue文件）
- 查看输出面板(Ctrl+Shift+U)中Prettier的日志
- 尝试手动运行命令：npx prettier --write src/
5.2 ESLint和Prettier冲突处理
常见冲突包括：
- 引号风格不一致
- 对象花括号前后空格
- 函数参数括号
解决方案是确保eslint-config-prettier正确配置，并在.eslintrc.js中扩展：
extends: ['plugin:vue/essential', 'eslint:recommended', 'plugin:prettier/recommended']6. 团队协作最佳实践
- 将配置文件纳入版本控制：.prettierrc、.eslintrc.js等应该提交到代码库
- 文档化格式规范：在README中简要说明团队采用的规则
- 新人引导：在onboarding文档中加入开发环境配置步骤
- CI集成：在构建流程中加入格式检查，如：
"scripts": { "lint": "eslint --ext .js,.vue src/", "format": "prettier --check src/" }我在实际项目中发现，完善的格式化配置可以节省团队20%以上的代码审查时间。刚开始可能会有成员不适应强制格式化，但坚持1-2周后，大家都会爱上这种无需操心代码风格的开发体验。