eslint 的三大通用规则详解


Posted in Javascript onMay 16, 2019

安装

可以全局安装,也可以在项目下面安装。 如下是在项目中安装示例,只需要在 package.json 中添加如下配置,并进行安装: >"eslint": "^4.11.0"

配置

配置方式有两种,但建议使用文件配置的形式,比较独立,便于维护。 使用文件配置的方式:在项目的根目录下,新建一个名为 .eslintrc 的文件,在此文件中添加一些检查规则。

文件配置方式

env:你的脚本将要运行在什么环境中

Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等

'env': {
  'browser': true,
  'commonjs': true,
  'es6': true
 },

globals:额外的全局变量

globals: {
  vue: true,
  wx: true
 },

rules:开启规则和发生错误时报告的等级

规则的错误等级有三种:

  • 0或'off':关闭规则。
  • 1或'warn':打开规则,并且作为一个警告(并不会导致检查不通过)。
  • 2或'error':打开规则,并且作为一个错误 (退出码为1,检查不通过)。

参数说明:

  • 参数1 : 错误等级
  • 参数2 : 处理方式

配置代码注释方式

有时我们可能要在代码中忽略eslint的某种检查,或者加入某种特定检查,此时我们可以用如下的方式:

示例:

忽略 no-undef 检查
/* eslint-disable no-undef */

忽略 no-new 检查
/* eslint-disable no-new */

设置检查
/*eslint eqeqeq: off*/ /*eslint eqeqeq: 0*/

eslint 检查指令

检查且修复
eslint * --fix

检查指定文件
eslint app.js --fix

eslint官方提供了3种预安装包:

1、eslint-config-google

Google标准

执行安装:

npm install eslint eslint-config-google -g

2、eslint-config-airbnb

Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件,并且对各个插件的版本有所要求。

你可以执行以下命令查看所依赖的各个版本:

npm info "eslint-config-airbnb@latest" peerDependencies

你会看到以下输出信息,包含每个了每个plugins的版本要求

{ eslint: '^3.15.0',
 'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0',
 'eslint-plugin-import': '^2.2.0',
 'eslint-plugin-react': '^6.9.0' }

知道了每个plugins的版本要求后,代入以下命令执行安装即可使用:

npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g

3、eslint-config-standard

Standard标准,它是一些前端工程师自定的标准。

执行安装:

npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
基于vue实现多引擎搜索及关键字提示
Mar 16 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
webpack项目使用eslint建立代码规范实现
May 16 #Javascript
Vue项目中使用jquery的简单方法
May 16 #jQuery
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 #Javascript
详解vue2.0模拟后台json数据
May 16 #Javascript
详解Vue-Router源码分析路由实现原理
May 15 #Javascript
微信小程序select下拉框实现效果
May 15 #Javascript
详解js常用分割取字符串的方法
May 15 #Javascript
You might like
Smarty模板快速入门
2007/01/04 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php面向对象全攻略 (十五) 多态的应用
2009/09/30 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
简单JS代码压缩器
2006/10/12 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
jquery 双色表格实现代码
2009/12/08 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
浅析Python中yield关键词的作用与用法
2016/11/29 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
如何做好总经理助理
2013/11/12 职场文书
五年级英语教学反思
2014/01/31 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
投标售后服务承诺书
2015/04/29 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技