Angular 项目中强制使用自闭合标签的 ESLint 规则配置指南

本文介绍如何在 angular 项目中通过 @angular-eslint/template/prefer-self-closing-tags 规则，强制要求无子内容的组件标签必须采用自闭合语法（如 ），提升模板一致性与可维护性。

本文介绍如何在 angular 项目中通过 `@angular-eslint/template/prefer-self-closing-tags` 规则，强制要求无子内容的组件标签必须采用自闭合语法（如 ``），提升模板一致性与可维护性。

在 Angular 模板开发中，组件标签的书写风格直接影响代码可读性与团队协作效率。虽然 Angular 官方并不强制要求自闭合语法（例如 和 均为合法且等效），但统一采用自闭合形式可显著减少冗余、增强语义清晰度，并与现代前端框架（如 React/Vue）的模板规范保持一致。

为此，@angular-eslint 提供了专用规则：

"@angular-eslint/template/prefer-self-closing-tags": ["error"]

该规则会严格检查所有无子节点的自定义组件标签（即非原生 HTML 元素，且未包含文本、插值、结构指令或嵌套元素），要求其必须以自闭合形式书写。例如：

✅ 合法（通过校验）：

<app-header/> <app-footer [title]="'Home'"/> <app-user-card *ngIf="user"/>

❌ 非法（触发 ESLint 错误）：

<app-header></app-header> <app-footer [title]="'Home'"></app-footer> <app-user-card *ngIf="user"></app-user-card>

⚠️ 注意事项：

• 此规则仅作用于 Angular 模板（.html 文件），由 @angular-eslint/template 插件提供，需确保已正确安装并启用 @angular-eslint/eslint-plugin-template；
• 原生 HTML 空元素（如
  , ）不受影响，其闭合行为由 HTML 标准决定；
• 若组件实际包含内容（即使为空格或换行），规则将自动跳过——它基于 AST 解析真实 dom 结构，而非简单正则匹配；
• 不要混淆 html-eslint/require-closing-tags（面向通用 HTML，不兼容 Angular 模板解析器）或 react/self-closing-comp（仅适用于 JSX）。

配置步骤简明如下：

1. 确保已安装 @angular-eslint/eslint-plugin-template（通常随 @angular-eslint/schematics 自动引入）；
2. 在 .eslintrc.json 的 overrides 中针对 *.component.html 文件启用该规则：

   { "files": ["*.component.html"], "rules": {  "@angular-eslint/template/prefer-self-closing-tags": ["error"] } }

3. 运行 ng lint 或启用编辑器实时校验，即可立即生效。

最后需强调：该规则是风格约束型（formatting）而非语法强制型。它不会影响运行时行为，但能有效推动团队建立清晰、简洁、可预测的模板编码规范——尤其在大型项目中，这种一致性带来的长期维护收益远超初期适配成本。