如何在 Angular 中使用 eslint 的 i18n 模板？

Question

我希望能够使用 eslint angular 模板来检查 i18n 标签，如此处所示 https://github.com/angular-eslint/angular-eslint/blob/master/packages/eslint-plugin-template/src/rules/i18n.ts and listed here 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 文件，但是 returns 每个文件都会出错1:1 error Definition for rule 'template-i18n' was not found template-i18n

Answer 1

你好，根据 maplion 的评论已更新

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

首先根据要检查的内容设置架构，即 id、strings 或 both in .eslintrc.json:

 // 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
        }
    ]
  }
 }
  ...

Then enable it like so.

"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

Answer 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 中使用 eslint 的 i18n 模板？

How does one utilize the i18n template for eslint in Angular?

internationalization

eslint

angular