Awesome
svelte-eslint-parser
Svelte parser for ESLint.
You can check it on Online DEMO.
Note that this parser has experimental support for Svelte v5, but may break with new versions of Svelte v5.
โคด๏ธ Motivation
The svelte-eslint-parser aims to make it easy to create your own ESLint rules for Svelte.
The eslint-plugin-svelte
is an ESLint plugin that uses the svelte-eslint-parser. I have already implemented some rules.
ESLint Plugins Using svelte-eslint-parser
eslint-plugin-svelte
ESLint plugin for Svelte.
It provides many unique check rules by using the template AST.
@intlify/eslint-plugin-svelte
ESLint plugin for internationalization (i18n) with Svelte.
It provides rules to help internationalization your application created with Svelte.
โ Attention
The svelte-eslint-parser can not be used with the eslint-plugin-svelte3.
๐ฟ Installation
npm install --save-dev eslint svelte-eslint-parser
๐ Usage
- Write
parser
option into your ESLint Config file. - Use glob patterns or
--ext .svelte
CLI option.
ESLint Config (eslint.config.js
)
import js from "@eslint/js";
import svelteParser from "svelte-eslint-parser";
export default [
js.configs.recommended,
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
},
},
];
ESLint Config (.eslintrc.*
)
{
"extends": "eslint:recommended",
"overrides": [
{
"files": ["*.svelte"],
"parser": "svelte-eslint-parser"
}
]
}
CLI
$ eslint "src/**/*.{js,svelte}"
# or
$ eslint src --ext .svelte
๐ง Options
parserOptions
has the same properties as what espree, the default parser of ESLint, is supporting.
For example:
{
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2021,
"ecmaFeatures": {
"globalReturn": false,
"impliedStrict": false,
"jsx": false
}
}
}
parserOptions.parser
You can use parserOptions.parser
property to specify a custom parser to parse <script>
tags.
Other properties than parser would be given to the specified parser.
For example in eslint.config.js
:
import tsParser from "@typescript-eslint/parser";
export default [
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
parserOptions: {
parser: tsParser,
},
},
},
];
For example in .eslintrc.*
:
{
"parser": "svelte-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser"
}
}
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.
For example in eslint.config.js
:
import tsParser from "@typescript-eslint/parser";
export default [
// ...
{
// ...
languageOptions: {
parser: tsParser,
parserOptions: {
// ...
project: "path/to/your/tsconfig.json",
extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
},
},
},
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
parserOptions: {
parser: tsParser,
},
},
// ...
},
];
For example in .eslintrc.*
:
module.exports = {
// ...
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",
},
},
// ...
],
// ...
};
Multiple parsers
If you want to switch the parser for each lang, specify the object.
For example in eslint.config.js
:
import tsParser from "@typescript-eslint/parser";
import espree from "espree";
export default [
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
parserOptions: {
parser: {
ts: tsParser,
js: espree,
typescript: tsParser,
},
},
},
},
];
For example in .eslintrc.*
:
{
"parser": "svelte-eslint-parser",
"parserOptions": {
"parser": {
"ts": "@typescript-eslint/parser",
"js": "espree",
"typescript": "@typescript-eslint/parser"
}
}
}
parserOptions.svelteConfig
If you are using eslint.config.js
, you can provide a svelte.config.js
in the parserOptions.svelteConfig
property.
For example:
import svelteConfig from "./svelte.config.js";
export default [
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
parserOptions: {
svelteConfig: svelteConfig,
},
},
},
];
If parserOptions.svelteConfig
is not specified, some config will be statically parsed from the svelte.config.js
file.
The .eslintrc.*
style configuration cannot load svelte.config.js
because it cannot use ESM. We recommend using the eslint.config.js
style configuration.
parserOptions.svelteFeatures
You can use parserOptions.svelteFeatures
property to specify how to parse related to Svelte features.
For example in eslint.config.js
:
export default [
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
parserOptions: {
svelteFeatures: {
/* -- Experimental Svelte Features -- */
/* It may be changed or removed in minor versions without notice. */
// This option is for Svelte 5. The default value is `true`.
// If `false`, ESLint will not recognize rune symbols.
// If not configured this option, The parser will try to read the option from `compilerOptions.runes` from `svelte.config.js`.
// If `parserOptions.svelteConfig` is not specified and the file cannot be parsed by static analysis, it will behave as `true`.
runes: true,
/* -- Experimental Svelte Features -- */
/* It may be changed or removed in minor versions without notice. */
// Whether to parse the `generics` attribute.
// See https://github.com/sveltejs/rfcs/pull/38
experimentalGenerics: false,
},
},
},
},
];
For example in .eslintrc.*
:
{
"parser": "svelte-eslint-parser",
"parserOptions": {
"svelteFeatures": {
/* -- Experimental Svelte Features -- */
/* It may be changed or removed in minor versions without notice. */
// This option is for Svelte 5. The default value is `true`.
// If `false`, ESLint will not recognize rune symbols.
// If not configured this option, The parser will try to read the option from `compilerOptions.runes` from `svelte.config.js`.
// If `parserOptions.svelteConfig` is not specified and the file cannot be parsed by static analysis, it will behave as `true`.
"runes": true,
/* -- Experimental Svelte Features -- */
/* It may be changed or removed in minor versions without notice. */
// Whether to parse the `generics` attribute.
// See https://github.com/sveltejs/rfcs/pull/38
"experimentalGenerics": false,
},
},
}
Runes support
This is an experimental feature. It may be changed or removed in minor versions without notice.
If you install Svelte v5 the parser will be able to parse runes, and will also be able to parse *.js
and *.ts
files.
If you don't want to use Runes, you may need to configure. Please read parserOptions.svelteFeatures for more details.
When using this mode in an ESLint configuration, it is recommended to set it per file pattern as below.
For example in eslint.config.js
:
import svelteConfig from "./svelte.config.js";
export default [
{
files: ["**/*.svelte", "*.svelte"],
languageOptions: {
parser: svelteParser,
parserOptions: {
parser: "...",
svelteConfig,
/* ... */
},
},
},
{
files: ["**/*.svelte.js", "*.svelte.js"],
languageOptions: {
parser: svelteParser,
parserOptions: {
svelteConfig,
/* ... */
},
},
},
{
files: ["**/*.svelte.ts", "*.svelte.ts"],
languageOptions: {
parser: svelteParser,
parserOptions: {
parser: "...(ts parser)...",
svelteConfig,
/* ... */
},
},
},
];
For example in .eslintrc.*
:
{
"overrides": [
{
"files": ["*.svelte"],
"parser": "svelte-eslint-parser",
"parserOptions": {
"parser": "...",
/* ... */
},
},
{
"files": ["*.svelte.js"],
"parser": "svelte-eslint-parser",
"parserOptions": {
/* ... */
},
},
{
"files": ["*.svelte.ts"],
"parser": "svelte-eslint-parser",
"parserOptions": {
"parser": "...(ts parser)...",
/* ... */
},
},
],
}
: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"]
}
Usage for Custom Rules / Plugins
- AST.md is AST specification. You can check it on the Online DEMO.
- The parser will generate its own ScopeManager. You can check it on the Online DEMO.
- I have already implemented some rules in the
eslint-plugin-svelte
. The source code for these rules will be helpful to you.
:beers: Contributing
Welcome contributing!
Please use GitHub's Issues/PRs.
See also the documentation for the internal mechanism.
:lock: License
See the LICENSE file for license rights and limitations (MIT).