[TOC]
* * * * *
### 一、什么是eslint
ESLint是一個用來識別 ECMAScript 并且按照規則給出報告的代碼檢測工具,使用它可以避免低級錯誤和統一代碼的風格。
[ESLint 中文網](http://eslint.cn)
### 二、eslint 的部署與配置
#### 1. 安裝
如果你僅僅想讓 ESLint 成為你項目構建系統的一部分,我們可以在項目根目錄進行本地(局部)安裝:
```JavaScript
$ npm i eslint -S
```
全局安裝:
```JavaScript
$ npm i -g eslint
```
#### 2. 配置
安裝成功后我們可以使用 `eslint --init ` 命令在你的項目中生成一份文件名為.eslintrc.js 的配置文件,當然你也可以手動去創建這個配置文件。該配置文件的簡單說明如下:
```JavaScript
module.exports = {
"parserOptions": {
"ecmaVersion": 2015,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "script"
},
"env": {
"es6": true,
"node": true,
},
"plugins": [
"import",
"node",
"promise",
"standard",
],
"globals": {
"document": false,
"navigator": false,
"window": false
},
"extends": ["eslint:recommended","standard","plugin:angular/johnpapa"],
"rules":{
}
}
```
- `parserOptions` 屬性配置解析器內容。其中`ecmaVersion`屬性配置JS的語法版本。`sourceType`屬性配置JS文件加載模式,值為`script`或`module`。`ecmaFeatures`屬性配置想要使用的額外語言特性。
- `env` 屬性配置了預定義的全局環境。我們當前開啟了`es6`、 `node` 亮兩個環境。
- `plugins` 屬性配置需要加載的第三方插件。這里我們需要先安裝對應插件才能使用。
- `globals` 屬性定義了全局變量集合,包含在這個集合中的屬性都會被工具認為是全局變量,`no-undef` 規則就不會發出警告。
- `extends` 屬性配置基礎規則,`rules`屬性中配置的規則都是基于這個規則之上配置的。
- `rules` 屬性配置檢查規則。
#### 忽略eslint代碼檢測的配置
你可以通過在項目根目錄創建一個 `.eslintignore` 文件告訴 ESLint 去忽略特定的文件和目錄。`.eslintignore` 文件是一個純文本文件,其中的每一行都是一個 glob 模式表明哪些路徑應該忽略檢測。例如,以下將忽略所有的 `JavaScript` 文件:
```JavaScript
**/*.js
```
當 `ESLint` 運行時,在確定哪些文件要檢測之前,它會在當前工作目錄中查找一個 `.eslintignore` 文件。如果發現了這個文件,當遍歷目錄時,將會應用這些偏好設置。一次只有一個 `.eslintignore` 文件會被使用,所以,不是當前工作目錄下的 `.eslintignore` 文件將不會被用到。
忽略的規則:
- 以 `#` 開頭的行被當作注釋,不影響忽略模式。
- 路徑是相對于 `.eslintignore` 的位置或當前工作目錄。這也會影響通過 `--ignore-pattern`傳遞的路徑。
- 忽略模式同 `.gitignore` 規范
- 以 `!` 開頭的行是否定模式,它將會重新包含一個之前被忽略的模式。
除了 `.eslintignore`文件中的模式,ESLint總是忽略 `/node_modules/*` 和 `/bower_components/*` 中的文件。
例如:把下面 `.eslintignore` 文件放到當前工作目錄里,將忽略項目根目錄下的 `node_modules`,`bower_components` 以及 `build/` 目錄下除了 `build/index.js` 的所有文件。
```
# /node_modules/* and /bower_components/* in the project root are ignored by default
# Ignore built files except build/index.js
build/*
!build/index.js
```
### 三、eslint 的注意點