ts and eslint not working with project created with Vite

[supple igloo]

Good evening guys, faced with problems by starting new project using Vite, started as usual by using npm create vite@latest .
Then i chose react and typescript, npm install and thats it. Typescript not recognizing unexisting folders and files, only work with unused variables etc.
Also on my previous projects i used eslint with "editor.codeActionsOnSave": { "source.fixAll.esling: true"} settings to automatically fix all eslint errors and warnings on save, now eslint not working in general, what changed and how to fix it now?

[slow canopy]

I cannot re-produce this problem. Have you tried restarting VsCode ?

Note that it should be "editor.codeActionsOnSave": { "source.fixAll.eslint: true"} (not esling)

The yellow underline at a is likely by eslint, not Typescript

Typescript won't be able to help you with detecting that CSS and SVG imports not exist, since Typescript only concerns itself with the import of JavaScript module.

It is actually esbuild and Vite that allows you to directly import CSS and SVG file into your tsx file. In fact, Vite code (node_modules/vite/client.d.ts) has these declarations that explicitly tells Typescript LSP to allow SVG import and immedilate resolve them as string

declare module '*.svg' {
  const src: string
  export default src
}

Therefore, I'm afraid Typescript won't be able to catch that

Typescript would still catch Javascript-related thing, like if you do import {uState} from "react", Typescript will know that it's wrong

[supple igloo]

Yes, it's a typo mistake, but eslint still not fixing on save, is it working for you? Maybe you added something to your config?

[supple igloo]

I tried everything I guess, idk why it's not working

[slow canopy]

Some rules are not fixable automatically

You can check the list of rules here: https://eslint.org/docs/latest/rules/

Only rules with the wrench icon is fixable automatically.

Unfortunately no-unused-vars is not fixable automatically (no wrench icon), likely because eslint don't know if you want to remove the variable, or keep it there for future uses

Here is a simple test to see if eslint works on auto save, using the arrow-body-style rule which supports automatic fixing:

1. Add in your eslint.config.js this rule: "arrow-body-style": ["error", "always"],
2. Create a src/test.ts file with following content: export const foo = () => 0
3. See if eslint have a yellow underline for the foo function (because it doesn't use curly braces body)
4. Save to see if the error is fixed on save automatically