eslint 的三大通用规则详解

安装

可以全局安装，也可以在项目下面安装。 如下是在项目中安装示例，只需要在 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Eslint 配置及规则说明

    详解Eslint 配置及规则说明

    本文介绍了详解Eslint 配置及规则说明,分享给大家,具体如下: 中文官方网站 安装 可以全局安装,也可以在项目下面安装. 如下是在项目中安装示例,只需要在 package.json 中添加如下配置,并进行安装: "eslint": "^4.11.0" 配置 配置方式有两种,但建议使用文件配置的形式,比较独立,便于维护. 使用文件配置的方式:在项目的根目录下,新建一个名为 .eslintrc 的文件,在此文件中添加一些检查规则. 文件配置方式 env:你的脚本将要

  • 浅谈开发eslint规则

    开发 eslint 规则 前端的日常开发离不开各种 lint 的支持,使用 lint 的一种误解是:个人能力不足,必须 lint 规范才能写出规范的代码,实际上规范的定义主要取决于开源项目作者的习惯,或者公司团队编码的习惯,即使两个前端专家,写出的代码规范也会有差别. 今天主题聊聊 eslint,作为最主流的 JavaScript lint 工具深受大家喜爱,而 JSHint 却逐渐淡出了大家的视线,使用的比较少了 常用的 eslint 扩展有 standard,airbnb 等 剖析 esli

  • eslint 的三大通用规则详解

    安装 可以全局安装,也可以在项目下面安装. 如下是在项目中安装示例,只需要在 package.json 中添加如下配置,并进行安装: >"eslint": "^4.11.0" 配置 配置方式有两种,但建议使用文件配置的形式,比较独立,便于维护. 使用文件配置的方式:在项目的根目录下,新建一个名为 .eslintrc 的文件,在此文件中添加一些检查规则. 文件配置方式 env:你的脚本将要运行在什么环境中 Environment可以预设好的其他环境的全局变量,如

  • Redis中键和数据库通用指令详解

    Redis中键和数据库通用指令详解

    目录 一.Redis键(key)通用指令 1.key基本操作 2.时效性控制 3.查询模式 4.其它操作 二.数据库通用指令 1.基本操作 2.相关操作 一.Redis键(key)通用指令 可以参考菜鸟教程:Redis 键命令用于管理 redis 的键 key特征:key是一个字符串,通过key获取redis中保存的数据. 1.key基本操作 命令 功能 del key 该命令用于在 key 存在时删除 key exists key 检查给定 key 是否存在 type key 返回 key 所

  • Mysql字符集和排序规则详解

    目录 前言 什么是字符集 什么是比较规则 常用字符集 ASCII字符集 ISO8859-1 GB2312 GBK字符集 Unicode字符集 注意点 Mysql中查询字符集和比较规则 查询字符集 查询比较规则 前言 计算机存储数据的方式都是二进制数据,但是我们在mysql中存储的是字符串数据,那么这些数据到底在Mysql中如何存储呢?这就涉及到字符集的概念. 什么是字符集 举例如下,假设存在编码集test,只能识别a,b,A,B这几项,同时编码规则如下: a---->00000001(0x01)

  • Spring Data JPA 简单查询--方法定义规则(详解)

    Spring Data JPA 简单查询--方法定义规则(详解)

    一.常用规则速查 1 And 并且 2 Or   或 3 Is,Equals 等于 4 Between   两者之间 5 LessThan 小于 6 LessThanEqual   小于等于 7 GreaterThan 大于 8 GreaterThanEqual   大于等于 9 After 之后(时间) > 10 Before 之前(时间) < 11 IsNull 等于Null 12 IsNotNull,NotNull 不等于Null 13 Like 模糊查询.查询件中需要自己加 % 14

  • Android xUtils更新到3.0后的基本使用规则详解

    Android xUtils更新到3.0后的基本使用规则详解

    说实话,对于xUtils,是我最近才用到的开发框架(也是刚接触),对于其功能不得不说,简化了很多的开发步骤,可以说是非常好的开发工具,但是其最近更新到3.0也没有解决加载自定义ImageView报错的问题. xUtils简介 xUtils 包含了很多实用的android工具. xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更加灵活的ORM,更多的事件注解支持且不受混淆影响... xUitls 最低兼容android 2.2 (api level 8) 我总是喜欢用

  • java执行SQL语句实现查询的通用方法详解

    完成SQL查询 并将查询结果放入Vector容器,以便其他程序使用 /* * 执行sql查询语句 */ public static <T> Vector<T> executeQuery(Class<T> clazz, String sql, Object... args) { Connection conn = null; PreparedStatement preparedstatement = null; ResultSet rs = null; Vector<

  • 对nginx-naxsi白名单规则详解

    白名单规则语法: BasicRule wl:ID [negative] [mz:[$URL:target_url]|[match_zone]|[$ARGS_VAR:varname]|[$BODY_VARS:varname]|[$HEADERS_VAR:varname]|[NAME]] wl:ID (White List ID) 哪些拦截规则会进入白名单 wl:0 把所有拦截规则加入白名单 wl:42 把ID为42的拦截规则加入白名单 wl:42,41,43 把ID为42, 41和43的拦截规则加

  • layui lay-verify form表单自定义验证规则详解

    官方文档详见:https://www.layui.com/doc/modules/form.html#verify 虽然layui的官方文档已经是写的比较详细,但是初次使用的时候总会懵一下,这里纪录一下lay-verify自定义验证规则的时候到底放哪. html: <input type="text" lay-verify="digital" placeholder="请输入数字"> <button type="but

  • laravel 数据验证规则详解

    如下所示: return [ 'accepted' => '必须为yes,on,1,true', 'active_url' => '是否是一个合法的url,基于PHP的checkdnsrr函数,因此也可以用来验证邮箱地址是否存在', 'after:date' => '验证字段必须是给定日期后的值,比如required|date|after:tomorrow,通过PHP函数strtotime来验证', 'after_or_equal:date' => '大于等于', 'alpha'

  • python flask中动态URL规则详解

    URL是可以添加变量部分的, 把类似的部分抽象出来, 比如: @app.route('/example/1/') @app.route('/example/2/') @app.route('/example/3/') def example(id): return 'example:{ }'.format(id) 可以抽象为: @app.route('/example/<id>/') def wxample(id): return 'example:{ }'.format(id) 尖括号中的内

随机推荐