自定义 ESLint 规则测试器 - 编写并验证规则

ESLint 自定义规则是开发者根据团队编码规范、项目特定需求编写的检测逻辑。ESLint 内置了数百条规则，但当内置规则无法满足你的特定场景时（如禁止使用某个内部已废弃的 API、强制特定的导入顺序、检测特定的代码模式），自定义规则就派上了用场。规则本质是一个导出 create() 方法的对象，该方法返回一个 AST 节点访问器，在代码解析后的抽象语法树上进行遍历检测。

一条 ESLint 规则的核心结构包括：
1. meta 对象：包含规则类型（problem/suggestion/layout）、文档描述、是否可自动修复、schema 配置等。
2. create(context) 方法：返回一个访问者对象，键为 AST 节点类型（如 CallExpression、VariableDeclaration），值为处理函数。
3. 在处理函数中使用 context.report() 报告违规，传入节点位置和消息。
本工具帮助你快速测试规则的核心检测逻辑，你可以在左侧编辑器中编写检查函数并立即验证效果。

AST（Abstract Syntax Tree，抽象语法树）是源代码的树状结构表示。ESLint 首先使用解析器（如 espree）将 JavaScript 代码解析为 AST，然后遍历这棵树，在每个节点上触发相应的规则检查。常见的 AST 节点类型包括：Program（根节点）、FunctionDeclaration（函数声明）、CallExpression（函数调用）、VariableDeclaration（变量声明）、Literal（字面量）等。理解 AST 结构是编写高质量 ESLint 规则的关键。推荐使用 AST Explorer 可视化理解代码的 AST 结构。

调试 ESLint 规则通常有以下几种方式：
1. 单元测试：使用 ESLint 官方的 RuleTester 工具，编写有效的和无效的代码示例，验证规则行为。
2. 在线工具：如本工具或 AST Explorer，快速编写规则逻辑并查看匹配结果。
3. 本地调试：在项目中配置 ESLint 插件路径，通过 --rulesdir 参数加载本地规则进行实际测试。
4. console.log 调试：在规则处理函数中输出节点信息，观察 AST 遍历过程。本测试器提供即时反馈，适合快速原型验证。

ESLint 规则按 meta.type 分为三大类：
1. problem（问题）：检测可能的错误，如 no-debugger、no-unused-vars、no-eval。
2. suggestion（建议）：提供改进建议，如 no-console（建议使用日志库）、prefer-const。
3. layout（布局）：代码格式相关，如缩进、空格、分号等（ESLint 已逐步将此类规则迁移到 Prettier）。
此外还有命名规范类（如 camelcase）、导入限制类（如 no-restricted-imports）、复杂度控制类（如 max-lines-per-function）等。

本工具在浏览器中模拟 ESLint 规则的核心检测流程：
1. 将测试代码按行解析，同时尝试进行基本的词法分析（识别关键字、标识符、字符串字面量等）。
2. 将解析后的上下文传递给用户编写的规则检查函数。
3. 规则函数逐行或全局分析代码，返回违规信息（消息、行号、列号）。
4. 工具收集所有违规信息，在结果面板中集中展示，并在代码预览中高亮违规行。
对于需要完整 AST 支持的复杂规则，建议在本地使用 ESLint 的 RuleTester 进行最终验证。本工具适合快速原型验证和简单规则测试。

在本工具中，规则检查函数接收以下参数：
lineText — 当前行的文本内容；
lineNumber — 当前行号（从1开始）；
fullCode — 完整的测试代码文本；
tokens — 当前行解析出的词法单元数组（实验性）。
函数应返回 null（无违规）或一个包含 message、column、endColumn 字段的违规对象。

ESLint 主要负责代码质量和潜在错误的检测，也可以处理代码风格问题。它通过 AST 分析来发现问题。
Prettier 是一个纯粹的代码格式化工具，专注于代码外观（缩进、换行、引号等），不关心代码逻辑。
最佳实践是：使用 ESLint 处理代码质量问题，使用 Prettier 处理格式化问题，通过 eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的格式规则，实现两者协同工作。