企业官网建设流程全解析

• Lint
• 代码质量

no-undeclared-class-members是 eslint-plugin-unicorn 提供的规则，要求类成员（字段、方法、getter、setter）在使用前必须在类体内显式声明，从而将拼写错误显性化，并让读者一眼看清类的形状。本文以规则文档 docs/rules/no-undeclared-class-members.md 为骨架，结合规则源码 rules/no-undeclared-class-members.js 与测试用例 test/no-undeclared-class-members.js，从使用示例、判定逻辑、编辑器建议到 TypeScript 支持进行完整讲解，帮助你理解它的边界行为并正确接入项目。

规则概览：启用配置与修复方式

• 规则名：no-undeclared-class-members
• 规则类型：problem（问题类规则），报告的是潜在的运行时错误，而非风格分歧
• 推荐配置：在 ✅recommended配置中启用；在 ☑️unopinionated配置中禁用
• 修复方式：💡 支持通过编辑器建议手动修复（非自动 fix），由开发者逐条确认

这些元信息在规则源码的meta中均有对应声明：type: 'problem'、docs.recommended: true、hasSuggestions: true、schema: []（无任何可配置选项），参见 rules/no-undeclared-class-members.js。由于recommended: true，规则会被自动纳入recommended预设配置中。

核心动机：让类成员「先声明，后使用」

规则文档给出的设计理念非常清晰：

Class members should be declared when they are used throughthis. Declaring fields, methods, getters, and setters in the class body makes typos visible and gives readers the class shape upfront.

即：通过this访问的类成员应当先在类体中声明。这样做的两个直接收益是：

1. 让拼写错误可见：this.nmae这种笔误在未声明时会被规则直接标记，而不是在运行时静默得到undefined再抛出奇怪错误。
2. 让类的形状一目了然：读者打开类定义即可看到全部字段和方法，无需通读每个方法体去推断实例上有哪些属性。

规则报告的消息为Class member \{{name}}` is used but not declared.，建议消息为Declare `{{name}}` as a class field.`，定义见 rules/no-undeclared-class-members.js。

规则示例：文档中的正反例

规则文档给出了三组核心示例，全部可以直接粘贴到 ESLint 规则测试或实际项目中验证。

示例一：读取字段

// ❌ 未声明字段就被读取 class Foo { getName() { return this.name; } } // ✅ 显式声明字段 class Foo { name; getName() { return this.name; } }

示例二：调用方法

// ❌ 未声明方法就被调用 class Foo { callName() { this.name(); } } // ✅ 显式声明方法 class Foo { name() {} callName() { this.name(); } }

示例三：构造函数赋值视为声明

// ✅ 构造函数中的 this.name = name 被视为声明 class Foo { constructor(name) { this.name = name; } getName() { return this.name; } }

测试文件中的等价用例逐一验证了上述场景，见 test/no-undeclared-class-members.js。

判定逻辑：规则在源码层面如何工作

规则采用「收集 + 后置判定」的两阶段设计（见 rules/no-undeclared-class-members.js）：

1. 遍历阶段：通过context.on('MemberExpression', ...)收集所有this.x形式的成员访问；通过context.on('ClassBody', ...)收集所有类体。
2. 收尾阶段：在context.onExit('Program')时，对每个类体统计其「已声明成员名集合」，再逐一检查收集到的成员访问是否命中声明集合。

每个类体的报告流程由getProblemsForClassBody完成（rules/no-undeclared-class-members.js），报告需同时满足四个条件（shouldReportMemberAccess，见 rules/no-undeclared-class-members.js）：

• 该成员访问所属的this归属类体与当前类体一致（getThisOwnerClassBody会沿父链向上查找ClassBody，并在遇到非类方法的普通函数时停止，避免误判函数内部的独立this，见 rules/no-undeclared-class-members.js）；
• 不在静态上下文中（isInStaticContext，类体内static成员与静态块的this指向类本身而非实例）；
• 不是类元素自身的定义（例如字段初始化器name = this.value中this.value的访问会被当作定义过程的一部分，isClassElementDefinition见 rules/no-undeclared-class-members.js）；
• 成员名不在已声明集合中。

「已声明成员」的统计口径

getDeclaredClassMemberNames（rules/no-undeclared-class-members.js）会从三处收集声明：

1. 类体中的静态命名成员：非 static 的字段（PropertyDefinition）、方法（MethodDefinition）、getter/setter（AccessorProperty）以及 TS 抽象成员，且键名必须是可静态确定的（标识符、字符串字面量、无插值模板字面量，见getStaticNamerules/no-undeclared-class-members.js）。constructor会被预先加入集合。
2. 构造函数的参数属性（TS）：constructor(public name: string) {}这类TSParameterProperty会为对应名字登记声明（含带默认值的AssignmentPattern，见 rules/no-undeclared-class-members.js）。
3. 构造函数内的简单赋值：构造函数体中所有this.x = ...形式（运算符严格为=）的赋值表达式都会被当作声明。该遍历通过walkNode递归进行，并会跳过嵌套的函数、箭头函数与类，避免把闭包内对this的赋值算进来（shouldSkip见 rules/no-undeclared-class-members.js）。

对extends类的豁免

规则文档明确说明：带extends的类会被整体忽略，因为被访问的成员可能来自父类（superclass）。在源码中对应classBody.parent.superClass存在时直接continue（rules/no-undeclared-class-members.js）。测试用例class Foo extends Bar { getName() { return this.name; } }被判定为合法，验证了这一行为（test/no-undeclared-class-members.js）。

边界行为：哪些情况不会报告

规则文档列出了明确的不支持/不报告场景，均有对应测试佐证：

编辑器建议（Suggestion）：何时提供、如何插入

规则虽然不做自动修复，但会对简单赋值场景提供编辑器建议。具体条件（见 rules/no-undeclared-class-members.js）：

• 成员访问是简单赋值目标：this.name = name且运算符为=（isSimpleAssignmentTarget，rules/no-undeclared-class-members.js）；
• 不在构造函数中（构造函数赋值已被视为声明，自然不需要建议）；
• 每个名字只建议一次。

而读取、调用、复合赋值（+=）、自增自减（++）以及构造函数内的赋值都只报告错误、不提供建议。测试中的this.name += name与this.name++用例正是复合赋值与更新的代表（test/no-undeclared-class-members.js）。

建议的插入逻辑getInsertClassFieldSuggestion（rules/no-undeclared-class-members.js）会：

1. 若类体非空：以第一个成员前的注释或成员为插入锚点，按成员缩进 + name + ;的格式插入字段声明，并跳过首成员与左花括号同行的单行类（此时无法干净插入）；
2. 若类体为空：在右花括号前插入带缩进的name;声明；
3. 缩进通过 rules/utils/get-indent-string.js 从上下文行首空白推导，保证插入结果与代码风格一致。

重要注意：字段声明会改变可观察行为

规则文档特别强调了一个容易被忽略的运行时差异：

Declaring a class field likename;creates an own property with the valueundefinedon every instance before any method runs. This can change observable behavior, for exampleObject.hasOwn(instance, 'name'), so this rule provides editor suggestions instead of an autofix.

即name;这样的字段声明会在每个实例上、在任何方法执行前创建一个值为undefined的自有属性。这会改变可观察行为，例如Object.hasOwn(instance, 'name')的结果会从false变为true。正是因为这个原因，规则只提供编辑器建议（需人工确认），而不是直接自动修复，避免在不经意间改变程序语义。

TypeScript 支持

规则完整支持 TypeScript 语法，测试见 test/no-undeclared-class-members.js：

视为已声明的 TS 写法：

class Foo { declare name: string; // declare 字段声明 getName() { return this.name; } } abstract class Foo { abstract name: string; // 抽象字段 getName() { return this.name; } } class Foo { constructor(public name: string) {} // 参数属性 getName() { return this.name; } }

会报告的 TS 写法：

// ❌ 普通构造函数参数不会声明成员 class Foo { constructor(name: string) {} getName() { return this.name; } } // ❌ 类型断言包裹的 this 访问同样被追踪 class Foo { getName() { return this.name as string; } } // ❌ 非空断言 this!.name 同样被追踪 class Foo { getName() { return this!.name; } }

源码层面，TS 的支持体现在两个集合：classMemberTypes中包含了TSAbstractAccessorProperty、TSAbstractMethodDefinition、TSAbstractPropertyDefinition三类抽象成员（rules/no-undeclared-class-members.js），而transparentExpressionWrapperTypes中的TSAsExpression、TSNonNullExpression、TSSatisfiesExpression、TSTypeAssertion、TSInstantiationExpression等包装节点会被透明剥离后再判断是否为this（rules/no-undeclared-class-members.js）。此外规则还声明了languages: ['js/js']，仅面向 JavaScript/TypeScript 代码。

如何接入项目

no-undeclared-class-members已包含在recommended预设中，使用官方推荐配置即可直接生效：

// eslint.config.js（flat config） import unicorn from 'eslint-plugin-unicorn'; export default [ unicorn.configs.recommended, // ... ];

如需在非recommended的配置中单独启用：

export default [ { plugins: {unicorn}, rules: { 'unicorn/no-undeclared-class-members': 'error', }, }, ];

该规则没有任何配置选项（schema: []），开关注入'error'或'warn'即可。在启用前，建议先结合本文「边界行为」一节确认代码库中是否存在extends继承、静态成员、Object.assign动态赋值等豁免场景，避免误报干扰；同时留意「字段声明改变可观察行为」的注意事项，对编辑器建议逐条人工确认后再应用。

• Lint
• 代码质量