Prettier - Code Formatter 扩展的深度配置与团队协作实战

1. Prettier 为何成为团队协作的刚需工具

第一次在团队项目里看到因为代码缩进问题吵起来的场景，我就意识到需要引入自动化格式化工具了。Prettier 最吸引我的地方在于它的"独断专行"——不像 ESLint 提供上百条可配置规则，它只给你20来个核心参数，但能解决90%的风格争议。这种设计哲学特别适合10人以上的前端团队，尤其是成员技术水平参差不齐的情况。

在最近参与的电商平台重构项目中，我们统计过代码评审时的无效讨论：37%的时间浪费在分号、引号这类风格问题上。接入Prettier两周后这个数字直接降到了3%以下。更关键的是，新人上手项目时不再需要花半天时间研究团队的代码风格规范，因为所有文件都被统一处理过。

2. 从零搭建团队级格式化方案

2.1 配置文件的双层管理策略

团队协作中我推荐使用.prettierrc.js而不是JSON格式，因为可以添加注释说明每个配置项的决策原因。比如：

module.exports = {
  printWidth: 100, // 适配团队显示器分辨率
  tabWidth: 2,     // 与现有缩进风格保持一致
  singleQuote: true, // 减少转义字符
  trailingComma: 'all', // 简化git diff
  // 禁止修改以下历史遗留配置
  __legacy__: {
    bracketSpacing: false 
  }
}

在VS Code工作区配置中要特别注意作用域优先级：

1. 用户全局设置（适用于个人所有项目）
2. 工作区设置（当前项目优先）
3. 项目根目录配置文件

建议在.vscode/settings.json中锁定关键配置：

{
  "editor.defaultFormatter": "esbenp.pretti