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 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
js表格分页实现代码
Sep 18 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
Feb 14 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 Javascript
JavaScript实现消消乐的源代码
Jan 12 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读取IMAP邮件
2006/10/09 PHP
php的一些小问题
2010/07/03 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
laravel请求参数校验方法
2019/10/10 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
IE下JS读取xml文件示例代码
2013/08/05 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JavaScript必知必会(五) eval 的使用
2016/06/08 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
2021/01/13 Vue.js
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python Selenium参数配置方法解析
2020/01/19 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
python如何随机生成高强度密码
2020/08/19 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
师范大学应届生求职信
2013/11/21 职场文书
总经理的岗位职责
2014/02/23 职场文书
英语系本科生求职信
2014/07/15 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
二审答辩状范文
2015/05/22 职场文书
《刺客之王:C罗全景传记》:时代从来不会亏待手艺人
2019/11/28 职场文书