如何利用 ESLint 自定义校验规则

如何利用 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 文件中添加自定义规则，示例如下：

-
  -------- -
    ----------------- -------
  -
-

这里 "your-rule-name" 是你自定义规则的名字，而 "error" 表示该规则作为一个 Error 类型的错误来报告。如果你想让自定义规则成为一个 Warning，那么只需将 "error" 改为 "warn" 即可。

现在，ESLint 会检测配置文件中定义的自定义规则。

忽略规则

有时候，在某些情况下，您需要禁止 ESLint 检测指定的代码段，这时候您可以使用注释来忽略它。

可以通过下面的方式忽略掉某个规则检测的代码：

-- ------------------------ --------------
--- -------- - ----- ---- ------

或者，在单行注释中使用 ESLint 的 disable 或者 enable 规则控制代码段是否受到规则检测的限制。

-- -------------- --
----------- ---- ---- --- -- ----------

-- ------------- --
----------- ---- ---- -- ----------

结论

本文介绍了 ESline 自定义校验规则的相关知识，包括：

  • 如何编写规则。
  • 添加规则到项目中。
  • 通过注释来忽略掉指定的代码段。

使用 ESLint 自定义规则使得开发人员更加灵活地设置代码校验规则，可以更高效、科学地进行开发。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6704caaad91dce0dc8503da3

阅读全文

精选内容

相关推荐

    暂无