eslint-plugin-jsx-a11y for Typescript

Question

I am trying to setup for my typescript react project that while I am working it will give me warnings/errors if I am doing something that is not accessible. My editor already gives me listing errors, but I tried setting up eslint-plugin-jsx-a11y and I just cannot get it to work.

Here is the eslint section in my package.json

{
  "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"
        }
      }
    ]
  }
}

Not sure what I am missing. Thanks

Answer 1

What do you mean just cannot get it to work?

From the looks of it, I'm guessing you are missing the plugins key that is required to use any given plugin per eslint docs.

The eslint-plugin-jsx-a11y docs even mentions this in the usage section.

The extends key only applies a ruleset whereas the plugins key makes certain rules available, see a longer explanation 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"
        }
      }
    ]
  }
}

If this doesn't work please elaborate on what isn't working or what errors you get.