原文

Lint和prettier區別

那 ESLint 和 Prettier 的區別是什麼呢？eslint（包括其他一些 lint 工具）的主要功能包含程式碼格式的校驗，程式碼質量的校驗。而 Prettier 只是程式碼格式的校驗（並格式化程式碼），不會對程式碼質量進行校驗。程式碼格式問題通常指的是：單行程式碼長度、tab長度、空格、逗號表示式等問題。而程式碼質量問題指的是：未使用變數、三等號、全域性變數宣告等問題。

Lint和Prettier配合使用

為什麼要兩者配合使用？因為，第一在 ESLint 推出 --fix 引數前，ESLint 並沒有自動化格式程式碼的功能，要對一些格式問題做批量格式化只能用 Prettier 這樣的工具。第二 ESLint 的規則並不能完全包含 Prettier 的規則，兩者不是簡單的誰替代誰的問題。但是在 ESLint 推出 --fix 命令列引數之後，如果你覺得 ESLint 提供的格式化程式碼夠用了，也可以不使用 Prettier。

ESLint 和 Prettier 相互合作的時候有一些問題，對於他們交集的部分規則，ESLint 和 Prettier 格式化後的程式碼格式不一致。導致的問題是：當你用 Prettier 格式化程式碼後再用 ESLint 去檢測，會出現一些因為格式化導致的 warning。這個時候有兩個解決方案： 1. 執行 Prettier 之後，再使用 eslint --fix 格式化一把，這樣把衝突的部分以 ESLint 的格式為標準覆蓋掉，剩下的 warning 就都是程式碼質量問題了。 2. 在配置 ESLint 的校驗規則時候把和 Prettier 衝突的規則 disable 掉，然後再使用 Prettier 的規則作為校驗規則。那麼使用 Prettier 格式化後，使用 ESLint 校驗就不會出現對前者的 warning。

為什麼不能先使用 ESLint 再使用 Prettier。針對方案1，如果你後使用 Prettier，那麼格式化後提交的程式碼在下一次或者別人 checkout 程式碼後是通不過 lint 校驗的。針對方案2，其實是可以的，但是本人在實踐中看社群方案的時候有提到某些情況下 eslint --fix 和 prettier 混用會出現格式問題。所以保險起見還是先用 perttier 格式化，再用 eslint 命令校驗，而不用 eslint --fix 命令去格式化。

{
  "extends": [
    ...,
    "已經配置的規則",
    "plugin:prettier/recommended
 
"
  ]
}

和VSCode整合使用

上面所有講到的內容都是在你寫完程式碼去校驗的，使用的是命令列工具。如果你是一個新手，對規範不是很熟悉，那麼碰到的問題就是寫完程式碼執行命令列工具後產生海量的 warning。這個時候改起來真的很打擊積極性。如果能夠在寫的程式碼的時候讓編輯器提示就能及時改正了。自然我們社群也提供了很多方案，各家的編輯器 Atom、Sublime、VSCode 等主流的編輯器都有相關的外掛。我就以 VSCode 為例：

一、下載 ESLint Extension