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.
ESLint plugin for Svelte.
It provides many unique check rules using the AST generated by svelte-eslint-parser.
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.
The svelte-eslint-parser and the eslint-plugin-svelte can not be used with the eslint-plugin-svelte3.
To migrate from eslint-plugin-svelte v1, or @ota-meshi/eslint-plugin-svelte, please refer to the migration guide.
See documents.
npm install --save-dev eslint eslint-plugin-svelte svelteRequirements
- ESLint v7.0.0 and above
- Node.js v14.17.x, v16.x and above
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... 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.).
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"
]:::
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.
You can change the behavior of this plugin with some settings.
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",
},
},
kit: {
files: {
routes: "src/routes",
},
},
},
},
// ...
}Specifies an array of rules that ignore reports in the template.
For example, set rules on the template that cannot avoid false positives.
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 specifyingfalse.configFilePath... Specifies the path of the directory containing the PostCSS configuration.
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.
module.exports = {
// ...
settings: {
svelte: {
kit: {
files: {
routes: "src/routes",
},
},
},
},
// ...
}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}"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"]
}🔧 Indicates that the rule is fixable, and using --fix option on the command line can automatically fix some of the reported problems.
💡 Indicates that some problems reported by the rule are manually fixable by editor suggestions.
⭐ Indicates that the rule is included in the plugin:svelte/recommended config.
These rules relate to possible syntax or logic errors in Svelte code:
| Rule ID | Description | |
|---|---|---|
| svelte/no-dom-manipulating | disallow DOM manipulating | |
| svelte/no-dupe-else-if-blocks | disallow duplicate conditions in {#if} / {:else if} chains |
⭐ |
| svelte/no-dupe-on-directives | disallow duplicate on: directives |
|
| svelte/no-dupe-style-properties | disallow duplicate style properties | ⭐ |
| svelte/no-dupe-use-directives | disallow duplicate use: directives |
|
| svelte/no-dynamic-slot-name | disallow dynamic slot name | ⭐🔧 |
| svelte/no-export-load-in-svelte-module-in-kit-pages | disallow exporting load functions in *.svelte module in Svelte Kit page components. |
|
| svelte/no-not-function-handler | disallow use of not function in event handler | ⭐ |
| svelte/no-object-in-text-mustaches | disallow objects in text mustache interpolation | ⭐ |
| svelte/no-shorthand-style-property-overrides | disallow shorthand style properties that override related longhand properties | ⭐ |
| svelte/no-store-async | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features | |
| svelte/no-unknown-style-directive-property | disallow unknown style:property |
⭐ |
| svelte/require-store-callbacks-use-set-param | store callbacks must use set param |
|
| svelte/require-store-reactive-access | disallow to use of the store itself as an operand. Need to use $ prefix or get function. | 🔧 |
| svelte/valid-compile | disallow warnings when compiling. | ⭐ |
| svelte/valid-prop-names-in-kit-pages | disallow props other than data or errors in Svelte Kit page components. |
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 |
⭐ |
| svelte/no-target-blank | disallow target="_blank" attribute without rel="noopener noreferrer" |
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} |
⭐ |
| svelte/no-reactive-functions | it's not necessary to define functions in reactive statements | 💡 |
| svelte/no-reactive-literals | don't assign literal values in reactive statements | 💡 |
| svelte/no-unused-svelte-ignore | disallow unused svelte-ignore comments | ⭐ |
| svelte/no-useless-mustaches | disallow unnecessary mustache interpolations | 🔧 |
| svelte/prefer-destructured-store-props | destructure values from object stores for better change tracking & fewer redraws | 💡 |
| svelte/require-optimized-style-attribute | require style attributes that can be optimized | |
| svelte/require-stores-init | require initial value in store |
These rules relate to style guidelines, and are therefore quite subjective:
| Rule ID | Description | |
|---|---|---|
| svelte/derived-has-same-inputs-outputs | derived store should use same variable names between values and callback | |
| svelte/first-attribute-linebreak | enforce the location of first attribute | 🔧 |
| svelte/html-closing-bracket-spacing | require or disallow a space before tag's closing brackets | 🔧 |
| svelte/html-quotes | enforce quotes style of HTML attributes | 🔧 |
| svelte/html-self-closing | enforce self-closing style | 🔧 |
| svelte/indent | enforce consistent indentation | 🔧 |
| svelte/max-attributes-per-line | enforce the maximum number of attributes per line | 🔧 |
| svelte/mustache-spacing | enforce unified spacing in mustache | 🔧 |
| svelte/no-extra-reactive-curlies | disallow wrapping single reactive statements in curly braces | 💡 |
| svelte/no-spaces-around-equal-signs-in-attribute | disallow spaces around equal signs in attribute | 🔧 |
| svelte/prefer-class-directive | require class directives instead of ternary expressions | 🔧 |
| svelte/prefer-style-directive | require style directives instead of style attribute | 🔧 |
| svelte/shorthand-attribute | enforce use of shorthand syntax in attribute | 🔧 |
| svelte/shorthand-directive | enforce use of shorthand syntax in directives | 🔧 |
| svelte/sort-attributes | enforce order of attributes | 🔧 |
| svelte/spaced-html-comment | enforce consistent spacing after the <!-- and before the --> in a HTML comment |
🔧 |
These rules extend the rules provided by ESLint itself, or other plugins to work well in Svelte:
| Rule ID | Description | |
|---|---|---|
| svelte/no-inner-declarations | disallow variable or function declarations in nested blocks |
⭐ |
| svelte/no-trailing-spaces | disallow trailing whitespace at the end of lines | 🔧 |
These rules relate to this plugin works:
| Rule ID | Description | |
|---|---|---|
| svelte/comment-directive | support comment-directives in HTML template | ⭐ |
| svelte/system | system rule for working this plugin | ⭐ |
⚠️ We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.- 😇 We don't fix bugs which are in deprecated rules since we don't have enough resources.
| Rule ID | Replaced by |
|---|---|
| svelte/@typescript-eslint/no-unnecessary-condition | This rule is no longer needed when using svelte-eslint-parser>=v0.19.0. |
Welcome contributing!
Please use GitHub's Issues/PRs.
See also CONTRIBUTING.md
This plugin uses svelte-eslint-parser for the parser. Check here to find out about AST.
See the LICENSE file for license rights and limitations (MIT).