Open AlexGalays opened 3 years ago
You can use the --compiler-warnings
option, for example --compiler-warnings "css-unused-selector:ignore,unused-export-let:ignore"
will filter out all css-unused-selector
and unused-export-let
warnings. See the svelte-check readme for more info.
About the VS Code thing: You can always add a workspace settings json to your repo which all users will inherit. I'm hesitant to put this inside svelte.config.js
since there's no official agreement in which direction this config file will go so I don't want to add things in a rush there.
Thanks.
The --compiler-warnings
would do the job for the cli, yes. As for the workspace settings json, is that something you often use in addition to a .editorconfig
?
Well, if you all use VS Code and you agree on certain settings, I would certainly use it - it's a kind of config file, too, after all. We do it in one of our projects right now.
Does this apply to the language server as well? Or only to svelte-check? I tried running the language server as svelteserver --stdio --compiler-warnings a11y-autofocus:ignore,a11y-no-onchange:ignore
, however the language server is still producing warnings:
This is in Emacs using lsp-mode.
This only applies to vscode and svelte-check. How do other IDEs integrate with the language server? The language server expects a config object (structure as in the vscode extension readme) on startup during the initialisation command according to the language server protocol.
Gotcha. All full-featured language server clients, including lsp-mode under Emacs, have support for passing a configuration over JSONRPC to the server. Now that I understand where this is intended to be configured, it should be straightforward to enhance the Svelte module in lsp-mode to hook that configuration key to a convenient user option. I will open an issue against lsp-mode accordingly.
It would probably be worth mentioning this explicitly in the README: "Configuration of the language server happens over the LSP protocol by passing a configuration object; your LSP client should have a way of setting the configuration object for a server. Here is a link to the spec for the configuration that is supported [...]"
It also might be worth actually parsing the command-line options and/or throwing an error when any are passed; it was not clear to me whether command-line options were supported, since --help
did not function as expected.
Thanks for your help.
@elianiva in a recent issue you mentioned that you also run the LSP directly and were able to configure some setting - any chance you use the same LSP-mode @raxod502 is talking about so might be able to help?
nope, I don't use lsp-mode
. I use neovim's builtin LSP and it can pass some options to the LSP. Here's how it's done.
I don't know how lsp-mode
handle this option. I did a quick reading from its wiki and I think it's possible to do. It can pass some options to Lua LSP for example. https://emacs-lsp.github.io/lsp-mode/page/lsp-lua-language-server/
Yes, this is fully supported by lsp-mode, and in a fairly advanced way: each configuration key can be easily mapped to a separately documented user option. Here is an example for gopls: https://github.com/emacs-lsp/lsp-mode/blob/0349a1cc0976829fab8f73ecc033252be31a7cf6/clients/lsp-go.el#L215-L221
@dummdidumm I too decided to try neovim-lsp
, and it works brilliantly even with zip-packed yarn 2 packages, thanks to overridable cmd option:
lspconfig.tsserver.setup{
cmd = { "yarn", "typescript-language-server", "--stdio" };
on_attach = on_attach;
}
lspconfig.svelte.setup{
cmd = { "yarn", "svelteserver", "--stdio" };
on_attach = on_attach;
settings = {
svelte = {
compilerWarnings = {
["a11y-no-onchange"] = "ignore"; -- <<< This doesn't work, svelte still spams me with this warning
}
}
}
}
language-server
's readme lacks configuration options, which I've found in svelte-vscode
package. :thinking:
More editors make their lsp implementations, so it is better to have options in the language-server
's readme too.
Do you want me to make a readme PR that clarifies configuration process for neovim-lsp
and makes a link to the lsp options which are described in svelte-vscode
package?
For some reason, when parsing svelte.config.js
, language-server
ignores onwarn
, but uses preprocess
. Is that intended?
I feel like it is more straightforward to configure that from svelte.config.js
.
Can't seem to get compilerWarnings
ignores to work by passing options from neovim-lsp
. :disappointed:
const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess(),
onwarn: (warning, handler) => {
if (warning.code === 'a11y-no-onchange') return;
handler(warning);
},
};
@non25 this should work because it's svelte.plugin.svelte.compilerWarnings
, not svelte.compilerWarnings
lspconfig.svelte.setup{
cmd = { "yarn", "svelteserver", "--stdio" };
on_attach = on_attach;
settings = {
svelte = {
plugin = {
svelte = {
compilerWarnings = {
["a11y-no-onchange"] = "ignore"
}
}
}
}
}
}
How do I suppress a waning when using e.g. "sapper dev" command? I don't see any "compiler-warnings" option at all. Thank you.
How do I disable in-editor warnings via workspace settings.json?
"svelte.plugin.svelte.compilerWarnings": {
"a11y-media-has-caption": "ignore"
}
Adding this does not seem to do anything.
@leumasme To disable editor warning put this inside .vscode/settings.json
{
"svelte.plugin.svelte.compilerWarnings": {
"a11y-aria-attributes": "ignore",
"a11y-incorrect-aria-attribute-type": "ignore",
"a11y-unknown-aria-attribute": "ignore",
"a11y-hidden": "ignore",
"a11y-misplaced-role": "ignore",
"a11y-unknown-role": "ignore",
"a11y-no-abstract-role": "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",
}
}
To disable compiler warning put this inside svelte.config.js
const config = {
onwarn: (warning, handler) => {
if (warning.code.startsWith('a11y-')) {
return;
}
handler(warning);
},
kit: {
adapter: adapter(),
}
};
To disable compiler warning put this inside
svelte.config.js
There's no onwarn
property on type Config
. https://kit.svelte.dev/docs/configuration
The only places where the svelte or svelte-kit source trees say onwarn
are
svelte/CHANGELOG.md
1730:* `onwarn` and `onerror` receive default handlers as second arguments ([#883](https://github.com/sveltejs/svelte/pull/883))
svelte-kit/packages/kit/src/core/config/index.spec.js
171: onwarn: () => {}
The language-tools source has zero instances of onwarn
.
What's going on here? Where it onwarn
defined, used, and documented?
Alright, onwarn
resides in vite-plugin-svelte: https://github.com/sveltejs/vite-plugin-svelte/search?q=onwarn
I see 8fc5e524b20bdcd1c3c0dbb27dd67d17db3377c4 that changed Javascript logic -- without changing the Typescript definition to allow arbitrary keys!
Is it just me or are you guys bandaging a footgun blast?
This really should go into the rollup/svelte() configuration, setting up a development standard in a team by asking each individual dev to modify their respective editor configuration is well.. inefficient.
How do I get rid of A11y entirely? It's garbage :(
How do I get rid of A11y entirely? It's garbage :(
Yep.
And I've encountered quite a few bugs. This really shouldn't trigger an A11Y warning:
Or this one: https://github.com/sveltejs/svelte/issues/5967
Or when I just want to write <a>
without an href
or heref="#"
because I'm in the middle of something I don't want the Svelte compiler yelling at me.
@leumasme To disable editor warning put this inside
.vscode/settings.json
This doesn't work for me...
To disable editor warning put this inside .vscode/settings.json
This also no longer seems to work for me, but at one point it did. "svelte.plugin.svelte.compilerWarnings"
no longer seems like a valid key.
I am able to silence the compiler warnings in my rollup.config.js
via:
...
svelte({
...
onwarn: (warning, handler) => {
// disable a11y warnings
if (warning.code.startsWith("a11y-")) return;
handler(warning);
}
...
})
...
This also no longer seems to work for me, but at one point it did.
"svelte.plugin.svelte.compilerWarnings"
no longer seems like a valid key.
This still works for me:
.vscode/settings.json
{
"svelte.plugin.svelte.compilerWarnings": {
"unused-export-let": "ignore",
"a11y-click-events-have-key-events": "ignore"
},
}
@rogerfar does that disable the editor (VSCode) warnings for you?
To disable vscode warning:
Open View -> Command Palette -> Then write Settings -> Select Open User Settings (JSON)
Add to the end of the file:
"svelte.plugin.svelte.compilerWarnings": {
"unused-export-let": "ignore",
"a11y-click-events-have-key-events": "ignore"
},
restart vscode
This is bad :-1:
restart vscode
Don't tweak your vscodez, It's gonna break on next framework|editor version change.
I'm a vim user. And for me it's gut-churning to have to monkey-patch my editor globally for a project in order to fix a build-issue in frameworkX:versionY.
There are valid use-cases where A11y is not required and prevents framework-adoption. Like your typical b2b-systems that are not facing the public web.
This is good :+1:
I am able to silence the compiler warnings in my
rollup.config.js
via:... svelte({ ... onwarn: (warning, handler) => { // disable a11y warnings if (warning.code.startsWith("a11y-")) return; handler(warning); } ... }) ...
Can we formalize it into?
svelte({ noA11y: true })
Would be cool to not only squelch the warnings but also not run A11y checker for faster builds. :man_shrugging:
@Ohyenno
To disable vscode warning: ....
That does not silence the vscode (Version: 1.72.1 (Universal)
) warnings any longer for me, nor does editing project level settings at .vscode/settings.json
.
I updated my Svelte version and now I got 31 warnings. I have to go to each file and add svelte-ignore
statements.
<!-- svelte-ignore a11y-click-events-have-key-events -->
Do you know what was the last version before this? I would like to downgrade and wait until they fix it
@xtance I am on version SvelteKit v1.0.0-next.355
(if that helps you) and am having this issue. Fortunately this thread got me fixed with @yuliankarapetkov's comment ❤️
I have a pretty basic SvelteKit environment: VSCode w/ ESLint and still can't get rid of the warnings. I understand the purpose of them but sometimes they do not apply to a specific situation and forcing these warnings greatly degrades the developer experience which also makes the user experience worse.
I've tried to turn off a11y-click-events-have-key-events
with no luck (just went down from 2 svelte+eslint warnings to 1 eslint warning):
// .eslintrc.cjs
rules: {
'a11y-click-events-have-key-events': 'off',
},
//.vscode/settings.json
"svelte.plugin.svelte.compilerWarnings": {
"a11y-click-events-have-key-events": "ignore"
},
//svelte.config.js
onwarn: (warning, handler) => {
if (warning.code.startsWith('a11y-')) {
return;
}
handler(warning);
},
In my component: <!-- eslint-disable a11y-click-events-have-key-events -->
and <!-- svelte-ignore a11y-click-events-have-key-events -->
I have the same problem. I have an internal (desktop only, very small, fixed team) app with tons of these errors, none of which are relevant. I need to keep event listeners to a minimum so adhering to the advice of the warnings is not in my best interest, and I really don't want to litter the codebase with heaps of these big html disable comments unecessarily degrading readability. I'm managing/monitoring thousands of event listeners already, so I adding hundreds of extranneous ones for no reason will make tracking/monitoring them more difficult.
How can I disable all of these warnings for svelte-check
, eslint
, typescript
, and vscode
?
I can't build my app because svelte is insiting that I add code that I absolutely should not add.
Ok I think I got it - this should disable all a11y warnings for svelte-check
, eslint
, and vscode
in a Typescript project:
package.json
:
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role: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'",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role: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'",
.vscode/settings.json
"svelte.plugin.svelte.compilerWarnings": {
"a11y-click-events-have-key-events": "ignore",
},
eslintrc.cjs
rules: {
'a11y-click-events-have-key-events': 'off',
},
svelte.config.js
onwarn: (warning, handler) => {
if (warning.code.startsWith('a11y-')) return
handler(warning)
},
put the configuration inside .vscode/settings.json
is not working for workspaces (saved projects)
"This setting cannot be applied in this workspace. It will be applied when you open the containing workspace folder directly."
If someone wants to disable specific a11y rules for eslint check:
I had to add "svelte3/ignore-warnings"
to my settings object in .eslintrc.cjs
like this:
settings: {
'svelte3/typescript': () => require('typescript'),
"svelte3/ignore-warnings": (warning) => {
return warning.code === 'a11y-click-events-have-key-events'
}
}
Thanks @FractalHQ for your suggestion.
It worked for me.
Wish there was an easier way to temporarily disable meaningless a11y warnings.
Ok I think I got it - this should disable all a11y warnings for
svelte-check
,eslint
, andvscode
in a Typescript project:
package.json
:"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role: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'", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch --compiler-warnings 'a11y-aria-attributes:ignore,a11y-incorrect-aria-attribute-type:ignore,a11y-unknown-aria-attribute:ignore,a11y-hidden:ignore,a11y-misplaced-role:ignore,a11y-unknown-role:ignore,a11y-no-abstract-role: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'",
.vscode/settings.json
"svelte.plugin.svelte.compilerWarnings": { "a11y-click-events-have-key-events": "ignore", },
eslintrc.cjs
rules: { 'a11y-click-events-have-key-events': 'off', },
svelte.config.js
onwarn: (warning, handler) => { if (warning.code.startsWith('a11y-')) return handler(warning) },
Thanks @FractalHQ for your suggestion.
It worked for me.
Wish there was an easier way to temporarily disable meaningless a11y warnings.
The below .vscode/settings.json fixed it for me -
{
"svelte.plugin.svelte.compilerWarnings": {
"a11y-aria-attributes": "ignore",
"a11y-incorrect-aria-attribute-type": "ignore",
"a11y-unknown-aria-attribute": "ignore",
"a11y-hidden": "ignore",
"a11y-misplaced-role": "ignore",
"a11y-unknown-role": "ignore",
"a11y-no-abstract-role": "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",
"unused-export-let": "ignore",
"a11y-click-events-have-key-events": "ignore",
"a11y-no-noninteractive-tabindex":"ignore",
},
"nuxt.isNuxtApp": false
}
It seems the only solution is to hack our way out of this warning with the @FractalHQ solution (thanks, btw).
Correct if I'm wrong, but shouldn't everything "obey" the rules set on .eslint
file? Isn't this the sole purpose of eslint in the first place?
To be honest. I believe wholeheartedly that this should be a global setting to squelch a11y. While I'm trying to work out errors, they get drowned out by the warnings so I sift through all the warnings to find what I need to know. Let me handle the warnings after I get the errors fixed. I don't mind Svelte nag before production, accessibility is important.
MY method of squelching the warnings
svelte config:
onwarn: (warning, handler) => {
if (warning.code.includes("a11y")) {
return;
}
handler(warning)
}
It's preposterous that we're being stuffed the a11y down our throats instead of given a simple option
<!--svelte-ignore all-->
at the top of the file.
It's preposterous that we're being stuffed the a11y down our throats instead of given a simple option
<!--svelte-ignore all-->
at the top of the file.
this ignores everything or just a11y?
It's preposterous that we're being stuffed the a11y down our throats instead of given a simple option
<!--svelte-ignore all-->
at the top of the file.this ignores everything or just a11y?
I mean, we could have all-11y, all-ts (the constant nagging bc compiler doesn't support TS in markup) and all (just about any warning that doesn't impact compilation).
Svelte language tools developer: No matter how hard you want to push for A11y, please do consider that there are real world situations where the design requirement and audience target are not A11y related at all. Spinning the wheel on these things does not make sense at all, except for increasing developing budgets.
Could you please add a global toggle to disable ALL A11y warnings?
For anyone using sveltekit, you can find the mapping for svelte config in this file. The solution is to add the onwarn
described above at the top level of svelte.config.js
.
For eslint and sveltekit, adding this to .eslintrc.cjs
worked:
module.exports = {
settings: {
"svelte3/ignore-warnings": ({ code }) =>
code === "a11y-missing-content" ||
code === "a11y-missing-attribute" ||
code === "a11y-click-events-have-key-events"
}
In VSCode I had to do @thamer 's trick (slightly modified, below) in order to stop seeing yellow squiggly lines in the code editor.
settings: {
'svelte3/ignore-warnings': ({ code }) => code.includes('a11y'),
},
I followed this StackOverflow post and it was the easiest solution I've come across for removing a11y
warnings.
https://stackoverflow.com/questions/61272669/how-can-i-systematically-disable-certain-irrelevant-a11y-warnings-when-compiling
plugins: [
svelte({
// Warnings are normally passed straight to Rollup. You can
// optionally handle them here, for example to squelch
// warnings with a particular code
onwarn: (warning, handler) => {
// e.g. don't warn on a11y-autofocus
if (warning.code === 'a11y-autofocus') return
// let Rollup handle all other warnings normally
handler(warning)
}
})
]
Updating to https://github.com/sveltejs/eslint-plugin-svelte breaks this :-/. Very frustrating— Svelte's fixation on a11y is well-intentioned but probably its most misguided and detrimental opinionated feature.
Button has a default style, so I don't want to use Button. But it wants to force me to use Button.
I love all the opinions being forwarded as The Truth in this discussion.
'svelte3/ignore-warnings': ({ code }) => code.includes('a11y'),
This does not work for the latest eslint-plugin-svelte. The a11y warnings have now turned into errors. The only recourse I've found is to turn off the svelte/valid-compile
rule which is kind of sad to lose all its other benefits.
Edit: 'svelte/valid-compile': [ 'error', { 'ignoreWarnings': true } ],
will keep ESLint from turning a11y warnings into errors.
I was about to create an issue and found this one.
Is there a standard way to disable a svelte warning for a whole project?
I tried several options from the comments but I could only solve it with <!-- svelte-ignore ...
and <!-- eslint-disable-next-line...
on a per line basis
It would be great if a small paragraph explaining how to do it could be added to the docs here
These warnings often do more harm than good and pollute our console real estate. It's not acceptable to litter the code with
<!-- svelte-ignore a11y-no-onchange -->
etc.We can usually filter these in the rollup.config but svelte-check won't pick that.
What's the best way to filter these:
Is it time perhaps to introduce a config file?