前言

今天這兩個工具，基本上已經跟前端沒有直接關係了XD

但它們的重要性，我想用過的人肯定都知道，它們就像兩尊門神一樣，站在電腦前面，程式碼品質不合格，退件！程式碼風格與團隊不符，退件！

今天讓我們來看看，這兩個能夠大幅提升開發速度的工具 - ESLint & Prettier

先想一下

• ESLint & Prettier 是在什麼樣的時代誕生的？
• ESLint & Prettier 怎麼解決問題？
• ESLint & Prettier 的優缺點是什麼？
• ESLint & Prettier 適合什麼情境？

ESLint & Prettier 是在什麼樣的時代誕生的？

個人

以前網頁規模不大，不要說前端工程師了，連網頁工程師都不一定有，很可能是一個「網頁設計師」包辦了從網頁設計到上架。

這時的特徵在於，很多程式碼都是自己寫、自己維護，鮮少有其他人會碰到自己的程式碼，因此，很多時候可以有自己習慣的 coding style，最有名的應該是關於縮排的多樣性：

// 兩格空白
function () {
  const name = "Allen";
}

// 四格空白
function () {
    const name = "Allen";
}

還有大括號換行的部分：

if () {
    
}

if ()
{
    
}

這些關於「風格」的部分，完全不影響程式碼功能，想怎麼寫就怎麼寫，基本上也不太會有什麼問題。

團隊

但隨著網頁工程的演進，工作切分愈來愈細，甚至可以組一個前端團隊，裡面所有人維護了公司所有前端 code。

這時，程式碼風格不再是自己的事情，因為有人喜歡兩格空白，有人喜歡四格空白，甚至如果看到不是自己喜歡的風格，就整組魔改！當然改完之後，如果被另一派人馬看到，搞不好又要改回去。

姑且不論風格，畢竟風格也不會實際造成程式結果，但有一些語法可能會造成效能方面的問題，或者一些無視變數型別的寫法。

因為 JavaScript 不會立刻報錯，往往像個不定時炸彈一樣，等待有緣人(?)經過。

ESLint & Prettier 怎麼解決問題？

我們需要有一個像 QA 一樣的角色，一般 QA 是針對產品品質把關，要確保「規格文件」與「產品」一致。

因此我們也可以找一個工具，來幫我們針對程式碼品質、風格把關，我們可以自己設定有哪些規範，然後確保「規範文件」與「程式碼」一致，而 Linter 與 Formatter 就是這兩大 QA 支柱。

ESLint (Linter)

ESLint 是 Linter 的其中一種工具，主要用來控管「程式碼品質」。

Linter 會幫程式碼做靜態語法分析(一樣是透過 AST 抽象語法樹)，在程式碼跑起來之前，預先抓出可能的錯誤，畫上紅線標示。

大致上會做以下的事情：

1. Possible Problems：泛指一些容易出錯的寫法，比如

• 宣告前就先使用變數
• 在迴圈中使用 await
• return 的下一行還有程式碼

2. Suggestions：建議最佳實踐的寫法，比如

• 不要用 var 宣告變數
• if 裡面如果有 return 就不需要 else

3. Layout & Formatting：統一基本的 coding style，比如

• 逗點後面要不要空白
• 單引號還是雙引號

要參考更多可以看官網。

Prettier (Formatter)

Prettier 是 Formatter 的其中一種工具，主要用來控管「程式碼風格」。

最簡單的理解就是排版神器啦！可以將各種 HTML、CSS、JavaScript、JSX 甚至 Markdown 都排得很漂亮，而且搭配 IDE(如 VS code)，可以做到儲存的時候就順便排版。

兩者衝突解法

兩者衝突的原因在於，ESLint 同時帶有「品質」與「風格」兩種控管工作，但「風格」的部分又跟 Prettier 不相容，會導致兩者同時開啟時，可能會「一個叫你改，一個叫你不要改」。

這時可以借助兩個工具：

• eslint-config-prettier：關閉 ESLint 中，與 Prettier 衝突的規則
• eslint-plugin-prettier：賦予 ESLint 用 Prettier 來排版調整的能力

這是一套連續計，首先，因為兩者都有關於「風格」的定義，所以透過 eslint-config-prettier 將 ESLint 的風格關閉，只留下 Prettier 的風格。

但是，這樣會變成，品質問題是 ESLint 報錯，風格問題是 Prettier 報錯，沒有統一來源，於是我們透過 eslint-plugin-prettier 將 Prettier 的風格配置，以 ESLint 的 rules 方式寫入，這樣就可以統一由 ESLint 來報錯了。

ESLint & Prettier 的優缺點是什麼？

優點

• 節省時間，無論是團隊溝通時間、自己排版時間
• 新手可以自然而然學會 Best Practice

缺點

• 需處理兩者風格衝突的部分
• 需配合團隊，可能要放棄個人習慣的寫法
• 紅、黃線過多時容易焦躁

ESLint & Prettier 適合什麼情境？

重點在於，無論 ESLint 或 Prettier，都只會處理很基本的語法、排版問題，不會碰觸到任何商業邏輯與程式架構，因此，採用這兩個工具，意味著不用處理那些基本的雜事，可以專注在寫真正有價值的程式，真實地提升工作效率，而不是看起來很忙，鍵盤敲敲打打花半小時在排版。

同時，對於團隊是個隱形的約束力，讓團隊成員提交的程式碼，都是經過這股約束力收斂的，確保大家都在同一條基準線上，不會有奇奇怪怪的風格，讓其他成員可以無痛接手任何程式碼。

結語

心智圖放大版

ESLint 與 Prettier 這兩個工具大概已經是工作的基本款了，沒有它們的話，真的很容易會花一堆時間在重複無意義的排版。

而且 ESLint 的教育意義也很重要，剛開始使用 ESLint 的時候，發現自己被畫紅線，滑鼠移上去一看，才知道

啊原來不建議這樣寫啊！

簡直像是有個老師就站在旁邊，告訴我怎麼寫會更好一樣！

參考資料

ESLint
Prettier
Prettier v.s Linters