如何在 Monorepo 项目中配置和使用 Prettier? - 面试题

Prettier 在 Monorepo 项目中的应用

Monorepo 项目中统一管理多个包的代码格式是一个重要挑战,Prettier 提供了多种解决方案来确保整个 monorepo 的代码风格一致。

Monorepo 配置策略

1. 根目录统一配置 在 monorepo 根目录创建 .prettierrc:

json
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

2. 共享配置包 创建独立的配置包 @my-org/prettier-config:

javascript
// packages/prettier-config/index.js
module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: "es5",
  printWidth: 80,
};

在各个包中使用:

json
{
  "prettier": "@my-org/prettier-config"
}

不同包的差异化配置

使用 overrides 为不同包设置不同规则:

json
{
  "semi": true,
  "overrides": [
    {
      "files": "packages/ui/**/*",
      "options": {
        "printWidth": 100
      }
    },
    {
      "files": "packages/server/**/*",
      "options": {
        "printWidth": 80
      }
    }
  ]
}

工具集成

1. Turborepo 集成 在 turbo.json 中配置:

json
{
  "pipeline": {
    "format": {
      "outputs": []
    }
  }
}

在 package.json 中添加脚本:

json
{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\""
  }
}

2. Nx 集成 Nx 提供了专门的 Prettier 支持:

json
{
  "targets": {
    "format": {
      "executor": "@nx/vite:format",
      "options": {
        "write": true
      }
    }
  }
}

3. Lerna 集成 使用 Lerna 的 --scope 选项格式化特定包:

bash
lerna exec --scope @my-org/ui -- prettier --write "**/*.js"

性能优化

1. 增量格式化

bash
# 只格式化修改的文件
git diff --name-only --diff-filter=ACM | grep '\.js$' | xargs prettier --write

2. 并行处理

bash
# 使用 GNU parallel 并行格式化
find . -name "*.js" | parallel prettier --write

3. 缓存机制

bash
# 使用 Prettier 缓存
prettier --write --cache "**/*.js"

CI/CD 集成

GitHub Actions 配置:

yaml
name: Format Check
on: [push, pull_request]
jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run format:check

最佳实践

1. 配置管理

在根目录维护统一的 Prettier 配置
使用共享配置包确保一致性
定期同步各包的配置

2. 依赖管理

在根目录安装 Prettier
锁定 Prettier 版本
使用 workspace 协议管理依赖

3. 团队协作

在文档中说明 monorepo 的格式化策略
提供统一的编辑器配置
在 CI 中强制检查格式

4. 性能考虑

使用缓存提高格式化速度
合理配置 .prettierignore
只格式化必要的文件

通过合理配置,Prettier 可以在 monorepo 项目中有效统一代码风格,提高开发效率。