How to add eslint plugins?

[ClemensDinkel]

I've used this awesome template for a project and it's running smoothly. However now I'm trying to add a few linter plugins to improve my code and running npm rum lint is complaining about things I don't understand.

To apply the linter plugins I've installed the plugins as dev dependencies and in my renderer package's eslintrc I've added:

"extends": [
    "eslint:recommended",
    "standard",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "plugin:jsx-a11y/recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:testing-library/dom",
    "plugin:testing-library/react",
    "plugin:sonarjs/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking",
    "plugin:prettier/recommended"
  ],

When I run npm rum lint now I get the following error:

Error while loading rule '@typescript-eslint/await-thenable': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

Ok, let's do that. I'm adding this line to the parserOptions of the same eslintrc.
"project": "./tsconfig.json",

When i run the linter now, it's complaining about missing tsconfig file in the root folder of the project?!
Parsing error: Cannot read file '...pathToRoot...\tsconfig.json'

That puzzles me. I've tried adding a tsconfig.json in the root folder. Basically I just copied the one from main and changed the include and exclude paths to adjust to the new place like so.

"include": [
    "**/*.ts",
    "types/**/*.d.ts"
  ],
  "exclude": [
    "**/*.spec.ts",
    "**/*.test.ts"
  ]

However that resulted in the linter complaining about all sorts of files that actually shouldn't be linted (like the tests and everything in the script folder). I tried adding the script folder to the exlude array with no result.

1. Do I need a tsconfig in my root folder if I want to use eslint plugins or are the Error messages misleading?
2. If I need one, how should it look?

[cawa-93]

Have you tried to specify the path to the config inside the render "project": "./packages/renderer/tsconfig.json"?

[ClemensDinkel]

Thx for the quick reply. I thought since the eslintconfig and the tsconfig are sitting in the same folder I can just use "./..." . Using what you proposed solves the issue with the missing tsconfig. Now I'm only getting this error Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: packages\renderer\vite.config.js. The file must be included in at least one of the projects provided
Same error applies to ReactiveHash.spec.ts and ReactiveCounter.spec.ts in the renderer package.

[cawa-93]

I have no idea what this error means and how to fix it. Looks like you'll have to deal with it yourself or, maybe someone who worked with the React will come to the rescue.

[ClemensDinkel]

I think what it means is that it wants to lint vite.config.js and the other files. The way I understand your template this isn't supposed to happen, but it happens as soon as I add the tsconfig.json as project to the eslintrc.json, which I have to do if I want to add plugins to eslint.
Well thx a lot, at least this got me to the point that I only have a few eslint error that don't really matter.

[ClemensDinkel]

I was able to get to rid all errors by including the the files rather than excluding them in tsconfig. I can you see you have some unresolved typing problems there which is why you probably excluded these files in the tsconfig. Had to use eslint-disable in a few places because I have rather strict eslint setting and wasn't able to to adress theses errors properly. Concerning unit.spec.ts in which you left a comment I found a way to resolve the type errors by defining custom interfaces massively using the unknown type since I'm not familiar with vitest and was only able to deduct a few types from usage (lots of anys in the types coming from vitest). That solution is far from being typesafe, but npm run typecheck and npm run lint both run without throwing errors and I'd say it's one step further from from excluding the file alltogether from typechecking. If you're interested I can show you what I did. Maybe you can craft something better on top of that.