eslint-plugin-svelte weekly downloads statistics

eslint-plugin-svelte

ESLint plugin for Svelte using AST

Live Demo • Documentation • Discord

Introduction

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]

eslint-plugin-svelte and svelte-eslint-parser cannot be used alongside eslint-plugin-svelte3.

Installation

CLI

The recommended way to get started is to use the CLI.

See the CLI docs for more details.

Manual Setup

[!NOTE]

Requirements:

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

Usage

Use eslint.config.js to configure rules. See ESLint documentation for more details.

Configuration

JavaScript project

TypeScript project

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

Svelte config inside vite.config.js

The Svelte config can also be passed to the sveltekit() or svelte() plugin in vite.config.js; SvelteKit 3 projects do this by default. Use @sveltejs/load-config to load it:

Available Configurations

This plugin provides the following configurations:

• svelte.configs.base - Required for Svelte parsing. Does not include any rules. Ideal for building a custom configurations. • svelte.configs.recommended - Extends base and includes rules for best practices. • svelte.configs.prettier - Extends base and disables rules that may conflict with Prettier. Prettier still needs to be configured to work with Svelte, for example, by using prettier-plugin-svelte. • svelte.configs.all - Not Recommended - Extends base and includes all rules. Subject to change with every major and minor release. Use at your own risk.

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

settings.svelte

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

SvelteKit versions are detected from the installed @sveltejs/kit package, falling back to its dependency range in package.json. The plugin recognizes SvelteKit 1, 2, and 3, including SvelteKit 3 prereleases. Version-specific rules run only for the versions they support.

For SvelteKit 3 projects using a custom routes directory, set settings.svelte.kit.files.routes to match the files.routes option passed to the sveltekit Vite plugin. SvelteKit 3 no longer uses svelte.config.js; see the official migration guide.

Editor Integrations

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

Migration Guide

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

Versioning Policy

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.

Rules

:wrench: Indicates that the rule is fixable, and using --fix option on the command line can automatically fix some of the reported problems.\ :bulb: Indicates that some problems reported by the rule are manually fixable by editor suggestions.\ :star: 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. | :star: | | svelte/no-bind-value-on-checkable-inputs | disallow useless bind:value on and | :bulb: | | svelte/no-conflicting-module-names | disallow a .svelte component and a same-named runes module (e.g. Foo.svelte and Foo.svelte.ts) from coexisting | | | svelte/no-dom-manipulating | disallow DOM manipulating | :star: | | svelte/no-dupe-else-if-blocks | disallow duplicate conditions in {#if} / {:else if} chains | :star: | | svelte/no-dupe-on-directives | disallow duplicate on: directives | :star: | | svelte/no-dupe-style-properties | disallow duplicate style properties | :star: | | svelte/no-dupe-use-directives | disallow duplicate use: directives | :star: | | svelte/no-nested-style-tag | disallow elements nested inside other elements or blocks | | | svelte/no-not-function-handler | disallow use of not function in event handler | :star: | | svelte/no-object-in-text-mustaches | disallow objects in text mustache interpolation | :star: | | svelte/no-raw-special-elements | Checks for invalid raw HTML elements | :star::wrench: | | svelte/no-reactive-reassign | disallow reassigning reactive values | :star: | | svelte/no-shorthand-style-property-overrides | disallow shorthand style properties that override related longhand properties | :star: | | svelte/no-store-async | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features | :star: | | svelte/no-top-level-browser-globals | disallow using top-level browser global variables | | | svelte/no-unknown-style-directive-property | disallow unknown style:property | :star: | | svelte/prefer-svelte-reactivity | disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity | :star: | | svelte/require-store-callbacks-use-set-param | store callbacks must use set param | :bulb: | | svelte/require-store-reactive-access | disallow to use of the store itself as an operand. Need to use $ prefix or get function. | :star::wrench: | | svelte/valid-compile | disallow warnings when compiling. | | | svelte/valid-style-parse | require valid style element parsing | |

Security Vulnerability

These rules relate to security vulnerabilities in Svelte code:

| Rule ID | Description | |…

Description from the npm listing.