eslint自动检测_eslint 静态代码检测工具

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。对比于jshint显著的特点就是支持插件拓展还有就是支持jsx语法(jshint并不支持jsx，react开发老报错也是很头疼ㄟ( ▔, ▔ )ㄏ )。

命令行

具体的可以参考这里 传送门 或者 eslint -h， 这里给出几个常用的。

安装

npm i -g eslint

生成配置

eslint --init

//回答问题后生成eslint配置。

运行eslint

eslint [options] [file|dir|glob]*

//eslint file1.js file2.js

//eslint lib/**

//eslint "lib/**" glob模式要用引号

eslint配置

配置有这几种方式：

直接在代码文件中定义，使用 JavaScript 注释把配置信息直接嵌入到一个文件。

使用 .eslintrc (json或者YAML)或者 .eslintrc.yml(YAML)或者 .eslintrc.js(javascript)或者 .eslintrc.json (JSON)；

在 package.json 中添加 eslintConfig 字段；

和jshint一样有个忽略检测文件的配置.eslintignore。

eslintrc执行时会从检测的文件一层层往上找配置文件，但是离检测文件最近的文件优先级最高，会覆盖父级的配置。所以一般会在根目录的配置中加一个：

# YAML

root: true

ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。

如果项目内没有配置文件，会退回到系统 ~/.eslintrc 中自定义的默认配置。

有很多信息可以被配置：

Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。

Globals - 脚本在执行期间访问的额外的全局变量。

Rules - 启用的规则及各自的错误级别。

一个简单的例子(.eslintrc.yml)：

# YAML

env:

browser: true

parserOptions:

ecmaVersion: 6

ecmaFeatures:

jsx: true

globals :

angular: true

rules:

camelcase: 0

curly: 2

brace-style:

- 2

- 1tbs

quotes:

- 2

- single

semi:

- 2

- always

space-in-brackets:

- 2

- never

space-infix-ops: 2

1.parserOptions 解析器选项

#YAML

parserOptions:

ecmaVersion: 6

ecmaFeatures:

jsx: true

parserOptions 属性设置解析器选项。可用的选项有：

ecmaVersion - 设置为 3， 5 (默认)， 6、7 或 8 指定你想要使用的 ECMAScript 版本。你也可以指定为 2015(同 6)，2016(同 7)，或 2017(同 8)使用年份命名

sourceType - 设置为 "script" (默认) 或 "module"(如果你的代码是 ECMAScript 模块)。

ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:

globalReturn - 允许在全局作用域下使用 return 语句

impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)

jsx - 启用 JSX

experimentalObjectRestSpread - 启用对实验性的 object rest/spread properties 的支持。(重要：这是一个实验性的功能,在未来可能会改变明显。 建议你写的规则 不要依赖该功能，除非当它发生改变时你愿意承担维护成本。)

2.env 环境全局变量

# YAML

env:

browser: true

环境定义了预定义的全局变量。可用的环境有：

browser - browser 全局变量。

node - Node.js 全局变量和 Node.js 作用域。

commonjs - CommonJS 全局变量和 CommonJS 作用域 (仅为使用 Browserify/WebPack 写的只支持浏览器的代码)。

shared-node-browser - Node 和 Browser 通用全局变量。

es6 - 支持除模块外所有 ECMAScript 6 特性(该选项会自动设置 ecmaVersion 解析器选项为 6)。

worker - web workers 全局变量。

amd - 定义 require() 和 define() 作为像 amd 一样的全局变量。

mocha - 添加所有的 Mocha 测试全局变量。

jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。

jest - Jest 全局变量。

phantomjs - PhantomJS 全局变量。

protractor - Protractor 全局变量。

qunit - QUnit 全局变量。

jquery - jQuery 全局变量。

prototypejs - Prototype.js 全局变量。

shelljs - ShellJS 全局变量。

meteor - Meteor 全局变量。

mongo - MongoDB 全局变量。

applescript - AppleScript 全局变量。

nashorn - Java 8 Nashorn 全局变量。

serviceworker - Service Worker 全局变量。

atomtest - Atom 测试全局变量。

embertest - Ember 测试全局变量。

webextensions - WebExtensions 全局变量。

greasemonkey - GreaseMonkey 全局变量。

3.globals全局变量

# YAML

globals :

angular: true

var1: true

var2: false

当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

4.plugins 插件

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。

在配置文件里配置插件，要使用 plugins ，其中包含插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

# YAML

plugins:

- plugin1

- eslint-plugin-plugin2

注意：全局安装的 ESLint 只能使用全局安装的插件。本地安装的 ESLint 不仅可以使用本地安装的插件还可以使用全局安装的插件。

5.Rules 规则

plugins:

- plugin1

rules:

curly: 2

brace-style:

- 2

- 1tbs

quotes:

- 2

- single

plugin1/rule1 : error

#配置定义在插件中的一个规则的时候，你必须使用 插件名/规则ID 的形式

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用哪些规则。改变一个规则设置，你必须设置规则 ID 等于这些值之一：

"off" 或 0 - 关闭规则

"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

具体的规则太多了这一看这里 ： 传送门

6.共享设置

# YAML

settings:

sharedData: "Hello"

ESLint 支持在配置文件添加共享设置。你可以添加 settings 对象到配置文件，它将提供给每一个将被执行的规则。如果你想添加的自定义规则而且使它们可以访问到相同的信息，这将会很有用，并且很容易配置。

*行内配置

禁止eslint检测

//1.禁止规则出现警告

/* eslint-disable */

alert('foo');

/* eslint-enable */

//.2或者对指定的规则启用或禁用警告

/* eslint-disable no-alert, no-console */

alert('foo');

console.log('bar');

/* eslint-enable no-alert, no-console */

//3.整个文件范围内禁止规则出现警告,将 /* eslint-disable */ 块注释放在文件顶部

//4.你也可以对整个文件启用或禁用警告:

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file

//5.单行注释

alert('foo'); // eslint-disable-line

// eslint-disable-next-line

alert('foo');

*配置文件的继承

一个配置文件可以被基础配置中的已启用的规则继承

1 eslint:recommended

值为 "eslint:recommended" 的 extends 属性启用一系列核心规则，这些规则报告一些常见问题，在 规则页面 中被标记为 。这个推荐的子集只能在 ESLint 主要版本进行更新。

# YAML

extends: eslint:recommended,

rules :

#enable additional rules

indent:

- error

- 4

2 extend npm包

继承的可以是一个 npm 包，它输出一个配置对象。要确保这个包安装在 ESLint 能请求到的目录下。extends 属性值可以省略包名的前缀 eslint-config-。

# YAML

extends: standard

rules:

comma-dangle:

- error

- always

no-empty: warn

3 plugins npm包

一些插件也可以输出一个或多个命名的 配置。要确保这个包安装在 ESLint 能请求到的目录下。plugins 属性值 可以省略包名的前缀 eslint-plugin-。

extends 属性值可以由以下组成：

plugin:

包名 (省略了前缀，比如，react)

/

配置名称 (比如 recommended)

# JSON

{

"plugins": [

"react"

],

"extends": [

"eslint:recommended",

"plugin:react/recommended"

],

"rules": {

"no-set-state": "off"

}

}

4 继承配置文件

extends 属性值可以是基本配置文件的绝对路径或相对路径。

{

"extends": [

"./node_modules/coding-standard/eslintDefaults.js",

"./node_modules/coding-standard/.eslintrc-es6",

"./node_modules/coding-standard/.eslintrc-jsx"

],

"rules": {

"eqeqeq": "warn"

}

}