Eslint-plugin-jsx-a11y: Can this be used with typescript and tsx file?

[mzahidriaz-tr]

Can this plugin be used with typescript and tsx files?

[ljharb]

Presumably it could if you’ve configured eslint to parse typescript

[shiftkey]

:thumbsup: I was curious about this and was able to drop it into a TypeScript React project easily enough, and it detected violations:

...

C:\Users\shiftkey\src\desktop\app\src\ui\welcome\welcome.tsx
  190:13  error  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  191:13  error  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  199:11  error  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

✖ 70 problems (70 errors, 0 warnings)

→ To fix some of these errors, run yarn eslint --fix
...

[mzahidriaz-tr]

@shiftkey can you please add the configuration here

[shiftkey]

@mzahidriaz-tr I just followed the instructions in the Installation and Usage steps.

[beausmith]

@shiftkey - I'm also trying to setup linting in TypeScript.

How do you have the configuration for eslint set to lint tsx files?

My package.json script for running ESLint is:

"eslint:base": "eslint 'src/**/*.+(js|jsx)'",

When I update it to include tsx files (see below), I get a bunch of errors pointing to the TypeScript syntax:

"eslint:base": "eslint 'src/**/*.+(js|jsx|tsx)'",

[shiftkey]

@beausmith it's hard to say without more information about your eslint config, but given you don't seem to be checking *.ts I'd check you have a compatible parser set - I'm using @typescript-eslint/parser in my projects.