EsLint入门

介绍

官方地址：http://eslint.org/

EsLint帮助咱们检查Javascript编程时的语法错误。好比：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint可以帮助咱们分析JS代码，找到bug并确保必定程度的JS语法书写的正确性。

EsLint是创建在Esprima(ECMAScript解析架构)的基础上的。Esprima支持ES5.1,自己也是用ECMAScript编写的，用于多用途分析。EsLint不但提供一些默认的规则（可扩展），也提供用户自定义规则来约束咱们写的Javascript代码。

EsLint提供如下支持：

1. ES6
2. AngularJS
3. JSX
4. Style检查
5. 自定义错误和提示

EsLint提供如下几种校验：

1. 语法错误校验
2. 不重要或丢失的标点符号，如分号
3. 无法运行到的代码块（使用过WebStorm的童鞋应该了解）
4. 未被使用的参数提醒
5. 漏掉的结束符，如}
6. 确保样式的统一规则，如sass或者less
7. 检查变量的命名

使用

1、安装

Npm install gulp-eslint –save-dev

在你的项目目录下，运行：eslint –init将会产生一个.eslintrc的文件，文件内容包含一些校验规则

{

    "rules": {

        "semi": ["error", "always"],

        "quotes": ["error", "double"]

    }

}

其中”semi”和”quotes”是规则名称。EsLint还提供了error的级别，对应数字，数字越高错误的提示越高，如0代码错误不提示、1表明警告提醒但不影响现有编译、2error会抛出错误。

"extends": "eslint:recommended"

Extends是EsLint默认推荐的验证，你能够使用配置选择哪些校验是你所须要的，能够登陆npmjs.com查看

2、自定义配置EsLint

以前提到你能够关掉全部EsLint默认的验证，自行添加所确切须要的验证规则。为此EsLint提供了2个种方式进行设置：

1. Configuration Comments: 在所要验证的文件中，直接使用Javascript注释嵌套配置信息
2. Configuration Files: 使用JavaScript、JSON或YAML文件，好比前面提到的.eslintrc文件，固然你也能够在package.json文件里添加eslintConfig字段，EsLint都会自动读取验证。

开始介绍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。

默认校验的地址http://eslint.org/docs/rules/

{
    "plugins": [
        "react"
    ],
    "rules": {
         //Javascript code 默认校验
        "eqeqeq": "off", //off = 0
        "curly": "error", //error = 2
        "quotes": ["warn", "double"], //warn = 1
         //使用第三方插件的校验规则
        "react/jsx-quotes": 0
    }
}

            https://www.npmjs.com/package/eslint-plugin-react ， 此连接是react的eslint使用

3、Gulp中使用

var eslint = require('gulp-eslint');
 
gulp.task('validate-eslint',function(){

    return gulp.src(['app/**/*.js']) //指定的校验路径

        .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件

        .pipe(eslint.format())

});