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 相关文章推荐
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
js 浏览器事件介绍
Mar 30 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
react-native DatePicker日期选择组件的实现代码
Sep 12 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
解决ele ui 表格表头太长问题的实现
Nov 13 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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
php Undefined index的问题
2009/06/01 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
jQuery实现简单的下拉菜单导航功能示例
2017/12/07 jQuery
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
介绍一下内联、左联、右联
2013/12/31 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
夏季奶茶店创业计划书
2014/01/16 职场文书
心理学专业求职信
2014/06/16 职场文书
镇创先争优活动总结
2014/08/28 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
婚礼答谢礼品
2015/01/20 职场文书
挂靠协议书
2015/01/27 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL