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第一课
Feb 27 Javascript
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
JavaScript操作选择对象的简单实例
May 16 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
vue 解决异步数据更新问题
Oct 29 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通过递归方式复制目录和子目录的方法
2015/03/13 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
bootstrap suggest下拉框使用详解
2017/04/10 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
理解javascript async的用法
2017/08/22 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
了解重排与重绘
2019/05/29 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vue element 关闭当前tab 跳转到上一路由操作
2020/07/22 Javascript
浅谈python中的变量默认是什么类型
2016/09/11 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
大学生自我鉴定评语
2014/01/27 职场文书
公立医院改革实施方案
2014/03/14 职场文书
授权委托书样本
2014/04/03 职场文书
买房委托公证书
2014/04/08 职场文书
节能环保演讲稿
2014/08/28 职场文书
英语教学课后反思
2016/02/15 职场文书
django中websocket的具体使用
2022/01/22 Python
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python