網頁開發必學：程式碼規範、Prettier 與 ESLint 實戰指南

文、Raymond老師

不管是什麼類型的工作，SOP的存在對於新人上手都十分的有幫助，它讓我們在什麼都不懂的初期，至少有一個可依循的路線去走，而在程式開發的時候用的SOP通常就是所謂的「程式碼規範」，它不僅僅是一套死板的規則，更是團隊協作的潤滑劑，能幫助新人更快地融入團隊，同時提升整體的程式碼品質。

為什麼需要程式碼規範？

想像一下，如果一本書的每一章節都由不同的作者撰寫，但卻沒有統一的寫作風格和語法標準。讀起來會是什麼樣子？可能會讓讀者感到非常困惑。程式碼也是如此。在一個多人協作的專案中，程式碼規範就像是一套共同遵守的語言，它能夠：

提高代碼的可讀性：讓團隊成員能更快速地理解彼此的程式碼。

降低維護成本：統一的風格可以減少後期維護的難度。

減少不必要的爭議：明確的規範可以避免個人編寫風格的衝突。

而除了風格上的規範以外，也有兩個對於網頁開發者來說，非常常用的工具，可以輔助我們達到格式以及品質上的標準化：Prettier與Eslint

Prettier

Prettier 就像是一位排版設計師，它能夠自動格式化你的代碼，確保所有的縮排、換行、引號等都符合統一的標準。不論是怎麼風格迥異的工程師寫的程式碼，經過 Prettier 處理後，都會呈現出一致且整潔的樣子，舉例來說：

圖一：格式化前

圖二：格式化後

從上圖的前後對比我們就能看出，無論你原始的排版有多混亂，Prettier 都會將其轉換成統一的格式。不僅僅是縮排，像是引號風格、行寬、斷行方式等等都能夠統一化，對於多人協作的專案來說可是非常有幫助，在使用上只要在編輯器中安裝Prettier的擴充並且設定好config，就能立即使用。

Eslint

如果說Prettier是一個幫你美化排版的設計師，那麼ESLint 就像是一位嚴格的程式碼導師。它可以幫你檢查 JavaScript程式碼中的潛在問題，包括語法錯誤、不規範的寫法，甚至是一些可能導致 bug 的習慣，它的工作方式更像是一個專業的分析師。它會將你的程式碼解析成抽象語法樹（Abstract Syntax Tree, AST），然後根據預先設定的規則逐一檢查每一個節點。

比如說這一個簡單的function：

黃色底線的部分便是我有設定的Eslint規則警告，包含缺少分號以及該檔案內沒有使用到此function，根據自己設定的規則也可以顯示更嚴格的規範，例如不應使用var或是運算不明確（加減乘除的先後）

Prettier 與 Eslint經常會是一起使用的工具，他們各自解決了不同的問題，不但讓團隊中有可以明確遵守的風格與規範，也能在工程師疏忽時起到提醒的作用，但要記住，程式碼規範的目的不是為了製造障礙，而是為了創造更好的協作環境，依據團隊的需要選擇最適合的規範方式，彈性調整才能更好的達到效率與品質兼顧的開發。

⭐點我加入官方LINE，獲得第一手最新消息⭐

FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/@Lccnet-TW
痞客邦Blog：http://lccnetvip.pixnet.net/blog