ESLint 由 JavaScript 紅寶書 作者 Nicholas C. Zakas 編寫， 2013 年發布第一個版本。 NCZ 以可擴展、每條規則獨立、不內置編碼風格為理念編寫了一個 lint 工具。
什么是 ESLint ？
ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。在許多方面，它和 JSLint、JSHint 相似，除了少數的例外：
- ESLint 使用 Espree 解析 JavaScript。
- ESLint 使用 AST 去分析代碼中的模式
- ESLint 是完全插件化的。每一個規則都是一個插件並且你可以在運行時添加更多的規則。
使用
全局安裝
npm install -g eslint初始化
如果你的項目還沒有配置文件（.eslintrc）的話，可以通過指定–init參數來生成一個新的配置文件：
eslint --init運行eslint –init后，會在當前目錄下生成一個.eslintrc文件，你可以在這個文件中配置一些規則。
使用 ESLint 檢測任何 JavaScript 文件：
eslint test.js test2.js
ESLint 中一些規則運行命令它可以幫你自動修復
eslint test.js --fix
配置
ESLint被設計為完全可配置的，主要有兩種方式來配置ESLint：
- 內嵌配置：將配置信息以注釋的形式寫在要檢驗的文件內
- 文件配置：利用javascript、json、yml語言的語法，生成名為.eslintrc.*的配置文件，將配置信息寫到文件內
ESLint 支持幾種格式的配置文件，如果同一個目錄下有多個配置文件，ESLint 只會使用一個。優先級順序如下：
-
- JavaScript - 使用 .eslintrc.js 然后輸出一個配置對象。
- YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
- JSON -使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 文件允許 JavaScript 風格的注釋。
- Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。
- package.json - 在 package.json 里創建一個 eslintConfig屬性，在那里定義你的配置。
文件配置方式
env：你的腳本將要運行在什么環境中
Environment可以預設好的其他環境的全局變量，如brower、node環境變量、es6環境變量、mocha環境變量等
'env': { 'browser': true, 'commonjs': true, 'es6': true },
globals：額外的全局變量
示例：
globals: { vue: true, wx: true },
rules：開啟規則和發生錯誤時報告的等級
示例：
'rules': { // no-var 'no-var': 'error', // 要求或禁止 var 聲明中的初始化 'init-declarations': 2, // 強制使用單引號 'quotes': ['error', 'single'], // 要求或禁止使用分號而不是 ASI 'semi': ['error', 'never'], // 禁止不必要的分號 'no-extra-semi': 'error', // 強制使用一致的換行風格 'linebreak-style': ['error', 'unix'], // 空格2個 'indent': ['error', 2, {'SwitchCase': 1}], // 指定數組的元素之間要以空格隔開(,后面)， never參數：[ 之前和 ] 之后不能帶空格，always參數：[ 之前和 ] 之后必須帶空格 'array-bracket-spacing': [2, 'never'], // 在塊級作用域外訪問塊內定義的變量是否報錯提示 'block-scoped-var': 0, // if while function 后面的{必須與if在同一行，java風格。 'brace-style': [2, '1tbs', {'allowSingleLine': true}], // 雙峰駝命名格式 'camelcase': 2, // 數組和對象鍵值對最后一個逗號， never參數：不能帶末尾的逗號, always參數：必須帶末尾的逗號， 'comma-dangle': [2, 'never'], // 控制逗號前后的空格 'comma-spacing': [2, {'before': false, 'after': true}], // 控制逗號在行尾出現還是在行首出現 'comma-style': [2, 'last'], // 圈復雜度 'complexity': [2, 9], // 以方括號取對象屬性時，[ 后面和 ] 前面是否需要空格, 可選參數 never, always 'computed-property-spacing': [2, 'never'], // TODO 關閉 強制方法必須返回值，TypeScript強類型，不配置 // 'consistent-return': 0 }
規則的錯誤等級有三種：
0或'off'：關閉規則。
1或'warn'：打開規則，並且作為一個警告（並不會導致檢查不通過）。
2或'error'：打開規則，並且作為一個錯誤 (退出碼為1，檢查不通過)。
參數說明：
參數1 ： 錯誤等級
參數2 ： 處理方式
"comma-dangle": ["error", "never"],
上述配置只是簡要將最基本的一些配置羅略出來，如果有需要建議去上方官網中查看。
配置代碼注釋方式
有時我們可能要在代碼中忽略eslint的某種檢查，或者加入某種特定檢查，此時我們可以用如下的方式：
示例：
- 忽略 no-undef 檢查
/* eslint-disable no-undef */
- 忽略 no-new 檢查
/* eslint-disable no-new */
- 設置檢查
/*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/eslint 檢查指令
- 檢查且修復
eslint * --fix
- 檢查指定文件
eslint app.js --fix
開發工具上的使用
WebStorm
Preferences -> Languages & Frameworks -> JavaScript -> Code Quality Tools -> Eslint -> Enable (勾選) -> Apply -> OK
Atom
安裝linter-eslint
Sublime
1. 在 package control 中先安裝SublimeLinter
2. 再安裝SublimeLinter-contrib-eslint
3. 在項目目錄下新建 .eslintrc 文件，自定義規則
4. 重新載入文件應該就生效了（不生效的話 Ctrl+Shift+P 調用命令面板 找到 sublimelinter: toggle linter 設置生效就好了）
結語
Eslint 對於每一個開發者而言都是非常值得使用的，這樣會強制你寫出高質量且整潔的代碼，所以建議大家將Eslint集成進入，來提高項目的質量。