How to configure and use Prettier in Monorepo projects?

Prettier Application in Monorepo Projects

Unifying code format across multiple packages in a monorepo is an important challenge. Prettier provides various solutions to ensure consistent code style across the entire monorepo.

Monorepo Configuration Strategies

1. Root Directory Unified Configuration Create .prettierrc in monorepo root:

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

2. Shared Configuration Package Create independent configuration package @my-org/prettier-config:

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

Use in individual packages:

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

Differentiated Configuration for Different Packages

Use overrides to set different rules for different packages:

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

Tool Integration

1. Turborepo Integration Configure in turbo.json:

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

Add scripts in 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 Integration Nx provides dedicated Prettier support:

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

3. Lerna Integration Use Lerna's --scope option to format specific packages:

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

Performance Optimization

1. Incremental Formatting

bash
# Only format modified files
git diff --name-only --diff-filter=ACM | grep '\.js$' | xargs prettier --write

2. Parallel Processing

bash
# Use GNU parallel for parallel formatting
find . -name "*.js" | parallel prettier --write

3. Caching Mechanism

bash
# Use Prettier cache
prettier --write --cache "**/*.js"

CI/CD Integration

GitHub Actions Configuration:

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

Best Practices

1. Configuration Management

• Maintain unified Prettier configuration in root directory
• Use shared configuration packages to ensure consistency
• Regularly sync configuration across packages

2. Dependency Management

• Install Prettier in root directory
• Lock Prettier version
• Use workspace protocol for dependency management

3. Team Collaboration

• Document monorepo formatting strategy
• Provide unified editor configuration
• Enforce format checking in CI

4. Performance Considerations

• Use caching to improve formatting speed
• Properly configure .prettierignore
• Only format necessary files

With proper configuration, Prettier can effectively unify code style in monorepo projects, improving development efficiency.