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.
![Build Status](https://github.com/sveltejs/eslint-plugin-svelte/workflows/CI/badge.svg?branch=main)
![changesets](https://img.shields.io/badge/maintained%20with-changesets-176de3.svg)
: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.
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
New Config (eslint.config.js
)
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 [
...eslintPluginSvelte.configs['flat/recommended'],
{
rules: {
}
}
];
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: https://eslint.org/docs/user-guide/configuring.
Example .eslintrc.js:
module.exports = {
extends: [
'plugin:svelte/recommended'
],
rules: {
}
};
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',
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']
},
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
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: {
ts: '@typescript-eslint/parser',
js: 'espree',
typescript: '@typescript-eslint/parser'
}
}
}
]
};
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.
:::
settings.svelte
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'
}
}
}
}
};
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
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'
}
}
}
}
};
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:
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).