使用 prettier 统一代码格式化

最近开发的时候遇到个格式化的问题，项目的几个开发人员用的格式化工具不一致，导致改代码格式化后总是有很多改动。为此研究下 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 的格式化是在第三部的时候进行的，按照它定义的代码格式进行格式化，并替换原有代码。