Awesome

Introduction

eslint-plugin-svelte is the official ESLint plugin for Svelte.
It provides many unique check rules by using the template AST.
You can check on the Online DEMO.

[!NOTE] This document is in development.
Please refer to the document for the version you are using.
For example, https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/README.md and https://github.com/sveltejs/eslint-plugin-svelte/blob/eslint-plugin-svelte%402.46.0/docs

:name_badge: What is this plugin?

ESLint plugin for Svelte.
It provides many unique check rules using the AST generated by svelte-eslint-parser.

❗ Attention

Cannot be used with eslint-plugin-svelte3

The svelte-eslint-parser and the eslint-plugin-svelte can not be used with the eslint-plugin-svelte3.

Experimental support for Svelte v5

We are working on support for Svelte v5, but it is still an experimental feature. Please note that rules and features related to Svelte v5 may be changed or removed in minor versions without notice.

Versioning policy

This plugin follows Semantic Versioning.
However, unlike ESLint’s Semantic Versioning Policy, this plugin adds new rules to its configs even in minor releases. For example, if you are using the recommended config, a minor update may add new rules, which could cause new lint errors in your project.
While ESLint’s Semantic Versioning Policy only adds new rules to configs in major releases, most users (myself included) don’t regularly monitor new rules. This makes it challenging to manually add them to projects whenever they are introduced.
By adding new rules to configs in minor releases, this plugin ensures users can adopt them more easily. If any new rules cause issues, you can simply disable them. I believe this approach helps maintain and improve code quality with minimal effort.

Migration Guide

To migrate from eslint-plugin-svelte v1, or @ota-meshi/eslint-plugin-svelte, please refer to the migration guide.

:book: Documentation

See documents.

:cd: Installation

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

Requirements

• ESLint v8.57.1, v9.0.0 and above
• Node.js v18.20.4, v20.18.0, v22.10.0 and above

:book: Usage

Configuration

Use eslint.config.js file to configure rules. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.

Example eslint.config.js:

import eslintPluginSvelte from 'eslint-plugin-svelte';
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ...eslintPluginSvelte.configs.recommended,
  {
    rules: {
      // override/add rules settings here, such as:
      // 'svelte/rule-name': 'error'
    }
  }
];

This plugin provides configs:

• eslintPluginSvelte.configs.base ... Configuration to enable correct Svelte parsing.
• eslintPluginSvelte.configs.recommended ... Above, plus rules to prevent errors or unintended behavior.
• eslintPluginSvelte.configs.prettier ... Turns off rules that may conflict with Prettier (You still need to configure prettier to work with svelte yourself, for example by using prettier-plugin-svelte.).
• eslintPluginSvelte.configs.all ... All rules. This configuration is not recommended for production use because it changes with every minor and major version of eslint-plugin-svelte. Use it at your own risk.

See the rule list to get the rules that this plugin provides.

Parser Configuration

If you have specified a parser, you need to configure a parser for .svelte.

For example, if you are using the "@typescript-eslint/parser", and if you want to use TypeScript in <script> of .svelte, you need to add more parserOptions configuration.

import eslintPluginSvelte from 'eslint-plugin-svelte';
import * as svelteParser from 'svelte-eslint-parser';
import * as typescriptParser from '@typescript-eslint/parser';
export default [
  ...js.configs.recommended,
  ...eslintPluginSvelte.configs.recommended,
  {
    files: ['**/*.svelte'],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: typescriptParser,
        project: './path/to/your/tsconfig.json',
        extraFileExtensions: ['.svelte']
      }
    }
  }
];

If you have a mix of TypeScript and JavaScript in your project, use a multiple parser configuration.

import eslintPluginSvelte from 'eslint-plugin-svelte';
import * as svelteParser from 'svelte-eslint-parser';
import * as typescriptParser from '@typescript-eslint/parser';
import espree from 'espree';
export default [
  ...js.configs.recommended,
  ...eslintPluginSvelte.configs.recommended,
  {
    files: ['**/*.svelte'],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: {
          // Specify a parser for each lang.
          ts: typescriptParser,
          js: espree,
          typescript: typescriptParser
        },
        project: './path/to/your/tsconfig.json',
        extraFileExtensions: ['.svelte']
      }
    }
  }
];

See also https://github.com/sveltejs/svelte-eslint-parser#readme.

::: warning ❗ Attention

The TypeScript parser uses a singleton internally and it will only use the options given to it when it was first initialized. If trying to change the options for a different file or override, the parser will simply ignore the new options (which may result in an error). See typescript-eslint/typescript-eslint#6778 for some context.

:::

Specify svelte.config.js

If you are using eslint.config.js, we recommend that you import and specify svelte.config.js. By specifying it, some rules of eslint-plugin-svelte will read it and try to behave well for you by default. Some Svelte configurations will be statically loaded from svelte.config.js even if you don't specify it, but you need to specify it to make it work better.

Example eslint.config.js:

import eslintPluginSvelte from 'eslint-plugin-svelte';
import svelteConfig from './svelte.config.js';
export default [
  ...eslintPluginSvelte.configs.recommended,
  {
    files: [
      '**/*.svelte',
      '*.svelte'
      // Add more files if you need.
      // '**/*.svelte.ts', '*.svelte.ts', '**/*.svelte.js', '*.svelte.js',
    ],
    languageOptions: {
      parserOptions: {
        // Specify the `svelte.config.js`.
        svelteConfig
      }
    }
  }
];

settings.svelte

You can change the behavior of this plugin with some settings.

e.g.

export default [
  // ...
  {
    settings: {
      svelte: {
        ignoreWarnings: [
          '@typescript-eslint/no-unsafe-assignment',
          '@typescript-eslint/no-unsafe-member-access'
        ],
        compileOptions: {
          postcss: {
            configFilePath: './path/to/my/postcss.config.js'
          }
        },
        kit: {
          files: {
            routes: 'src/routes'
          }
        }
      }
    }
  }
  // ...
];

settings.svelte.ignoreWarnings

Specifies an array of rules that ignore reports in the template.
For example, set rules on the template that cannot avoid false positives.

settings.svelte.compileOptions

Specifies options for Svelte compile. Effects rules that use Svelte compile. The target rules are svelte/valid-compile and svelte/no-unused-svelte-ignore. Note that it has no effect on ESLint's custom parser.

• postcss ... Specifies options related to PostCSS. You can disable the PostCSS process by specifying false.
  • configFilePath ... Specifies the path of the directory containing the PostCSS configuration.

settings.svelte.kit

::: warning

Even if you don't specify settings.svelte.kit, the rules will try to load information from svelte.config.js, so specify settings.svelte.kit if the default doesn't work.

:::

If you use SvelteKit with not default configuration, you need to set below configurations. The schema is subset of SvelteKit's configuration. Therefore please check SvelteKit docs for more details.

e.g.

export default [
  // ...
  {
    settings: {
      svelte: {
        kit: {
          files: {
            routes: 'src/routes'
          }
        }
      }
    }
  }
  // ...
];

:computer: Editor Integrations

Visual Studio Code

Use the dbaeumer.vscode-eslint extension that Microsoft provides officially.

You have to configure the eslint.validate option of the extension to check .svelte files, because the extension targets only *.js or *.jsx files by default.

Example .vscode/settings.json:

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

:white_check_mark: 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.

:beers: Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

See also CONTRIBUTING.md

Working With Rules

This plugin uses svelte-eslint-parser for the parser. Check here to find out about AST.

:lock: License

See the LICENSE file for license rights and limitations (MIT).