Hide Svelte Warnings

Svelte has a lot of helpful warnings but some of them you may not want.

Filter warnings by code

Within the component, directly above the code line that causes the warning, you can do:

<!-- svelte-ignore a11y_click_events_have_key_events -->
<div onclick={addArticle}>Add article</div>

This is the safest way as it prevents warnings of the IDE, SSR and frontend-build.

Check: Svelte Docs / Compiler Warnings

SSR Warnings Filter

Please note that this way warings are only suppressed in SSR.

For omit warnings add to your vite-ssr.config.ts some keys, like:

export default defineConfig(({mode}) => {
    return {
        plugins: [
            svelte({
                compilerOptions: {
                    warningFilter: (warning) => {
                        const suppressed = [
                            'a11y_click_events_have_key_events',
                            'a11y_no_static_element_interactions',
                        ];
                        return !suppressed.includes(warning.code);
                    }
                }
            })
        ]
    }
})