webstorm安装eslint插件_webstorm引用ESLint进行静态代码检查

JavaScript 的代码检查工具备：JSLint，JSHint， JSCS， ESLint，本文着重介绍 ESLint。node

ESLint 在一系列的代码质量检查工具中，是最年轻的一个，固然也是最现代化的。配置多样，支持 JavaScript， JSON 以及 YAML 格式的.eslintrc.*文件，同时也支持在package.json用eslintConfig字段配置(Configuration File Formats)。react

安装

ESLint 基于 Node 平台，因此 Nodejs 是必须安装的，而后经过 npm 安装 ESLint 包，至于全局安装仍是做为开发依赖安装，取决于我的。jquery

而后在 WebStorm 中，打开设置(File>Setting或者Alt+F7)，按路径进入 ESLint 的配置界面(Languages&Frameworks>JavaScript>Code Quality Tools>ESLint)。开启 ESLint，并配置相应路径，配置文件默认使用.eslintrc。git

配置

ESLint 的配置分为六大块，分别是：es6

Parser Options(解析器选项)。涉及语言版本等参数。ESLin t默认只支持 ES5，若是须要支持 ES6，须要在这配置。

Parser(解析器选择)。可让你本身选择ESLint的解析器。ESLint 默认使用Espress做为做为解析器，强烈不推荐修改

Environments(语言环境选项)。好比borwser，node，jquery，meteor等等

Globals(全局变量)。好比你本身写了插件，须要全局使用，须要在这个选项中声明。

Plugins(第三方插件)。引入的第三方插件，为了防止误杀，须要在这个选项中申明(但限于 npm 插件，若是是 jquery 插件等前端插件，建议在Globals选择中声明)。

Rules(语法规则)。这个是 ESLint 的重点，同时也是整个配置中最丰富的地方，好比结尾分号检测，单双引号，严格格式等。

语法规则(Rules)配置

在官方文档中，语法规则的配置又分六大类：github

语法规则(Rules)配置

在官方文档中，语法规则的配置又分六大类：web

使用键值对编写，语言规则字段(rule ID)做为键，经过不一样的值来影响规则字段。规则字体的值必须是如下三种之一：

"off" 或者0——不检查这个规则

"warn"或者1——开启这个规则，规则生效时，做为提醒告诉用户

"error"或者2——开启这个规则，规则生效时，做为错误告诉用户

用如下简短的规则配置作说明：

1

2

3

4

5

6

7

{

"rules":{

"quotes":["2","single"],

"no-undef":[2],

"no-multi-spaces":[1]

}

}

这个配置规则对应以下：

要求使用单引号，若是不是，显示错误信息

若是使用了未声明的变量，显示错误信息

若是变量与操做符之间出现多个空格，显示提醒信息

.eslintignore

若是你有 Git 的使用经验，那.eslintignore文件的功能也就很容易理解了。相似于.gitignore，用于排除文件与目录，好比npm的node_modules目录等，以及一些第三方插件。对于这些目录与文件，不执行代码质量检查。

开始介绍EsLint的详细用法

parserOptions

EsLint经过parserOptions，容许指定校验的ecma的版本，及ecma的一些特性

{

"parserOptions": {

"ecmaVersion": 6, //指定ECMAScript支持的版本，6为ES6

"sourceType": "module", //指定来源的类型，有两种”script”或”module”

"ecmaFeatures": {

"jsx": true//启动JSX

},

}

}

Parser

EsLint默认使用esprima作脚本解析，固然你也切换他，好比切换成babel-eslint解析

{

"parser": "esprima" //默认，能够设置成babel-eslint，支持jsx

}

Environments

Environment能够预设好的其余环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

{

"env": {

"browser": true,

"node": true

}

}

若是你想使用插件中的环境变量，你可使用plugins指定，以下

{

"plugins": ["example"],

"env": {

"example/custom": true

}

}

Globals

指定你所要使用的全局变量，true表明容许重写、false表明不容许重写

{

"globals": {

"var1": true,

"var2": false

}

}

Plugins

EsLint容许使用第三方插件

{

"plugins": [

"react"

]

}

Rules

自定义规则，通常格式：”规则名称”:error级别系数。系数0为不提示(off)、1为警告(warn)、2为错误抛出(error)，可指定范围，如[1,4]

能够包括Strict模式、也能够是code的方式提醒，如符号等。还能够是第三方的校验，如react。

{

"plugins": [

"react"

],

"rules": {

//Javascript code 默认校验

"eqeqeq": "off", //off = 0

"curly": "error", //error = 2

"quotes": ["warn", "double"], //warn = 1

//使用第三方插件的校验规则

"react/jsx-quotes": 0

}

}