prettier 是一个非常流行的代码格式化工具，它可以帮助开发者自动格式化代码，使其复合一致的风格和规范，在团队协作中也能通过自动格式化，使代码风格保持统一。
prettier 的一些主要特点和功能
- 一致的代码风格：prettier 可以根据预定义的规则自动格式化代码，确保代码风格一致
- 支持多种编程语言：支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等多种语言和配置文件
- 零配置：默认情况下，prettier 不需要复杂的配置，使用简单直接
- 集成容易：可以很容易地集成到开发环境中，如编辑器、构建工具或版本控制系统中
- 自动化：集成到代码编辑器或者项目中的构建流程，自动化格式化代码
使用方式
推荐使用本地安装，直接将依赖安装到项目中
npm i -D prettier
使用命令行工具
如果直接使用命令行工具格式化代码推荐安装到全局，如果通过npm script执行脚本，可以安装到项目中。格式化支持使用-w选项，即自动格式化并将修改后的内容写入到源文件中。另外文件支持 glob 匹配，可以一次性格式化多个文件。
# 全局安装
npm i -g prettier
# 格式化 1.js
prettier -w 1.js
# 格式化 scr目录下所有js文件
prettier -w scr/**/*.js
使用编辑器插件
推荐使用 VSCode 插件，安装后会自动格式化代码，并在保存文件时自动格式化。在 vs code 插件市场搜索 Prettier - Code formatter 并安装，然后在 vscode 配置文件中添加两行配置
// 默认使用prettier格式化文本
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存后自动格式化
"editor.formatOnSave": true,
集成到构建工具
可以使用husky和lint-staged来集成到构建工具中，在 husky 中添加一个名为 pre-commit 的钩子，并且添加以下内容
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- lint-staged
另外再新建一个 lint-staged 的配置文件，在其中添加以下内容
{
"*": "prettier -w"
}
这样在提交代码时，会先格式化代码，然后再将修改后的内容添加到暂存区，这样保证所有代码格式统一
prettier 配置
prettier 提供了许多配置项，允许你根据个人和团队的偏好来定制代码的格式化规则
常见配置项
| 配置项 | 说明 |
|---|---|
printWidth | 每行的最大长度，默认 80 |
tabWidth | 每个缩进的空格数，默认 2 |
useTabs | 是否使用 tab 进行缩进，默认 false |
semi | 是否在语句末尾添加分号，默认 true |
singleQuote | 是否使用单引号，默认 false |
quoteProps | 是否在对象属性中使用引号，默认 as-needed |
jsxSingleQuote | 是否使用单引号，默认 false |
trailingComma | 是否在对象最后一个属性后面添加逗号，默认 none。有三个可选值 none、es5、all |
bracketSpacing | 对象大括号中的空格，默认 true |
arrowParens | 箭头函数的参数是否要有小括号，有两个可选值 always、avoid |
endOfLine | 结尾的换行符，有三个可选值 auto、lf、crlf |
overrides | 针对某些文件单独配置 |
overrides 配置项
overrides 配置项可以针对某些文件单独配置，例如
{
"overrides": [
{
"files": "*.css",
"options": {
"tabWidth": 4
}
}
]
}
配置文件格式
prettier 使用 lilconfig 来读取配置文件，和 cosmiconfig 有点类似的，你可以使用以下类型文件来配置 prettier
package.json中使用prettier键名.prettierrc：JSON.prettierrc.json：JSON.prettierrc.json5：JSON.prettierrc.yaml：YAML.prettierrc.yml：YAML.prettierrc.js：JavaScriptprettierrc.config.js：JavaScript.prettierrc.mjs或者prettierrc.mjs： JavaScript with export.prettierrc.cjs或者prettierrc.cjs： JavaScript with module.exports.prettierrc.toml：TOML
忽略检查
忽略文件
在项目中有些文件不需要格式化，可以通过 .prettierignore 文件来忽略检查
node_modules
dist
忽略单行
在需要忽略的行前面加上注释 prettier-ignore 即可，不用的语言单行注释方式不一样。例如 js
// prettier-ignore
const a = 1;
常用插件
prettier 本身只是一个格式化工具，不具有插件系统，但是有个一跟它相关的工具，prettier-plugin-packagejson，这个工具的目的是用来格式化 package.json 文件，它能格式化 package.json 的同时，排序其中的字段，依赖项等
npm i -D prettier prettier-plugin-packagejson
格式化冲突
在配置配置项目的过程中我们可能会增加一些其他工具，例如 eslint、stylelint 等，这些工具可能会对代码进行一些修改，导致格式化结果不符合我们的预期，这时我们需要通过 eslint-config-prettier 和 stylelint-config-prettier 来禁用这些工具对代码的修改，使得 prettier 格式化的代码和 eslint、stylelint 格式化的代码保持一致。同时也能保证在不修改 eslint 和 styleLint 规则的情况下，不会报错
解决 prettier 与 eslint 的冲突
npm i -D eslint-config-prettier
在 eslint 配置文件中添加配置项
{
"extends": ["prettier"]
}
解决 prettier 与 stylelint 的冲突
npm i -D stylelint-config-prettier
在 stylelint 配置文件中添加配置项
{
"extends": ["stylelint-config-prettier"]
}