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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
jQuery+css实现的切换图片功能代码
Jan 27 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
js+html5生成自动排列对话框实例
Oct 09 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调用三种数据库的方法(2)
2006/10/09 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
JavaScript中的函数式编程详解
2020/08/22 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
Python中for循环详解
2014/01/17 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python调用C语言的实现
2019/07/26 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
Weblogic的布署方式
2013/08/23 面试题
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
保护环境倡议书500字
2014/05/19 职场文书
长城导游词
2015/01/30 职场文书
五一劳动节慰问信
2015/02/14 职场文书
python编写五子棋游戏
2021/05/25 Python