Prettier 代码格式化工具

什么是 Prettier？

Prettier 是一个“有主见的”代码格式化工具。它通过解析代码，然后根据一套固定的、预设的规则重新打印代码，确保输出代码风格的一致性。

它的核心特点是：

• 有主见 (Opinionated)：它提供了极少的配置选项。你基本上只能调整缩进、分号、引号等少数几个方面。这样做的好处是，团队无需花费大量时间争论代码风格（如单引号还是双引号，尾随逗号等），直接遵循 Prettier 的规则即可。
• 支持多种语言：JavaScript, JSX, TypeScript, CSS, SCSS, Less, HTML, JSON, GraphQL, Markdown, YAML 等。
• 集成度高：可以与主流编辑器和构建工具无缝集成。

使用方法

Prettier 的使用方式非常灵活，可以通过命令行、编辑器插件或在构建流程中集成它。

安装

首先，需要在项目中本地安装 Prettier（推荐），或者全局安装。

# 本地安装（推荐，可以保证项目成员使用相同版本）
npm install --save-dev --save-exact prettier
# 或者使用 yarn
yarn add --dev --exact prettier

# 全局安装（可选，不推荐用于项目）
npm install --global prettier

注意： 使用 --save-exact 是因为 Prettier 在版本更新中风格可能会有微调，锁定版本可以确保所有团队成员和 CI 环境格式化结果一致。

创建配置文件（可选但推荐）

虽然 Prettier 开箱即用，但通常需要一些基本配置。在项目根目录创建一个 .prettierrc 文件。

最常见的配置格式是 JSON，也支持其他格式如 .js, .yaml 等。

示例 (.prettierrc)：

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

常用配置选项：

• semi: 句末是否添加分号。true（默认） | false
• singleQuote: 是否使用单引号。false（默认，即使用双引号） | true
• trailingComma: 在多行结构的末尾是否添加逗号。"es5"（默认，在ES5有效的对象、数组等后加逗号） | "none" | "all"
• printWidth: 一行的最大长度，超过则会换行。默认 80
• tabWidth: 一个制表符等于的空格数。默认 2
• useTabs: 是否使用制表符进行缩进。false（默认，使用空格） | true

还可以创建一个 .prettierignore 文件来告诉 Prettier 哪些文件或目录不需要格式化。

示例 (.prettierignore)：

node_modules/
dist/
build/
coverage/

# 忽略所有 HTML 文件
*.html

运行 Prettier

安装并配置好后，你有几种方式来运行它。

方式一：命令行 (CLI)

这是最直接的方式。

• 格式化单个文件

  npx prettier --write src/index.js

  --write 参数会直接覆盖并格式化原文件。如果只是想查看格式化后的效果而不修改原文件，可以使用 --check 或 npx prettier src/index.js（只输出到终端）。

• 格式化整个项目下的所有支持的文件

  npx prettier --write .

  它会自动遵循 .prettierignore 的规则。

• 检查文件是否已格式化（常用于 CI/CD）

  npx prettier --check .

  如果所有文件都已格式化，则命令成功退出（exit code 0）；如果有未格式化的文件，则会列出它们并失败退出（exit code 非0）。

方式二：编辑器插件（最常用、最方便）

在编辑器中集成 Prettier 插件后，你可以在保存文件时自动格式化，极大提升开发体验。

• VS Code:

  1. 安装官方插件 Prettier - Code formatter。
  2. 在项目根目录创建配置文件 .prettierrc。
  3. 按下 Ctrl + , (Windows) 或 Cmd + , (Mac) 打开设置，搜索 Format On Save 并勾选。
  4. 在当前的项目文件中，右键 -> Format Document With... -> Configure Default Formatter -> 选择 Prettier - Code formatter。

  完成以上设置后，每次保存文件都会自动格式化。

• WebStorm / IntelliJ IDEA: 新版本已内置 Prettier 支持。

  1. 打开设置：File -> Settings -> Languages & Frameworks -> JavaScript -> Prettier。
  2. 指定本地的 Prettier 包路径（如 node_modules/prettier）。
  3. 勾选 On 'Reformat Code' action 和 On save 选项。

方式三：与 Git Hooks 集成（强制团队规范）

为了确保提交到代码仓库的代码都是格式化后的，你可以将 Prettier 与 Git Hooks 结合。最流行的工具是 Husky + lint-staged。

1. 安装依赖：

   npm install --save-dev husky lint-staged
   npx husky install

2. 在 package.json 中配置：

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

3. 设置 Git Hook（例如，在 pre-commit 时触发）：

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

这样，当你执行 git commit 时，lint-staged 会自动只对本次提交的暂存区 (staged) 中的文件运行 prettier --write，格式化后再提交，确保仓库里的代码始终是整洁的。