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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
jQuery webuploader分片上传大文件
Nov 07 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
js实现select下拉框选择
Jan 11 Javascript
VueJS实现用户管理系统
May 29 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模板引擎Smarty内建函数详解
2016/04/11 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
php基于 swoole 实现的异步处理任务功能示例
2019/08/13 PHP
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容
2016/12/08 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
vue解决跨域问题(推荐)
2020/11/10 Javascript
Python实现list反转实例汇总
2014/11/11 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
纯css3实现宠物小鸡实例代码
2018/10/08 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
绝对经典成功的大学生推荐信
2013/11/08 职场文书
领导干部培训感言
2014/01/23 职场文书
建筑学专业自荐书
2014/07/09 职场文书
课内比教学心得体会
2014/09/09 职场文书
庆祝儿童节标语
2014/10/09 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
课改心得体会范文
2016/01/25 职场文书
MySQL索引是啥?不懂就问
2021/07/21 MySQL
Python 阶乘详解
2021/10/05 Python