這兩天因為公司要求，就對ESLint進行了初步的瞭解，網上的內容基本上都差不多，但是內容有些亂，我這呢，就跟著大部分的文章，以及官方文件整理出了一篇入門學習的文字，技術點不算特別全，但是對於新手的我來說是夠的，文章的篇幅很長，內容可能有些累贅，但是按著步驟一步一步來，基本上看完也就可以對ESLint有個初步的瞭解了，此外一些相關文件網上還是有很多的，一些單個比較重要的技術點，網上也都會有相關的文章做了詳細的描述，我這篇文章針對的就是對eslint完全不瞭解的小夥伴們。比較我就是比較新手的，最近算是轉型吧，寫了一段時間的移動端，技術沒咋練好，就被要求做前端的東西，腦子裡也是一團漿糊，公司又要求研究些東西，剛接觸的時候完全懵逼，現在慢慢地有點喜歡上前端了，最近也在開始補習web基礎，發現需要學習的東西好多啊。希望大家要是有興趣的話可以跟我做個朋友，以前討論討論技術的事情，互相學習一下下。

介紹

    ESLint 是由 Nicholas C. Zakas 編寫的一個可擴充套件、每條規則獨立、不內建編碼風格為理念的 Lint 工具。

    在團隊協作中，為避免低階 Bug、產出風格統一的程式碼，會預先制定編碼規範。使用 Lint 工具和程式碼風格檢測工具，則可以輔助編碼規範執行，有效控制程式碼質量。EsLint幫助我們檢查Javascript程式設計時的語法錯誤。比如：在Javascript應用中，你很難找到你漏洩的變數或者方法。EsLint能夠幫助我們分析JS程式碼，找到bug並確保一定程度的JS語法書寫的正確性。

    EsLint是建立在Esprima

(ECMAScript解析架構)的基礎上的。Esprima支援ES5.1,本身也是用ECMAScript編寫的，用於多用途分析。EsLint不但提供一些預設的規則（可擴充套件），也提供使用者自定義規則來約束我們寫的Javascript程式碼。

    ESLint是確定和報告模式的工具中發現ECMAScript / JavaScript程式碼,使程式碼更一致的目標和避免錯誤。在許多方面,它類似於JSLint和JSHint，但是也有部分不同。

特定：

• ESLint使用Espree JavaScript解析。
• ESLint使用AST評估模式的程式碼。
• ESLint完全可插入式的,每一個規則是一個外掛,支援外掛擴充套件、自定義規則。
• 預設規則包含所有 JSLint、JSHint 中存在的規則，易遷移；
• 規則可配置性高：可設定「警告」、「錯誤」兩個 error 等級，或者直接禁用；
• 包含程式碼風格檢測的規則（可以丟掉 JSCS 了）；

EsLint提供以下支援：

• ES6
• AngularJS
• JSX
• Style檢查
• 自定義錯誤和提示

EsLint提供以下幾種校驗：

• 語法錯誤校驗
• 不重要或丟失的標點符號，如分號
• 沒法執行到的程式碼塊（使用過WebStorm的童鞋應該瞭解）
• 未被使用的引數提醒
• 漏掉的結束符，如}
• 確保樣式的統一規則，如sass或者less
• 檢查變數的命名

使用

    有兩種方法來安裝ESLint:全域性安裝和本地安裝。

1.本地安裝

如果你想包括ESLint作為你的專案構建系統的一部分,我們建議在本地安裝。你可以使用npm:

$ npm install eslint --save-dev

你應該設定一個配置檔案:

$ ./node_modules/.bin/eslint --init

之後,您可以執行ESLint在任何檔案或目錄如下:

$ ./node_modules/.bin/eslint yourfile.js

yourfile.js是你需要測試的js檔案。你使用的任何外掛或共享配置必須安裝在本地來與安裝在本地的ESLint一起工作。

2.全域性安裝

如果你想讓ESLint可用到所有的專案,我們建議安裝ESLint全域性安裝。你可以使用npm:

npm install -g eslint

你應該設定一個配置檔案:

eslint --init

之後,您可以在任何檔案或目錄執行ESLint:

eslint yourfile.js

PS：eslint –init是用於每一個專案設定和配置eslint,並將執行本地安裝的ESLint及其外掛的目錄。如果你喜歡使用全域性安裝的ESLint，在你配置中使用的任何外掛都必須是全域性安裝的。

3.使用

• 新建一個專案：
  

• 建立package.json檔案

  npm init
  

  

• 安裝ESLint

  npm install -g eslint
  

  

• 建立和編寫簡單的js檔案
      建立index.js檔案，裡面寫一個函式，就直接用別人寫的一個簡單的函式用用吧。

  function merge () {
  var ret = {};
  for (var i in arguments) {
      var m = arguments[i];
      for (var j in m) ret[j] = m[j];
  }
  return ret;
  }
  
  console.log(merge({a: 123}, {b: 456}));
  

• 執行node index.js，輸出結果為{ a: 123, b: 456 }

   appledeMacBook-Pro:testEslint apple$ node index.js
  { a: 123, b: 456 }
  

• 使用eslint檢查

  eslint index.js
  

  

    執行結果是失敗，因為沒有找到相應的配置檔案，個人認為這個eslint最重要的就是配置問題。

• 新建配置檔案

  eslint --init
  

      不過這個生成的額檔案裡面已經有一些配置了，把裡面的內容大部分刪除。留下個extends，剩下的自己填就可以了

  module.exports = {
      "extends": "eslint:recommended"
  };
  

      eslint:recommended配置，它包含了一系列核心規則，能報告一些常見的問題。

• 重新執行eslint index.js

  
      Unexpected console statement no-console - 不能使用console
      ‘console’ is not defined no-undef - console變數未定義，不能使用未定義的變數
      一條一條解決，不能使用console的提示，那我們就禁用no-console就好了，在配置檔案中新增rules

  module.exports = {
      extends: 'eslint:recommended',
      rules: {
          'no-console': 'off',
       },
  };
  

      配置規則寫在rules物件裡面，key表示規則名稱，value表示規則的配置。
      然後就是解決no-undef:出錯的原因是因為JavaScript有很多種執行環境，比如常見的有瀏覽器和Node.js，另外還有很多軟體系統使用JavaScript作為其指令碼引擎，比如PostgreSQL就支援使用JavaScript來編寫儲存引擎，而這些執行環境可能並不存在console這個物件。另外在瀏覽器環境下會有window物件，而Node.js下沒有；在Node.js下會有process物件，而瀏覽器環境下沒有。
  所以在配置檔案中我們還需要指定程式的目標環境：

  module.exports = {
      extends: 'eslint:recommended',
      env: {
          node: true,
       },
      rules: {
       'no-console': 'off',
      }
  };
  

      再重新執行檢查時，就沒有任何提示輸出了，說明index.js已經完全通過了檢查。

配置

    ESLint設計出來就是可以配置的，挺自由的，你可以關閉任何一條規則，只執行基本語法驗證。有兩種主要的方式來配置：

• Configuration Comments - 使用 JavaScript 註釋把配置資訊直接嵌入到一個檔案。
• Configuration Files - 使用 JavaScript、JSON 或者 YAML 檔案為整個目錄和它的子目錄指定配置資訊。可以用 .eslintrc.* 檔案或者在 package.json 檔案裡的 eslintConfig 欄位這兩種方式進行配置，ESLint 會查詢和自動讀取它們，再者，你可以在命令列指定一個配置檔案。

    有很多資訊可以配置：

• Environments - 指定指令碼的執行環境。每種環境都有一組特定的預定義全域性變數。
• Globals - 指令碼在執行期間訪問的額外的全域性變數
• Rules - 啟用的規則及各自的錯誤級別

    在配置檔案。eslintrc.js中寫配置內容，可以將module.exports內的內容直接寫到package.json裡用欄位eslintConfig括起來就可以了。也可以在執行eslint命令是通過命令列引數來指定。

規則

    我們eslintrc.js中的ruls中不僅僅是隻有諸如‘no-console’: ‘off’的規則，更多的是像下面這樣的規則。

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

    這裡的“semi” 和* “quotes” *是 ESLint 中 規則 的名稱。中括號中第一個是錯誤級別。每條規則又三個取值：

• “off” or 0 - 關閉(禁用)規則
• “warn” or 1 - 將規則視為一個警告（並不會導致檢查不通過）
• “error” or 2 - 將規則視為一個錯誤 (退出碼為1，檢查不通過)

    有些規則還帶有可選的引數，比如comma-dangle可以寫成[ “error”, “always-multiline” ]；no-multi-spaces可以寫成[ “error”, { exceptions: { “ImportDeclaration”: true }}]。

    配置和規則的內容有不少，將會另出一篇文介紹。

    規則的詳細說明文件可以參考這裡：Rules

使用共享的配置檔案

    我們使用配置js檔案是以extends: ‘eslint:recommended’為基礎配置，但是大多數時候我們需要制定很多規則，在一個檔案中寫入會變得很臃腫，管理起來會很麻煩。

    我們可以將定義好規則的.eslintrc.js檔案儲存到一個公共的位置。改個名字比如public-eslintrc.js。在檔案內容新增一兩個規則。

module.exports = {
extends: 'eslint:recommended',
env: {
    node: true,
 },
rules: {
    'no-console': 'off',
    'indent': [ 'error', 4 ],
    'quotes': [ 'error', 'single' ],
    },
};

    然後原來的.eslintrc.js檔案內容稍微變化下，刪掉規則啥的，留下一個extends。

module.exports = {
    extends: './public-eslintrc.js',
};

    這個要測試的是啥呢，就是看看限定縮排是4個空格和使用單引號的字串等，然後測試下，執行eslint index.js，得到的結果是沒有問題的，但是如果在index.js中的var ret = {};前面加個空格啥的，結果就立馬不一樣了。

    這時候提示第7行的是縮排應該是8個空格，而檔案的第7行卻發現了9個空格，說明公共配置檔案public-eslintrc.js已經生效了。

    除了這些基本的配置以外，在npm上有很多已經發布的ESLint配置，也可以通過安裝使用。配置名字一般都是eslint-config-為字首，一般我們用的eslint是全域性安裝的，那用的eslint-config-模組也必須是全域性安裝，不然沒法載入。

    在這提一下，Rules頁面的很多規則後面都有一個橙色的小扳手標識，這個標識在執行

eslint index.js --fix

的時候，–fix引數可以自動修復該問題。
    比如我們在規則中新增一條no-extra-semi: 禁止不必要的分號。

'no-extra-semi':'error'

    然後，我們在index.js最後多新增一個分號

    執行eslint index.js，得到結果如下：

    我們再執行

eslint index.js --fix

就會自動修復，index.js那個多餘的分號也就被修復消失不見了。

釋出自己的配置

    共享的配置檔案那一節裡面已經說了，因為專案中需要配置的內容太多，所以可以在extends中指定一個檔名，或者一個eslint-config-開頭的模組名。為了便於共享，一般推薦將其釋出成一個NPM模組。

    其原理就是在載入模組時輸出原來.eslintrc.js的資料。比如我們可以建立一個模組 eslint-config-my 用於測試。

    建立資料夾和檔案：

    my-config.js:

module.exports = {
    extends: 'eslint:recommended',
    env: {
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'indent': [ 'error', 4 ],
        'quotes': [ 'error', 'single' ]
    }
};

    package.json:

{
    "name": "application-name1",
    "version": "0.0.1",
    "main":"my-config.js"
}

    為了能讓 eslint 正確載入這個模組，我們需要執行 npm link 將這個模組連結到本地全域性位置：

npm link eslint-config-my

    然後將檔案 .eslintrc.js 改成：

module.exports = {
    extends: 'my',
}; 

    提醒：在 extends 中， eslint-config-my 可簡寫為 my 。

    在執行 eslint merge.js 檢查，可看到沒有任何錯誤提示資訊，說明 eslint 已經成功載入了 eslint-config-my 的配置。如果我們使用 npm publish 將其釋出到 NPM 上，那麼其他人通過 npm install eslint-config-my 即可使用我們共享的這個配置。

    在eslint --init初始化檔案的時候，有一些預設的資料項，我就簡單的說一下。

module.exports = {
"env": {},
"extends": "",
"rules": {}
};

• parserOptions

      EsLint通過parserOptions，允許指定校驗的ecma的版本，及ecma的一些特性

  {
      "parserOptions": {
          "ecmaVersion": 6, //指定ECMAScript支援的版本，6為ES6
          "sourceType": "module", //指定來源的型別，有兩種”script”或”module”
          "ecmaFeatures": {
              "jsx": true//啟動JSX
          },
      }
  }
  

• Parser

      EsLint預設使用esprima做指令碼解析，當然你也切換他，比如切換成 babel-eslint解析

  {
      "parser": "esprima" //預設，可以設定成babel-eslint，支援jsx
  }
  

• Environments

      Environment可以預設好的其他環境的全域性變數，如brower、node環境變數、es6環境變數、mocha環境變數等

  {
      "env": {
          "browser": true,
          "node": true
      }
  }
  

      如果你想使用外掛中的環境變數，你可以使用plugins指定，如下

  {
      "plugins": ["example"],
      "env": {
          "example/custom": true
      }
  }
  

• Globals

      指定你所要使用的全域性變數，true代表允許重寫、false代表不允許重寫

  {
      "globals": {
          "var1": true,
          "var2": false
      }
  }
  

• Plugins

      EsLint允許使用第三方外掛

  {
      "plugins": [
          "react"    
      ]
  }
  

• Rules

      這個就是上面說的規則。

自定義規則

    ESLint自帶的規則一般都不會很全面，在實際的專案中，我們要根據自己的需求來建立自己的規則。這也算的上是ESLint最有特色的地方了。

    在我看來，釋出自己的配置，其實就是要先自定義規則，自己的配置中加上自定義的規則，應該會比較適合實際專案中的使用。

    以 eslint-plugin-react 為例，安裝以後，需要在 ESLint 配置中開啟外掛，其中 eslint-plugin- 字首可以省略：

{
    "plugins": [
        "react"
    ]
}

接下來開啟 ESLint JSX 支援（ESLint 內建選項）：

{
    "ecmaFeatures": {
        "jsx": true
    }
}

然後就可以配置外掛提供的規則了：

{
    "rules": {
        "react/display-name": 1,
        "react/jsx-boolean-value": 1
    }
}

自定義規則都是以外掛名稱為名稱空間的。

工作流整合

    ESLint 可以整合到主流的編輯器和構建工具中，以便我們在編寫的程式碼的同時進行 lint。

編輯器整合

    以 WebStorm 為例，只要全域性安裝 ESLint 或者在專案中依賴中新增 ESLint ，然後在設定裡開啟 ESLint 即可。其他編輯可以從官方文件中獲得獲得具體資訊。

構建系統整合

    在 Gulp 中使用：

var gulp = require('gulp');  
var eslint = require('gulp-eslint');

gulp.task('lint', function() {  
    return gulp.src('client/app/**/*.js')
    .pipe(eslint())
    .pipe(eslint.format());
});

其他構建工具參考官方文件。

總結

    以上呢，就是我花了兩天整理的一些資料，不能算很全，但是對於像我這樣的新手進行的初步瞭解應該是夠了，之後可能有時間的話會陸續的整理一些相關的資料釋出出來。

參考：