sveltejs / language-tools

The Svelte Language Server, and official extensions which use it
MIT License
1.21k stars 196 forks source link

How can we disable svelte warnings? (a11y, etc) #650

Open AlexGalays opened 3 years ago

AlexGalays commented 3 years ago

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?

dummdidumm commented 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.

AlexGalays commented 3 years ago

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?

dummdidumm commented 3 years ago

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.

raxod502 commented 3 years ago

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:

image

This is in Emacs using lsp-mode.

dummdidumm commented 3 years ago

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.

raxod502 commented 3 years ago

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.

dummdidumm commented 3 years ago

@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?

elianiva commented 3 years ago

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.

image

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/

raxod502 commented 3 years ago

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

non25 commented 3 years ago

@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);
  },
};
elianiva commented 3 years ago

@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"
          }
        }
      }
    }
  }
}
petrkoutnycz commented 3 years ago

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.

leumasme commented 2 years ago

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.

peter-pakanun commented 2 years ago

@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(),
  }
};
tv42 commented 2 years ago

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?

tv42 commented 2 years ago

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!

telamon commented 2 years ago

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 :(

PierBover commented 1 year ago

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:

image

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...

quoid commented 1 year ago

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);
    }
    ...
})
...
rogerfar commented 1 year ago

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"
  },
}
quoid commented 1 year ago

@rogerfar does that disable the editor (VSCode) warnings for you?

Ohyenno commented 1 year ago

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

telamon commented 1 year ago

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:

quoid commented 1 year ago

@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.

yuliankarapetkov commented 1 year ago

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 -->
xtance commented 1 year ago

Do you know what was the last version before this? I would like to downgrade and wait until they fix it

Wambosa commented 1 year ago

@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 ❤️

jacob-8 commented 1 year ago

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 -->

braebo commented 1 year ago

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.

braebo commented 1 year ago

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 ```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", "a11y-click-events-have-key-events": "ignore", }, ```
"svelte.plugin.svelte.compilerWarnings": {
  "a11y-click-events-have-key-events": "ignore",
},


eslintrc.cjs ```ts rules: { 'a11y-aria-attributes': 'off', 'a11y-incorrect-aria-attribute-type': 'off', 'a11y-unknown-aria-attribute': 'off', 'a11y-hidden': 'off', 'a11y-misplaced-role': 'off', 'a11y-unknown-role': 'off', 'a11y-no-abstract-role': 'off', 'a11y-no-redundant-roles': 'off', 'a11y-role-has-required-aria-props': 'off', 'a11y-accesskey': 'off', 'a11y-autofocus': 'off', 'a11y-misplaced-scope': 'off', 'a11y-positive-tabindex': 'off', 'a11y-invalid-attribute': 'off', 'a11y-missing-attribute': 'off', 'a11y-img-redundant-alt': 'off', 'a11y-label-has-associated-control': 'off', 'a11y-media-has-caption': 'off', 'a11y-distracting-elements': 'off', 'a11y-structure': 'off', 'a11y-mouse-events-have-key-events': 'off', 'a11y-missing-content': 'off', 'a11y-click-events-have-key-events': 'off', }, ```
rules: {
  'a11y-click-events-have-key-events': 'off',
},


svelte.config.js

onwarn: (warning, handler) => {
  if (warning.code.startsWith('a11y-')) return
  handler(warning)
},
andremacola commented 1 year ago

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."

ErikGro commented 1 year ago

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'
        }
    }
codelabspro commented 1 year ago

Thanks @FractalHQ for your suggestion.

It worked for me.

Wish there was an easier way to temporarily disable meaningless a11y warnings.

codelabspro commented 1 year ago

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)
},

Thanks @FractalHQ for your suggestion.

It worked for me.

Wish there was an easier way to temporarily disable meaningless a11y warnings.

arunabhdas commented 1 year ago

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
  }
kleber-swf commented 1 year ago

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?

zacharygriffee commented 1 year ago

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)
  }
brgrz commented 1 year ago

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.

laoshaw commented 1 year ago

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?

brgrz commented 1 year ago

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).

J4gQBqqR commented 1 year ago

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?

staab commented 1 year ago

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.

thamer commented 1 year ago

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"
    }
wtachau commented 1 year ago

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'),
  },
gcrater commented 1 year ago

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)
      }
    })
  ]
wtachau commented 1 year ago

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.

mokeyish commented 1 year ago

Button has a default style, so I don't want to use Button. But it wants to force me to use Button.

tylergannon commented 1 year ago

I love all the opinions being forwarded as The Truth in this discussion.

jacob-8 commented 1 year ago
'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.

opensas commented 1 year ago

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