[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 的注意点