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 that eslint-plugin-svelte and svelte-eslint-parser cannot be used alongside eslint-plugin-svelte3.

Installation

``bash
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

Usage

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

$3

#### JavaScript project

`js
// 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.
//
// If non-serializable properties are included, running ESLint with the --cache flag will fail.
// In that case, please remove the non-serializable properties. (e.g. svelteConfig: { ...svelteConfig, kit: { ...svelteConfig.kit, typescript: undefined }})
svelteConfig
}
}
},
{
rules: {
// Override or add rule settings here, such as:
// 'svelte/rule-name': 'error'
}
}
];
`

#### TypeScript project

`shell
npm install --save-dev typescript-eslint
`

`js
// 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.
//
// If non-serializable properties are included, running ESLint with the --cache flag will fail.
// In that case, please remove the non-serializable properties. (e.g. svelteConfig: { ...svelteConfig, kit: { ...svelteConfig.kit, typescript: undefined }})
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.

$3

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.

$3

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

`js
// 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'
}
}
}
}
}
// ...
];
`

Editor Integrations

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

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

Migration Guide

If you’re migrating from eslint-plugin-svelte v1 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-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-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 | |
|:--------|:------------|:---|
| svelte/no-at-html-tags | disallow use of {@html} to prevent XSS attack | :star: |
| 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