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

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

Why ESLint

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

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

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

通過(guò) ESLint，我們可以第一時(shí)間發(fā)現(xiàn)這個(gè)錯(cuò)誤：

ESLint & ES2015

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

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

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

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

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

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

ESLint 規(guī)則

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

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

{
  // 請(qǐng)不需要修改 extends
  "extends": ["airbnb-base", "appx"],


  // 根據(jù)需要修改 rules，詳見(jiàn) 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，大家如果覺(jué)得 airbnb 的規(guī)則太過(guò)嚴(yán)格，可以把不需要的規(guī)則設(shè)為 [0]，類(lèi)似 "no-console": [0],(在 airbnb 的規(guī)則中不推薦大家在生產(chǎn)環(huán)境使用 console，也就是調(diào)試時(shí)可以寫(xiě)，但是生產(chǎn)環(huán)境建議去掉，我們覺(jué)得這條太嚴(yán)格了，在這里將其注釋了，大家可以參考調(diào)整自己偏好的規(guī)則)

另外，針對(duì)一些對(duì)齊的問(wèn)題，大家可以直接在編輯器中右鍵 format 下，至少可以去掉部分紅線(xiàn)。

后記

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