使用 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 的格式化是在第三部的時候進行的，按照它定義的程式碼格式進行格式化，並替換原有程式碼。