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

推荐答案

一个 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:

// www.javascriptcn.com code example
module.exports = {
  meta: {
    type: 'problem', // 规则类型：'problem', 'suggestion', 'layout'
    docs: {
      description: '强制变量名使用小写字母',
      category: 'Stylistic Issues',
      recommended: 'warn', // 可选：'warn', 'error'
    },
    fixable: null, // 可选：'code' 或 null
    schema: [], // 配置选项的 JSON Schema
  },

  create(context) {
    return {
      VariableDeclarator(node) {
        if (node.id.type === 'Identifier' && !/^[a-z]+$/.test(node.id.name)) {
           context.report({
            node: node.id,
            message: '变量名必须使用小写字母',
          });
        }
      },
    };
  },
};

lib/index.js:

// www.javascriptcn.com code example
module.exports = {
  rules: {
    'lowercase-variable-names': require('./rules/lowercase-variable-names'),
  },
  configs: {
    recommended: {
      plugins: ['my-custom'],
      rules: {
        'my-custom/lowercase-variable-names': 'warn'
      }
    }
  }
};

使用：

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

// www.javascriptcn.com code example
module.exports = {
  "plugins": ["my-custom"],
  "extends": ["eslint:recommended","plugin:my-custom/recommended"],
  // 或者
  // rules:{
  //   'my-custom/lowercase-variable-names': 'warn'
  // }
};

本题详细解读

插件结构

一个标准的 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 进行规则单元测试，保证规则的正确性。

如何编写一个 ESLint 插件？