ESLint was configured to run on <tsconfigRootDir>/.eslintrc.cjs using parserOptions.project

[xixixao]

Describe the bug

With React+Typescript template ESLint is configured to run on /.eslintrc.cjs but tsconfig is not configured to run on /.eslintrc.cjs.

Reproduction

https://github.com/xixixao/repro-vite-template-bad-eslint-config

Steps to reproduce

npm create vite@latest foo -- --template react-ts
cd foo
npm install
Open .eslintrc.cjs in VS Code, make some no op change like adding a new line at the end, and save the file.

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 353.23 MB / 64.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.15.0 - ~/Library/Caches/fnm_multishells/30307_1688761494412/bin/node
    npm: 9.5.0 - ~/Library/Caches/fnm_multishells/30307_1688761494412/bin/npm
    pnpm: 7.27.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 112.0.1722.48
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-react: ^4.0.1 => 4.0.2
    vite: ^4.4.0 => 4.4.2

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[gmwill934]

happening the same to me on 4.4.0

[ben-x9]

Add ignorePatterns: [".eslintrc.cjs", "vite.config.ts"], to .eslintrc.cjs to fix

[vaynevayne]

Is this a painkiller? Don't solve the problem, just cover it up?

[ArnaudBarre]

Another fix is to use project: ['./tsconfig.json', './tsconfig.node.json'],

[HendrikThePendric]

I might be stating the obvious here, but adding the files to ignorePatterns will disable ESLint for these files, which probably isn't what you want. So the suggestion @ArnaudBarre made is probably more helpful. Personally I had to go through a few additional steps as well. I'll list them below:

1. In .eslintrc.cjs add project: ['./tsconfig.json', './tsconfig.node.json'], to parserOptions
2. In tsconfig.node.json add "allowJs": true, to compilerOptions and update the include array to this "include": ["vite.config.ts", ".eslintrc.cjs",]
3. But now I saw a warning Cannot write file './eslintrc.cjs' because it would overwrite input file.. To fix, add "noEmit": true, to the compilerOptions in tsconfig.node.json.
4. And finally I now saw a lint error in .eslintrc.cjs which said tsconfigRootDir: __dirname Unsafe assignment of an "any" value. Since __dirname is a NodeJS thing I figured I needed to install the types for nodeJS yarn add -D @types/node, and tell the compiler to use them, so I added "types": ["@types/node"], to compilerOptions in tsconfig.node.json

Now everything is being linted and I am not seeing any lint errors anymore. So probably this is the "correct" configuration.

Caveat: Whenever you add a file to the project root which you want to be linted, you'll have to manually add that file to the include array in tsconfig.node.json. I tried editing the include and exclude fields in tsconfig.node.json to effectively make it include "all relevant files at the project root" but I couldn't get it to work as I intended and got the initial error again.

[rrapstine]

@HendrikThePendric I get an error adding project: ['./tsconfig.json', './tsconfig.node.json'], to compilerOptions in .eslintrc.cjs. Says there's no such top-level property. Did you mean to say it should be added to parserOptions?

Specifically I am encountering an error whenever I add a server.js file to the project root. Everything compiles and lints fine, but I still get the red squiggles in VSCode.

[HendrikThePendric]

Did you mean to say it should be added to parserOptions?

Sorry my bad. Yes I meant parser, not compiler. I'll update my original post to reflect this.

However, I found that the config I suggested is not working perfectly either. When I run yarn tsc I get the following error:

Referenced project '[...]/tsconfig.node.json' may not disable emit.

I can run the app in development mode, but obviously the error will cause problems whenever it is expected that the project can compile without errors.

I've been able to address this to some extend:

• Remove this from ./tsconfig.json: "references": [{ "path": "./tsconfig.node.json" }]
• Add this to ./tsconfig.node.json: "extends": "./tsconfig.json"

This makes the error go away and everything still works as expected.

However the TypeScript docs seem to suggest that using project references offers some performance benefits, which you would be opting out of when you ditch the references field. So I probably wouldn't classify the above as a proper solution. Although for projects that have the vast majority of the files in the src folder anyway, I can't imagine it makes a lot of difference.

I'm no TypeScript expert by any means, and by now slightly out of my depth, so take my advise with a large dose of salt.

[kalijonn]

I only had to change these

1. change parserOptions.project to ['./tsconfig.json', './tsconfig.node.json']
2. add './.eslintrc.cjs' in include of tsconfig.node.json

I think eslint isn't picking up both tsconfig and tsconfig.node