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实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
js 实现复制到粘贴板的功能代码
May 13 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
javascript中定义类的方法汇总
Dec 28 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 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下MAIL的另一解决方案
2006/10/09 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
基于jquery的表格排序
2010/09/11 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
angularjs表格分页功能详解
2016/01/21 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
React快速入门教程
2017/01/17 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
json跨域调用python的方法详解
2017/01/11 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
python框架中flask知识点总结
2018/08/17 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
python实现图像拼接功能
2020/03/23 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
工地标语大全
2014/06/18 职场文书
办公室岗位职责范本
2015/04/11 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
教师节获奖感言
2015/07/31 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL
关于JavaScript轮播图的实现
2021/11/20 Javascript
MySQL查询日期时间
2022/05/15 MySQL