Introducing Prettier with Eslint

5 min readApr 19, 2017

Prettier v1.0.0 就在四月初已經正式釋出，等同宣稱在 Production 環境也可安心穩定地使用了，也是時候考慮導入至專案中囉。在專案的導入順序我想應該會是 Prettier 再來才是 Eslint 的設定，兩者是可以並存的，以下以我覺得的導入順序做介紹。

*Source Code: https://github.com/MCS-Lite/mcs-lite

Setup Prettier

Prettier 做的事情就是有效率的幫你整理雜亂的程式碼，只揭露幾個可設定的參數來調整喜好，建議盡量都使用預設值就好，透過 CLI 的使用方法：

$ npm i prettier -g
$ prettier — trailing-comma all — write ‘*.js’

而 Prettier 大致可能會有這幾種使用情境：

Editor Level：官方就有提供整合編輯器的套件，如此就可做到 Format on save。
CLI：開發完後自己下類似 $ npm run format 的指令。
Commit Level：用 Lint-staged 套件能做到 Pre-commit 時處理，不用跑整份專案，而是只跑更改的部分而已，而 CRA 內部就是使用這種做法，
CI Level：搭配 Eslint 使用，下個段落介紹。

Runs Prettier as Eslint Rules

也許你可能會有這樣的需求：

當發了 PR，發現不合乎 Prettier 的規則就 Fail 掉該次的 CI Build。

Prettier 本身沒提供這個檢查機制，這時候可以透過與 Eslint 整合的 Eslint-plugin-prettier Plugin 來達成，很簡單地在 Eslint 加上規則如下設定：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

如此在跑 Eslint 檢查的時候就會檢查是否符合 Prettier 規則，事實上昨天釋出的 React-vr 專案就是這樣設定的。

Resolve Conflict Rules

Prettier 只能調整 Coding Style；而 Eslint 在現今多元發展的套件生態中可以檢查很多其他的錯誤，甚至常常在寫 Code 時可以透過 Eslint Warning 在錯誤中學習，所以 Eslint 也是必須的，像是我們專案會基於 Airbnb JavaScript Style Guide 之上來調整所需的規則。

那如果你同時設定其他 Eslint Rules 會不會產生衝突呢？答案是會的。這時官方有提供 Eslint-config-prettier 的設定，來幫你關掉多餘或衝突的設定。並且可以透過 CLI 來協助檢查你的 Eslint 規則是否有衝突：

$ eslint --print-config .eslintrc | eslint-config-prettier-check

其他衝突解法

Prettier-eslint 這個解法是先跑 prettier 再跑 eslint --fix，二次調整輸出整理過後的程式碼，這樣就可以解決衝突的問題，但在上個段落的設定下就已經可以滿足我的需求，因此暫時沒嘗試用這個解。可以比較看看兩者的差異，相關套件的簡介如下：

Prettier：Formatter。
eslint-config-airbnb：Airbnb 的 Coding Style 規則。
eslint-plugin-prettier：把 Prettier 規則加入 Eslint 檢查機制。
eslint-config-prettier：解決 Prettier 與 Eslint 的衝突。

Badge

當你的程式碼有使用 Prettier 時，可以在你的專案中加入 Prettier Badge 來告示 Contributor 所遵從的規範。

Formating Ignore

有些情況你可能會不想要 Prettier 幫你更動排版，例如在 Rx Marble Testing 時，會想要讓時間軸起始點一致，這樣才能夠比對 Data Flow，此時就可以加上 // prettier-ignore 的註解訊息告知：

結論

因為 Prettier 會更動你的程式碼，建議在有測試的前提下再來導入比較心安，最後專案的 Workflow 會是，建立 PR 後 Trigger CI，檢查 Eslint (Prettier)，當不符合規則就 Fail 掉 Build，通知 User 可以在本機端跑 $ npm run format 來快速整理程式碼。

經歷 Jshint、Eslint 到 Prettier 的演進過程，Prettier 算是 2017 最熱門的 JS 生態圈的工具了，但其實在其他語言包含 Elm、Go 或 PHP 早就很常見囉。