如何通过ESLint校验开发人员传入Angular设计系统组件的属性值

前置基础 #

• 不要使用原生ESLint开发Angular模板校验规则，基于@angular-eslint工具链开发即可，它内置的Angular模板解析器可以识别组件选择器、输入属性等模板语法，生成可遍历的AST节点供规则逻辑使用。
• 你需要提前维护一份设计系统组件的元数据配置表，存储所有组件的必填输入、输入属性合法枚举值等信息，示例配置如下：

const DS_COMPONENT_CONFIG = {
  // 键为你的设计系统组件选择器
  'ds-button': {
    // 必填输入属性列表
    requiredInputs: ['style'],
    // 枚举类输入属性的合法取值映射
    inputEnums: {
      'style': ['Primary', 'Secondary', 'Tertiary']
    }
  },
  // 其他设计系统组件的配置按相同结构补充
}

核心规则实现逻辑 #

1. 必填属性校验规则 #

• 遍历AST中的元素节点，首先判断该元素的选择器是否属于你配置的设计系统组件集合。
• 读取该组件对应的requiredInputs配置列表，逐一校验列表内的属性是否存在于当前元素的属性集合中（包括静态属性、方括号绑定的动态属性）。
• 若某个必填属性不存在，直接抛出错误：[组件名] 组件的 [属性名] 为必填属性，请补充。

2. 输入属性值合法性校验规则 #

• 对已传入的属性，先判断该属性是否在inputEnums的配置范围内。
• 提取属性的取值：如果是静态属性直接取字符串值，如果是方括号绑定的字面量值（比如[style]="'Primary'"）则提取绑定的字面量值。
• 校验取值是否在对应枚举数组中，若不在则抛出警告/错误：[组件名] 组件的 [属性名] 仅支持取值 *Primary/Secondary/Tertiary*，当前传入值不被推荐。
• 对于绑定变量的动态值（比如[style]="btnStyle"），如果无法静态推断取值，可以选择跳过校验，避免误报。

规则发布与使用 #

• 自定义插件开发完成后发布到内部npm仓库，业务项目安装插件后，在ESLint配置文件的overrides中针对*.html文件启用你开发的模板规则即可。
• 若需要校验组件内联模板、动态创建组件时的输入属性合法性，可以额外补充TS层面的ESLint规则，逻辑同模板校验逻辑，仅需要切换为TS解析器，识别对应场景的AST节点即可。

内容的提问来源于stack exchange，提问作者Jamie Bohanna