Prettier 是一款流行的代码格式化工具，它能够帮助开发者保持代码风格的一致性，减少因代码风格争议而产生的争论。本文将深入探讨如何根据项目需求进行详细的配置选项调整，并分享一些使用 Prettier 的最佳实践，包括如何通过 Git 钩子自动化代码格式化过程以及如何解决常见的配置冲突问题。
Prettier 进阶配置
Prettier 提供了许多可配置的选项，允许开发者根据自己的项目需求来定制格式化规则。下面是一些常见的配置选项及其用途：
配置文件
Prettier 支持多种配置文件格式，如 .prettierrc、.prettierrc.json、.prettierrc.yaml 或者 package.json 中的 prettier 字段。为了便于维护，推荐使用 JSON 文件。
示例配置文件
{
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"endOfLine": "lf",
"parser": "typescript",
"printWidth": 100,
"proseWrap": "preserve"
}
tabWidth: 设置制表符的宽度，默认为 2。useTabs: 控制是否使用 Tab 键来代替空格，默认为false。semi: 是否在语句末尾使用分号，默认为true。singleQuote: 控制字符串是否使用单引号，默认为true。jsxSingleQuote: JSX 属性值是否使用单引号，默认为true。trailingComma: 控制是否在最后一个元素后使用尾随逗号，默认为"es5"。bracketSpacing: 控制对象字面量的括号内是否有空格，默认为true。jsxBracketSameLine: 控制 JSX 属性是否在同一行内关闭，默认为false。arrowParens: 控制箭头函数参数的括号使用情况，默认为"avoid"。endOfLine: 文件的换行符类型，默认为"lf"。parser: 指定使用的解析器，默认为"babylon"。printWidth: 每行的最大字符数，默认为 80。proseWrap: 控制 prose 文本的换行，默认为"preserve"。
解决配置冲突
在团队协作中，可能会遇到不同工具之间的配置冲突。例如，ESLint 和 Prettier 可能会对同一份代码有不同的格式要求。为了避免这种情况，可以使用 eslint-config-prettier 和 prettier-eslint 等插件来统一 ESLint 和 Prettier 的规则。
示例：整合 ESLint 和 Prettier
在 .eslintrc.js 文件中添加 prettier 插件：
module.exports = {
plugins: ['prettier'],
extends: ['plugin:prettier/recommended'],
rules: {
'prettier/prettier': 'error',
// 可以在这里添加其他规则
}
};
使用 Git 钩子自动化代码格式化
在提交代码之前自动运行 Prettier 是一种确保代码格式始终符合约定的好方法。通过 Git 钩子，可以在每次提交之前自动格式化修改过的文件。
设置 Git 钩子
创建 husky 配置文件
首先，安装 husky 和 lint-staged：
npm install husky lint-staged --save-dev
接着，在仓库根目录下创建一个 husky 文件夹，并在其中创建 pre-commit 文件：
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged
配置 lint-staged
在仓库根目录下创建 .lintstagedrc.js 文件：
module.exports = {
'*.{js,jsx,ts,tsx}': files => [
`npx prettier --write ${
files.join(' ')}`,
`npx eslint --fix ${
files.join(' ')}`,
],
};
这样每当有代码提交时，Prettier 和 ESLint 将自动运行。
最佳实践
维护一致的代码风格
确保团队中的每个人都使用相同的 Prettier 配置，这样可以避免代码风格上的差异导致的问题。
定期更新 Prettier
随着新版本的发布，Prettier 不断引入新的功能和改进。定期更新可以确保使用的是最新版本，并享受其带来的好处。
使用 Prettier CLI
Prettier 提供了一个命令行工具，可以直接在终端中使用。例如，可以使用 npx prettier --write . 来格式化整个项目的文件。
结论
通过合理的配置和最佳实践，Prettier 可以成为提高代码质量和团队生产力的强大工具。本文介绍了如何根据项目需求调整 Prettier 的配置选项，并通过 Git 钩子自动化代码格式化过程。此外，还分享了如何解决配置冲突问题以及一些实用的建议。掌握这些技巧后，你可以更加自信地使用 Prettier 来管理你的代码样式。
