Angular 在可访问性上使用 eslint 会抛出错误

Question

我正在尝试使用 eslint 和 angular 来分析可访问性问题。但是出现这样的错误；

E:\Training\landing-app\src\app\app.component.spec.ts
  1:1  error  Definition for rule 'jsx-a11y/rule-name' was not found  jsx-a11y/rule-name

E:\Training\landing-app\src\app\app.component.ts
  1:1  error  Definition for rule 'jsx-a11y/rule-name' was not found  jsx-a11y/rule-name

E:\Training\landing-app\src\app\app.module.ts
  1:1  error  Definition for rule 'jsx-a11y/rule-name' was not found  jsx-a11y/rule-name

E:\Training\landing-app\src\app\news-api\na-article-list\na-article-list.component.spec.ts
  1:1  error  Definition for rule 'jsx-a11y/rule-name' was not found  jsx-a11y/rule-name

这是我的 package.json:

{
  "name": "landing-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "eslint": "eslint",
    "lint": "eslint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn run lint",
      "pre-push": "yarn run lint && yarn test"
    }
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "bootstrap": "^5.1.3",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-builders/jest": "latest",
    "@angular-devkit/build-angular": "~13.0.4",
    "@angular-eslint/builder": "13.0.1",
    "@angular-eslint/eslint-plugin": "13.0.1",
    "@angular-eslint/eslint-plugin-template": "13.0.1",
    "@angular-eslint/schematics": "13.0.1",
    "@angular-eslint/template-parser": "13.0.1",
    "@angular/cli": "~13.0.4",
    "@angular/compiler-cli": "~13.0.0",
    "@briebug/jest-schematic": "4.0.0",
    "@types/jest": "latest",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^8.2.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "husky": "^7.0.4",
    "jest": "latest",
    "jest-sonar-reporter": "^2.0.0",
    "typescript": "~4.4.3"
  },
  "jestSonar": {}
}

.eslintrc.json:

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:jsx-a11y/recommended"
      ],
      "plugins": [
        "jsx-a11y"
      ],
      "rules": {
        "jsx-a11y/rule-name": 2,
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended",
        "plugin:jsx-a11y/recommended"
      ],
      "rules": {}
    }
  ]
}

Answer 1

问题正是错误所述：名为 jsx-a11y/rule-name 的规则不存在。我想你是从他们的自述文件中复制的，但他们试图告诉你的是将 rule-name 替换为插件中实际规则的名称。

由于您已经扩展了他们推荐的规则集，因此只需删除引用不存在规则的行就足够了。

Angular 在可访问性上使用 eslint 会抛出错误

Angular with eslint on accessibility throws error

angular

eslint