是否有ESLint规则强制Angular组件使用自闭合标签？

目前**@angular-eslint官方套件中没有专门针对Angular组件强制自闭合标签的内置规则**，你尝试的html-eslint/require-closing-tags规则主要针对原生HTML标签，对Angular组件的识别和约束效果有限，这就是它无效的原因。

替代方案：自定义ESLint规则 #

你可以基于@angular-eslint/utils编写自定义规则，实现当Angular组件标签无内容时强制使用自闭合格式的需求。

1. 自定义规则示例

创建规则文件（比如rules/force-component-self-closing.ts）：

import { ESLintUtils } from '@typescript-eslint/utils';
import { parseTemplate } from '@angular-eslint/utils';

const createRule = ESLintUtils.RuleCreator(name => name);

export default createRule({
  create(context) {
    const sourceCode = context.getSourceCode();
    const template = parseTemplate(sourceCode.text, context.parserServices);

    template.traverse({
      Element(node) {
        // 匹配Angular组件选择器（这里以app-开头为例，可根据项目规则调整）
        if (node.name.startsWith('app-')) {
          const hasContent = node.children.length > 0;
          const usesClosingTag = node.endTag !== null;

          // 空内容且使用闭合标签时触发规则
          if (!hasContent && usesClosingTag) {
            context.report({
              node: sourceCode.getNodeByRangeIndex(node.startTag.end),
              message: '空内容的Angular组件必须使用自闭合标签',
              fix(fixer) {
                // 替换为自闭合标签，移除闭合标签部分
                return [
                  fixer.replaceTextRange(
                    [node.startTag.end - 1, node.startTag.end],
                    '/>'
                  ),
                  fixer.removeRange([node.startTag.end, node.endTag.end]),
                ];
              },
            });
          }
        }
      },
    });

    return {};
  },
  meta: {
    type: 'layout',
    docs: {
      description: '强制空内容的Angular组件使用自闭合标签',
      recommended: 'error',
    },
    fixable: 'code',
    schema: [],
  },
  name: 'force-component-self-closing',
  defaultOptions: [],
});

2. 在ESLint配置中引入规则

在.eslintrc.json中添加配置：

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

补充说明 #

Angular模板本身完全支持自闭合组件标签，自定义规则仅在代码风格层面做约束，不会影响Angular编译逻辑。你可以根据项目中组件选择器的实际规则（比如统一前缀）调整自定义规则中的匹配逻辑。

内容的提问来源于stack exchange，提问作者Brice Leclerc