用于 Typescript 的 eslint-plugin-jsx-a11y

Question

我正在尝试为我的 typescript react 项目设置，当我工作时，如果我正在做一些无法访问的事情，它会给我警告/错误。我的编辑器已经给我列出了错误，但我尝试设置 eslint-plugin-jsx-a11y 却无法正常工作。

这是我的 package.json 中的 eslint 部分

  "eslintConfig": {
    parser: '@typescript-eslint/parser',
    "extends": [
      "react-app",
      "react-app/jest",
      "shared-config",
      "plugin:jsx-a11y/recommended"
    ],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": [
          "**/*.ts?(x)"
        ],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  },

不知道我错过了什么。谢谢

Answer 1

首先让我们确保您拥有所有 安装这个模块

"devDependencies": {
"@types/eslint": "7.28.0",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"babel-eslint": "10.1.0",
"eslint": "7.30.0",
"eslint-config-airbnb-typescript": "12.3.1",
"eslint-config-react-app": "6.0.0",
"eslint-plugin-flowtype": "5.8.0",
"eslint-plugin-import": "2.23.4",
"eslint-plugin-jest": "24.3.6",
"eslint-plugin-jsx-a11y": "6.4.1",
"eslint-plugin-react": "7.24.0",
"eslint-plugin-react-hooks": "4.2.0",
"eslint-plugin-testing-library": "3.10.2",
"eslint-webpack-plugin": "2.5.4",}

当您在 yow 脚本部分安装它们时，添加一个像这样的新道具

"lint": "eslint --config ./.eslintrc.js \"./src/**/*.ts\" \"./src/**/*.tsx\" --fix --color"

这是一个功能示例

module.exports = {
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "react-app",
        "plugin:jsx-a11y/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:@typescript-eslint/recommended-requiring-type-checking",
    ],
    "env": {
        "browser": false,
        "es6": true,
        "node": true
    },
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaVersion": 2020,
        "sourceType": "module"
    },
    "plugins": [
        "import",
        "jsx-a11y",
        "react",
        "react-hooks",
        "@typescript-eslint"
    ],
    "settings": {
        "react": {
            "createClass": "createReactClass", // Regex for Component Factory to use,
            // default to "createReactClass"
            "pragma": "React", // Pragma to use, default to "React"
            "fragment": "Fragment", // Fragment to use (may be a property of <pragma>), default to "Fragment"
            "version": "detect", // React version. "detect" automatically picks the version you have installed.
            // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
            // default to latest and warns if missing
            // It will default to "detect" in the future
            "flowVersion": "0.53" // Flow version
        },
        "propWrapperFunctions": [
            // The names of any function used to wrap propTypes, e.g. `forbidExtraProps`. If this isn"t set, any propTypes wrapped in a function will be skipped.
            "forbidExtraProps",
            {
                "property": "freeze",
                "object": "Object"
            },
            {
                "property": "myFavoriteWrapper"
            }
        ],
        "componentWrapperFunctions": [
            // The name of any function used to wrap components, e.g. Mobx `observer` function. If this isn"t set, components wrapped by these functions will be skipped.
            "observer", // `property`
            {
                "property": "styled"
            }, // `object` is optional
            {
                "property": "observer",
                "object": "Mobx"
            },
            {
                "property": "observer",
                "object": "<pragma>"
            } // sets `object` to whatever value `settings.react.pragma` is set to
        ],
        "linkComponents": [
            // Components used as alternatives to <a> for linking, eg. <Link to={ url } />
            "Hyperlink",
            {
                "name": "Link",
                "linkAttribute": "to"
            }
        ]
     },
    rules": {
// yow rules
   }
};

Answer 2

你是什么意思只是无法让它工作？

从外观上看，我猜您缺少使用每个 eslint docs 的任何给定插件所需的 plugins 键。

eslint-plugin-jsx-a11y 文档甚至在 usage 部分中提到了这一点。

extends 键仅适用于规则集，而 plugins 键使某些规则可用，请参阅更长的解释 here。

"eslintConfig": {
  "parser": '@typescript-eslint/parser',
  "extends": [
    "react-app",
    "react-app/jest",
    "shared-config",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": [
    "jsx-a11y"
  ],
  "rules": {
    "additional-rule": "warn"
  },
  "overrides": [
    {
      "files": [
        "**/*.ts?(x)"
      ],
      "rules": {
        "additional-typescript-only-rule": "warn"
      }
    }
  ]
}

如果这不起作用，请详细说明什么不起作用或遇到什么错误。