在这里记录一下 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
性能更好。
本文到此结束,欢迎提出问题~