EsLint入门学习教程

介绍

eslint 由 javascript 红宝书 作者 nicholas c. zakas 编写， 2013 年发布第一个版本。 ncz 的初衷不是重复造一个*，而是在实际需求得不到 jshint 团队响应 的情况下做出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。

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

eslint帮助我们检查javascript编程时的语法错误。比如：在javascript应用中，你很难找到你漏泄的变量或者方法。eslint能够帮助我们分析js代码，找到bug并确保一定程度的js语法书写的正确性。

eslint是建立在esprima(ecmascript解析架构)的基础上的。esprima支持es5.1,本身也是用ecmascript编写的，用于多用途分析。eslint不但提供一些默认的规则（可扩展），也提供用户自定义规则来约束我们写的javascript代码。

eslint提供以下支持：

• es6
• angularjs
• jsx
• style检查
• 自定义错误和提示
  

eslint提供以下几种校验：

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

使用

一、安装

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默认推荐的验证，你可以使用配置选择哪些校验是你所需要的，可以登录查看

二、自定义配置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使用

三、gulp中使用

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

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

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

  .pipe(eslint.format())

});

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。