安装

首先，在本地安装 Prettier：

¥First, install Prettier locally:

npm

yarn

pnpm

bun

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

yarn add --dev --exact prettier

pnpm add --save-dev --save-exact prettier

bun add --dev --exact prettier

然后，创建一个空的配置文件，让编辑器和其他工具知道你正在使用 Prettier：

¥Then, create an empty config file to let editors and other tools know you are using Prettier:

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

接下来，创建一个 .prettierignore 文件，让 Prettier CLI 和编辑器知道哪些文件不要格式化。这是一个例子：

¥Next, create a .prettierignore file to let the Prettier CLI and editors know which files to not format. Here’s an example:

# Ignore artifacts:
build
coverage

提示！如果 Prettier 存在于运行它的同一目录中，则 Prettier 将遵循 .gitignore 中指定的规则。你还可以将 .prettierignore 建立在 .eslintignore 的基础上（如果你有的话）。

¥Tip! Prettier will follow rules specified in .gitignore if it exists in the same directory from which it is run. You can also base your .prettierignore on .eslintignore (if you have one).

另一个提示！如果你的项目还没有准备好格式化，比如 HTML 文件，请添加 *.html。

¥Another tip! If your project isn’t ready to format, say, HTML files yet, add *.html.

现在，使用 Prettier 格式化所有文件：

¥Now, format all files with Prettier:

npm

yarn

pnpm

bun

npx prettier . --write

npx 是什么东西？npx 随 npm 一起提供，并允许你运行本地安装的工具。为了简洁起见，我们将在本文件的其余部分省略 npx 部分！

¥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!

注意：如果忘记先安装 Prettier，npx 会临时下载最新版本。这在使用 Prettier 时不是一个好主意，因为我们会在每个版本中更改代码的格式！在你的 package.json 中安装 Prettier 的锁定版本很重要。而且速度也更快。

¥Note: 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.

yarn prettier . --write

yarn 一开始在做什么？yarn prettier 运行本地安装的 Prettier 版本。为了简洁起见，我们将在本文件的其余部分省略 yarn 部分！

¥What is yarn doing at the start? yarn prettier runs the locally installed version of Prettier. We’ll leave off the yarn part for brevity throughout the rest of this file!

pnpm exec prettier . --write

pnpm 一开始在做什么？pnpm prettier 运行本地安装的 Prettier 版本。为了简洁起见，我们将在本文件的其余部分省略 pnpm 部分！

¥What is pnpm doing at the start? pnpm prettier runs the locally installed version of Prettier. We’ll leave off the pnpm part for brevity throughout the rest of this file!

bun prettier . --write

bun 一开始在做什么？bun prettier 运行本地安装的 Prettier 版本。为了简洁起见，我们将在本文件的其余部分省略 bun 部分！

¥What is bun doing at the start? bun prettier runs the locally installed version of Prettier. We’ll leave off the bun part for brevity throughout the rest of this file!

prettier --write . 非常适合格式化所有内容，但对于大型项目可能需要一些时间。你可以运行 prettier --write app/ 来格式化某个目录，或者运行 prettier --write app/components/Button.js 来格式化某个文件。或者使用像 prettier --write "app/**/*.test.js" 这样的 glob 来格式化目录中的所有测试（有关支持的 glob 语法，请参阅 fast-glob）。

¥prettier --write . is great for formatting everything, but for a big project it might take a little while. You may run prettier --write app/ to format a certain directory, or prettier --write app/components/Button.js to format a certain file. Or use a glob like prettier --write "app/**/*.test.js" to format all tests in a directory (see fast-glob for supported glob syntax).

如果你有 CI 设置，请运行以下命令作为其中的一部分，以确保每个人都运行 Prettier。这避免了合并冲突和其他协作问题！

¥If you have a CI setup, run the following as part of it to make sure that everyone runs Prettier. This avoids merge conflicts and other collaboration issues!

npx prettier . --check

--check 与 --write 类似，但只检查文件是否已格式化，而不是覆盖它们。prettier --write 和 prettier --check 是运行 Prettier 最常见的方式。

¥--check is like --write, but only checks that files are already formatted, rather than overwriting them. prettier --write and prettier --check are the most common ways to run Prettier.

设置你的编辑器

¥Set up your editor

从命令行格式化是开始的好方法，但你可以通过从编辑器运行它来充分利用 Prettier，无论是通过键盘快捷键还是在你保存文件时自动运行。当一行在编码时变得太长以至于无法适应你的屏幕时，只需按下一个键，它就会神奇地被封装成多行！或者，当你粘贴一些代码并且缩进全部弄乱时，让 Prettier 为你修复它而无需离开你的编辑器。

¥Formatting from the command line is a good way to get started, but you get the most from Prettier by running it from your editor, either via a keyboard shortcut or automatically whenever you save a file. When a line has gotten so long while coding that it won’t fit your screen, just hit a key and watch it magically be wrapped into multiple lines! Or when you paste some code and the indentation gets all messed up, let Prettier fix it up for you without leaving your editor.

有关如何设置编辑器的信息，请参阅 编辑器集成。如果你的编辑器不支持 Prettier，你可以用 使用文件监视器运行 Prettier 代替。

¥See Editor Integration for how to set up your editor. If your editor does not support Prettier, you can instead run Prettier with a file watcher.

注意：不要跳过常规的本地安装！编辑器插件将选择你本地版本的 Prettier，确保你在每个项目中使用正确的版本。（你不希望你的编辑器意外地导致大量更改，因为它使用的 Prettier 版本比你的项目更新！）

¥Note: Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!)

并且能够从命令行运行 Prettier 仍然是一个很好的后备方案，并且是 CI 设置所必需的。

¥And being able to run Prettier from the command line is still a good fallback, and needed for CI setups.

ESLint（和其他代码检查器）

¥ESLint (and other linters)

如果你使用 ESLint，请安装 eslint-config-prettier 以使 ESLint 和 Prettier 相互配合。它会关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。Stylelint 有一个类似的配置：stylelint-config-prettier

¥If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

（请参阅 Prettier 与 Linter 了解有关格式化与 linting 的更多信息，与 Linters 集成 了解有关配置 linters 的更多深入信息，如果需要，请参阅 相关项目 了解更多集成可能性。）

¥(See Prettier vs. Linters to learn more about formatting vs linting, Integrating with Linters for more in-depth information on configuring your linters, and Related projects for even more integration possibilities, if needed.)

Git 钩子

¥Git hooks

除了从命令行 (prettier --write) 运行 Prettier、在 CI 中检查格式以及从编辑器运行 Prettier 之外，许多人还喜欢将 Prettier 作为预提交钩子运行。这可确保你的所有提交都已格式化，而无需等待 CI 构建完成。

¥In addition to running Prettier from the command line (prettier --write), checking formatting in CI, and running Prettier from your editor, many people like to run Prettier as a pre-commit hook as well. This makes sure all your commits are formatted, without having to wait for your CI build to finish.

例如，你可以执行以下操作以在每次提交之前运行 Prettier：

¥For example, you can do the following to have Prettier run before each commit:

1. 安装 husky 和 lint-staged：

   ¥Install husky and lint-staged:

npm

yarn

pnpm

bun

npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

yarn add --dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"

如果你使用 Yarn 2，请参阅 https://typicode.github.io/husky/#/?id=yarn-2

¥If you use Yarn 2, see https://typicode.github.io/husky/#/?id=yarn-2

pnpm add --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"

bun add --dev husky lint-staged
bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"

2. 将以下内容添加到你的 package.json：

   ¥Add the following to your package.json:

{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

注意：如果你使用 ESLint，确保 lint-staged 在 Prettier 之前运行它，而不是之后。

¥Note: If you use ESLint, make sure lint-staged runs it before Prettier, not after.

有关详细信息，请参阅 预提交钩子。

¥See Pre-commit Hook for more information.

概括

¥Summary

总而言之，我们学会了：

¥To summarize, we have learned to:

• 在你的项目中本地安装精确版本的 Prettier。这确保项目中的每个人都获得完全相同版本的 Prettier。即使是 Prettier 的补丁版本也会导致格式略有不同，因此你不希望不同的团队成员使用不同的版本并来回格式化彼此的更改。

  ¥Install an exact version of Prettier locally in your project. This makes sure that everyone in the project gets the exact same version of Prettier. Even a patch release of Prettier can result in slightly different formatting, so you wouldn’t want different team members using different versions and formatting each other’s changes back and forth.

• 添加 .prettierrc 以让你的编辑器知道你正在使用 Prettier。

  ¥Add a .prettierrc to let your editor know that you are using Prettier.

• 添加一个 .prettierignore 让你的编辑器知道哪些文件不要触及，以及能够运行 prettier --write . 来格式化整个项目（不会破坏你不想要的文件，或阻塞生成的文件）。

  ¥Add a .prettierignore to let your editor know which files not to touch, as well as for being able to run prettier --write . to format the entire project (without mangling files you don’t want, or choking on generated files).

• 在 CI 中运行 prettier --check . 以确保你的项目保持格式化。

  ¥Run prettier --check . in CI to make sure that your project stays formatted.

• 从你的编辑器运行 Prettier 以获得最佳体验。

  ¥Run Prettier from your editor for the best experience.

• 使用 eslint-config-prettier 让 Prettier 和 ESLint 一起玩得很好。

  ¥Use eslint-config-prettier to make Prettier and ESLint play nice together.

• 设置预提交钩子以确保每次提交都已格式化。

  ¥Set up a pre-commit hook to make sure that every commit is formatted.