EsLint入门学习教程


Posted in Javascript onFebruary 17, 2017

介绍

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

二、自定义配置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())

});

总结

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

Javascript 相关文章推荐
jquery插件之easing使用
Aug 19 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
js 作用域和变量详解
Feb 16 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 #Javascript
AngularJS执行流程详解
Feb 17 #Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
Feb 17 #Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 #Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 #Javascript
jQuery实现弹幕效果
Feb 17 #Javascript
Ajax基础知识详解
Feb 17 #Javascript
You might like
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
在Node.js应用中读写Redis数据库的简单方法
2015/06/30 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
2019/09/18 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
python之信息加密题目详解
2019/06/26 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Django如何实现上传图片功能
2019/08/16 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python 项目转化为so文件实例
2019/12/23 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python龙贝格法求积分实例
2020/02/29 Python
使用python把xmind转换成excel测试用例的实现代码
2020/10/12 Python
露营世界:Camping World
2017/02/02 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
linux面试题参考答案(8)
2015/08/11 面试题
软件配置管理有什么好处
2015/04/15 面试题
高中自我鉴定
2013/12/20 职场文书
旅游市场营销方案
2014/03/09 职场文书
教师考核评语
2014/04/28 职场文书
活动总结怎么写啊
2014/05/07 职场文书
2014年减负工作总结
2014/12/10 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书