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.

# new project
npx sv create

# existing project
npx sv add eslint

See the CLI docs for more details.

Manual Setup

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 eslint.config.js to configure rules. See ESLint documentation for more details.

Configuration

JavaScript project

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

export default defineConfig([
  // ...
  js.configs.recommended,
  svelte.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        // for Sveltekit in non-SPA mode
        ...globals.node
      }
    }
  },
  {
    files: ['**/*.svelte', '**/*.svelte.js'],
    languageOptions: {
      parserOptions: {
        // explicitly importing allows for better compatibilty and functionality with rules and other tooling that depend on the config file.
        //
        // Note: `eslint --cache` will fail with non-serializable properties.
        // In those cases, please remove the non-serializable properties.
        // svelteConfig: {
        //   ...svelteConfig,
        //   kit: {
        //     ...svelteConfig.kit,
        //     typescript: undefined
        //   }
        // }
        svelteConfig
      }
    }
  },
  {
    rules: {
      // Override or add rule settings here, such as:
      // 'svelte/rule-name': 'error'
    }
  }
]);

TypeScript project

npm install --save-dev typescript-eslint

// eslint.config.js
import svelteConfig from './svelte.config.js';
import { defineConfig } from 'eslint/config';
import globals from 'globals';
import js from '@eslint/js';
import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';

export default defineConfig(
  js.configs.recommended,
  ts.configs.recommended,
  svelte.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        // for Sveltekit in non-SPA mode
        ...globals.node
      }
    }
    // ...
  },
  {
    files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
    // See more details at: https://typescript-eslint.io/packages/parser/
    languageOptions: {
      parserOptions: {
        projectService: true,
        // Enable typescript parsing for `.svelte` files.
        extraFileExtensions: ['.svelte'],

        // Specify a parser for each language, if needed:
        // parser: {
        //   ts: ts.parser,
        //   typescript: ts.parser
        //   js: espree,            // add `import espree from 'espree'`
        // },
        parser: ts.parser,

        // explicitly importing allows for better compatibilty and functionality with rules and other tooling that depend on the config file.
        //
        // Note: `eslint --cache` will fail with non-serializable properties.
        // In those cases, please remove the non-serializable properties.
        // 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.

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.

// eslint.config.js
export default defineConfig([
  // ...
  {
    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:

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:

Security Vulnerability

These rules relate to security vulnerabilities in Svelte code:

Best Practices

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

Stylistic Issues

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

Extension Rules

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

SvelteKit

These rules relate to SvelteKit and its best Practices.

Experimental

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

System

These rules relate to this plugin works:

Deprecated

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

Contributing

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.

License

See LICENSE (MIT).