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-dev

eslint-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周后，大家都会爱上这种无需操心代码风格的开发体验。

Vue项目Prettier+ESLint全局格式化配置指南