【问题标题】:How does one utilize the i18n template for eslint in Angular?如何在 Angular 中将 i18n 模板用于 eslint?
【发布时间】: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 的文件返回一个错误

【问题讨论】:

    标签: angular internationalization eslint


    【解决方案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
                }
            ]
          }
        }
      ]
    }
    
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-19
      • 2017-11-05
      • 2016-05-01
      • 1970-01-01
      • 2020-12-01
      • 1970-01-01
      • 2015-08-03
      相关资源
      最近更新 更多