跳至主内容区

安装

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

首先，在本地安装 Prettier：

npm install --save-dev --save-exact prettier

接着创建一个空配置文件，告知编辑器和其他工具你正在使用 Prettier：

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

然后创建 .prettierignore 文件，告知 Prettier CLI 和编辑器哪些文件_不需要_格式化。示例：

node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
提示

如果同目录下存在 .gitignore 文件，Prettier 会遵循其中指定的规则。你也可以基于 .eslintignore（如有）创建 .prettierignore。

额外提示

如果项目暂不需要格式化某些文件类型（例如 HTML），可添加 *.html。

现在开始格式化所有文件：

npx prettier . --write
信息

What is that npx thing? npx ships with npm and lets you run locally installed tools. We’ll leave off the npx part for brevity throughout the rest of this file!

警告

If you forget to install Prettier first, npx will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your package.json. And it’s faster, too.

prettier --write . 适合全局格式化，但在大型项目中可能耗时较长。你可运行 prettier --write app/ 格式化特定目录，或 prettier --write app/components/Button.js 格式化特定文件。也可使用_通配符_如 prettier --write "app/**/*.test.js" 格式化目录下所有测试文件（支持的 glob 语法详见 fast-glob）。

若已配置 CI 环境，请将以下命令加入流程以确保所有成员都运行 Prettier。这能避免合并冲突等协作问题！

npx prettier . --check

--check 类似 --write，但仅检查文件是否已格式化而非覆盖修改。prettier --write 和 prettier --check 是最常用的两种执行方式。

配置编辑器​

命令行格式化是很好的起点，但通过编辑器运行 Prettier（快捷键或保存自动触发）才能发挥最大价值。当编码时行长超出屏幕，轻按按键即可见证它神奇地自动换行！粘贴代码后缩进混乱时，无需离开编辑器就能让 Prettier 自动修复。

编辑器配置详见编辑器集成。若编辑器不支持 Prettier，可改用文件监听模式运行。

备注

切勿跳过常规本地安装！编辑器插件会检测本地 Prettier 版本，确保各项目使用正确版本。（避免因编辑器使用新版 Prettier 导致意外的大规模变更！）

命令行运行 Prettier 仍是可靠的备选方案，也是 CI 环境的必备环节。

ESLint（及其他检查工具）​

若使用 ESLint，请安装 eslint-config-prettier 使两者兼容。该配置会禁用所有与 Prettier 冲突或冗余的 ESLint 规则。Stylelint 也有类似配置：stylelint-config-prettier

（更多格式化与代码检查的区别详见 Prettier vs. Linters，深度配置指南见检查工具集成，其他集成方案见相关项目。）

Git 钩子​

除了通过命令行运行 Prettier (prettier --write)、在 CI 中检查格式以及从编辑器运行外，许多开发者还喜欢将其作为预提交钩子（pre-commit hook）运行。这样能确保所有提交内容都经过格式化，无需等待 CI 构建完成。

例如，可以通过以下步骤在每次提交前自动运行 Prettier：

  1. 安装 husky 和 lint-staged：
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
  1. 在 package.json 中添加以下配置：
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
备注

如果使用 ESLint，请确保 lint-staged 在 Prettier 之前运行 ESLint。

详见预提交钩子文档获取更多信息。

总结​

综上所述，我们已学会：

  • 在项目中本地安装精确版本的 Prettier。这能确保所有协作者使用完全相同的版本，即使补丁版本更新也可能导致细微格式差异。

  • 添加 .prettierrc 配置文件，告知编辑器正在使用 Prettier。

  • 创建 .prettierignore 文件，指定不需要格式化的文件，同时支持通过 prettier --write . 安全格式化整个项目。

  • 在 CI 流程中运行 prettier --check .，确保持续保持项目格式规范。

  • 通过编辑器集成获得最佳开发体验。

  • 使用 eslint-config-prettier 实现 Prettier 与 ESLint 协同工作。

  • 设置预提交钩子，保证每次提交内容自动格式化。