ESLint 規則詳解

前端界大神 Nicholas C. Zakas 在 2013 年開發的 ESLint,極大地方便了大家對 Javascript 代碼進行代碼規范檢查。這個工具包含了 200 多條 Javascript 編碼規范且運行迅速,是幾乎每個前端項目都必備的輔助工具。可是,這么多規則,每個規則的設計出發點是什么,我們該如何選擇適合自己項目的規則,又成了新問題。前不久,我所在的項目開始對前端代碼進行代碼規范的要求,于是我們詳細梳理了 eslint 中的 230 個規則。我摘錄了其中一些比較重要或特別的規則列在這里,希望能對大家的工作有所幫助。

  1. 1.no-debugger

    一般來說,我們確實不希望代碼中出現 debugger,但是,debugger 在項目的開發階段還是非常有用的,所以我們并沒有完全禁用這個關鍵字,而是采用了這樣的配置:

    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0

    這樣一來,開發人員可以方便地使用 debugger 在本地進行各種調試,同時有保證了線上代碼不會有忘記刪掉的 debugger

    ?

  2. 2.no-extra-boolean-cast

    很多比較老的 javascript 代碼里面可以看到這樣的寫法:

    var boolResult = !!parameter;

    這里面實際上是做了一次隱式類型轉換,可是,你真的確切里面 js 隱式轉換的詳細規則么?事實上,在《javascript高級編程》一書里面,作者就明確警告了大家,盡量不要使用隱式類型轉換,因為這個轉換規則異常復雜,所以我們打開了這個規則,來避免潛在的問題

    ?

  3. 3.no-inner-declarations

    ES6以前,函數聲明只能在程序或另一個函數體的最前面,所以在代碼塊內部聲明函數是錯誤的做法。另外,由于 javascript 中代碼聲明會被提升到代碼當前作用域的最前面,所以在代碼塊內聲明變量也是不明智的做法

    ?

  4. 4.use-isnan

    這是很多人都容易忽略的一個點。javascript 代碼中 NaN 和任何變量作比較,都會得到 false,甚至和它自身比較都會得到false。所以,要判斷一個變量是否是 NaN 的時候,一定要用 isNaN 方法

    ?

  5. 5.eqeqeq

    這一條可以說是每個 javascript 開發人員都必需遵守的,禁用 == 和 != 用 === 和 !== 代替。原因和上面的第 2 條一樣,== 和 != 會帶來隱式的類型轉換,雖然 javascript 運行時并不會轉換出錯,但是后續維護代碼的人卻很可能理解錯誤,所以這條規則是必備的

    ?

  6. 6.no-caller

    這個規則的來由就比較復雜了,簡單來說,這是 ES6 之前的一個 API,這個 API 雖然幫我們解決了一些特殊場景的問題(匿名遞歸函數),但是,濫用這兩個 API 會導致更多的問題,所以這個 API 在 ES6 已經被棄用了,在 ES5 的嚴格模式下也是被禁用的。如果你想詳細了解這個 API 的用法,可以查看 MDN 上的詳細說明

    ?

  7. 7.no-extend-native

    不要擴展原生對象原型。當你在某個對象上用 for in 語句遍歷對象屬性,而又忘了用 hasOwnProperty 判斷屬性來源的時候,你就會發現被你擴展的原型屬性也會被遍歷出來,這往往都不是我們想要的結果

    ?

  8. 8.no-restricted-properties

    這個規則事實上是一個工具,它可以禁用指定對象的指定方法。比如我們希望開發人員在發 ajax 請求的時候,全部使用我們自己封裝的 ajax 方法,而不要使用 jQuery 的 ajax 方法,我們就可以通過這個配置,即使發現不符合我們規定的代碼

    ?

  9. 9.no-sequences

    逗號表達式其實是我們比較常用的語法特性,比如在 for 循環中。不過它也有很多容易讓人犯錯的用法,比如:

    var a = 1, b = 1;

    a = b += 3, a + b;

    你知道這個時候 a 和 b 值分別是多少么?啟用此規則之后,你仍然可以在 for 循環和其它一些不容易出錯的場景中使用逗號表達式,不過,如果 ESLint 提示你觸犯了規則,說明你就應該修改你的代碼了。

    另外,上面 a 和 b 的值都是 4

    ?

  10. 10.no-with

    with 語句的作用是修改作用域鏈,雖然有時候可以用 with 語句來簡化代碼,比如:

    with(frames[0].document.forms[1]){

    ? ? console.log(name.value); ? ?// 可直接訪問 form 里面的 name 屬性

    }

    但有時候 with 語句也會讓代碼難以理解,比如下面這段代碼里面,打印出來的 log 對象無法確認是傳入的參數還是 obj 上面的屬性:

    function f(log, obj) {

    ? ? with (obj) {

    ? ? ? ? console.log(log)

    ? ? }

    }

    所以,我們還是應該盡量避免使用 with 語句

?

  1. 11.no-sparse-arrays

    使用代碼質量檢查工具的一個重要目的就是為了提高代碼的可讀性,或者說是降低其他人閱讀并理解代碼的難度,這條規則就是這樣。當你看到這樣一段代碼 var userList = ['Tiger', 'Kate', , 'Mike']; 你真的很難確定原來寫這段代碼的人是不是故意要在數組中留下一個 undefined 元素,畢竟這樣寫并沒有語法上的錯誤。這條規則的目的就是禁止通過這種方式在數組中插入 undefined 元素,因為這種寫法太有迷惑性了。

    ?

  2. 12.no-extra-bind

    如果你對 javascript 中的 this 變量有所了解,你一定也知道 bind 方法的作用,它可以很方便的幫我們修改方法執行時的上下文環境,但事實上有些時候并不需要使用 bind。如果你在一些不需要使用 bind 的地方也用 bind 來保證方法執行時的上下文環境,這會讓代碼執行的效率變低。所以,啟用這條規則,可以幫你避免不必要的性能損失。

    ?

  3. 13.no-useless-call

    和上一條規則類似,call 和 apply 也是幫助我們修改上下文環境的好工具,但我們應該只在需要修改上下文的時候才去使用這兩個方法,如果你的代碼檢查工具發現你修改后的上下文和函數或方法原始的上下文相同,它就會給出提示。

    ?

  4. 14.yoda

    yoda 表達式其實是用寫爭議的。有人覺得 if ('red' == color)? 這樣的寫法可以避免程序員不小心把 == 寫成了 =,但如前篇所說,我們用過在代碼中禁用 ==,一律換成 ===,同時在代碼檢查工具的幫助下,把 == 寫成 = 的可能性其實不大。而同時這樣的寫法在閱讀時也顯得比較別扭,所以我個人覺得還是禁用 yoda 表達式比較好。

    ?

  5. 15.no-delete-var

    delete 操作符只能刪除對象上的屬性,并不能刪除當前上下文中的某個變量,雖然代碼不會報錯,但很可能實際運行的結果和開發人員設想的不同,所以,應該明確禁止刪除變量的操作。

    ?

  6. 16.no-undef

    禁用未聲明的變量。javascript 異常靈活,以至于你可以在沒有聲明一個變量的時候直接給他賦值,比如 t = 'test message',但這樣的寫法卻是非常危險的,因為這種寫法雖然會自動生命變量 t,但他的作用域卻和用 var 聲明的變量作用域不同,t 變量的作用域在全局變量上,所以,不用 var 直接聲明并給變量賦值,經常導致意料之外的程序 bug。

    ?

  7. 17.no-new-require

    當我們使用 CommonJS 的包管理規范時,經常用 require 引入一些依賴,當我們引入的依賴是一個類定義函數時,直接在 require 上進行 new 操作很可能會引起誤解。比如 var tiger = new require('User'); 和 var tiger = new (require('User')); 所以,還是禁用這種寫法比較好。

?

最后附上 ESLint 規則列表,詳細列出了每條規則的名稱,官方是否推薦開啟,以及每條規則是否能夠用 --fix 參數自動修復。?點擊下載

?

如需轉載,請注明轉自:http://www.cnblogs.com/silenttiger/p/6855604.html

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/249171.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/249171.shtml
英文地址,請注明出處:http://en.pswp.cn/news/249171.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

全文搜索引擎 ElasticSearch 還是 Solr?

原文鏈接 最近項目組安排了一個任務,項目中用到了全文搜索,基于全文搜索 Solr,但是該 Solr 搜索云項目不穩定,經常查詢不出來數據,需要手動全量同步,而且是其他團隊在維護,依賴性太強&#xff0…

對局匹配

問題描述小明喜歡在一個圍棋網站上找別人在線對弈。這個網站上所有注冊用戶都有一個積分,代表他的圍棋水平。小明發現網站的自動對局系統在匹配對手時,只會將積分差恰好是K的兩名用戶匹配在一起。如果兩人分差小于或大于K,系統都不會將他們匹…

NodeJS作為Web架構中間層的使用

截至2016年12月,中國網民規模已達7.31億。傳統的網站系統是否能夠支撐得起如此龐大的且不斷增長的用戶訪問并且為用戶提供體驗友好的頁面? 一、傳統的前后端: 二、傳統的前后端分離問題: 性能問題: 1、渲染、數據都在…

Springboot項目修改html后不需要重啟---springboot項目的熱部署

一、spring-boot-devtools 在pom中直接引入依賴 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional> </dependency> 設置以下兩項&#xff08…

Hibernate中session的get方法和load方法的區別

一.發送SQL時機&#xff1a; load方法采用延遲加載&#xff08;lazy懶加載&#xff09;&#xff0c;執行到這行代碼的時候&#xff0c;不會發送SQL語句&#xff0c;當真正使用這個對象的數據&#xff08;對象的數據不包括主鍵&#xff09;的時候才發送SQL語句&#xff1b; get…

Node.js Web 開發框架大全《中間件篇》

這篇文章與大家分享優秀的 Node.js 中間件模塊。Node 是一個服務器端 JavaScript 解釋器&#xff0c;它將改變服務器應該如何工作的概念。它的目標是幫助程序員構建高度可伸縮的應用程序&#xff0c;編寫能夠處理數萬條同時連接到一個&#xff08;只有一個&#xff09;物理機的…

windows server 2012 流媒體服務器搭建(直播與點播)

IIS Live Smooth Streaming&#xff08;實時平滑流式處理&#xff09;是微軟下一代流媒體解決方案。該技術是在IIS web中集成媒體傳輸平臺IIS media services&#xff0c;實現利用標準 HTTP Web 技術以及高級 Silverlight 功能&#xff0c;確保在互聯上傳輸質量最佳、播放流暢音…

團隊項目第一篇——NABCD

團隊名稱&#xff1a;筑夢之舟 團隊項目名稱&#xff1a;跑跑 N&#xff08;Need&#xff09;需求&#xff1a; 有許多人在跑步時想了解自己的移動軌跡和跑步距離很不便利&#xff0c;無法了解跑步的日程&#xff0c;我們的軟件就是為了更加方便熱愛跑步的人能夠參加到跑步之中…

Vue warn Failed to mount component: template or render function not defined

問題如圖&#xff0c;造成這類的問題一般有這么幾個原因。 代碼的拼寫問題&#xff0c;當然這是最低級的錯誤vue定義的問題&#xff0c;這里我說明兩點 在組件內部定義組件時&#xff0c;template 對應的必須是html字符串引用外部組件時&#xff0c;vue文件必須以template標簽…

Python實現線性回歸2,梯度下降算法

接上篇 4.梯度下降算法 《斯坦福大學公開課 &#xff1a;機器學習課程》吳恩達講解第二課時&#xff0c;是直接從梯度下降開始講解&#xff0c;最后采用向量和矩陣的方式推導了解析解&#xff0c;國內很多培訓視頻是先講解析解后講梯度下降&#xff0c;個人認為梯度下降算法更為…

在centos和redhat上安裝docker

前置條件 64-bit 系統kernel 3.101.檢查內核版本&#xff0c;返回的值大于3.10即可。$ uname -r 2.使用 sudo 或 root 權限的用戶登入終端。 3.卸載舊版本(如果安裝過舊版本的話) $ yum remove docker \docker-common \docker-selinux \docker-engine 4.安裝需要的軟件包 #yum-…

mac 下用 brew 安裝mongodb

mac 下安裝mongoDB一般倆種方法. (1)下載源碼,解壓,編譯,配置,啟動 比較艱難的一種模式. (2)brew install mongodb ,然后就可以悠閑的品一口茶,順便瞄一眼網易新聞,這是一種傻瓜模式. 但傻瓜模式也有人為干預的時候,粗略說一下使用brew 安裝mongodb 1 zhangzhimoke:~/code$…

比較python類的兩個instance(對象) 是否相等

http://www.yihaomen.com/article/python/281.htm 比較python類的兩個instance(對象) 是否相等 作者:輕舞肥羊 日期:2012-10-25 字體大小: 小 中 大對于同一個Class,可以創建不同的實例(instance), 如何比較這兩個 instance 是否相等呢&#xff1f;我們知道&#xff0c;對于計算…

Mybaits插入記錄返回主鍵值

某些情況進行insert時不知道主鍵值&#xff08;主鍵為自增&#xff09;&#xff0c;例如系統新增用戶時&#xff0c;有用戶序號&#xff08;主鍵 自增&#xff09;&#xff0c;用戶名&#xff0c;密碼。插入時只需插入用戶名和密碼&#xff0c;之后取得mysql自增的序號。 如下為…

Mac 解決brew一直卡在Updating Homebrew

運行命令brew install node&#xff0c;結果界面一直卡在Updating Homebrew...上&#xff0c;有兩種解決辦法 方法一&#xff1a;直接關閉brew每次執行命令時的自動更新&#xff08;推薦&#xff09; vim ~/.bash_profile# 新增一行 export HOMEBREW_NO_AUTO_UPDATEtrue方法二…

CAS單點登錄原理簡單介紹

1. SSO簡介 1.1 單點登錄定義 單點登錄(Single sign on)&#xff0c;英文名稱縮寫SSO&#xff0c;SSO的意思就是在多系統的環境中&#xff0c;登錄單方系統&#xff0c;就可以在不用再次登錄的情況下訪問相關受信任的系統。也就是說只要登錄一次單體系統就可以。計劃在項目中加…

前端跨域通信的幾種方式

前言 前端通信類的問題&#xff0c;主要包括以下內容&#xff1a; 1、什么是同源策略及限制 同源策略是一個概念&#xff0c;就一句話。有什么限制&#xff0c;就三句話。能說出來即可。 2、前后端如何通信 如果你不準備&#xff0c;估計也就只能說出ajax。 3、如何創建Aja…

T4((Text Template Transformation Toolkit))模版引擎之基礎入門 C#中文本模板(.tt)的應用...

1 關于C#中文本模板(.tt)的簡單應用https://blog.csdn.net/zunguitiancheng/article/details/78011145 任何一個傻瓜都能寫出計算機能理解的程序&#xff0c;而優秀的程序員卻能寫出別人能讀得懂的程序。—— Martin Fowler 2 T4模版引擎之生成數據庫實體類 http://www.cnblogs…

LeetCode412Fizz Buzz

寫一個程序&#xff0c;輸出從 1 到 n 數字的字符串表示。 1. 如果 n 是3的倍數&#xff0c;輸出“Fizz”&#xff1b; 2. 如果 n 是5的倍數&#xff0c;輸出“Buzz”&#xff1b; 3.如果 n 同時是3和5的倍數&#xff0c;輸出 “FizzBuzz”。 示例&#xff1a; n 15, 返回: [ …

vue+node實現中間層同步調用接口

為了應對業務的復雜性&#xff0c;提高前端的渲染能力&#xff0c;故在項目中引入nodejs做中間層&#xff0c;前端承接vue&#xff0c;后端對接Java。 至于為什么這么搞&#xff0c;網上有好多文章都在討論&#xff0c;可以說仁者見仁智者見智&#xff0c;這里我們不在深究。 …