rules.md

sidebarDepth
0

Available Rules

🔧 Indicates that the rule is fixable, and using --fix option on the command line can automatically fix some of the reported problems.
💡 Indicates that some problems reported by the rule are manually fixable by editor suggestions.
✅ Indicates that the rule is included in the plugin:svelte/recommended config.
⭐ Indicates that the rule is included in the plugin:svelte/recommended_svelte5_without_legacy config.
🏛️ Indicates that the rule is included in the plugin:svelte/recommended_svelte3_4 config.

Possible Errors

These rules relate to possible syntax or logic errors in Svelte code:

Rule ID	Description
svelte/infinite-reactive-loop	Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent.	✅ 🏛️
svelte/no-deprecated-raw-special-elements	Recommends not using raw special elements in Svelte versions previous to 5.	✅ ⭐🔧
svelte/no-dom-manipulating	disallow DOM manipulating	✅ ⭐ 🏛️
svelte/no-dupe-else-if-blocks	disallow duplicate conditions in {#if} / {:else if} chains	✅ ⭐ 🏛️
svelte/no-dupe-on-directives	disallow duplicate on: directives	🏛️
svelte/no-dupe-style-properties	disallow duplicate style properties	✅ ⭐ 🏛️
svelte/no-dupe-use-directives	disallow duplicate use: directives	✅ ⭐ 🏛️
svelte/no-dynamic-slot-name	disallow dynamic slot name	✅ 🏛️🔧
svelte/no-not-function-handler	disallow use of not function in event handler	🏛️
svelte/no-object-in-text-mustaches	disallow objects in text mustache interpolation	✅ ⭐ 🏛️
svelte/no-reactive-reassign	disallow reassigning reactive values	✅ 🏛️
svelte/no-shorthand-style-property-overrides	disallow shorthand style properties that override related longhand properties	✅ ⭐ 🏛️
svelte/no-store-async	disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features	✅ ⭐ 🏛️
svelte/no-unknown-style-directive-property	disallow unknown style:property	✅ ⭐ 🏛️
svelte/require-store-callbacks-use-set-param	store callbacks must use set param
svelte/require-store-reactive-access	disallow to use of the store itself as an operand. Need to use $ prefix or get function.	✅ ⭐ 🏛️🔧
svelte/valid-compile	disallow warnings when compiling.	✅ ⭐ 🏛️

Security Vulnerability

These rules relate to security vulnerabilities in Svelte code:

Rule ID	Description
svelte/no-at-html-tags	disallow use of {@html} to prevent XSS attack	✅ ⭐ 🏛️
svelte/no-target-blank	disallow target="_blank" attribute without rel="noopener noreferrer"

Best Practices

These rules relate to better ways of doing things to help you avoid problems:

Rule ID	Description
svelte/block-lang	disallows the use of languages other than those specified in the configuration for the lang attribute of <script> and <style> blocks.	💡
svelte/button-has-type	disallow usage of button without an explicit type attribute
svelte/no-at-debug-tags	disallow the use of {@debug}	✅ ⭐ 🏛️
svelte/no-ignored-unsubscribe	disallow ignoring the unsubscribe method returned by the subscribe() on Svelte stores.	✅ ⭐ 🏛️
svelte/no-immutable-reactive-statements	disallow reactive statements that don't reference reactive values.	✅ 🏛️
svelte/no-inline-styles	disallow attributes and directives that produce inline styles
svelte/no-inspect	Warns against the use of $inspect directive	✅ ⭐
svelte/no-reactive-functions	it's not necessary to define functions in reactive statements	✅ 🏛️💡
svelte/no-reactive-literals	don't assign literal values in reactive statements	✅ 🏛️💡
svelte/no-svelte-internal	svelte/internal will be removed in Svelte 6.	✅ ⭐ 🏛️
svelte/no-unused-class-name	disallow the use of a class in the template without a corresponding style	✅ ⭐ 🏛️
svelte/no-unused-svelte-ignore	disallow unused svelte-ignore comments	✅ ⭐ 🏛️
svelte/no-useless-mustaches	disallow unnecessary mustache interpolations	✅ ⭐ 🏛️🔧
svelte/prefer-const	Require const declarations for variables that are never reassigned after declared	🔧
svelte/prefer-destructured-store-props	destructure values from object stores for better change tracking & fewer redraws	✅ ⭐ 🏛️💡
svelte/require-each-key	require keyed {#each} block	✅
svelte/require-event-dispatcher-types	require type parameters for createEventDispatcher	✅ 🏛️
svelte/require-optimized-style-attribute	require style attributes that can be optimized	🏛️
svelte/require-stores-init	require initial value in store
svelte/valid-each-key	enforce keys to use variables defined in the {#each} block	✅ ⭐ 🏛️

Stylistic Issues

These rules relate to style guidelines, and are therefore quite subjective:

Rule ID	Description
svelte/derived-has-same-inputs-outputs	derived store should use same variable names between values and callback	✅ ⭐ 🏛️
svelte/first-attribute-linebreak	enforce the location of first attribute	🔧
svelte/html-closing-bracket-new-line	Require or disallow a line break before tag's closing brackets	🔧
svelte/html-closing-bracket-spacing	require or disallow a space before tag's closing brackets	🔧
svelte/html-quotes	enforce quotes style of HTML attributes	🔧
svelte/html-self-closing	enforce self-closing style	🔧
svelte/indent	enforce consistent indentation	🔧
svelte/max-attributes-per-line	enforce the maximum number of attributes per line	🔧
svelte/mustache-spacing	enforce unified spacing in mustache	🔧
svelte/no-extra-reactive-curlies	disallow wrapping single reactive statements in curly braces	✅ 🏛️💡
svelte/no-restricted-html-elements	disallow specific HTML elements
svelte/no-spaces-around-equal-signs-in-attribute	disallow spaces around equal signs in attribute	🔧
svelte/prefer-class-directive	require class directives instead of ternary expressions	✅ ⭐ 🏛️🔧
svelte/prefer-style-directive	require style directives instead of style attribute	✅ ⭐ 🏛️🔧
svelte/shorthand-attribute	enforce use of shorthand syntax in attribute	🔧
svelte/shorthand-directive	enforce use of shorthand syntax in directives	🔧
svelte/sort-attributes	enforce order of attributes	🔧
svelte/spaced-html-comment	enforce consistent spacing after the <!-- and before the --> in a HTML comment	🔧

Extension Rules

These rules extend the rules provided by ESLint itself, or other plugins to work well in Svelte:

Rule ID	Description
svelte/no-inner-declarations	disallow variable or function declarations in nested blocks	✅ ⭐ 🏛️
svelte/no-trailing-spaces	disallow trailing whitespace at the end of lines	🔧

SvelteKit

These rules relate to SvelteKit and its best Practices.

Rule ID	Description
svelte/no-export-load-in-svelte-module-in-kit-pages	disallow exporting load functions in *.svelte module in SvelteKit page components.
svelte/no-navigation-without-base	disallow using navigation (links, goto, pushState, replaceState) without the base path
svelte/valid-prop-names-in-kit-pages	disallow props other than data or errors in SvelteKit page components.	✅ ⭐ 🏛️

Experimental

⚠️ These rules are considered experimental and may change or be removed in the future:

Rule ID	Description
svelte/experimental-require-slot-types	require slot type declaration using the $$Slots interface
svelte/experimental-require-strict-events	require the strictEvents attribute on <script> tags

System

These rules relate to this plugin works:

Rule ID	Description
svelte/comment-directive	support comment-directives in HTML template	✅ ⭐ 🏛️
svelte/system	system rule for working this plugin	✅ ⭐ 🏛️

Deprecated

• ⚠️ We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
• 😇 We don't fix bugs which are in deprecated rules since we don't have enough resources.

Rule ID	Replaced by
svelte/@typescript-eslint/no-unnecessary-condition	This rule is no longer needed when using svelte-eslint-parser>=v0.19.0.
svelte/no-goto-without-base	svelte/no-navigation-without-base