每个开发者都应该知道的 Prettier 最佳实践

简介

Prettier 已成为 JavaScript 生态中最流行的代码格式化工具之一，理由很充分。它通过为整个项目强制执行单一且一致的输出，消除了代码风格的争论。如果你曾经在代码审查中花五分钟争论应该用制表符还是空格，你就已经知道 Prettier 带来的价值了。

然而，要充分利用 Prettier，仅仅运行 npx prettier --write 格式化代码是不够的。正确的配置、编辑器集成和团队工作流才是流畅体验和频繁摩擦之间的区别。

基础设置与配置

最快的入门方式是一行命令：

npm install --save-dev prettier
npx prettier --write .

这会立即格式化项目中所有支持的文件。之后，在项目根目录创建一个配置文件。你可以使用 .prettierrc、.prettierrc.json、.prettierrc.yml，或者直接在 package.json 中添加 prettier 键。

以下是大多数项目的合理起始配置：

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

这种组合为你提供分号、有效位置的尾逗号、单引号和标准的 80 字符行宽。这些设置与许多流行的开源项目的风格相匹配。

对于已经使用 ESLint 的项目，考虑使用 eslint-config-prettier 来禁用与 Prettier 冲突的规则。这非常关键，因为 ESLint 和 Prettier 的职责有重叠，没有此配置时，你可能会看到相互矛盾的错误消息。

编辑器集成

没有开发者想要在每次编辑后手动运行 Prettier。真正的力量来自于编辑器中的自动格式化。

对于 VS Code 用户，安装官方的 Prettier - Code formatter 扩展。然后将以下设置添加到 .vscode/settings.json 中：

{
editor.formatOnSave: true,
editor.defaultFormatter: esbenp.prettier-vscode,
editor.formatOnPaste: true,
editor.formatOnType: false
}

将 formatOnPaste 设置为 true 是一个隐藏的亮点。它会自动格式化从文档或其他文件粘贴的代码，这是导致格式不一致的常见来源。

Neovim 用户可以依赖 nvim-prettier 插件结合 null-ls 来实现保存时格式化。JetBrains IDE 在其最新版本中具有内置的 Prettier 支持。所有编辑器中的关键原则是相同的：保存时格式化，而不是每次按键时格式化。在每个字符输入时格式化会产生令人困扰的体验，并可能导致光标位置跳跃而打断思路。

TypeScript 和 JSX 考虑事项

TypeScript 项目从基本配置之外的一些额外设置中受益。semi 选项应设置为 true，因为 TypeScript 语法加上分号看起来更整洁。singleQuote 选项有助于从视觉上区分字符串字面量和模板字面量。

JSX 代码经常导致格式化难题。默认情况下，Prettier 会将 JSX 属性换行到单独的行，这会使组件难以阅读。如果你希望关闭括号与最后一个属性在同一行，请在配置中添加 bracketSameLine: true。

在 Prettier 2.0 中移除了 jsxBracketSameLine 选项。相反，使用 bracketSameLine 设置并适当配置你的 printWidth。对于大多数代码库，printWidth 为 80 效果很好。

有时 Prettier 会以你不同意的格式来格式化某些内容。在这种情况下，在问题代码块上方使用 // prettier-ignore 注释。谨慎使用，因为它违背了保持一致格式的目的。更好的方法是向 Prettier 提交功能请求或拉取请求，附上最小化重现案例。

Git 钩子和团队工作流

最重要的工作流实践是将 Prettier 集成到你的 Git 提交流程中。如果没有这一步，格式错误会到达共享仓库，并在版本控制历史中造成不必要的干扰。

使用 Husky 和 lint-staged 仅对暂存文件运行 Prettier：

安装包：
npm install --save-dev husky lint-staged

添加到 package.json：
{
husky: {
hooks: {
pre-commit: lint-staged
}
},
lint-staged: {
"*.{js,ts,jsx,tsx,json,css,md}": [
prettier --write
]
}
}

运行 npx husky install 以激活钩子。此配置确保只有你准备提交的文件会被格式化，这使操作保持快速。在每次提交时格式化整个代码库对于大型项目来说代价过高。

对于持续集成，添加一个 CI 步骤来运行 npx prettier --check .，如果有任何文件未正确格式化则使构建失败。这作为安全网，防止那些可能错过了编辑器配置或在主要开发环境之外工作的团队成员遗漏问题。

最佳实践总结

以下是大多数常见配置选项的快速对比：

保持配置简洁。Prettier 附带了经过深思熟虑的默认值，每个额外选项都是你的团队必须维护的决策。只有在有具体原因时才覆盖默认值。

永远不要将 Prettier 与其他格式化工具混用。使用两个竞争相同文件的格式化工具会创建无止境的重新格式化循环，完全破坏了整个目的。如果 ESLint 正在做格式化工作，立即禁用那些规则，让 Prettier 处理。

将 .prettierrc 文件和编辑器设置提交到版本控制。每个团队成员都应使用相同的配置。当一个开发人员的设置与其他人不同时，合并冲突会成倍增加，一致性优势完全消失。

结论

Prettier 消除了软件开发中的一个重大摩擦源。当你将它视为工作流程中不可协商的一部分，而不是可选增强功能时，该工具发挥最大效用。配置一次，集成到你的编辑器和 Git 钩子中，然后停止在代码审查中讨论大括号样式。

Prettier 最大的好处不仅仅是代码一致。它释放了你的脑力，让你不再担心格式问题，专注于应用程序的实际逻辑。从上述基本配置开始，添加适合你团队的调整，让工具处理其余工作。

免责声明：本文由 AI 辅助生成。我们力求准确，但在做出决策前，请在官方网站上核实具体功能和定价。