ESLint 规则入门:如何配置重要性及选项(2)

news/2024/12/1 14:42:25/

规则是 ESLint 中一个比较重要的核心概念之一,因为究竟报不报错,是由规则来确定的。

规则的重要性

在 ESLint 中,本身可以配置规则的重要性,总共分为三个级别:

  • off 或者 0: 关闭这条规则
  • warn 或者 1:这条规则的级别为警告级别
  • error 或者 2:这条规则的级别为错误级别

例如:

{"rules": {"no-undef": "error","semi": ["warn", "always"]}
}

在上面的规则配置中,semi 对应的值为一个数组,数组的第一项是上面所说的规则重要性,第二项则是该条规则配置可选项,关于这个配置可选项,不同的规则能够填入的值是不一样的。关于具体能够填写的值,那么就要去这条规则的说明页面去查阅。

接下来我们就针对 semi 这条规则做一个介绍,semi 可配置值如下:

  • always:这是默认值,代表语句结束需要插入分号
  • never: 在没有 ASI 风险情况下,不需要插入分号

ASI 英语全称叫做 automatic semicolon insertion,这个翻译成中文就是自动分号插入。所谓 ASI 风险,是指由于有这个机制,可能会导致意外的行为或者错误。

function example() {return{message: 'Hello, world!'}
}

在上面的代码中,我们本意是要返回一个对象,但是由于 ASI 机制,这里就会产生意外的行为,导致这个函数返回一个 undefined 而非预期的对象。

如果值为 always,那么还可以配置一个额外的对象:

  • omitLastInOneLineBlock:配置为 true,表示禁止在单行代码块中的最后一个语句使用分号
  • omitLastInOneLineClassBody:配置为 true,表示禁止在单行类里面的最后一个语句使用分号

如果值为 never,那么也是可以配置一个额外的名为 beforeStatementContinuationChars 的对象:

  • beforeStatementContinuationChars”: “any”(默认):如果下一行以[, (, /, +, 或 -]开始,则忽略语句末尾的分号(或缺少分号)
let a = 1
+1 // 正确:分号被忽略let b = 2
;+2 // 正确:分号也可以
  • beforeStatementContinuationChars”: “always”:如果下一行以[, (, /, +, 或 -]开始,则要求在语句末尾使用分号
let a = 1
+1 // 错误:要求在语句末尾使用分号let b = 2
;+2 // 正确:添加了分号
  • beforeStatementContinuationChars”: “never”:即使下一行以[, (, /, +, 或 -]开始,只要没有引起 ASIAutomatic Semicolon Insertion,自动分号插入)的风险,也禁止在语句末尾使用分号
let a = 1
+1 // 正确:没有 ASI 风险,不需要分号let b = 2
;+2 // 错误:不允许在没有 ASI 风险的情况下使用分号

规则注释

在具体的代码文件里面,可以以注释的方式来配置规则

/* eslint eqeqeq: "off", curly: "error" */
/* eslint eqeqeq: 0, curly: 2 */
/* eslint quotes: ["error", "double"], curly: 2 */

规则注释的优先级会高于配置文件里面的规则。

一般在如下的场景中可能会涉及到使用注释规则:

  1. 针对特定的文件或者代码片段需要指定特殊规则,比如我们针对某一个代码片段去禁用 ESLint 检查
/* eslint-disable */
console.log('Hello')
/* eslint-enable */

或者只禁用某一个规则

/* eslint-disable semi */
console.log("Hello");
/* eslint-enable semi */
  1. 指定某个文件的特殊配置,有时我们需要针对某个文件指定和其他文件不同的 ESLint 配置,这种情况下也可以使用注释的形式,这样就不需要去修改主要的配置文件
/* eslint-env node, mocha */

在上面的注释汇总,我们声明 ESLint 的检查环境为 node 和 mocha,这就意味着在检查该文件的时候,ESLint 会预设一些 node 和 mocha 中的全局变量,比如 process、describe、it。

  1. 临时禁用某条规则
// eslint-disable-next-line no-unused-vars
const tempVariable = 'Temporarily not used';

在上面的注释中,我们使用了 eslint-disable-next-line,代表只禁用下一行的代码检查,后面跟上了具体的规则,表示禁用下一行代码的某一条规则的检查,不影响之后的代码。

另外在配置文件中,有如下的配置选项:

  • noInlineConfig:禁止行内注释形式的规则
  • reportUnusedDisableDirectives:用于是否报告有未使用的 eslint-disable 指令

例如:

/* eslint-disable-next-line no-console */
console.log('Hello');

上面的代码是可以正常工作的,eslint-disable-next-line no-console 这条行内注释规则是有用的,但是如果我们把下面的 console 注释调用:

/* eslint-disable-next-line no-console */
// console.log('Hello');

那么上面的这一条行内注释规则就变成了一条无用的注释规则

更多关于行内注释规则,可以参阅官网资料:https://eslint.org/docs/latest/use/configure/rules#using-configuration-comments

规则参照表

你可以在 https://eslint.org/docs/latest/rules/ 看到 ESLint 里面的所有规则

在官方的规则参照表中,每一条规则后面有三个符号,对应的含义如下:

🔧💡
在配置文件中的 “extends”: “eslint:recommended” 属性会启用此规则。此规则报告的一些问题可以通过 –fix 参数自动修复。此规则报告的一些问题可以通过编辑器建议手动修复。

http://www.ppmy.cn/news/1551506.html

相关文章

RFdiffusion Potential类解读

1. Potential 类 功能 Potential 是一个接口类(抽象类),用于定义潜在函数的接口,要求继承它的类必须实现 compute 方法。它的设计遵循 面向对象编程的多态性原则,通过抽象接口确保子类实现特定功能,同时定义了一个通用的 API(即 compute 方法)。源代码: class Poten…

SpringBoot开发——详细讲解 Spring Boot 项目中的 POM 配置

文章目录 一、POM 文件简介二、单模块项目的 POM 配置1. 创建基本的 Spring Boot 单模块项目2. 重点解析三、多模块项目的 POM 配置1. 多模块项目结构2. 父模块 POM 文件3. 子模块 POM 文件4. 重点解析结语在 Spring Boot 项目中,POM(Project Object Model)文件起着关键作用…

前端---CSS(部分用法)

HTML画页面--》这个页面就是页面上需要的元素罗列起来,但是页面效果很差,不好看,为了让页面好看,为了修饰页面---》CSS CSS的作用:修饰HTML页面 用了CSS之后,样式和元素本身做到了分离的效果。---》降低了代…

使用Github Action将Docker镜像转存到阿里云私有仓库,供国内服务器使用,免费易用

文章目录 一、前言二、 工具准备:三、最终效果示例四、具体步骤第一大部分是配置阿里云1. 首先登录阿里云容器镜像服务 [服务地址](https://cr.console.aliyun.com/cn-hangzhou/instances)2. 选择个人版本3. 创建 命名空间4. 进入访问凭证来查看,用户名字…

pip 安装指定镜像源

pip 安装指定镜像源 使用 pip 安装时,可以通过指定镜像源来加速安装速度,尤其在网络状况不佳或需要访问国内镜像源的情况下。 常见的国内镜像源 清华大学: https://pypi.tuna.tsinghua.edu.cn/simple 阿里云: https://mirrors.aliyun.com/pypi/simple …

Monitor 显示器软件开发设计入门二

基础篇--显示驱动方案输出接口介绍 写在前面:首先申明,这篇文章是写给那些初入显示器软件行业的入门者,或是对显示器没有基本知识的小白人员。如您是行业大咖大神,可以绕行,可看后期进阶文章。 上篇介绍了输入接口及相…

AI重塑电商未来:从购物推荐到供应链优化的全面解读

目录 引言 第一部分:AI技术在电商中的创新应用 1.1 智能购物推荐:从千人千面到实时个性化 实现方法: 案例分析: 1.2 会员分类与客户细分:从标签化到情感理解 实现方法: 案例分析: 1.3 …

vue实现excel导出导入

文章目录 安装xlsx依赖和file-saver依赖Excel导出使用element-ui的el-table展示数据定义导出按钮将数据导出 excel导入定义文件导入显示框定义导入按钮解析选择的文件进行导入 安装xlsx依赖和file-saver依赖 npm install xlsx -S npm install file-saver -SExcel导出 使用ele…