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 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
Javascript中的神器——Promise
Feb 08 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 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
PHP4实际应用经验篇(7)
2006/10/09 PHP
PHPCMS的使用小结
2010/09/20 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP5.3新特性小结
2016/02/14 PHP
php适配器模式简单应用示例
2019/10/23 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
2010/07/26 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
python中字典增加和删除使用方法
2020/09/30 Python
python动态规划算法实例详解
2020/11/22 Python
python实现登录与注册系统
2020/11/30 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
测量工程专业求职信
2014/02/24 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
人事经理岗位职责
2014/04/28 职场文书
投资意向协议书
2015/01/29 职场文书
CSS基础详解
2021/10/16 HTML / CSS
在python中读取和写入CSV文件详情
2022/06/28 Python
Python可视化神器pyecharts绘制水球图
2022/07/07 Python