最近开发的时候遇到个格式化的问题，项目的几个开发人员用的格式化工具不一致，导致改代码格式化后总是有很多改动。为此研究下 Prettier 统一代码格式化公安局。
Prettier 简介
Prettier 是一个武断的代码格式化工具，为什么说它武断呢，因为它不负责代码检查，只负责按它自己的一套规则进行格式化。而且它的格式化可配置项也很少，上手很简单。（不过实际用下来格式化的效果很不错）
它支持下面这些语言的格式化：
- JavaScript (including experimental features)
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- Ember/Handlebars
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
使用 Prettier 对代码进行格式化
安装 Prettier
npm install --save-dev --save-exact prettier
安装后,需要在根目录配置两个文件
-
.prettierrc.json用来配置 Prettier 的格式化方式，做到定制化。 -
.prettierignore类似于 .gitignore 用来忽略一些目录或者文件，在格式化是会忽略他们。
对文件进行格式化
npx prettier --write .
如此，整个项目的文件都会被格式化。如果只想格式化某个目录下的文件，可以更改命令：
npx prettier --write ./src/views/
.prettierrc.json
prettier 的配置规则文件。可以配置的配置项很少，算是比较有好的。具体可参考官方配置文档
{
"semi": false,
"singleQuote": true,
"arrowParens": "always",
"htmlWhitespaceSensitivity": "ignore",
"trailingComma": "all"
}
.prettierignore
我们使用 .prettierignore 来忽略指定的文件和目录
# 忽略目录或文件
build
coverage
# 忽略所有 html 文件
*.html
另外还有两种可以忽略格式化的方式：
第一种是加上 prettier-ignore 的注释来忽略某些代码的格式化。
// prettier-ignore
第二种是在执行 prettier 命令的时候加上忽略的文件后缀
prettier --write . '!**/*.{js,jsx,vue}'
VS Code 上安装 Prettier
上面提到的 Prettier 是通过命令行的方式对文件进行格式化的。
我们还可以在编辑器中使用 Prettier。使用的方式就是在编辑器上安装 Prettier 的扩展。我这里以 VS Code 为例，如果想查阅其他编辑器的扩展安装方式可以参考这里
安装方式很简单，在 VS Code 侧边栏找到扩展，搜索 Prettier 就可以找到 Prettier - Code formatter了，安装后即可使用。
在安装完后，需要在 VS Code 配置中配置默认格式化方式：
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
如此就可以通过 alt + shift + f 来进行格式化了。
在 Git Hooks 上加上 Prettier 格式化
目标是在每次 Git commit 的时候进行格式化。
首先需要安装 hushy 和 lint-stage
npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
然后在 package.json 中加入 hook 代码
{
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
}
}
统一 Prettier 的用法
既然安装了命令式的 prettier 和编辑器扩展式的 prettier，那么他们如果不统一反复横跳就非常蛋疼了。
我就遇到某项目在多台电脑上的 VS Code 上使用 Prettier 格式化出的结果不一样，问题出在那个项目没有中并没有 prettierrc.json 配置文件，所以各个 VS Code 就按照系统配置中的规则来进行了格式化。
在加上了配置文件后，发现配置文件并未生效。还是各管各的。
于是，试着重启了 VS Code，再去进行格式化。结果，alt + shift + f 格式化出来的结果就和 npx prettier --write . 的效果统一了，都是照着 .prettierrc.json 来进行格式的。
其他
保存即格式化
在 VS Code 的配置中搜索 Format On Save，找到配置项勾选后就可以在保存文件的时候进行格式化。
这样就可以省去每次都按 Shift + Alt + F 的时间了（虽然我还是会经常习惯性按快捷键）
Prettier 格式化后,结束标签的 > 换行了
<el-dropdown-item
v-for="option in indicatorOptions"
:command="option.value"
:key="option.value"
>{{ option.name }}</el-dropdown-item
>
这个代码格式就很反程序员，逼死强迫症了属于是。解决方案是修改 .prettierrc.json 配置文件。
{
...,
htmlWhitespaceSensitivity: “ignore”
}
<el-dropdown-item
v-for="option in indicatorOptions"
:command="option.value"
:key="option.value">
{{ option.name }}
</el-dropdown-item>
Prettier 实现原理
prettier 是基于编辑技术实现的。其实像 webpack 这些编译工具、vue 和 react 转成原生的 JavaScript 也是类似的原理。
- 解析源码，将源码字符串转换成 AST 语法树。
- 对生成的 AST 做一些增删改处理。
- 将 AST 递归生成目标代码。
而 Prettier 的格式化是在第三部的时候进行的，按照它定义的代码格式进行格式化，并替换原有代码。
