Ignore specific warnings of svelte-check

[ptrxyz]

Description

For eslint-plugin-svelte3 there is svelte3/compiler-options or svelte3/ignore-warnings to ignore some specified compiler warnings, for example all the a11y warnings.

For this plugin I can't seem to find something similar. I can disable the valid-compile rule all together, yet that's a bit unspecific. I could try to disable the warning in my svelte.config.js by defining a config.onwarn function but this does not seem to work with vite/kit.

I suggest to provide a way to ignore specific warnings of the svelte compiler, as I think it might be quite handy.

[ota-meshi]

Thank you for posting issue.

How about using <!-- svelte-ignore a11y-autofocus --> comments?
https://svelte.dev/docs#template-syntax-comments
I think it works for the valid-compile rule as well.

The svelte compiler doesn't seem to have an option to ignore specific warnings, so I don't think there's anything we can do with rule.
https://svelte.dev/docs#compile-time-svelte-compile
If you want to add an option to a rule, first ask svelte's compiler to add the ignore option.

[ptrxyz]

Yep, the comments work.
I don't know if that's helpful but svelte-check allows to pass a list of warnings to be ignored. Maybe that's just an output filter then?

[baseballyama]

vite-Plugin-svelte has such a configuration.
Is it enough for you?

https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#onwarn

[ptrxyz]

No, I would like to silence the linter and it doesn't seem to care :D

[ota-meshi]

Hmm... svelte-check seems to filter on its own.

https://github.com/dummdidumm/language-tools/blob/6bd57b018c7ae37b9bbdb4d7a9393be115c96c4f/packages/language-server/src/plugins/svelte/features/getDiagnostics.ts#L48

I found a related issue, but I'm not sure why decided to add the option in the language tools instead of adding it to svelte's compiler 🤔.
sveltejs/language-tools#473

[ptrxyz]

I would like to follow up on this real quick. I have no new insight or anything, but to move things forward, could we expose this array to the rule's settings? Just like the language tools have an ignore list to configure, maybe we can have one too until the Svelte compiler offers a solution?

https://github.com/ota-meshi/eslint-plugin-svelte/blob/78c1fbc7a379e8f709660c0cb5072b845c161a5d/src/rules/valid-compile.ts#L30

[ota-meshi]

When does the Svelte compiler offer that solution? I think you should ask the Svelte compiler to add an option to ignore warnings first. If there's a reason the Svelte team doesn't provide an ignore option, I don't think we should add it either.

[ptrxyz]

Svelte offers command line flags to disable certain warnings for the svelte-check tool, like so:

svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'a11y-aria-attributes:ignore,a11y-click-events-have-key-events:ignore'

I think this is the closes the user usually gets in touch with the compiler, so I would argue that they already provide a way to the user to ignore specific warnings in their tooling. However I do not know if they also do through the compiler API.

Further, I understand your point, but I was hoping we could still have this. It could be through some flag that makes sure it's simply filtering out the error codes and the errors are still there but hidden. It could be something like internal.ignore_errors = ['a11y-aria-attributes', 'a11y-click-events-have-key-events']. This would transport that it's only used internally and not by the compiler.

[ota-meshi]

I looked into svelte's issues.

It seems to me that it is up to the compiler API caller to decide how to handle the warning.
sveltejs/svelte#2040
sveltejs/svelte#2093

So if the user wants to suppress warnings globally, I think it is intended to be controlled by the compiler API caller.

Also, since most bundler svelte plugins seem to be designed to globally suppress warnings with the onwarn option, it would be good to provide a similar option if possible. However, I have no good ideas. (Current) the eslint config file may not be .js.

[wtachau]

I am also interested in this. See: sveltejs/language-tools#650

[baseballyama]

How about this?

sveltejs/svelte#8558 (comment)

[ota-meshi]

ESLint configuration files can also be defined in JSON or YAML, so I still have no idea how to define isIgnore (or onwarn) nicely.

[ota-meshi]

By the way, JSON and YAML configuration files may be deprecated after ESLint v9. But for now we support ESLint>=v7.

[ptrxyz]

ESLint configuration files can also be defined in JSON or YAML, so I still have no idea how to define isIgnore (or onwarn) nicely.

Maybe we can use similar settings as the one for the VSCode plugin? We could have an object like this:

{
    "ignore": [
        "a11y-no-static-element-interactions",
        "a11y-...",
        "a11y-..."
    ],
    "warn": [
        "a11y-no-onchange",
        "a11y-..."
    ],
    "error": [
        "a11y-aria-unsupported-elements",
        "a11y-..."
    ]
}

Anything in ignore is ignored, anything in warn triggers a warning and anything in error triggers an error. By default the error list could be filled with all the errors that currently also trigger an error.

IT would work in YAML + JSON and is exportable from a JS module. Maybe not a final solution, but a good start to move things forward?

[ota-meshi]

Maybe we can use similar settings as the one for the VSCode plugin?

Is there any documentation for that settings? I couldn't find that documentation.

[ptrxyz]

Maybe we can use similar settings as the one for the VSCode plugin?

Is there any documentation for that settings? I couldn't find that documentation.

There is a setting svelte.plugin.svelte.compilerWarnings. However the settings are simple KV pairs there:

{
  "a11y-...": "ignore"
}

instead of the grouping I suggested. But that's kind of what I meant.

If you install the Svelte Plugin in VSCode and go to the plugin's settings you will find the option to enter some errors. If you then open the settings.json manually, you can see how the settings are generated.

Edit: see sveltejs/language-tools#650 (comment) for step-by-step instructions.

[BlueGreenMagick]

I don't think there is a need for some complex onWarn api. Even a minimal config settings: { svelte: { ignoreSvelteWarnings: string[] }} that doesn't trigger valid-compile would be nice to have.

It can be plugged into

eslint-plugin-svelte/src/rules/valid-compile.ts

Lines 31 to 37 in 9e5da94

	const ignores = [
	'missing-declaration',
	// Svelte v4
	'dynamic-slot-name',
	// Svelte v5
	'invalid-slot-name'
	];

[applemate]

To silent most of the blue warning, do this,

In VScode setting.json, add this

"svelte.plugin.svelte.compilerWarnings": {
		"css-unused-selector": "ignore",
		"unused-export-let": "ignore",
		"a11y-aria-attributes": "ignore",
		"a11y-incorrect-aria-attribute-type": "ignore",
		"a11y-unknown-aria-attribute": "ignore",
		"a11y-hidden": "ignore",
		"a11y-autocomplete-valid": "ignore",
		"a11y-misplaced-role": "ignore",
		"a11y-no-static-element-interactions": "ignore",
		"a11y-unknown-role": "ignore",
		"a11y-no-abstract-role": "ignore",
		"svelte-ignore a11y-autofocus": "ignore",
		"a11y-no-redundant-roles": "ignore",
		"a11y-role-has-required-aria-props": "ignore",
		"a11y-accesskey": "ignore",
		"a11y-autofocus": "ignore",
		"a11y-misplaced-scope": "ignore",
		"a11y-positive-tabindex": "ignore",
		"a11y-invalid-attribute": "ignore",
		"a11y-missing-attribute": "ignore",
		"a11y-img-redundant-alt": "ignore",
		"a11y-label-has-associated-control": "ignore",
		"a11y-media-has-caption": "ignore",
		"a11y-distracting-elements": "ignore",
		"a11y-structure": "ignore",
		"a11y-mouse-events-have-key-events": "ignore",
		"a11y-missing-content": "ignore",
		"a11y-click-events-have-key-events": "ignore",
		"a11y-no-noninteractive-element-interactions": "ignore"
	},

In svelte.config file, do this

const config = {
	preprocess: vitePreprocess(),
	onwarn: (warning, handler) => {
		if (warning.code.startsWith('a11y-')) return
		if (warning.code === 'missing-exports-condition') return
		if (warning.code === 'a11y-no-static-element-interactions') return
		if (warning.code === 'svelte-ignore a11y-autofocus') return

		if (warning.code.startsWith('css-unused-selector')) return
		handler(warning)
	},
	kit: {
		adapter: adapter(),
	},
}

Just add more rules that you don't like to those two places. it will shut up.