svelte
svelte copied to clipboard
Svelte 5: svelte-ignore not working
Describe the bug
It seems like svelte-ignore
comments are not working since I upgraded to Svelte 5 - svelte-check
and my IDE are spewing out errors/warnings where there were none before. This may seem like something small but currently it's blocking my CI and I'm not sure how to fix it, this is why it put this severity.
Reproduction
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:mousedown={...}></div>
Logs
Warn: `<div>` with a mousedown or mouseup handler must have an ARIA role (svelte)
[...]
System Info
System:
OS: Windows 10 10.0.19045
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
Memory: 13.10 GB / 31.86 GB
Binaries:
Node: 20.8.0 - C:\Program Files\nodejs\node.EXE
Yarn: 4.1.1 - C:\Program Files\nodejs\yarn.CMD
npm: 10.2.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0)
Internet Explorer: 11.0.19041.1566
Severity
blocking an upgrade
Error and warning codes were switched to snake style: a11y_no_static_element_interactions
, and some were renamed. It's shortly listed in the breaking changes.
We should either update the "Various error and warning codes have been renamed slightly." note in the docs to say that all error and warning codes have been changed from kebab case to snake case, or we should have svelte-ignore
normalize kebab case to snake case when it's comparing error codes.
For DX, it would be best to map the old codes to the new ones but emit a warning about using old codes.
Alternatively, a migration script could be added, similar to the self-closing tags, to take care of it.
I tried updating to the new codes, and it's not working for 2 main reasons:
- IDE support - my IDE (JetBrains) gives me quick actions to add the
svelte-ignore
tags with the old codes and warnings when new ones are used -
eslint-plugin-svelte
gives me 2 errors when I switch to the new style codes:- on the comment itself -
ESLint: svelte-ignore comment is used, but not warned(svelte/no-unused-svelte-ignore)
- on the autofocus tag -
ESLint: A11y: Avoid using autofocus(a11y-autofocus)(svelte/valid-compile)
- on the comment itself -
Personally, I think that this breaks a lot of things, possibly more than initially thought, and I don't really see a valid reason for this change? Especially when every other tool I can think of uses kebab-case for its comments. Could this potentially be reverted/modified to accept using the old style comments without warnings?
Update: I updated ESLint & its svelte plugin to latest version, they now support the snake_case error IDs. However, it seems like it's not very consistent. It works for almost all cases, but the following still fails:
<!-- svelte-ignore a11y_autofocus -->
<input type="text" autofocus style="display: none" />
$ svelte-check
Warn: Avoid using autofocus (svelte)
<!-- svelte-ignore a11y_autofocus -->
<input type="text" autofocus style="display: none" />
Others, like a11y_no_static_element_interactions
work correctly.
~~a11y_autofocus seems to be renamed to a11y_misplaced_role.~~
Closed by #11549