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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
关于JS中prototype的理解
Sep 07 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
微信小程序点击控件修改样式实例详解
Jul 07 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 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
fgetcvs在linux的问题
2012/01/15 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
php实现的操作excel类详解
2016/01/15 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
react路由配置方式详解
2017/08/07 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
基于node.js实现爬虫的讲解
2019/02/18 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
对python 调用类属性的方法详解
2019/07/02 Python
python调用接口的4种方式代码实例
2019/11/19 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
城市精细化管理实施方案
2014/03/04 职场文书
计算机专业自荐信
2014/05/24 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
小学运动会前导词
2015/07/20 职场文书
高中语文教学反思范文
2016/02/16 职场文书
运动会主持人开幕词
2016/03/04 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript