ESLint簡介
ESLint是一個用來識別 ECMAScript 並且按照規則給出報告的程式碼檢測工具，使用它可以避免低階錯誤和統一程式碼的風格。如果每次在程式碼提交之前都進行一次eslint程式碼檢查，就不會因為某個欄位未定義為undefined或null這樣的錯誤而導致服務崩潰，可以有效的控制專案程式碼的質量。
在許多方面，它和 JSLint、JSHint 相似，除了少數的例外：
- ESLint 使用 Espree 解析 JavaScript。
- ESLint 使用 AST 去分析程式碼中的模式。
- ESLint 是完全外掛化的。每一個規則都是一個外掛並且你可以在執行時新增更多的規則。
使用
安裝
ESLint 支援多種安裝方式，可以通過 npm 來安裝，也可以在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。
全域性安裝
npm i -g eslint
複製程式碼區域性安裝（推薦）
npm i -D eslint
複製程式碼初始化
安裝完畢後，接下來新建一個配置檔案.eslintrc.js，或者使用如下的命令列來自動生成，命令如下：
eslint --init
複製程式碼配置
注意：如果你之前使用的版本低於 1.0.0，請檢視 遷移指南。 執行 eslint --init 之後，.eslintrc 檔案會在你的資料夾中自動建立。檔案的內容大體如下：
{
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"sourceType": "script"
},
"rules": {
"no-console": 0,
"no-unused-vars": "error",
"no-use-before-define": "error",
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"curly": ["error", "all"],
"default-case": "error",
"no-else-return": "error",
"no-empty-function": "error",
"no-implicit-coercion": "error",
"no-invalid-this": "error",
"no-loop-func": "error",
"no-multi-spaces": "error",
"no-new-func": "error",
"no-useless-return": "error",
"global-require": "error",
"no-path-concat": "error",
"no-sync": "error",
"array-bracket-spacing": [
"error",
"never"
],
"block-spacing": [
"error",
"always"
],
"brace-style": [
"error",
"1tbs"
],
"camelcase": "error",
"comma-dangle": [
"error",
"always-multiline"
],
"comma-spacing": [
"error",
{ "before": false, "after": true }
],
"comma-style": [
"error",
"last"
],
"key-spacing": [
"error",
{ "beforeColon": false, "afterColon": true }
],
"lines-around-comment": [
"error",
{ "beforeBlockComment": true }
],
"newline-after-var": [
"error",
"always"
],
"newline-before-return": "error",
"no-multi-assign": "error",
"max-params": [1, 3],
"new-cap": [
"error",
{
"newIsCap": true,
"capIsNew": false
}
],
"no-multiple-empty-lines": [
"error",
{
"max": 2
}
],
"no-shadow-restricted-names": "error",
"no-undef-init": "error",
"keyword-spacing": "error",
"space-before-blocks": [
"error",
"always"
]
}
}
複製程式碼ESlint支援的可配置資訊主要分為3類：
- Environments：Javascript 腳步將要執行在什麼環境中（如：nodejs，browser，commonjs等）,ESlint支援的所有環境都可以在官網查到。
- Globals：執行程式碼時腳步需要訪問的額外全域性變數。
- Rules：開啟某些規則，也可以設定規則的等級。
檢測規則
接下來，可以在配置檔案中設定一些規則。ESLint規則的三種級別：
- "off" 或者 0：關閉規則。
- "warn" 或者 1：開啟規則，並且作為一個警告（不影響exit code）。
- "error" 或者 2：開啟規則，並且作為一個錯誤（exit code將會是1）。
例如，下面的一些配置規則：
"console":"off"禁用 console。"no-unused-vars":2禁止出現未使用過的變數。"no-use-before-define":2不允許在變數定義之前使用它們。"linebreak-style":[2, "unix"]強制使用一致的換行風格。"quotes": ["error", "single"]強制使用一致的單引號。"semi":["error", "always"]控制行尾部分號。"curly":["error", "all"]強制所有控制語句使用一致的括號風格。"default-case": "error"switch 語句強制 default 分支，也可新增 // no default 註釋取消此次警告。"no-else-return":"error"禁止 if 語句中有 return 之後有 else。"no-implicit-coercion": "error"禁止出現空函式.如果一個函式包含了一條註釋，它將不會被認為有問題。"no-invalid-this": "error"禁止 this 關鍵字出現在類和類物件之外。"no-loop-func":"error"禁止在迴圈中出現 function 宣告和表示式。"no-multi-spaces":"error"禁止使用多個空格。"no-new-func":"error"禁止對 空Function 物件使用 new 操作符。"no-useless-return":"error"禁止沒有任何內容的return;"global-require": "error"要求 require() 出現在頂層模組作用域中。"no-path-concat": "error"禁止對 dirname 和 filename進行字串連線"no-sync": "error"禁用同步方法。"array-bracket-spacing": ["error", "never"]指定陣列的元素之間要以空格隔開(, 後面)， never引數：[ 之前和 ] 之後不能帶空格，always引數：[ 之前和 ] 之後必須帶空格。"block-spacing": ["error", "always"]禁止或強制在單行程式碼塊中使用空格(禁用)。"brace-style": ["error", "1tbs"]"camelcase": "error"強制駝峰法命名。"comma-dangle": ["error", "always-multiline"]陣列和物件鍵值對最後一個逗號， never引數：不能帶末尾的逗號, always引數：必須帶末尾的逗,always-multiline：多行模式必須帶逗號，單行模式不能帶逗號號。"comma-spacing": ["error", { "before": false, "after": true }]控制逗號前後的空格。"comma-style": ["error", "last"]控制逗號在行尾出現還是在行首出現 (預設行尾)。"key-spacing": ["error", { "beforeColon": false, "afterColon": true }]該規則規定了在物件字面量語法中，key和value之間的空白，冒號前不要空格，冒號後面需要一個空格。"lines-around-comment": ["error", { "beforeBlockComment": true }]要求在註釋周圍有空行 ( 要求在塊級註釋之前有一空行)。"newline-after-var": ["error", "always"]要求或禁止 var 宣告語句後有一行空行。"newline-before-return": "error"要求 return 語句之前有一空行。"no-multi-assign": "error"連結變數的賦值可能會導致意外的結果並難以閱讀，不允許在單個語句中使用多個分配。"max-params": [1, 3] function定義中最多允許的引數數量。"new-cap": ["error", { "newIsCap": true, "capIsNew": false}]建構函式首字母大寫。"no-multiple-empty-lines": ["error", {"max": 2}]空行不能夠超過2行。"no-shadow-restricted-names": "error"禁止對一些關鍵字或者保留字進行賦值操作，比如NaN、Infinity、undefined、eval、arguments等。"no-undef-init": "error"禁止把undefined賦值給一個變數。"keyword-spacing": "error"keyword 前後需要空格。"space-before-blocks": ["error","always"]強制在塊之前使用一致的空格。
忽略檢測
既然有檢測的規則，那麼必然有忽略檢測的配置。要新增忽略檢測的規則，首先要在專案根目錄建立一個 .eslintignore 檔案告訴 ESLint 去忽略掉不需要檢測的檔案或者目錄。
或者通過package.json檔案設定需要忽略檢測的物件，例如：
{
"name": "my_project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": ""
},
"eslintConfig": { // 也可配置eslint
"env": {
"es6": true,
"node": true
}
},
"eslintIgnore": ["test.js"]
}
複製程式碼Gulp中使用ESLint
除了npm方式之外，ESLint還支援Gulp外掛方式使用，使用之前需要先安裝外掛。
npm install gulp-eslint
複製程式碼如果要使用gulp-eslint進行eslint規則的校驗，可以使用下面的方式：
var gulp = require('gulp');
var eslint = require('gulp-eslint');
gulp.task('lint',function(){
return gulp.src(['app/**/*.js']) //指定的校驗路徑
.pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校驗檔案
.pipe(eslint.format())
});
複製程式碼ESLint技巧
eslint-config-standard
eslint-config-standard是一個標準的ESLint規則檢測庫，因此只需要安裝這個庫就可以省去配置ESLint規則。
{
"extends": "standard"
}
複製程式碼執行完以上步驟，就可以使用ESLint這個工具來校驗專案裡的程式碼。
在Vue專案裡，.vue檔案寫的是類似於html的格式，不是標準的JavaScript檔案，ESLint無法直接識別.vue檔案裡的JavaScript程式碼，那麼這個時候我們需要去安裝一個工具，安裝命令如下：
npm i eslint-plugin-html -D
複製程式碼因為在vue檔案裡面寫JavaScript程式碼也是寫在script標籤裡面的，這個外掛的作用就是識別一個檔案裡面script標籤裡面的JS程式碼，官方也是這麼推薦的。所以我們要在.eslintrc檔案裡面新增一段指令碼：
{
"extends": "standard",
"plugins": [
"html"
]
}
複製程式碼執行完以上步驟後，我們跳轉到package.json檔案裡面的scripts裡面新增一條命令：
"lint": "eslint --ext .js --ext .jsx --ext .vue src/"
複製程式碼在上面的指令碼命令中，ext後面需要寫上指定檢測檔案的字尾，如.js、.jsx、 .vue等，緊接著後面要寫上一個引數，這個引數就是我們要檢測哪個目錄下面的檔案，一般專案檔案都在src下面，所以在後面寫上src/就好。
現在我們就可以到terminal裡面輸入$ npm run lint，來檢驗專案裡的程式碼是否符合ESLint的規則。
ESLint自動修復報錯
一般來說，當我們使用命令“npm run lint”檢測JavaScript的時候，基本上都會出現非常的多報錯，基本上就是滿屏的error和warning。
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
複製程式碼當我們再去terminal中執行命令：$ npm run lint-fix，你會發現沒有那麼多飄紅的報錯，也沒有滿屏的error和warning了。
當然，還有一種萬能方法，就是在報錯的JS檔案中第一行寫上/* eslint-disable */，具體可以參考Command line Interface
eslint-loader
有時候，我們希望在專案開發的過程當中，每次修改程式碼都能夠自動進行ESLint的檢查。因為在我們改程式碼的過程中去做一次檢查，如果有錯誤，我們就能夠很快地去定位到問題並解決問題。這時候我們可以藉助eslint-loader外掛。
npm i eslint-loader babel-eslint -D
複製程式碼執行完安裝操作後，我們還需要在.eslintrc檔案裡面配置如下指令碼：
{
"extends": "standard",
"plugins": [
"html"
],
"parser": "babel-eslint"
}
複製程式碼為什麼我們要配置parser呢？因為我們的專案是基於webpack的，專案裡的程式碼都是需要經過babel去處理的。babel處理的這種語法可能對ESLint不是特別的支援，然後我們使用loader處理ESLint的時候就會出現一些問題。所以一般來說，我們用webpack和babel來進行開發的專案，都會指定它的parser使用babel-eslint。
同時，使用webpack方式構建的專案，還需要在webpack.config.base.js的module下面的rules裡面新增一個如下指令碼：
rules: [
{
test: /\.(vue|js|jsx)$/,
loader: 'eslint-loader',
exclude: /node_modules/,
enforce: 'pre'
},
......
]
複製程式碼然後我們就可以使用命令 $ npm run dev就可以在開發環境進行ESLint錯誤檢測。