ESLint 規則詳解（一）

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

 

1. no-debugger

   通常來講，咱們確實不但願代碼中出現 debugger，可是，debugger 在項目的開發階段仍是很是有用的，因此咱們並無徹底禁用這個關鍵字，而是採用了這樣的配置：

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

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

    

2. no-extra-boolean-cast

   不少比較老的 javascript 代碼裏面能夠看到這樣的寫法：

   var boolResult = !!parameter;

   這裏面其實是作了一次隱式類型轉換，但是，你真的確切裏面 js 隱式轉換的詳細規則麼？事實上，在《javascript高級編程》一書裏面，做者就明確警告了你們，儘可能不要使用隱式類型轉換，由於這個轉換規則異常複雜，因此咱們打開了這個規則，來避免潛在的問題

    

3. no-inner-declarations

   ES6之前，函數聲明只能在程序或另外一個函數體的最前面，因此在代碼塊內部聲明函數是錯誤的作法。另外，因爲 javascript 中代碼聲明會被提高到代碼當前做用域的最前面，因此在代碼塊內聲明變量也是不明智的作法

    

4. use-isnan

   這是不少人都容易忽略的一個點。javascript 代碼中 NaN 和任何變量做比較，都會獲得 false，甚至和它自身比較都會獲得false。因此，要判斷一個變量是不是 NaN 的時候，必定要用 isNaN 方法

    

5. eqeqeq

   這一條能夠說是每一個 javascript 開發人員都必需遵照的，禁用 == 和 != 用 === 和 !== 代替。緣由和上面的第 2 條同樣，== 和 != 會帶來隱式的類型轉換，雖然 javascript 運行時並不會轉換出錯，可是後續維護代碼的人卻極可能理解錯誤，因此這條規則是必備的

    

6. no-caller

   這個規則的來由就比較複雜了，簡單來講，這是 ES6 以前的一個 API，這個 API 雖然幫咱們解決了一些特殊場景的問題（匿名遞歸函數），可是，濫用這兩個 API 會致使更多的問題，因此這個 API 在 ES6 已經被棄用了，在 ES5 的嚴格模式下也是被禁用的。若是你想詳細瞭解這個 API 的用法，能夠查看 MDN 上的詳細說明

    

7. no-extend-native

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

    

8. no-restricted-properties

   這個規則事實上是一個工具，它能夠禁用指定對象的指定方法。好比咱們但願開發人員在發 ajax 請求的時候，所有使用咱們本身封裝的 ajax 方法，而不要使用 jQuery 的 ajax 方法，咱們就能夠經過這個配置，即便發現不符合咱們規定的代碼

    

9. no-sequences

   逗號表達式實際上是咱們比較經常使用的語法特性，好比在 for 循環中。不過它也有不少容易讓人犯錯的用法，好比：

   var a = 1, b = 1;

   a = b += 3, a + b;

   你知道這個時候 a 和 b 值分別是多少麼？啓用此規則以後，你仍然能夠在 for 循環和其它一些不容易出錯的場景中使用逗號表達式，不過，若是 ESLint 提示你觸犯了規則，說明你就應該修改你的代碼了。

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

    

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 語句

 

最後附上 ESLint 規則列表，詳細列出了天天規則的名稱，官方是否推薦開啓，以及每條規則是否可以用 --fix 參數自動修復。

 

在下一篇文章中，我會再選取 10 條規則進行分析，並整理出一個包含中文翻譯的 ESLint 規則列表，敬請期待。

 

如需轉載，請註明轉自：http://www.cnblogs.com/silenttiger/p/6384927.html

 

歡迎關注個人微信公衆號：老虎的小窩