在Code du Travail Numerique项目中集成Prettier实现代码格式化标准化-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_07691/article/details/148296965

在Code du Travail Numerique项目中集成Prettier实现代码格式化标准化

code-du-travail-numerique Code du Travail Numérique 项目地址: https://gitcode.com/gh_mirrors/co/code-du-travail-numerique

项目背景与问题分析

在Code du Travail Numerique这个开源项目的协作开发过程中，团队成员遇到了一个常见的痛点：不同开发者使用的代码格式化风格不一致，导致每次修改文件时都会出现格式差异。这种不一致性不仅增加了代码审查的负担，也影响了团队协作效率。

解决方案概述

为了解决这个问题，我们需要在项目中引入Prettier这一现代化的代码格式化工具。Prettier是一个"固执己见"的代码格式化工具，它通过强制执行一致的代码风格，消除了团队成员之间关于代码格式的争论。

技术实现方案

1. 安装与配置Prettier

首先需要在项目中安装Prettier作为开发依赖：

npm install --save-dev prettier

然后创建Prettier配置文件.prettierrc，定义团队统一的代码风格规则。例如：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

2. 集成ESLint

为了与现有的ESLint配置协同工作，需要安装eslint-config-prettier来关闭可能与Prettier冲突的ESLint规则：

npm install --save-dev eslint-config-prettier

然后在ESLint配置中扩展Prettier配置：

{
  "extends": ["其他配置", "prettier"]
}

3. 添加格式化脚本

在package.json中添加格式化脚本：

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

npm run format命令会格式化项目中的所有文件，而npm run format:check则只检查而不修改文件。

4. 集成Git Hooks

使用Husky在Git的pre-commit钩子中自动格式化暂存的文件：

npm install --save-dev husky lint-staged

配置package.json：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

这样配置后，每次提交代码时，Husky会自动运行Prettier格式化所有暂存的文件，确保提交到版本库的代码风格一致。