ESLint 工作原理探討

wuyangchun 發布于2019-05-23 14:33 / 3692人閱讀

摘要： 徹底理解ESLint。

原文：ESLint 工作原理探討

作者：zhangwang

Fundebug經授權轉載，版權歸原作者所有。

ESLint 可謂是現代前端開發過程中必備的工具了。其用法簡單，作用卻很大，使用過程中不知曾幫我減少過多少次可能的 bug。其實仔細想想前端開發過程中的必備工具似乎也沒有那么多，ESLint 做為必備之一，值得深挖，理解其工作原理。

在正式討論原理之前，我們還是先來聊聊為什么要使用 ESLint。

為什么要使用 ESLint

ESLint 其實早在 2013年 7月就發布了，不過我首次使用，是不到三年前的一個下午（清楚的記得那時候使用的編輯器主要還是 sublime text3 ）。我在一個項目中嘗試了 ESLint ，輸入 eslint init 后按照提示最終選擇了非常出名的 airbnb 的代碼風格，結果整個項目幾乎所有文件都被標紅，嘗試使用 --fix 卻無法全部修復，內心十分沮喪。

現在想想，那時候的我對 ESLint 的認知是不完整的，在那時候的我看來 ESLint 就是輔助我們保持代碼風格一致的工具，airbnb 的 js 風格備受大家推崇。

那時候的我知道保持代碼風格的一致性能增加可讀性，更便于團隊合作。不過一致沒有去深想，為什么大家會推崇某特定的風格，這背后肯定是有著特殊的意義。

保持一致就意味著要對我們編寫的代碼增加一定的約束，ESLint 就是這么一個通過各種規則（rule）對我們的代碼添加約束的工具。JS 做為一種動態語言，寫起來可以隨心所欲，bug 遍野，但是通過合適的規則來約束，能讓我們的代碼更健壯，工程更可靠。

在官方文檔 ESLint - rules 一節中，我們可以看到官方提供的了大量的規則，有推薦使用的（"eslint:recommended"），也有默認不啟用的，還有一些廢棄的。

這和現實生活是一致的，現實生活中，我們也在不自覺中遵守和構建著各種不同的規則。新的規則被構建是因為我們在某方面有了更多的經驗總結，將其轉變為規則可能是希望以后少踩坑，也能共享一套最佳實踐，提高我們的工作效率。就像我們提交代碼時，把希望大家共同遵守的約定轉變為 MR 模板，希望所有人都能遵守。

在我看來 ESLint 的核心可能就是其中包含的各種規則，這些規則大多為眾多開發者經驗的結晶：

有的可以幫我們避免錯誤；

有的可以幫我們寫出最佳實踐的代碼；

有的可以幫我們規范變量的使用方式；

有的可以幫我們規范代碼格式；

用的可以幫我們更合適的使用新的語法；

…

之前看過一張圖能很好的描述 ESLint 的作用：

如果你不使用 ESLint ，你的代碼只能靠人工來檢查，格式亂七八糟，運行起來 bug 叢生，你的合作者或用戶會怒氣沖沖

云服務器 GPU云服務器工作原理網絡工作原理爬蟲工作原理 cdn工作原理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7019.html

十分鐘了解eslint配置 && 編寫自定義eslint規則

摘要：的初衷是為了讓程序員可以創建自己的檢測規則。為了便于人們使用，內置了一些規則，當然，你可以在使用過程中自定義規則。所有的規則默認都是禁用的。在文件里的字段進行配置。如何編寫一個知道了的原理，接下來可以自定義一個。 eslint介紹 ESLint 是一個開源的 JavaScript 代碼檢查工具，由 Nicholas C. Zakas 于2013年6月創建。代碼檢查是一種靜態的分析，常用...

zqhxuyuan 2019-08-26 10:36 評論0 收藏0
前端模塊化和構建工具

摘要：以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。強大的設計使得它更像是一個構建平臺，而不只是一個打包工具。以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。如今，網頁不再...

ad6623 2019-08-20 18:37 評論0 收藏0
用 husky 和 lint-staged 構建超溜的代碼檢查工作流

摘要：官方出品的工具列表也是個非常不錯的參考。很多同學選擇在持續集成階段后文用代稱做，比如使用遠程的來觸發。常見做法是使用或者在本地提交之前做。本文作者王仕軍，商業轉載請聯系作者獲得授權，非商業轉載請注明出處。 showImg(https://segmentfault.com/img/remote/1460000009546916?w=1195&h=705); 具備基本工程素養的同學都會注重...

twohappy 2019-06-24 17:54 評論0 收藏0
webpack工程化集成React技術棧（一）

項目開始前，我們先聊一聊關于項目的一些說明。該項目起始于2017年初，當時公司主要技術棧為gulp+angular，鑒于react的火熱的生態，在公司決定研發bss管理系統時選用react開發，目的也是為react native打下基礎，以解決后期公司大前端技術棧的逐步成熟。（當時沒有選擇vue開發的主要原因是weex生態還不夠特別成熟），既然決定換新，項目的構建也跟著一起換，從gulp轉向火熱的...

tianhang 2019-08-22 14:47 評論0 收藏0
前端代碼質量進階：自定義 eslint 規則校驗業務邏輯

摘要：自定義規則校驗代碼業務邏輯是社區中主流的工具，提供的大量規則有效的保障了許多項目的代碼質量。本文將介紹如何通過自定義檢查規則，校驗項目中特有的一些業務邏輯，如特殊作用域特殊使用規范性等。自定義 eslint 規則校驗代碼業務邏輯 eslint 是 JavaScript 社區中主流的 lint 工具，提供的大量規則有效的保障了許多項目的代碼質量。本文將介紹如何通過自定義 eslint ...

Coly 2019-08-26 11:52 評論0 收藏0