如何在 Angular 中将 i18n 模板用于 eslint？

Posted 2023-03-27

技术标签:

【中文标题】如何在 Angular 中将 i18n 模板用于 eslint？【英文标题】：How does one utilize the i18n template for eslint in Angular? 【发布时间】：2021-08-04 00:55:37 【问题描述】：

我希望能够使用 eslint angular 模板来检查 i18n 标签，如下所示 https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/i18n.ts 并在此处列出 https://github.com/angular-eslint/angular-eslint#readme，但是对于如何激活它或需要什么，并没有任何有用的说明放入配置中以使其工作。我只需要知道如何将其“打开”即可开始检查。任何帮助将不胜感激。

更新：

这是我正在尝试（但失败）的一个示例：

在.eslintrc.json，我正在尝试添加@angular-eslint/template/i18n：


  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    
      "files": [
        "*.ts"
      ],
      "parserOptions": 
        "project": [
          "tsconfig.json"        ],
        "createDefaultProgram": true,
        "tsconfigRootDir": "",
        "ecmaVersion": 2017
      ,
        "env": 
            "es6": true
        ,
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": 
        "arrow-body-style": 0,
        "@typescript-eslint/naming-convention": [
            "error",
            
                "selector": "enumMember",
                "format": [
                    "camelCase",
                    "UPPER_CASE"
                ]
            
        ],
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "off",
          
            "accessibility": "explicit"
          
        ],
        "@typescript-eslint/no-non-null-assertion": "off",
        "brace-style": [
          "error",
          "1tbs"
        ],
        // note you must disable the base rule as it can report incorrect errors
        "no-shadow": "off",
        "@typescript-eslint/no-shadow": [
            "error"
        ]
      
    ,
    
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": 
        "@angular-eslint/template/i18n": [
            "warn",
             "items": ["check-id", "check-text"] 
        ]
      
    
  ]

当我这样做时，我得到了错误：

An unhandled exception occurred: .eslintrc.json#overrides[1]:
        Configuration for rule "@angular-eslint/template/i18n" is invalid:
        Value "items":["check-id","check-text"],"checkId":true,"checkText":true,"checkAttributes":true,"ignoreAttributes":["charset","class","color","colspan","fill","formControlName","height","href","id","lang","src","stroke","stroke-width","style","svgIcon","tabindex","target","type","viewBox","width","xmlns"] should NOT have additional properties.

如果我将名称从 @angular-eslint/template/i18n 更改为 template-i18n，它会运行并扫描我的所有 .html 文件，但会为每个显示 1:1 error Definition for rule 'template-i18n' was not found template-i18n 的文件返回一个错误

【问题讨论】：

【参考方案1】：

您好，我 更新了每个 maplion 的 cmets

假设它是 i18n 构建并尝试帮助您设置构建以进行本地化，即 i18n。尝试这两个选项，第一个是使用 i18n 构建配置您的 build。其次，是使用另一个库i18n-Lint，这更容易恕我直言。简短回答此启用您要使用的模板"template-i18n": [true, "check-id", "check-text"]

首先在您要检查的内容上设置您的架构，即在.eslintrc.json 中仅设置id、strings 或both：

 // per MapLions feedback, i updated the full section, mine is different
  
 //  1 - tell it which files you want
  "files": [
    "*.html"
  ],
  // 2 - include this plugin
  "extends": [
    "plugin:@angular-eslint/template/recommended"
  ],
  "rules": 
    "@angular-eslint/template/i18n": [
        "warn",
         // 3 - setup your rules here
            "checkId": true,
            "checkText": true,
            "checkAttributes": true
        
    ]
  
 
  ...

然后enable就这样。

"template-i18n": [true, "check-id", "check-text"]

check-id 确保 i18n 属性已指定 ID check-text 确保没有带有文本内容但没有 i18n 属性的元素

在您的规则设置中设置"@angular-eslint/template/i18n": "warn", 然后在您的构建中，您可以设置提取或测试

  
    "name": myapp...",
    "version": "..",
    "angular-cli": ,
    "scripts": 
        "------------- your app -----------": "",
        "start": "ng serve --configuration=test --proxy-config proxy.conf.json --live-reload false",
./node_modules/@angular/cli/bin/ng build --configuration=prod-en-us",
        "build:prod:fr-ca": "node --max_old_space_size=10240 ./node_modules/@angular/cli/bin/ng build --configuration=prod-fr-ca",
        "build:prod:multilang": "npm run build:prod:en-us & npm run build:prod:fr-ca",
        "build:debug": "node --max_old_space_size=10240 ./node_modules/@angular/cli/bin/ng build --configuration=prod-en-us --verbose",

        
        "extract-i18n-html": "ng xi18n --output-path locale",
        "extract-i18n-ts": "ngx-extractor --input src/**/*.ts --format=xlf --out-file=src/locale/messages.xlf",
        "extract-i18n": "npm run extract-i18n-html & npm run extract-i18n-ts",
        "merge-i18n": "xliffmerge --profile xliffmerge.json -v",
        "i18n": "./node_modules/.bin/ng-xi18n --i18nFormat=xlf",
        "lint": "tslint \"src/**/*.ts",

        ....
        "------------- setup build for yourComponents -----------": "",
        "start:...",
        "build:...",
        "build:myComponents:prod:multilang": "npm run build:myComponents:prod:en-us & npm run build:myComponents:prod:fr-ca",
        "extract-i18n-html:myComponents": "ng xi18n myComponents --output-path src/locale",
        "extract-i18n-ts:myComponents": "ngx-extractor --input projects/myComponents/**/*.ts --format=xlf --out-file=projects/myComponents/src/locale/messages.xlf",
        "extract-i18n:myComponents": "npm run extract-i18n-html:myComponents & npm run extract-i18n-ts:myComponents",
        "merge-i18n:myComponents": "xliffmerge --profile projects/myComponents/xliffmerge.json -v",

        ...
        "------------- your  tests -----------": "",
        "test": "ng test",
        ...
    ,
    "private": true,
    "dependencies": 
        "@angular/animations": "7.0.2",
        ...
        "@ngx-translate/i18n-polyfill": "0.2.0",
        ...
    ,
    "devDependencies": 
        "@angular-devkit/build-angular": "0.10.3",
        ...
        "ngx-i18nsupport": "0.16.2",
        ....

选项 2：i18n-lint

使用https://www.npmjs.com/package/i18n-lint

CLI
Installing i18n-lint globally via npm gives you the i18n-lint binary.

        $ npm install -g jwarby/i18n-lint
        
        $ i18n-lint --help

Usage: i18n-lint [OPTIONS] <file ...>

  Options:

    -h, --help                              output usage information
    -V, --version                           output the version number
    -a, --attributes <attributes>           Comma-separated list of HTML attributes to lint (default: 'alt,title')
    -i, --ignore-tags <tags>                Comma-separated list of names of tags to ignore whilst linting (default: 'script,style')
    -t, --template-delimiters <delimiters>  Template delimiters used in source files.  For example, Mustache-like templating languages should use ''
    -r, --reporter <reporter>               Specify which reporter to output results with
    --exclude <exclusion patterns>          Comma-separated list of glob patterns to ignore,  e.g. "/test_subdir/,ignored.html"
    --color                                 Force colored output
    --no-color                              Disable colored output

  Use `man i18n-lint` for more information
API
i18n-lint can be used in other projects as a library. After installing, simply require the module.

        $ npm install --save jwarby/i18n-lint
        
        var i18nlint = require('i18n-lint');

// Lint a file
var errors = i18nlint('myfile.html', 
  // ... options ...
);

// Lint a string
var errors = i18nlint.scan('<div>Untranslated String!</div>', 
  // ...options...

然后你就可以使用它了

CLI
After installing, you should be able to type i18n-lint into a terminal.
# Display version and exit
$ i18n-lint --version

# Lint myfile.html
$ i18n-lint myfile.html

# Lint all HTML files using a glob pattern
$ i18n-lint views/**/*.html

# Set options using --<option name> <optionValue>
$ i18n-lint --some-option "someValue" views/**/*.html

【讨论】：

这很有帮助，谢谢。我什至没有意识到 i18n-lint 的存在。不过，我很难让它爬取多个文件夹级别。例如，如果我使用i18n-lint **/*.html，我只会得到 dist/index.html 和 src/index.html，而目前，项目中没有任何 html 有任何 i18n。有没有办法在没有您提到的代码脚本（即使用 cli）的情况下完成此操作？我想我明白了；我只需要将 glob 模式用引号括起来，它似乎可以正常工作。关于第一个选项，您能否更明确地说明每件事的去向？我仍然对您如何引用模板以及不是什么感到模糊。例如，@angular-eslint/template/i18n 似乎应该是一个“扩展”插件，但这似乎不起作用。感谢您的反馈，很高兴您解决了问题 :)【参考方案2】：

先生。 Transformer 让我走上了正轨，我能够让他的选项 1 与 .eslintrc.json 中的以下内容一起使用：

      ...
      "rules": 
        "@angular-eslint/template/i18n": [
            "warn",
             
                "checkId": true,
                "checkText": true,
                "checkAttributes": true
            
        ]
      
      ...

这是完整的 .eslintrc.json 供参考：


  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    
      "files": [
        "*.ts"
      ],
      "parserOptions": 
        "project": [
          "tsconfig.json"        ],
        "createDefaultProgram": true,
        "tsconfigRootDir": "",
        "ecmaVersion": 2017
      ,
        "env": 
            "es6": true
        ,
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": 
        "arrow-body-style": 0,
        "@typescript-eslint/naming-convention": [
            "error",
            
                "selector": "enumMember",
                "format": [
                    "camelCase",
                    "UPPER_CASE"
                ]
            
        ],
        "@typescript-eslint/consistent-type-definitions": "error",
        "@typescript-eslint/dot-notation": "off",
        "@typescript-eslint/explicit-member-accessibility": [
          "off",
          
            "accessibility": "explicit"
          
        ],
        "@typescript-eslint/no-non-null-assertion": "off",
        "brace-style": [
          "error",
          "1tbs"
        ],
        // note you must disable the base rule as it can report incorrect errors
        "no-shadow": "off",
        "@typescript-eslint/no-shadow": [
            "error"
        ]
      
    ,
    
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": 
        "@angular-eslint/template/i18n": [
            "warn",
             
                "checkId": true,
                "checkText": true,
                "checkAttributes": true
            
        ]
      
    
  ]

【讨论】：

以上是关于如何在 Angular 中将 i18n 模板用于 eslint？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Angular 中将此模板驱动的表单更改为反应式表单？

如何在Angular的模板中将标记及其属性组合在一起编写？

Angular Universal 与 i18n（服务器端渲染）

如何在 Angular 2 中将 SASS 用于组件样式？

如何使 Angular 11 i18n 在 NRWL NX workspace.json 中工作？

Django / i18n：如何在模板中转换方法结果？