乐趣区

关于prettier:使用-prettier-统一代码格式化

jiezi

最近开发的时候遇到个格式化的问题，我的项目的几个开发人员用的格式化工具不统一，导致改代码格式化后总是有很多改变。为此钻研下 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",
  "": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"": {"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 的格式化是在第三部的时候进行的，依照它定义的代码格局进行格式化，并替换原有代码。

参考文档

  • https://prettier.io/
  • https://juejin.cn/post/684490…
  • https://juejin.cn/post/717252…
退出移动版