sveltejs/eslint-plugin-svelte

Repository files navigation

NPM licenseNPM versionNPM downloadsNPM downloadsNPM downloadsNPM downloadsNPM downloadsBuild Status

type-coverageConventional CommitsCode Style: Prettierchangesets

Live DemoDocumentationDiscord

eslint-plugin-svelte is the official ESLint plugin for Svelte.
It leverages the AST generated by svelte-eslint-parser to provide custom linting for Svelte.
Note that eslint-plugin-svelte and svelte-eslint-parser cannot be used alongside eslint-plugin-svelte3.

npm install --save-dev svelte eslint eslint-plugin-svelte globals

Note

Requirements:

  • ESLint v8.57.1, v9.0.0, and above
  • Node.js v18.18.0, v20.9.0, v21.1.0 and above

Use the eslint.config.js file to configure rules. For more details, see the ESLint documentation.

// eslint.config.js
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import svelteConfig from './svelte.config.js';

/** @type {import('eslint').Linter.Config[]} */
export default [
  js.configs.recommended,
  ...svelte.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node // Add this if you are using SvelteKit in non-SPA mode
      }
    }
  },
  {
    files: ['**/*.svelte', '**/*.svelte.js'],
    languageOptions: {
      parserOptions: {
        // We recommend importing and specifying svelte.config.js.
        // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly.
        // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it,
        // explicitly specifying it ensures better compatibility and functionality.
        svelteConfig
      }
    }
  },
  {
    rules: {
      // Override or add rule settings here, such as:
      // 'svelte/rule-name': 'error'
    }
  }
];
npm install --save-dev typescript-eslint
// eslint.config.js
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';
import ts from 'typescript-eslint';
import svelteConfig from './svelte.config.js';

export default ts.config(
  js.configs.recommended,
  ...ts.configs.recommended,
  ...svelte.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  },
  {
    files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
    // See more details at: https://typescript-eslint.io/packages/parser/
    languageOptions: {
      parserOptions: {
        projectService: true,
        extraFileExtensions: ['.svelte'], // Add support for additional file extensions, such as .svelte
        parser: ts.parser,
        // Specify a parser for each language, if needed:
        // parser: {
        //   ts: ts.parser,
        //   js: espree,    // Use espree for .js files (add: import espree from 'espree')
        //   typescript: ts.parser
        // },

        // We recommend importing and specifying svelte.config.js.
        // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly.
        // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it,
        // explicitly specifying it ensures better compatibility and functionality.
        svelteConfig
      }
    }
  },
  {
    rules: {
      // Override or add rule settings here, such as:
      // 'svelte/rule-name': 'error'
    }
  }
);

Warning

The TypeScript parser uses a singleton internally, meaning it only respects the options provided during its initial initialization. If you try to change the options for a different file or override them later, the parser will ignore the new options, which may lead to errors. For more context, see typescript-eslint/typescript-eslint#6778.

This plugin provides the following configurations:

  • eslintPluginSvelte.configs.base ... Enables correct Svelte parsing.
  • eslintPluginSvelte.configs.recommended ... Includes base configuration, plus rules to prevent errors or unintended behavior.
  • eslintPluginSvelte.configs.prettier ... Disables rules that may conflict with Prettier. You still need to configure Prettier to work with Svelte manually, for example, by using prettier-plugin-svelte.
  • eslintPluginSvelte.configs.all ... Includes all available rules. Note: This configuration is not recommended for production use, as it changes with every minor and major version of eslint-plugin-svelte. Use at your own risk.

For more details, see the rule list to explore the rules provided by this plugin.

You can customize the behavior of this plugin using specific settings.

// eslint.config.js
export default [
  // ...
  {
    settings: {
      svelte: {
        // Specifies an array of rules to ignore reports within the template.
        // For example, use this to disable rules in the template that may produce unavoidable false positives.
        ignoreWarnings: [
          '@typescript-eslint/no-unsafe-assignment',
          '@typescript-eslint/no-unsafe-member-access'
        ],
        // Specifies options for Svelte compilation.
        // This affects rules that rely on Svelte compilation,
        // such as svelte/valid-compile and svelte/no-unused-svelte-ignore.
        // Note that this setting does not impact ESLint’s custom parser.
        compileOptions: {
          // Specifies options related to PostCSS. You can disable the PostCSS processing by setting it to false.
          postcss: {
            // Specifies the path to the directory that contains the PostCSS configuration.
            configFilePath: './path/to/my/postcss.config.js'
          }
        },
        // Even if settings.svelte.kit is not specified, the rules will attempt to load information from svelte.config.js.
        // However, if the default behavior does not work as expected, you should specify settings.svelte.kit explicitly.
        // If you are using SvelteKit with a non-default configuration, you need to set the following options.
        // The schema is a subset of SvelteKit’s configuration, so refer to the SvelteKit documentation for more details.
        // https://svelte.dev/docs/kit/configuration
        kit: {
          files: {
            routes: 'src/routes'
          }
        }
      }
    }
  }
  // ...
];

Visual Studio Code
Install dbaeumer.vscode-eslint.
Configure .svelte files in .vscode/settings.json:

{
  "eslint.validate": ["javascript", "javascriptreact", "svelte"]
}

If you’re migrating from eslint-plugin-svelte v1 or @ota-meshi/eslint-plugin-svelte, see the migration guide.

This project follows Semantic Versioning. Unlike ESLint’s versioning policy, new rules may be added to the recommended config in minor releases. If these rules cause unwanted warnings, you can disable them.

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

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

Rule IDDescription
svelte/infinite-reactive-loopSvelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent.
svelte/no-dom-manipulatingdisallow DOM manipulating
svelte/no-dupe-else-if-blocksdisallow duplicate conditions in {#if} / {:else if} chains
svelte/no-dupe-on-directivesdisallow duplicate on: directives
svelte/no-dupe-style-propertiesdisallow duplicate style properties
svelte/no-dupe-use-directivesdisallow duplicate use: directives
svelte/no-not-function-handlerdisallow use of not function in event handler
svelte/no-object-in-text-mustachesdisallow objects in text mustache interpolation
svelte/no-raw-special-elementsChecks for invalid raw HTML elements⭐🔧
svelte/no-reactive-reassigndisallow reassigning reactive values
svelte/no-shorthand-style-property-overridesdisallow shorthand style properties that override related longhand properties
svelte/no-store-asyncdisallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features
svelte/no-top-level-browser-globalsdisallow using top-level browser global variables
svelte/no-unknown-style-directive-propertydisallow unknown style:property
svelte/require-store-callbacks-use-set-paramstore callbacks must use set param💡
svelte/require-store-reactive-accessdisallow to use of the store itself as an operand. Need to use $ prefix or get function.⭐🔧
svelte/valid-compiledisallow warnings when compiling.
svelte/valid-style-parserequire valid style element parsing

These rules relate to security vulnerabilities in Svelte code:

Rule IDDescription
svelte/no-at-html-tagsdisallow use of {@html} to prevent XSS attack
svelte/no-target-blankdisallow target="_blank" attribute without rel="noopener noreferrer"

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

Rule IDDescription
svelte/block-langdisallows the use of languages other than those specified in the configuration for the lang attribute of <script> and <style> blocks.💡
svelte/button-has-typedisallow usage of button without an explicit type attribute
svelte/no-add-event-listenerWarns against the use of addEventListener💡
svelte/no-at-debug-tagsdisallow the use of {@debug}⭐💡
svelte/no-ignored-unsubscribedisallow ignoring the unsubscribe method returned by the subscribe() on Svelte stores.
svelte/no-immutable-reactive-statementsdisallow reactive statements that don't reference reactive values.
svelte/no-inline-stylesdisallow attributes and directives that produce inline styles
svelte/no-inspectWarns against the use of $inspect directive
svelte/no-reactive-functionsit's not necessary to define functions in reactive statements⭐💡
svelte/no-reactive-literalsdon't assign literal values in reactive statements⭐💡
svelte/no-svelte-internalsvelte/internal will be removed in Svelte 6.
svelte/no-unnecessary-state-wrapDisallow unnecessary $state wrapping of reactive classes⭐💡
svelte/no-unused-class-namedisallow the use of a class in the template without a corresponding style
svelte/no-unused-propsWarns about defined Props properties that are unused
svelte/no-unused-svelte-ignoredisallow unused svelte-ignore comments
svelte/no-useless-children-snippetdisallow explicit children snippet where it's not needed
svelte/no-useless-mustachesdisallow unnecessary mustache interpolations⭐🔧
svelte/prefer-constRequire const declarations for variables that are never reassigned after declared🔧
svelte/prefer-destructured-store-propsdestructure values from object stores for better change tracking & fewer redraws💡
svelte/prefer-writable-derivedPrefer using writable $derived instead of $state and $effect⭐💡
svelte/require-each-keyrequire keyed {#each} block
svelte/require-event-diser-typesrequire type parameters for createEventDiser
svelte/require-optimized-style-attributerequire style attributes that can be optimized
svelte/require-stores-initrequire initial value in store
svelte/valid-each-keyenforce keys to use variables defined in the {#each} block

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

Rule IDDescription
svelte/consistent-selector-styleenforce a consistent style for CSS selectors
svelte/derived-has-same-inputs-outputsderived store should use same variable names between values and callback💡
svelte/first-attribute-linebreakenforce the location of first attribute🔧
svelte/html-closing-bracket-new-lineRequire or disallow a line break before tag's closing brackets🔧
svelte/html-closing-bracket-spacingrequire or disallow a space before tag's closing brackets🔧
svelte/html-quotesenforce quotes style of HTML attributes🔧
svelte/html-self-closingenforce self-closing style🔧
svelte/indentenforce consistent indentation🔧
svelte/max-attributes-per-lineenforce the maximum number of attributes per line🔧
svelte/mustache-spacingenforce unified spacing in mustache🔧
svelte/no-extra-reactive-curliesdisallow wrapping single reactive statements in curly braces💡
svelte/no-restricted-html-elementsdisallow specific HTML elements
svelte/no-spaces-around-equal-signs-in-attributedisallow spaces around equal signs in attribute🔧
svelte/prefer-class-directiverequire class directives instead of ternary expressions🔧
svelte/prefer-style-directiverequire style directives instead of style attribute🔧
svelte/require-event-prefixrequire component event names to start with "on"
svelte/shorthand-attributeenforce use of shorthand syntax in attribute🔧
svelte/shorthand-directiveenforce use of shorthand syntax in directives🔧
svelte/sort-attributesenforce order of attributes🔧
svelte/spaced-html-commentenforce consistent spacing after the <!-- and before the --> in a HTML comment🔧

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

Rule IDDescription
svelte/no-inner-declarationsdisallow variable or function declarations in nested blocks
svelte/no-trailing-spacesdisallow trailing whitespace at the end of lines🔧

These rules relate to SvelteKit and its best Practices.

Rule IDDescription
svelte/no-export-load-in-svelte-module-in-kit-pagesdisallow exporting load functions in *.svelte module in SvelteKit page components.
svelte/no-navigation-without-basedisallow using navigation (links, goto, pushState, replaceState) without the base path
svelte/valid-prop-names-in-kit-pagesdisallow props other than data or errors in SvelteKit page components.

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

Rule IDDescription
svelte/experimental-require-slot-typesrequire slot type declaration using the $$Slots interface
svelte/experimental-require-strict-eventsrequire the strictEvents attribute on <script> tags

These rules relate to this plugin works:

Rule IDDescription
svelte/comment-directivesupport comment-directives in HTML template
svelte/systemsystem rule for working this plugin
  • ⚠️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 IDReplaced by
svelte/@typescript-eslint/no-unnecessary-conditionThis rule is no longer needed when using svelte-eslint-parser>=v0.19.0.
svelte/no-dynamic-slot-nameNow Svelte compiler itself throws an compile error.
svelte/no-goto-without-basesvelte/no-navigation-without-base

Contributions are welcome! Please open an issue or submit a PR. For more details, see CONTRIBUTING.md.
Refer to svelte-eslint-parser for AST details.

See LICENSE (MIT).