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 相关文章推荐
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
js打开新窗口方法整理
Feb 17 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
vuex的使用及持久化state的方式详解
Jan 23 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
js中!和!!的区别与用法
May 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
javascript AutoScroller 函数类
2009/05/29 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python lxml模块安装教程
2015/06/02 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Yahoo-PHP面试题3
2012/01/14 面试题
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Nginx虚拟主机的搭建的实现步骤
2022/01/18 Servers