如何在 CI/CD 流程中集成 Prettier 进行代码格式检查?

Prettier 在 CI/CD 中的集成实践

将 Prettier 集成到 CI/CD 流程中可以确保所有提交的代码都符合统一的格式规范,提高代码质量和团队协作效率。

Git Hooks 集成

使用 Husky 和 lint-staged 在 Git 提交前自动格式化代码:

1. 安装依赖

   bash
   npm install --save-dev husky lint-staged prettier
   npx husky install
   npm pkg set scripts.prepare="husky install"

2. 配置 lint-staged 在 package.json 中添加:

   json
   {
     "lint-staged": {
       "*.{js,jsx,ts,tsx,json,css,scss,md}": [
         "prettier --write"
       ]
     }
   }

3. 创建 Git Hook

   bash
   npx husky add .husky/pre-commit "npx lint-staged"

CI/CD 配置

GitHub Actions

创建 .github/workflows/prettier.yml:

yaml
name: Prettier Check
on: [push, pull_request]
jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,scss,md}"

GitLab CI

在 .gitlab-ci.yml 中添加:

yaml
prettier:
  stage: test
  script:
    - npm install
    - npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,scss,md}"
  only:
    - merge_requests
    - main

常用命令

• 格式化文件: npx prettier --write "src/**/*.js"
• 检查格式: npx prettier --check "src/**/*.js"
• 格式化所有文件: npx prettier --write .
• 查看差异: npx prettier --list-different "src/**/*.js"

最佳实践

1. 团队统一配置: 确保所有开发者使用相同的 Prettier 配置
2. 自动化检查: 在 CI/CD 中强制检查代码格式
3. 自动修复: 使用 --write 选项自动修复格式问题
4. 忽略文件: 合理配置 .prettierignore 避免不必要的格式化
5. 版本锁定: 锁定 Prettier 版本确保一致性

通过在 CI/CD 中集成 Prettier,可以确保代码库始终保持统一的格式规范,减少代码审查时的格式争议。