开启成长之旅！这是我参加「日新计划 2 月更文挑战」的第 5 天，点击查看活动详情

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

参阅文档

  • prettier.io/
  • /post/684490…
  • /post/717252…