如何防止规则 `@angular-eslint/template/i18n` 掉落 `mat-icon` 元素

Question

我使用规则@angular-eslint/template/i18n对包含文本节点但没有i18n属性的模板中的元素进行 lint。

Angular Material mat-icon元素使用内部文本来标识图标键，如下所示：

<mat-icon>menu</mat-icon>

因为它包含文本，所以它也被 eslint 检测。 不幸的是，我找不到一种方法来为这个规则添加例外来排除一些元素标签，比如mat-icon

这是我正在使用的 eslint 配置：

    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {
        "@angular-eslint/template/i18n": [
          "warn",
          {
            "checkId": false,
            "checkText": true,
            "checkAttributes": false
          }
        ]
      }
    }

Answer 1

由于 Angular 14.1 和SEO 友好连字图标的支持，您应该像这样更改您的 mat-icon 用法：

- <mat-icon>home</mat-icon>
+ <mat-icon fontIcon="home"></mat-icon>

这样做的好处是可以避免 i18n 问题，同时也可以防止您的图标名称出现在 Google 搜索结果页面中。