Issue
I am trying to analysis accessibility issues using eslint
with angular. But getting errors like this;
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
here is my 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": {}
}
]
}
Solution
The problem is exactly what the error states: a rule named jsx-a11y/rule-name
does not exist. I suppose you copied this from their readme, but what they try to tell you is to replace rule-name
with the name of an actual rule in the plugin.
As you already extend their recommended rule set, it should be enough to just remove the line referencing the not existing rule.
Answered By - Grochni
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.