sveltejs / kit

web development, streamlined
https://kit.svelte.dev
MIT License
18.33k stars 1.87k forks source link

ESLint isn't on for .ts files #10258

Open Arro opened 1 year ago

Arro commented 1 year ago

Describe the bug

If you create a new SvelteKit project like this

npm create svelte@latest my-app-2 and then cd my-app-2, and then npm i, and then modify src/routes/+page.ts with an obvious syntax error like thisShouldError() on line 5... there are no eslint errors generated.

Here's the whole file that eslint thinks is fine.

// since there's no dynamic data here, we can prerender
// it so that it gets served as a static asset in production
export const prerender = true;

thisShouldError();

However if you do the same in the script tag of the +layout.svelte, it does error.

<script>
    import Header from './Header.svelte';
    import './styles.css';
    thisShouldError()
</script>

svelte-check does throw an error for the thisShouldError() call in the .ts file.

Because eslint doesn't output anything, my text editor doesn't alert me to the problem.

Reproduction

See above.

Logs

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 2.71 GB / 32.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 18.16.1 - /opt/homebrew/opt/node@18/bin/node
    npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Edge: 114.0.1823.58
    Safari: 16.5.1
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/kit: ^1.20.4 => 1.20.5 
    svelte: ^4.0.0 => 4.0.0 
    vite: ^4.3.6 => 4.3.9

Severity

serious, but I can work around it

Additional Information

No response

ghostdevv commented 1 year ago

Hey, I created a new kit project (selecting typescript & eslint) and svelte check does error for me using your example

image

Arro commented 1 year ago

So I actually mentioned in my original post, svelte-check does work. What doesn't work is eslint as a standalone call.

svelte-check isn't run every time I save file in my text editor, though eslint is. So I don't see any errors in real time.

I believe the .eslintrc of the svelte kit project should be modified to accommodate this.

ghostdevv commented 1 year ago

Ah my bad I misread that - for me in the +page.ts file I get an error from the ts language server. I haven't used eslint in vscode before so I am not sure how to set that up to look for an error

Are you not getting an error from the ts language server though?

Arro commented 1 year ago

Uninstalling "JavaScript and TypeScript Nightly" in VSCode fixed the issue my language server was having. So I'm seeing the errors now in .ts files. I still feel eslint path/to/some/file.ts shouldn't say "All Good", though.

ghostdevv commented 1 year ago

Ah yea, that extension is known to cause issues - try running npm run lint as that showed the issue for me with eslint :pray:

nikfp commented 10 months ago

I can confirm this bug and also that it's not limited to VS Code. My neovim config also has the same issue.

Using the example @Arro gave above and using this file structure in ./src:

.
├── app.d.ts
├── app.html
├── lib
│   └── index.ts
└── routes
    ├── +page.server.ts
    ├── +page.svelte
    └── +page.ts

I was only able to get in-editor diagnostics from eslint in the +page.svelte file. I added the exact same error in all 3 of the ts files shown above, including the lib/index.ts file, and no diagnostics were shown other than what tsserver provides.

Running pnpm check output all 4 errors as expected.

Running pnpm exec eslint . from the project root ONLY SHOWS ONE ERROR - the error in the svelte file.

Example repo here ready to test, just run pnpm install and then test as needed. This was tested on Ubuntu in WSL, using Neovim with a linter plugin. Eslint is confirmed working in other non-Sveltekit projects.

DePasqualeOrg commented 8 months ago

I'm not sure if it's related, but I had to do the following to get eslint working in VS Code after running the create-svelte helper:

In .eslintrc.cjs, add the following lines under parserOptions:

project: "./tsconfig.json",
tsconfigRootDir: __dirname,

In tsconfig.json, remove this line:

"moduleResolution": "bundler" 

It's always been a struggle for me to get a new SvelteKit project set up with eslint, so it would be good if create-svelte would set the right configuration options by default. Are there good reasons why these options aren't the default?