如何在 Angular 中使用 i18n 模板进行 eslint? [英] How does one utilize the i18n template for eslint in Angular?

查看：42
本文介绍了如何在 Angular 中使用 i18n 模板进行 eslint?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我希望能够使用 eslint angular 模板来检查 i18n 标签，如下所示 

CLI通过 npm 全局安装 i18n-lint 为您提供 i18n-lint 二进制文件.$ npm install -g jwarby/i18n-lint$ i18n-lint --help用法:i18n-lint [OPTIONS] <file ...>选项:-h, --help 输出使用信息-V, --version 输出版本号-a, --attributes <属性>要 lint 的以逗号分隔的 HTML 属性列表(默认值:'alt,title')-i, --ignore-tags <标签>以逗号分隔的标签名称列表，在 linting 时要忽略(默认值:'script,style')-t, --template-delimiters <delimiters>源文件中使用的模板分隔符.例如，类似 Mustache 的模板语言应该使用 ''-r, --reporter <reporter>指定输出结果的报告器--exclude <排除模式>要忽略的 glob 模式的逗号分隔列表，例如/test_subdir/,ignored.html";--color 强制彩色输出--no-color 禁用彩色输出使用 `man i18n-lint` 获取更多信息应用程序接口i18n-lint 可以在其他项目中作为库使用.安装后，只需要这个模块.$ npm install --save jwarby/i18n-lintvar i18nlint = require('i18n-lint');//lint 一个文件var 错误 = i18nlint('myfile.html', {//... 选项 ...});//整理一个字符串var 错误 = i18nlint.scan('<div>未翻译的字符串！</div>', {//...选项...

然后就可以使用了

CLI安装后，您应该能够在终端中输入 i18n-lint.# 显示版本并退出$ i18n-lint --version# Lint myfile.html$ i18n-lint myfile.html# 使用 glob 模式整理所有 HTML 文件$ i18n-lint 视图/**/*.html# 使用 --

I would like to be able to utilize the eslint angular template that checks for i18n tags as shown here 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, but there isn't really any helpful instruction on how to activate it or what needs to be put in the config to make it work. I just need to know how to turn it "on" to start checking. Any help would be appreciated.

Update:

Here is an example of what I am trying (and failing) at doing:

In .eslintrc.json, I am trying to add @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"] }
        ]
      }
    }
  ]
}

When I do this, I get the error:

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.

If I change the name from @angular-eslint/template/i18n to template-i18n, it runs and scans all of my .html files, but returns an error for each one that says 1:1 error Definition for rule 'template-i18n' was not found template-i18n

解决方案

Hello I updated per maplion's comments

Assuming its the i18n build and try to help you setup the build for localization i.e. i18n. Try these two options, the first is to configure your build with the i18n build. Second, is use another lib i18n-Lint which is easier IMHO. Short answer this enables the template you want to use "template-i18n": [true, "check-id", "check-text"]

First setup you schema on what you want to check, i.e. just id, strings or 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 Makes sure i18n attributes have ID specified
  • check-text Makes sure there are no elements with text content but no i18n attribute

in your rules setup up "@angular-eslint/template/i18n": "warn", then in your build you can setup the extract or tests

  {
    "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",
        ....
    }
}

Option 2: i18n-lint

Use 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...

You can then use it

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

这篇关于如何在 Angular 中使用 i18n 模板进行 eslint?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆