Enabling type-aware rules for custom file extensions (e.g. svelte)

[Naser Aleisa]

Describe the bug

I'm trying to debug an issue with type-aware rules for svelte files. Given the following config:

import antfu from '@antfu/eslint-config'

export default antfu({
	stylistic: false,
	svelte: true,
	typescript: {
		tsconfigPath: 'tsconfig.lint.json',
		filesTypeAware: [`**\/*.{ts,tsx,svelte}`], // Enable type-aware rules in svelte files (e.g. `no-floating-promises`).
	},
})

Type aware rules only work "sometimes". Of the 4 following commands, the first 2 result in parsing errors and the last 2 run as expected.

# parsing error on *.svelte files
pnpm eslint .

# parsing error on *.svelte files
pnpm eslint src

# works, successfully reports some `ts/no-floating-promises` violations in *.svelte files
pnpm eslint src/routes

# works, successfully reports `ts/no-floating-promises` violations in file
pnpm eslint src/routes/Counter.svelte

The error that happens on svelte files is:

/home/nbe/projects/playground/demo-sveltekit-eslint/src/routes/+page.svelte
  0:0  error  Parsing error: ESLint was configured to run on `<tsconfigRootDir>/src/routes/+page.svelte` using `parserOptions.project`: <tsconfigRootDir>/tsconfig.lint.json
However, that TSConfig does not include this file. Either:
- Change ESLint's list of included files to not include this file
- Change that TSConfig to include this file
- Create a new TSConfig that includes this file and include it in your parserOptions.project
See the typescript-eslint docs for more info: https://typescript-eslint.io/linting/troubleshooting#i-get-errors-telling-me-eslint-was-configured-to-run--however-that-tsconfig-does-not--none-of-those-tsconfigs-include-this-file

Reproduction

1. Clone this branch: https://github.com/thenbe/sveltekit-eslint-antfu/tree/repro-type-aware
2. Run pnpm install
3. Run pnpm eslint .
4. Observe parsing errors on all svelte files.
5. Run pnpm eslint src/routes
6. Observe that there are no parsing errors and that some type-aware rules (e.g. ts/no-floating-promises) are reported in svelte files as expected.

Other

I'm trying to determine whether this is specific to svelte or not. Is anyone else having difficulty enabling type-aware rules for custom extensions (e.g. vue) as well?

Reproduction

https://github.com/thenbe/sveltekit-eslint-antfu/tree/repro-type-aware

System Info

System:
    OS: Linux 6.1 NixOS 24.05 (Uakari) 24.05 (Uakari)
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900K
    Memory: 18.35 GB / 31.13 GB
    Container: Yes
    Shell: 5.9 - /run/current-system/sw/bin/zsh
  Binaries:
    Node: 20.11.1 - /etc/profiles/per-user/nbe/bin/node
    npm: 10.2.4 - /etc/profiles/per-user/nbe/bin/npm
    pnpm: 8.15.1 - /etc/profiles/per-user/nbe/bin/

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[Dimava]

src/routes/+page.svelte is not included in tsconfig it says

1. Try eslinting only that file
2. Try adding it to tsconfig literally
3. Try moving stuff to the base tsconfig (from tsconfig.lint) and check if the editor says +page is in the project

[Naser Aleisa]

Try eslinting only that file

It works when I do that. From the 4 command examples in the original post, the first 2 don't work, the final 2 work. To be clear, type-aware linting works on all the svelte files in the project (as long as we pass either a single file or src/routes to the eslint command.

As far tsconfig goes, I did try messing around with patterns and simplifying it to try and find the cause, but nothing worked. I concluded that the svelte files must be included in the tsconfig properly, otherwise none of the four commands listed above would work.

Essentially, I don't understand why pnpm eslint src/routes works perfectly, but pnpm eslint src and pnpm eslint . throw parser errors.

The behavior I'm seeing makes little sense to me, which is why I'm assuming that this is either a bug in eslint, a misconfiguration in my eslint config, or in my fundamental understanding of how eslint is supposed to work.

[Naser Aleisa]

It seems that the directory passed to the eslint cli determines whether this issue is reproduced or not. If $MYDIR in the command pnpm eslint $MYDIR has an immediate child that ends in .svelte, then this issue does not occur and everything proceeds as expected. Otherwise, if $MYDIR does not immediately contain a svelte file, then this issue is reproduced where all svelte files will fail to have type-aware rules applied to them.

• Example A:

  pnpm eslint . # doesn't work, the issue is reproduced

• Example A (fixed):

  touch foo.svelte
  pnpm eslint . # works!

• Example B:

  pnpm eslint src # doesn't work

• Example B (fixed):

  touch src/foo.svelte
  pnpm eslint src # works!

• Example C:

  pnpm eslint src/routes # doesn't work

• Example C (fixed):

  touch src/routes/foo.svelte
  pnpm eslint src/routes # works!

---

This feels more like a bug than an issue with my config. I'm not yet sure how to narrow down the culprit though.

[Naser Aleisa]

I'm going to close it as this issue is likely not a result of our eslint config, but a bug somewhere else.