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）。

例如，下面的一些配置規則：

• "no-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規則。

然后，在項目的根目錄里面手動創建一個.eslintrc文件，然后在里面添加如下代碼：

{"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。

在報這么多的錯誤之后，如果我們一條一條地去修復，就會變的非常的麻煩，相信剛接觸ESLint的童鞋都深有體會。其實這些錯誤都可以讓ESLint幫助我們自動地修復。具體來說，只需要在package.json文件里面的scripts里面新增一條命令即可：

"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錯誤檢測。

附：
https://cn.eslint.org/
https://www.imooc.com/article...