摘要: 徹底理解ESLint。
原文:ESLint 工作原理探討
作者:zhangwang
Fundebug經(jīng)授權(quán)轉(zhuǎn)載,版權(quán)歸原作者所有。
ESLint 可謂是現(xiàn)代前端開發(fā)過程中必備的工具了。其用法簡單,作用卻很大,使用過程中不知曾幫我減少過多少次可能的 bug。其實仔細(xì)想想前端開發(fā)過程中的必備工具似乎也沒有那么多,ESLint 做為必備之一,值得深挖,理解其工作原理。
在正式討論原理之前,我們還是先來聊聊為什么要使用 ESLint。
為什么要使用 ESLintESLint 其實早在 2013年 7月就發(fā)布了,不過我首次使用,是不到三年前的一個下午(清楚的記得那時候使用的編輯器主要還是 sublime text3 )。我在一個項目中嘗試了 ESLint ,輸入 eslint init 后按照提示最終選擇了非常出名的 airbnb 的代碼風(fēng)格,結(jié)果整個項目幾乎所有文件都被標(biāo)紅,嘗試使用 --fix 卻無法全部修復(fù),內(nèi)心十分沮喪。
現(xiàn)在想想,那時候的我對 ESLint 的認(rèn)知是不完整的,在那時候的我看來 ESLint 就是輔助我們保持代碼風(fēng)格一致的工具,airbnb 的 js 風(fēng)格備受大家推崇。
那時候的我知道保持代碼風(fēng)格的一致性能增加可讀性,更便于團隊合作。不過一致沒有去深想,為什么大家會推崇某特定的風(fēng)格,這背后肯定是有著特殊的意義。
保持一致就意味著要對我們編寫的代碼增加一定的約束,ESLint 就是這么一個通過各種規(guī)則(rule)對我們的代碼添加約束的工具。JS 做為一種動態(tài)語言,寫起來可以隨心所欲,bug 遍野,但是通過合適的規(guī)則來約束,能讓我們的代碼更健壯,工程更可靠。
在官方文檔 ESLint - rules 一節(jié)中,我們可以看到官方提供的了大量的規(guī)則,有推薦使用的("eslint:recommended"),也有默認(rèn)不啟用的,還有一些廢棄的。
這和現(xiàn)實生活是一致的,現(xiàn)實生活中,我們也在不自覺中遵守和構(gòu)建著各種不同的規(guī)則。新的規(guī)則被構(gòu)建是因為我們在某方面有了更多的經(jīng)驗總結(jié),將其轉(zhuǎn)變?yōu)橐?guī)則可能是希望以后少踩坑,也能共享一套最佳實踐,提高我們的工作效率。 就像我們提交代碼時,把希望大家共同遵守的約定轉(zhuǎn)變?yōu)?MR 模板,希望所有人都能遵守。
在我看來 ESLint 的核心可能就是其中包含的各種規(guī)則,這些規(guī)則大多為眾多開發(fā)者經(jīng)驗的結(jié)晶:
有的可以幫我們避免錯誤;
有的可以幫我們寫出最佳實踐的代碼;
有的可以幫我們規(guī)范變量的使用方式;
有的可以幫我們規(guī)范代碼格式;
用的可以幫我們更合適的使用新的語法;
…
之前看過一張圖能很好的描述 ESLint 的作用:
如果你不使用 ESLint ,你的代碼只能靠人工來檢查,格式亂七八糟,運行起來 bug 叢生,你的合作者或用戶會怒氣沖沖
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/7019.html
摘要:的初衷是為了讓程序員可以創(chuàng)建自己的檢測規(guī)則。為了便于人們使用,內(nèi)置了一些規(guī)則,當(dāng)然,你可以在使用過程中自定義規(guī)則。所有的規(guī)則默認(rèn)都是禁用的。在文件里的字段進(jìn)行配置。如何編寫一個知道了的原理,接下來可以自定義一個。 eslint介紹 ESLint 是一個開源的 JavaScript 代碼檢查工具,由 Nicholas C. Zakas 于2013年6月創(chuàng)建。代碼檢查是一種靜態(tài)的分析,常用...
摘要:以前一直對前端構(gòu)建工具的理解不深,經(jīng)過幾天的研究特意來總結(jié)一下,第一次寫博客,有寫錯的請多多見諒,該文章我也從其他博客拷了一些內(nèi)容,如果有冒犯之處,請指出。強大的設(shè)計使得它更像是一個構(gòu)建平臺,而不只是一個打包工具。 以前一直對前端構(gòu)建工具的理解不深,經(jīng)過幾天的研究特意來總結(jié)一下,第一次寫博客,有寫錯的請多多見諒,該文章我也從其他博客拷了一些內(nèi)容,如果有冒犯之處,請指出。 如今,網(wǎng)頁不再...
摘要:官方出品的工具列表也是個非常不錯的參考。很多同學(xué)選擇在持續(xù)集成階段后文用代稱做,比如使用遠(yuǎn)程的來觸發(fā)。常見做法是使用或者在本地提交之前做。本文作者王仕軍,商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。 showImg(https://segmentfault.com/img/remote/1460000009546916?w=1195&h=705); 具備基本工程素養(yǎng)的同學(xué)都會注重...
項目開始前,我們先聊一聊關(guān)于項目的一些說明。該項目起始于2017年初,當(dāng)時公司主要技術(shù)棧為gulp+angular,鑒于react的火熱的生態(tài),在公司決定研發(fā)bss管理系統(tǒng)時選用react開發(fā),目的也是為react native打下基礎(chǔ),以解決后期公司大前端技術(shù)棧的逐步成熟。(當(dāng)時沒有選擇vue開發(fā)的主要原因是weex生態(tài)還不夠特別成熟),既然決定換新,項目的構(gòu)建也跟著一起換,從gulp轉(zhuǎn)向火熱的...
摘要:自定義規(guī)則校驗代碼業(yè)務(wù)邏輯是社區(qū)中主流的工具,提供的大量規(guī)則有效的保障了許多項目的代碼質(zhì)量。本文將介紹如何通過自定義檢查規(guī)則,校驗項目中特有的一些業(yè)務(wù)邏輯,如特殊作用域特殊使用規(guī)范性等。 自定義 eslint 規(guī)則校驗代碼業(yè)務(wù)邏輯 eslint 是 JavaScript 社區(qū)中主流的 lint 工具,提供的大量規(guī)則有效的保障了許多項目的代碼質(zhì)量。本文將介紹如何通過自定義 eslint ...
閱讀 2286·2021-11-15 11:36
閱讀 1457·2021-10-14 09:42
閱讀 4296·2021-09-30 09:52
閱讀 1821·2021-09-24 10:24
閱讀 1037·2021-09-02 09:56
閱讀 2790·2019-08-30 13:11
閱讀 3120·2019-08-30 13:06
閱讀 1002·2019-08-30 12:56