eslint-plugin-svelte

Introduction

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

:name_badge: What is this plugin?

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

❓ Why?

Svelte has the official ESLint plugin the eslint-plugin-svelte3. The eslint-plugin-svelte3 works well enough to check scripts. However, it does not handle the AST of the template, which makes it very difficult for third parties to create their own the ESLint rules for the Svelte.

The svelte-eslint-parser aims to make it easy to create your own rules for the Svelte by allowing the template AST to be used in the rules.

❗ Attention

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

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 v7.0.0 and above
• Node.js v14.17.x, v16.x and above

:book: Usage

Configuration

Use .eslintrc.* file to configure rules. See also: https://eslint.org/docs/user-guide/configuring.

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 ... Turn off rules that may conflict with Prettier (prettier-plugin-svelte).

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 <script> of .svelte, you need to add more parserOptions configuration.

module.exports = {
  // ...
  extends: ["plugin:svelte/recommended"],
  // ...
  parser: "@typescript-eslint/parser",
  parserOptions: {
    // ...
    project: "path/to/your/tsconfig.json",
    extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
  },
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
      parserOptions: {
        parser: "@typescript-eslint/parser",
      },
    },
    // ...
  ],
  // ...
}

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

module.exports = {
  // ...
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      parserOptions: {
        parser: {
          // Specify a parser for each lang.
          ts: "@typescript-eslint/parser",
          js: "espree",
          typescript: "@typescript-eslint/parser",
        },
      },
    },
    // ...
  ],
  // ...
}

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

settings.svelte

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

• ignoreWarnings (optional) ... Specifies an array of rules that ignore reports in the template.
  For example, set rules on the template that cannot avoid false positives.
• compileOptions (optional) ... 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 (optional) ... Specifies options related to PostCSS. You can disable the PostCSS process by specifying false.
    • configFilePath (optional) ... Specifies the path of the directory containing the PostCSS configuration.

e.g.

module.exports = {
  // ...
  settings: {
    svelte: {
      ignoreWarnings: [
        "@typescript-eslint/no-unsafe-assignment",
        "@typescript-eslint/no-unsafe-member-access",
      ],
      compileOptions: {
        postcss: {
          configFilePath: "./path/to/my/postcss.config.js",
        },
      },
    },
  },
  // ...
}

Running ESLint from the command line

If you want to run eslint from the command line, make sure you include the .svelte extension using the --ext option or a glob pattern, because ESLint targets only .js files by default.

Examples:

eslint --ext .js,.svelte src
eslint "src/**/*.{js,svelte}"

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

Rule ID	Description
svelte/no-dupe-else-if-blocks	disallow duplicate conditions in {#if} / {:else if} chains	:star:
svelte/no-dupe-style-properties	disallow duplicate style properties	:star:
svelte/no-dynamic-slot-name	disallow dynamic slot name	:star::wrench:
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-shorthand-style-property-overrides	disallow shorthand style properties that override related longhand properties	:star:
svelte/no-unknown-style-directive-property	disallow unknown style:property	:star:
svelte/valid-compile	disallow warnings when compiling.	:star:

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/button-has-type	disallow usage of button without an explicit type attribute
svelte/no-at-debug-tags	disallow the use of {@debug}	:star:
svelte/no-reactive-functions	it's not necessary to define functions in reactive statements	:bulb:
svelte/no-reactive-literals	don't assign literal values in reactive statements	:bulb:
svelte/no-unused-svelte-ignore	disallow unused svelte-ignore comments	:star:
svelte/no-useless-mustaches	disallow unnecessary mustache interpolations	:wrench:
svelte/require-optimized-style-attribute	require style attributes that can be optimized
svelte/require-stores-init	require initial value in store

Stylistic Issues

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

Rule ID	Description
svelte/first-attribute-linebreak	enforce the location of first attribute	:wrench:
svelte/html-closing-bracket-spacing	require or disallow a space before tag's closing brackets	:wrench:
svelte/html-quotes	enforce quotes style of HTML attributes	:wrench:
svelte/html-self-closing	enforce self-closing style	:wrench:
svelte/indent	enforce consistent indentation	:wrench:
svelte/max-attributes-per-line	enforce the maximum number of attributes per line	:wrench:
svelte/mustache-spacing	enforce unified spacing in mustache	:wrench:
svelte/no-extra-reactive-curlies	disallow wrapping single reactive statements in curly braces	:bulb:
svelte/no-spaces-around-equal-signs-in-attribute	disallow spaces around equal signs in attribute	:wrench:
svelte/prefer-class-directive	require class directives instead of ternary expressions	:wrench:
svelte/prefer-style-directive	require style directives instead of style attribute	:wrench:
svelte/shorthand-attribute	enforce use of shorthand syntax in attribute	:wrench:
svelte/shorthand-directive	enforce use of shorthand syntax in directives	:wrench:
svelte/sort-attributes	enforce order of attributes	:wrench:
svelte/spaced-html-comment	enforce consistent spacing after the <!-- and before the --> in a HTML comment	:wrench:

Extension Rules

These rules extend the rules provided by ESLint itself to work well in Svelte:

Rule ID	Description
svelte/no-inner-declarations	disallow variable or function declarations in nested blocks	:star:

System

These rules relate to this plugin works:

Rule ID	Description
svelte/comment-directive	support comment-directives in HTML template	:star:
svelte/system	system rule for working this plugin	:star:

:beers: Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

Development Tools

• yarn test runs tests.
• yarn cover runs tests and measures coverage.
• yarn new [new-rule-name] generate the files needed to implement the new rule.
• yarn update runs in order to update readme and recommended configuration.
• yarn docs:watch launch the document site in development mode.

Test the Rule

Rule testing almost always uses fixtures.
For example, for an indent rule, the .ts file that runs the test is tests/src/rules/indent.ts and the fixture is in tests/fixtures/rules/indent.
The fixture directory has an invalid directory and a valid directory.

• The invalid directory contains test cases where the rule reports problems.
• The valid directory contains test cases where the rule does not report a problem.

The fixture input file should be named *-input.svelte. It is automatically collected and tested.
If your test requires configuration, you need to add a json file with the configuration.

• If you want to apply a configuration to my-test-input.svelte, add my-test-config.json.
• If you want to apply the same configuration to all the fixtures in that directory, add _config.json.

To verify the output of invalid test cases requires *-errors.json, and *-output.svelte (for auto-fix). However, you don't have to add them yourself. If they do not exist, they will be automatically generated when you run the test. In other words, delete them manually when you want to recreate them.

Tips:

If you want to test only one rule, run the following command (for indent rule):

yarn test -g indent

Take https://stackoverflow.com/questions/10832031/how-to-run-a-single-test-with-mocha as reference for details.

If you want to test only my-test-input.svelte, add my-test-config.json and save {"only": true}.
(Note that {"only": true} must be removed before making a pull request.)

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