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 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
详解vue-cli 接口代理配置
Dec 13 Javascript
setTimeout时间设置为0详细解析
Mar 13 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
React配置子路由的实现
Jun 03 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php去除数组中重复数据
2014/11/18 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
万能的php分页类
2017/07/06 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JavaScript计算两个日期时间段内日期的方法
2015/03/16 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
python实现简单购物商城
2016/05/21 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
世界最大域名注册商:GoDaddy
2016/07/24 全球购物
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
难忘的一课教学反思
2014/04/30 职场文书
后备干部培训方案
2014/05/22 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
工作简报怎么写
2015/07/21 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers