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 相关文章推荐
Extjs 几个方法的讨论
Jan 28 Javascript
jQuery图片预加载 等比缩放实现代码
Oct 04 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 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
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php动态绑定变量的用法
2015/06/16 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
PDO::errorInfo讲解
2019/01/28 PHP
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
js 本地预览的简单实现方法
2014/02/18 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
javascript History对象原理解析
2020/02/17 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python Queue模块详解
2014/11/30 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
电子商务专员岗位职责
2013/12/11 职场文书
护理工作感言
2014/01/16 职场文书
公司运动会策划方案
2014/05/25 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
抗洪救灾标语
2014/10/08 职场文书
2014年度思想工作总结
2014/11/27 职场文书
实习指导教师评语
2014/12/30 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android