# 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.
# 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-export-load-in-svelte-module-in-kit-pages | disallow exporting load functions in *.svelte module in SvelteKit page components. |
|
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. | ⭐ |
svelte/valid-prop-names-in-kit-pages | disallow props other than data or errors in SvelteKit page components. |
# 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-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-goto-without-base | disallow using goto() without the base path |
# 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. |