如何利用 ESLint 自定义校验规则
前言
ESLint 是一个广泛被使用的 JavaScript 代码校验工具，它能够帮助开发者在编写 JavaScript 代码过程中检测出常见的错误和潜在问题，规范代码风格并统一团队代码风格。但是，ESLint 没有覆盖到所有情况，这时候我们需要自定义校验规则来满足特定需求。
本文将会讲解如何利用 ESLint 自定义规则，具体包括如何编写规则、如何添加规则、如何忽略规则等。
编写规则
在开始编写规则前，我们需要了解 ESLint 规则的类型和属性。ESLint 规则可以分为如下 4 种类型：
- 问题类型（问题 Type）：满足条件语出现了一个问题
- 建议类型（建议 Type）：满足条件语出现了潜在问题
- 自定义类型（自定义 Type）：满足条件语出现了自定义的问题或建议
- 规则针对的之前分类未考虑到的类型（规则 Type）：根据用户的配置可以分别成问题类型或者建议类型
ESLint 规则的属性包括如下内容：
- context：这里会被编译的内容（例如，函数参数、类方法），包括它们定义的子级和它们引用的变量。这个字段可以为空，但是一个解析器需要将一个有效值指定给它。
- meta：这个键值对包含着这个规则的元数据，包括规则的类型（问题或者建议）、适用的语言层（ES5, ES6, ESLint自定义）、可操作选项和任何跟所描述的问题相关的其他信息。
- create：这是这个函数的主要部分。它将会被调用，用来为匹配的内容规定默认的匹配条件。所有的消息都是通过这里被检查到的。
在了解了 ESLint 的规则类型和属性后，我们就可以开发自定义规则了。
一个自定义规则必须包含如下代码：
-- -------------------- ---- -------
-------------- - -
----- -
----- ---------- -- ---------
----- -
------------ ------------- -- --- -------
--------- --------- --------
------------ -----
---- ---- -- --- --------------
-
--
------- -------- --------- -
-- ---------
-
-其中 meta 和 create 是 ESLint 自定义规则必须包含的属性。下面我们分别介绍 meta 和 create 属性。
meta 属性
meta 属性描述了规则的元数据，包括类型、类别、运行环境、指针选项以及有关规则的任何其他信息等。
-- -------------------- ---- -------
-------------- - -
----- -
----- ----------
----- -
------------ --------- --- --- -- ------ ------- --- ---------
--------- --------- --------
------------ -----
---- ----------------------------------------
--
------- -
-- ---- -- ---- ------
-
--
------- -------- --------- -
-- ---- -- ---- ------ --------
-
-上述代码中，我们定义了一个禁止 alert、prompt 以及 confirm 使用的规则。其元数据包括：
- 类型：问题类型（problem）。
- 描述信息：表示这个规则是关于什么的，即禁止 alert、prompt 以及 confirm 使用。
- 规则分类：表示该规则属于哪个规则分类，强制性错误（Possible Errors）。
- 是否推荐：表示该规则是否被推荐为可用的。
- 链接：包含指向代码示例、规则和插件的文档和其他资源的网址。
- schema：规则选项（parameters或指令）的定义。
create 属性
create 属性用于定义一个函数，这个函数用于检测出代码中出现的问题。
-- -------------------- ---- -------
-------------- - -
----- -
----- ----------
----- -
------------ ------------- -- --- -------
--------- --------- --------
------------ -----
---- ---- -- --- --------------
-
--
------- -------- --------- -
------ -
-- --------
-
-
-在 create 属性中，我们可以通过调用 context.report() 方法来向 ESLint 报告错误或者警告。以下为示例代码：
-- -------------------- ---- -------
-------------- - -
----- -
----- ----------
----- -
------------ ----------
--------- --------- --------
------------ -----
---- ---- -- --- --------------
-
--
------- -------- --------- -
------ -
-------- -------- ------ -
----- ------- - ----- -- - ---------
----------------
-----
-------
---
-
-
-
-上述代码中，我们定义了一个规则，它检查代码中所有的字面量。如果发现一个字面量，ESLint 就会报告错误。
添加规则
定义好了规则后，接下来我们需要添加它到配置文件中，从而真正地将规则应用到我们的项目中。
首先，在 .eslintrc 文件中添加自定义规则，示例如下：
{
"rules": {
"your-rule-name": "error"
}
}这里 "your-rule-name" 是你自定义规则的名字，而 "error" 表示该规则作为一个 Error 类型的错误来报告。如果你想让自定义规则成为一个 Warning，那么只需将 "error" 改为 "warn" 即可。
现在，ESLint 会检测配置文件中定义的自定义规则。
忽略规则
有时候，在某些情况下，您需要禁止 ESLint 检测指定的代码段，这时候您可以使用注释来忽略它。
可以通过下面的方式忽略掉某个规则检测的代码：
// eslint-disable-next-line your-rule-name var yourCode = "some code here";
或者，在单行注释中使用 ESLint 的 disable 或者 enable 规则控制代码段是否受到规则检测的限制。
/* eslint-disable */
alert('This code will not be checked');
/* eslint-enable */
alert('This code will be checked');结论
本文介绍了 ESline 自定义校验规则的相关知识，包括：
- 如何编写规则。
- 添加规则到项目中。
- 通过注释来忽略掉指定的代码段。
使用 ESLint 自定义规则使得开发人员更加灵活地设置代码校验规则，可以更高效、科学地进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704caaad91dce0dc8503da3