Prettier 代码格式化：一致的代码风格

FreeGuideOnline 最新 2026-06-15

什么是 Prettier？

Prettier 是一款有主见的代码格式化工具（Opinionated Code Formatter）。它支持 JavaScript、TypeScript、CSS、HTML、JSON、GraphQL、Markdown 等多种语言，能够在你保存文件时自动将代码调整为统一的风格。

Prettier 的核心哲学是停止关于代码风格的争论。它会解析你的代码，然后按照自己固定的规则重新输出格式，确保整个项目的所有文件看起来像同一个人编写的一样。

为什么需要 Prettier？

  • 消除风格差异：不再纠结于空格数量、分号是否添加等细节。
  • 提高代码审查效率：审查者只需关注逻辑，不会因为格式问题分心。
  • 初学者友好：新加入项目的开发者无需背诵复杂风格指南，格式自动对齐。
  • 与 ESLint 互补：Prettier 负责格式（Formatting），ESLint 负责代码质量（Code Quality）。

快速上手：安装与使用

安装 Prettier

在项目根目录下，使用 npm 或 yarn 安装为开发依赖：

npm install --save-dev prettier
# 或
yarn add --dev prettier

安装完成后，通过以下命令格式化项目中的文件：

npx prettier --write "src/**/*.js"

这会将 src 目录下所有 .js 文件按照 Prettier 的默认规则重新格式化。

实验性体验

如果想先看看效果而不真正修改文件，可以运行：

npx prettier --check "src/**/*.js"

--check 只会检测哪些文件不符合格式，不会修改任何内容。

配置 Prettier

尽管 Prettier 提供了一套固定的默认规则，但你仍然可以通过配置文件调整少量选项来适配团队习惯。

创建配置文件

在项目根目录创建 .prettierrc 文件（JSON 或 YAML 格式），或直接使用 prettier.config.js。最常用写法如下：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

核心配置选项详解

  • printWidth（默认 80）：单行最大字符数，超出后 Prettier 会强制换行。适合宽屏显示建议设为 100 或 120。
  • tabWidth（默认 2）：缩进使用的空格数。
  • semi（默认 true）：语句末尾是否添加分号。设为 false 将移除分号。
  • singleQuote（默认 false）：使用单引号代替双引号。JSX 中仍使用双引号。
  • trailingComma（默认值从 v2.0 开始是 "es5"）：
    • "none"：不添加尾逗号。
    • "es5"：在 ES5 有效的地方添加尾逗号（如对象、数组）。
    • "all"：在所有可能的地方添加尾逗号（包括函数参数）。
  • bracketSpacing（默认 true）：对象字面量中括号与内容之间的空格，如 { foo: bar }。
  • arrowParens（默认 "always"）：箭头函数参数始终使用括号。设为 "avoid" 时，单个参数可以不省略括号，如 x => x。

提示：除上述选项外，Prettier 对大多数语法元素的控制是有意不提供的，这正是其“有主见”的体现。

忽略文件

创建 .prettierignore 文件，语法与 .gitignore 相同，用于排除不需要格式化的文件或目录：

node_modules
dist
coverage
*.min.js

编辑器集成

真正的威力在于保存时自动格式化。

VS Code

  1. 安装官方扩展 Prettier - Code formatter（esbenp.prettier-vscode）。
  2. 打开 VS Code 设置（Ctrl + ,），搜索 Format On Save 并勾选。
  3. 确保将 Prettier 设置为默认格式化器：
    • 右键任意文件 → Format Document With... → 选择 Prettier。
    • 或在 settings.json 中添加： 
      "editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true

现在每当你保存 .js、.jsx、.ts、.json 等文件时，代码都会瞬间按规则格式化。

WebStorm / IntelliJ IDEA

  1. 打开 Preferences → Languages & Frameworks → JavaScript → Prettier。
  2. 指定 Prettier 包的路径（通常为 node_modules/prettier）。
  3. 勾选 On save 或配置 File Watcher 实现保存时自动格式化。

其他编辑器

大多数主流编辑器（Sublime Text、Atom、Vim/Neovim）都有对应的 Prettier 插件，其核心都是调用 prettier 命令实现格式化。

Prettier 与 ESLint 协同工作

两者经常一起使用，但需要解决规则冲突问题。Prettier 的格式化规则可能与 ESLint 的格式规则不一致（如缩进、引号、分号）。

最佳实践：让 ESLint 专注代码质量

  1. 安装必要包：

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

  2. 配置 ESLint：
    在 .eslintrc 文件的 extends 数组的最后添加 "prettier"（eslint-config-prettier），它会关闭所有与 Prettier 冲突的 ESLint 规则。

    {
  "extends": [
    "some-other-config",
    "prettier"
  ]
}

  3. （可选）添加 eslint-plugin-prettier：
    将 Prettier 作为 ESLint 的一条规则来运行，这样在 ESLint 报错时就能直接看到格式问题。

    npm install --save-dev eslint-plugin-prettier

    然后在 .eslintrc 中：

    {
  "extends": ["plugin:prettier/recommended"]
}

    该配置集成了 eslint-config-prettier 和 eslint-plugin-prettier，一举两得。

运行 ESLint 时，格式问题会被检测出来，而 --fix 可以同时修复 ESLint 可修复问题和 Prettier 格式问题。

在 Git 工作流中强制格式化

为了确保所有提交的代码都是格式化过的，可以借助工具 lint-staged 与 husky。

配置 pre-commit 钩子

  1. 安装 husky 和 lint-staged：

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

  2. 在 package.json 中配置 lint-staged：

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

  3. 添加 husky 钩子：

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

现在，每次 git commit 之前，暂存区的文件都会被自动格式化。如果格式不符合要求，Prettier 会直接修正，阻止人类提交“未格式化”的代码。

常见问题与技巧

为什么 Prettier 不接受我的某些配置？

Prettier 刻意限制选项数量，是为了避免产生新的风格争论。如果你不满意某个无法配置的行为，请接受它——这是使用 Prettier 的代价，也是它的价值。

如何临时禁用 Prettier？

有时你可能需要保留特定的手动格式。可以在代码块前后添加注释：

// prettier-ignore
const uglyMatrix = [
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
]

JSX 中使用 {/* prettier-ignore */}，CSS 中使用 /* prettier-ignore */。

与其他类型的文件

Prettier 还支持 YAML、GraphQL、Markdown 等。在项目中使用时，你可以在命令行中指定模式，比如：

npx prettier --write "**/*.{js,json,md,yaml}"

在 CI/CD 中验证格式

添加一条 npm 脚本到 package.json：

"scripts": {
  "format:check": "prettier --check \"src/**/*.{js,ts,jsx,tsx}\""
}

然后在 CI 流水线中执行 npm run format:check，如果格式不符，流水线会失败。

总结

  • Prettier 让代码风格完全一致，减少心智负担。
  • 通过配置文件微调少量偏好（引号、分号、尾逗号等）。
  • 必须与编辑器集成，开启保存时自动格式化。
  • 与 ESLint 协作时，使用 eslint-config-prettier 避免规则冲突。
  • 利用 Git 钩子确保代码库中永久干净。

摒弃对格式的执着，将精力投入到真正的代码逻辑上，这正是 Prettier 送给你和团队最好的礼物。