Angular i18n：如何忽略指定元素翻译并告知Linter？

嘿，这个场景我熟！针对你提到的<option>里的语言名称这类不需要翻译的内容，Angular的i18n生态提供了几种靠谱的方式来告诉linter和提取工具跳过它们：

• 使用官方的i18n-ignore属性
  这是最直接且官方支持的方案，只需给不需要翻译的元素添加这个属性即可。比如你的例子可以改成：

  <option value="en" i18n-ignore> English </option>
  <option value="es" i18n-ignore> Español </option>
  

  这个属性会让Angular的ng extract-i18n命令跳过提取该元素的文本，同时遵循官方规则的linter也会自动忽略这些内容，不会抛出未翻译的警告。

• 配置第三方i18n Linter的忽略规则
  如果你用的是第三方linter插件（比如eslint-plugin-angular-i18n），可以在ESLint配置文件里针对性添加忽略规则。比如：

  {
    "rules": {
      "angular-i18n/require-i18n": [
        "error",
        {
          "ignoreElements": ["option"],
          // 要是需要更精准，还可以按属性匹配：
          "ignoreAttributes": ["value"]
        }
      ]
    }
  }
  

  这样就能批量忽略所有<option>元素的翻译检查，或者只忽略带有特定属性的元素。

• 将文本标记为静态内容（进阶）
  如果你是通过组件类绑定的文本，可以把这些不需要翻译的内容定义为静态常量，并且不添加i18n标记。比如在组件里：

  // 静态语言名称，无需翻译
  readonly languageOptions = [
    { value: 'en', label: 'English' },
    { value: 'es', label: 'Español' }
  ];
  

  模板里直接绑定：

  <option *ngFor="let lang of languageOptions" [value]="lang.value">
    {{ lang.label }}
  </option>
  

  这种方式下，linter会识别到这是未标记i18n的静态绑定，只要你没有强制要求所有文本都必须翻译，就不会触发警告。

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