在这里记录一下 Prettier 的学习与使用。
什么是 Prettier ?
Prettier 是一个用来格式化代码的工具，或者称为包或插件。它的作用就是”格式化代码“，使代码更加整齐、易读。 Prettier 提供了多种使用方式，包括:
- 命令行工具
- 在 Nodejs 中使用其 API
- 在浏览器中使用
一般最常见的就是将其当做命令行工具使用。例如有一个代码文件 xx.js，其内容如下：
const a = {name:'张三',age: 18,
}
const b=a.age+7;
复制代码则可以通过命令行将其内容格式化：
npx prettier index.js
## 输出如下
# const a = { name: '张三', age: 18 };
# const b = a.age + 7;
复制代码通过
prettier --write index.js可以直接将源文件格式化。
Prettier 的特点
Prettier 作为一个格式化代码的工具，其特点就是：具有自己的格式化的规则。
关于代码的格式化风格，每个团队、每个开发者都有自己的喜好，因此关于代码风格的争论也从未停止。公说公有理，婆说婆有理，到底该听谁的呢？Prettier 就是要终结这些争论：大家既然选择使用 Prettier就默认接受 Prettier 的格式化风格，如果不接受的话就不要使用。
即便如此，Prettier 还是提供了一些可以配置项，因为大家对这些配置有着过于强烈的要求，比如：
- 该使用单引号和双引号
- 语句的末尾要不要加分号
- 缩进使用 tab 还是 whitespace
- 缩进量是 2 还是 4
在实际使用时，我们可以通过配置文件更改这些选项。所幸 Prettier 提供的配置并不多，以后也不打算再增加新的配置项。因此它还是一个具有明显的自我规则的格式化工具。
Prettier 和 ESLint 的区别
Lint 工具中最著名的就是 ESLint 了，其包含的规则分为两部分：
- 代码格式的规则，例如：
- 每行代码的最大长度
- 关键词之间的空格
- 代码质量的规则，例如：
- 变量必须先声明后使用
对于代码格式的规则，完全可以使用 Prettier 来代替。而代码质量的规则，Prettier 则无能为力。因此必须借助 ESLint 来做这部分工作。因此，Prettier 专注于格式化代码，而 ESLint 专注于提高代码质量，减少潜在的 bug。
Prettier 的使用
前文说过了 Prettier 的几种使用方式。在前端项目中，一般是在命令行中使用 Prettier 。
安装 Prettier
在项目中运行如下命令：
npm install -D prettier
复制代码添加配置文件
项目根目录下新建两个文件：
.prettierignore: 无需使用 Prettier 进行代码格式化的文件或者目录名，一般可以保持和.gitignore的内容相同prettier.config.js: Prettier 的配置文件，常见配置如下：module.exports = { // 是否加分号 semi: true, // 是否用单引号 singleQuote: true, // tab健的空格数 tabWidth: 4, // 是否使用tab格式化 useTabs: false, } 复制代码
package.json 中增加格式化脚本
通过在 package.json 的 scripts 增加脚本，就可以通过命令行格式化我们的代码文件。这里仅格式化 /src 文件下的文件：
{
"scripts": {
"format-all": "prettier --write src/"
}
}
复制代码项目根目录下运行 npm run format-all，即可发现 src 目录下的文件都被重新格式化了。
增加 VSCode 插件和配置
实际使用时，我们如果每次写完代码都去运行格式化命令把代码格式化一遍，那就太麻烦了。所以配合编辑器使用，在保存时自动格式化的功能非常重要。
安装插件
首先在 VSCode 插件中安装如下插件：esbenp.prettier-vscode。
添加配置
为了保证运行项目的每个开发者能使用相同的配置，需要给 VSCode 指定 workspace 级别的配置，并将其提交到 git 中。 在项目根目录创建文件 .vscode/settings.json 并添加如下内容：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
}
复制代码这里我们使用 esbenp.prettier-vscode 插件作为代码的格式化工具，并指定在保存文件时自动格式化代码。
运行完上述步骤，在 VSCode 中编写代码就已经可以使用 Prettier 自动格式化代码了。
不过前端项目一般都会使用 ESLint 做代码检查，因此要配合 ESLint 使用还需要额外的配置。
配合 ESLint 使用
前文说过，ESLint 的规则集中也包括一些代码格式的规则，因此如果在 VSCode 中配置了使用 ESLint 做自动修复，这和 Prettier 就会产生冲突。因此需要使用 eslint-config-prettier 配置，把和 Prettier 冲突的格式化规则禁用掉。
安装 eslint-config-prettier
项目下运行：
npm install -D eslint-config-prettier
复制代码修改 ESLint 配置
在 ESLint 配置中增加如下配置：
{
"extends": [
"other config",
+ "prettier"
]
}
复制代码eslint-config-prettier 这个配置就是把所有跟代码格式相关的规则禁用掉，所以一定要保证 "prettier" 在 extends 中的最后位置。这样，在编辑器中ESLint 就不会报关于格式的问题了。
eslint-config-prettier不仅会禁用 ESLint 默认规则中的格式规则，也会禁用诸如eslint-plugin-vue、eslint-plugin-react等插件的所有关于格式的规则，因此只需要在extends中增加"prettier"即可。 在[email protected]之前的版本，可能需要添加"prettier/vue", "prettier/react"等配置，在8.0.0之后，所有的规则都集中到了一起，所以无需再指定上述配置。
至此，Prettier 就可以在项目中完美运行了！
关于 eslint-plugin-prettier
查阅网络上关于 Prettier 的配置，很多会推荐使用 eslint-plugin-prettier 插件来配合 ESLint 使用。
前文说过，eslint-config-prettier 这个配置会禁用所有关于代码格式的规则，这样一来，代码中的任何格式错误都不会作为 ESLint 错误显示出来。而 eslint-plugin-prettier 这个插件是把 Prettier 的格式化规则加入到 ESLint 规则中，所以使用该插件后格式问题会以 ESLint 错误的方式显示出来。
使用 eslint-plugin-prettier 的缺点就是比只使用 Prettier 慢。
通过 Git hooks 格式化代码
如果有些团队成员并没有配置好代码自动格式化的流程，那么未经格式化的代码就会提交到仓库中，因此我们可以通过 git hooks ，在提交时对要提交的代码进行格式化。
安装 husky 和 lint-staged
安装依赖
npm install --save-dev husky lint-staged
npx husky install
复制代码配置 husky
在 package.json 增加 prepare 脚本：
{
"scripts": {
+ "prepare": "husky install"
}
}
复制代码然后添加 pre-commit 钩子处理器：
npx husky add .husky/pre-commit "npx lint-staged"
复制代码这样在使用 git commit 的时候，就会执行 lint-staged 命令。
配置 lint-staged
lint-staged 这个库可以针对处于 staged 状态的文件执行一些命令。我们在 package.json 中增加以下内容：
{
+ "lint-staged": {
+ "**/*": "prettier --write --ignore-unknown"
+ }
}
复制代码这样在执行 npx lint-staged 命令时，lint-staged 就会执行我们设置的 prettier --write --ignore-unknown 命令，对代码进行格式化。
总结
- Prettier 是一个格式化代码的工具，使用它我们就不用花费更多精力去选择什么样的代码风格，只需要按照 Prettier 的规则来就好。
- 只要代码整齐、整洁、可读性好就够了，没有必要纠结于使用何种代码风格。
- 使用
eslint-config-prettier时配置非常简单，同时比eslint-plugin-prettier性能更好。
本文到此结束，欢迎提出问题~