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 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery旋转插件jqueryrotate用法详解
Oct 13 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP curl使用实例
2015/07/02 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
前端主流框架vue学习笔记第二篇
2017/07/26 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python中partial()基础用法说明
2018/12/30 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
django下创建多个app并设置urls方法
2020/08/02 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
优秀学生干部个人的自我评价
2013/10/04 职场文书
工程造价管理专业大专生求职信
2013/10/06 职场文书
岗位职责的构建方法
2014/02/01 职场文书
简历的自我评价
2014/02/03 职场文书
励志演讲稿范文
2014/04/29 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
2019年教师入党申请书
2019/06/27 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers