稳定版

编辑

安装

首先，在本地安装 Prettier

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

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

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

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

提示！如果存在 .gitignore 文件，并且与运行 Prettier 的目录位于同一目录下，Prettier 会遵循其中指定的规则。您也可以基于 .eslintignore（如果您有的话）创建 .prettierignore。

另一个提示！如果您的项目尚未准备好格式化 HTML 文件，例如，请添加 *.html。

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

npx prettier . --write

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

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

yarn prettier . --write

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

pnpm exec prettier . --write

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

bun prettier . --write

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

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

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

npx prettier . --check

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

设置您的编辑器

从命令行进行格式化是一个不错的入门方法，但通过从编辑器中运行 Prettier 可以获得最大的收益，无论是通过键盘快捷键还是在每次保存文件时自动运行。当代码中的某一行变得太长，以至于无法容纳在屏幕上时，只需按下一个键，然后观察它如何神奇地换行！或者，当您粘贴一些代码并且缩进变得混乱时，让 Prettier 为您修复它，而无需离开编辑器。

请参阅 编辑器集成，了解如何设置您的编辑器。如果您的编辑器不支持 Prettier，则可以 使用文件监视器运行 Prettier。

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

并且能够从命令行运行 Prettier 仍然是一个不错的备用方案，并且对于 CI 设置是必需的。

ESLint（以及其他 Lint 工具）

如果您使用 ESLint，请安装 eslint-config-prettier 以使 ESLint 和 Prettier 能够很好地协同工作。它会关闭所有不必要或可能与 Prettier 冲突的 ESLint 规则。对于 Stylelint，也有类似的配置：stylelint-config-prettier

（请参阅 Prettier 与 Lint 工具的比较，以了解有关格式化与 Lint 的更多信息，与 Lint 工具集成，以获取有关配置 Lint 工具的更深入信息，以及 相关项目，以获取更多集成可能性，如有需要。）

Git 钩子

除了从命令行（prettier --write）运行 Prettier、在 CI 中检查格式以及从编辑器中运行 Prettier 之外，许多人还喜欢将 Prettier 作为提交前钩子运行。这样可以确保所有提交都已格式化，而无需等待 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')"
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

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')"
  1. 将以下内容添加到您的 package.json 中
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}

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

请参阅 提交前钩子，以获取更多信息。

总结

总而言之，我们学习了如何

  • 在您的项目中本地安装 Prettier 的精确版本。这确保了项目中的每个人都获得完全相同的 Prettier 版本。即使是 Prettier 的补丁版本也可能导致略微不同的格式化，因此您不希望不同的团队成员使用不同的版本并来回格式化彼此的更改。
  • 添加 .prettierrc 以让您的编辑器知道您正在使用 Prettier。
  • 添加 .prettierignore 以让您的编辑器知道哪些文件 *不* 需要处理，以及能够运行 prettier --write . 来格式化整个项目（而不会弄乱您不希望的文件或卡在生成的文件上）。
  • 在 CI 中运行 prettier --check . 以确保您的项目保持格式化。
  • 从您的编辑器中运行 Prettier 以获得最佳体验。
  • 使用 eslint-config-prettier 使 Prettier 和 ESLint 能够协同工作。
  • 设置提交前钩子以确保每次提交都已格式化。
← 基本原理忽略代码 →