Prettier与EditorConfig实战：从安装到团队代码风格统一

1. 为什么团队需要代码风格统一工具刚入行前端时我最头疼的就是每次代码评审时被指出格式问题。这里少了个空格、那里应该换行、引号要用单引号...这些细节问题看似简单但当团队规模扩大到5人以上时风格差异就会成为协作的噩梦。有一次我们项目合并分支因为格式不一致导致200多行冲突实际逻辑修改只有20行这种经历让我下定决心引入自动化格式化工具。Prettier和EditorConfig就是解决这类问题的黄金搭档。Prettier是当前最流行的代码格式化工具支持JavaScript、TypeScript、CSS、HTML等几乎所有前端语言。它最大的特点是固执己见——提供少量但足够灵活的配置选项强制团队遵守统一的代码风格。而EditorConfig则负责在编辑器层面统一基础格式比如缩进、换行符等两者配合能覆盖从书写到保存的全流程。2. 从零开始配置Prettier2.1 安装与基础配置在Vue项目中安装Prettier推荐使用以下命令npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier新建.prettierrc.js配置文件相比JSON格式JS文件支持注释更友好module.exports { printWidth: 100, // 每行代码长度 tabWidth: 2, // 缩进空格数 useTabs: false, // 使用空格代替tab缩进 semi: true, // 句末分号 singleQuote: true, // 使用单引号 trailingComma: all, // 对象/数组最后一项加逗号 bracketSpacing: true, // 对象括号空格 arrowParens: avoid, // 箭头函数单参数省略括号 endOfLine: lf, // 换行符类型 vueIndentScriptAndStyle: true // Vue文件缩进scriptstyle }实测建议printWidth建议设为100-120现代显示器宽度足够trailingComma设为all能减少git变更行数vueIndentScriptAndStyle对Vue单文件组件特别有用。2.2 与编辑器深度集成以VS Code为例安装Prettier插件后需要在设置中开启保存时自动格式化{ editor.defaultFormatter: esbenp.prettier-vscode, editor.formatOnSave: true, [vue]: { editor.defaultFormatter: esbenp.prettier-vscode } }常见坑点如果同时安装了Vetur插件需要禁用其格式化功能项目根目录要有.prettierrc文件否则会使用全局配置文件保存时不格式化检查是否被ESLint等其它格式化工具覆盖3. EditorConfig的协同配置3.1 跨编辑器的基础规范在项目根目录创建.editorconfig文件root true [*] charset utf-8 indent_style space indent_size 2 end_of_line lf trim_trailing_whitespace true insert_final_newline true [*.md] trim_trailing_whitespace false [package.json] indent_size 2关键配置解析insert_final_newline文件末尾保留空行避免合并冲突trim_trailing_whitespace删除行尾空格Markdown文件除外通过[*.json]等语法可针对文件类型特殊配置3.2 解决跨平台换行符问题团队中Windows和Mac混用时换行符差异会导致git显示整个文件被修改。通过设置end_of_line lf强制使用Linux换行符配合git的core.autocrlf配置git config --global core.autocrlf input4. 与ESLint的完美配合4.1 解决规则冲突安装兼容包避免Prettier与ESLint规则冲突npm install --save-dev eslint-config-prettier eslint-plugin-prettier修改ESLint配置以.eslintrc.js为例module.exports { extends: [ eslint:recommended, plugin:vue/recommended, plugin:prettier/recommended // 必须放在最后 ], rules: { prettier/prettier: error } }4.2 自动化工作流配置在package.json中添加脚本命令{ scripts: { lint: eslint --ext .js,.vue src, format: prettier --write src/**/*.{js,vue}, fix: npm run format npm run lint -- --fix } }团队协作建议在husky的pre-commit钩子中运行格式化CI流程中加入npm run lint检查新成员入职时运行npm run fix统一代码风格5. 疑难问题排查指南5.1 配置文件不生效的6种情况文件位置错误确保.prettierrc在项目根目录编辑器插件冲突禁用Vetur、Beautify等插件的格式化功能VS Code工作区设置覆盖检查.vscode/settings.jsonnpm包版本问题特别是vue/cli创建的项目要注意prettier版本文件被忽略检查.prettierignore文件缓存未更新重启编辑器或运行npx prettier --write .5.2 特殊文件处理方案对于需要保持原样的文件创建.prettierignore**/*.svg **/*.html dist/* public/*6. 多项目统一配置方案6.1 共享配置封装将通用配置发布为npm包// prettier-config/index.js module.exports require(company/prettier-config);各项目通过extends引用{ extends: company/prettier-config }6.2 版本控制策略主项目使用固定版本号配置变更通过CHANGELOG记录重大变更提供迁移指南定期同步各项目配置版本在大型Monorepo项目中我推荐使用共享配置覆盖模式。比如在lerna管理的项目中根目录的prettier配置可以作为基础配置子项目通过prettier: 父路径/.prettierrc.js继承并覆盖特定规则。这种方式既保持统一性又允许必要的灵活性。