如何编写一个 ESLint 插件？-JavaScript中文网-JavaScript教程资源分享门户

如何编写一个 ESLint 插件？

推荐答案

一个 ESLint 插件主要由以下几个部分构成：

规则 (Rules): 定义你希望 ESLint 检测的特定模式和建议的修复方法。
配置 (Configurations): 提供插件的默认配置，通常包括启用的规则和它们的配置选项。
可选：处理器 (Processors): 如果你的插件需要处理非 JavaScript 文件，则需要处理器来提取 JavaScript 代码。

以下是一个简单的 ESLint 插件示例，该插件检测变量名是否全部使用小写字母：

项目结构：

my-eslint-plugin/
├── lib/
│   ├── rules/
│   │   └── lowercase-variable-names.js
│   └── index.js
├── package.json

package.json:

{
  "name": "eslint-plugin-my-custom",
  "version": "1.0.0",
  "main": "lib/index.js",
  "peerDependencies": {
    "eslint": ">=7.0.0"
  }
}

lib/rules/lowercase-variable-names.js:

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

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

lib/index.js:

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

使用：

安装插件： npm install --save-dev ./my-eslint-plugin
配置 ESLint：.eslintrc.js

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

本题详细解读

插件结构

一个标准的 ESLint 插件通常包含以下几个部分：

package.json: 定义插件的元数据，例如名称、版本、入口点和依赖项等。
lib/index.js: 插件的入口点。它导出一个对象，包含 rules、configs (可选) 和 processors (可选)属性。
lib/rules/: 存放所有规则的目录。每个规则都是一个单独的文件，导出一个包含 meta 和 create 方法的对象。
lib/processors/ (可选): 如果插件需要处理非 JavaScript 文件，则需要处理器来提取 JavaScript 代码。
lib/configs/ (可选): 存放预设配置的目录。每个配置都应该导出一个对象，包含 plugins 和 rules 属性。

编写规则 (`rules/*.js`)

规则是插件的核心。每个规则文件导出一个对象，包含：

meta: 规则的元信息，包括：
- type: 规则类型，problem（潜在错误）、suggestion（建议改进）、layout（格式问题）
- docs: 规则的文档信息，包括描述、分类和是否被推荐。
- fixable: 可选，如果规则可以自动修复，可以是 "code" 或者 null。
- schema: 可选，规则配置项的 JSON Schema。
create(context): 一个函数，返回一个对象，其中属性是 AST (抽象语法树) 节点类型名称，值是处理这个节点的函数。 context 对象提供访问当前代码的上下文信息和报告错误的方法。

规则示例解析

在 lowercase-variable-names.js 示例中：

meta 定义了规则的类型、描述、分类和是否推荐。
create(context) 返回一个对象，其中键为 VariableDeclarator，表示当遇到变量声明节点时，执行此函数。
在函数内部，我们检查变量名是否只包含小写字母，如果不符合，就调用 context.report() 报告错误。
context.report() 接受一个对象，包含 node（问题发生的节点）和 message (错误信息)。

注册规则 (`lib/index.js`)

lib/index.js 文件是插件的入口点，它需要导出：

rules: 一个对象，键是规则名称，值是对应规则文件导入的对象。
configs (可选): 一个对象，键是配置名称（例如 'recommended'），值是包含 plugins 和 rules属性的对象。其中plugins 是一个数组，包含当前插件名。 rules 是一个对象，键是规则名称，值是 ESLint 规则的配置，例如 'warn', 'error' 或者数组表示的包含选项的规则配置。

使用插件

安装插件: 将插件安装为项目的开发依赖。
配置 ESLint: 在 ESLint 配置 (.eslintrc.js, .eslintrc.json 或 package.json 中的 eslintConfig) 中:
- 将插件添加到 plugins 数组中，使用插件的名称，可以省略 eslint-plugin- 前缀。
- 在 extends 数组添加预设配置，例如 plugin:my-custom/recommended。
- 或者在 rules 对象中，配置插件提供的规则，规则的名称格式为 plugin-name/rule-name。

其他

可以使用 eslint 提供的 AST Explorer 工具，方便的查看代码的 AST 结构，辅助编写规则。
可以使用 ESLint 提供的 RuleTester 进行规则单元测试，保证规则的正确性。

纠错
反馈