支付寶小程序開發(fā)工具 ESLint

很多開發(fā)者都反饋近期 IDE 升級后，出現(xiàn)很多紅色的波浪線提示，這些提示其實都來自于 ESLint；在這里我簡單介紹什么是 ESLint，以及為什么我們要推廣 ESLint。

Why ESLint

大家都知道，JavaScript 是一門非常靈活的語言，往往實現(xiàn)一個功能會有很多種寫法。然后這種靈活性也給我們帶來了很多問題，ESLint 作為一個語法風(fēng)格檢查工具，除了可以讓你的代碼更一致，易讀以外，也會提供一些最佳實踐的提示，幫助規(guī)避一些常見的 Bugs。

舉例而言，我們都知道在 JS 中給未聲明的變量賦值時，其實是聲明了一個全局變量：

a = 123; // 當(dāng)你忘記使用 var 時，很有可能是創(chuàng)建了一個全局變量 a

通過 ESLint，我們可以第一時間發(fā)現(xiàn)這個錯誤：

ESLint & ES2015

很多人都聽說過，Brendan Eich 當(dāng)年僅僅花了 10 天時間開發(fā)了 JavaScript 這門語言，他也許完全沒有想到 JS 會發(fā)展到今天，成為時下最流行的語言之一。雖然這在業(yè)界稱為了一段佳話，但是由于早期 JavaScript 的定位與今日完全不同，導(dǎo)致其設(shè)計上有很多不如意的地方，一直以來備受業(yè)界的吐槽，每個學(xué)習(xí) JS 的開發(fā)者估計都會知道一堆該如何規(guī)避xx問題的最佳實踐。

為了解決這些問題，這幾年 JS 的語法一直在不斷的優(yōu)化中，于是有了大家經(jīng)常聽到的 ES6(ES2015)、ES7(ES2016) 等等，新的語法不僅更加簡潔，尤其去掉了很多舊語法中的糟粕。

舉例而言，我們以前經(jīng)常會遇到 for-loop 中閉包引用的問題：

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

執(zhí)行這段代碼后輸出的是：

My value: 3
My value: 3
My value: 3

我們在 ESLint 規(guī)則中默認(rèn)配置的 ES2015+，鼓勵大家使用新的語法，比如你再用 var 的時候 ESLint 會提示你使用 let or const 代替。

進(jìn)一步了解 ES2015，大家可以看下阮一峰的 ECMAScript 6 入門

ESLint 規(guī)則

我們默認(rèn)配置的 ESLint 為 airbnb 的規(guī)則，是業(yè)界主流的標(biāo)準(zhǔn)。具體的規(guī)則詳見 Airbnb JavaScript Style Guide

當(dāng)然，你也可以在其基礎(chǔ)上做一些自定義的調(diào)整，在新建的項目中我們提供一個 .eslintrc 文件，其內(nèi)容為：

{
  // 請不需要修改 extends
  "extends": ["airbnb-base", "appx"],


  // 根據(jù)需要修改 rules，詳見 http://eslint.org/docs/rules/
  // 推薦的編碼風(fēng)格 https://github.com/airbnb/javascript
  "rules": {
    "arrow-body-style": [0],
    "class-methods-use-this": [0],
    "consistent-return": [0],
    "generator-star-spacing": [0],
    "global-require": [0],
    "import/extensions": [0],
    "import/first": [0],
    "import/no-extraneous-dependencies": [0],
    "import/prefer-default-export": [0],
    "import/no-unresolved": [0],
    "import/no-absolute-path": [0],    
    "linebreak-style": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "no-console": [0],
    "no-else-return": [0],
    "no-nested-ternary": [0],
    "no-restricted-syntax": [0],
    "no-trailing-spaces": [0],
    "no-use-before-define": [0],
    "no-useless-escape": [0],
    "prefer-template": [0],
    "require-yield": [1]
  }
}

目前還不支持自定義 extends，大家如果覺得 airbnb 的規(guī)則太過嚴(yán)格，可以把不需要的規(guī)則設(shè)為 [0]，類似 "no-console": [0],(在 airbnb 的規(guī)則中不推薦大家在生產(chǎn)環(huán)境使用 console，也就是調(diào)試時可以寫，但是生產(chǎn)環(huán)境建議去掉，我們覺得這條太嚴(yán)格了，在這里將其注釋了，大家可以參考調(diào)整自己偏好的規(guī)則)

另外，針對一些對齊的問題，大家可以直接在編輯器中右鍵 format 下，至少可以去掉部分紅線。

后記

ESLint 的作者是 Nicholas C. Zakas，相信做前端的同學(xué)都知道，他編寫了《Maintainable JavaScript | 編寫可維護(hù)的 JavaScript》、《Professional JavaScript for Web Developers | JavaScript 高級程序設(shè)計》、《High Performance JavaScript | 高性能 JavaScript》，我們非常感謝這位大牛為業(yè)界的付出。