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.

We are working on experimental support for Svelte v5, but may break with new versions of Svelte v5.

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

Migration Guide

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

📖 Documentation

See documents.

💿 Installation

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

> Requirements > > - ESLint v7.0.0 and above > - Node.js v14.17.x, v16.x and above

📖 Usage

Configuration

New Config (eslint.config.js)

Use eslint.config.js file to configure rules. See also: .

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['flat/recommended'],
  {
    rules: {
      // override/add rules settings here, such as:
      // 'svelte/rule-name': 'error'
    }
  }
];

This plugin provides configs:

• eslintPluginSvelte.configs['flat/base'] ... Configuration to enable correct Svelte parsing.
• eslintPluginSvelte.configs['flat/recommended'] ... Above, plus rules to prevent errors or unintended behavior.
• eslintPluginSvelte.configs['flat/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['flat/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.

Legacy Config (.eslintrc)

Use .eslintrc.* file to configure rules. See also: .

Example .eslintrc.js:

module.exports = {
  extends: [
    // add more generic rule sets here, such as:
    // 'eslint:recommended',
    'plugin:svelte/recommended'
  ],
  rules: {
    // override/add rules settings here, such as:
    // 'svelte/rule-name': 'error'
  }
};

This plugin provides configs:

• plugin:svelte/base ... Configuration to enable correct Svelte parsing.
• plugin:svelte/recommended ... Above, plus rules to prevent errors or unintended behavior.
• plugin:svelte/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.).
• plugin:svelte/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.

::: warning ❗ Attention

The eslint-plugin-svelte can not be used with the eslint-plugin-svelte3. If you are using eslint-plugin-svelte3 you need to remove it.

  "plugins": [
-   "svelte3"
  ]

:::

Parser Configuration

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

For example, if you are using the "@babel/eslint-parser", configure it as follows:

module.exports = {
  // ...
  extends: ['plugin:svelte/recommended'],
  // ...
  parser: '@babel/eslint-parser',
  // Add an `overrides` section to add a parser configuration for svelte.
  overrides: [
    {
      files: ['*.svelte'],
      parser: 'svelte-eslint-parser'
    }
    // ...
  ]
  // ...
};

For example, if you are using the "@typescript-eslint/parser", and if you want to use TypeScript in `