Motivation

The svelte-eslint-parser aims to make it easy to create your own ESLint rules for Svelte.

eslint-plugin-svelte is an ESLint plugin built upon this parser, and it already implements some rules.

ESLint Plugins Using svelte-eslint-parser

eslint-plugin-svelte

ESLint plugin for Svelte.
Provides a variety of template-based checks using the Svelte AST.

@intlify/eslint-plugin-svelte

ESLint plugin for internationalization (i18n) in Svelte applications, offering helpful i18n-related rules.

---

Installation

1npm install --save-dev eslint svelte-eslint-parser

---

Usage

ESLint Config (eslint.config.js)

1import js from "@eslint/js";
2import svelteParser from "svelte-eslint-parser";
3
4export default [
5  js.configs.recommended,
6  {
7    files: [
8      "**/*.svelte",
9      "*.svelte",
10      // Need to specify the file extension for Svelte 5 with rune symbols
11      "**/*.svelte.js",
12      "*.svelte.js",
13      "**/*.svelte.ts",
14      "*.svelte.ts",
15    ],
16    languageOptions: {
17      parser: svelteParser,
18    },
19  },
20];

CLI

1eslint "src/**/*.{js,svelte}"

---

Options

The parserOptions for this parser generally match what espree—ESLint's default parser—supports.

For example:

1import svelteParser from "svelte-eslint-parser";
2
3export default [
4  // ...
5  {
6    files: [
7      // Set .svelte/.js/.ts files. See above for more details.
8    ],
9    languageOptions: {
10      parser: svelteParser,
11      parserOptions: {
12        sourceType: "module",
13        ecmaVersion: 2021,
14        ecmaFeatures: {
15          globalReturn: false,
16          impliedStrict: false,
17          jsx: false,
18        },
19      },
20    },
21  },
22];

parserOptions.parser

Use the parserOptions.parser property to define a custom parser for <script> tags. Any additional parser options (besides the parser itself) are passed along to the specified parser.

1import tsParser from "@typescript-eslint/parser";
2
3export default [
4  {
5    files: [
6      // Set .svelte/.js/.ts files. See above for more details.
7    ],
8    languageOptions: {
9      parser: svelteParser,
10      parserOptions: {
11        parser: tsParser,
12      },
13    },
14  },
15];

Using TypeScript in <script>

If you use @typescript-eslint/parser for TypeScript within <script> of .svelte files, additional configuration is needed. For example:

1import tsParser from "@typescript-eslint/parser";
2
3export default [
4  // Other config for non-Svelte files
5  {
6    languageOptions: {
7      parser: tsParser,
8      parserOptions: {
9        project: "path/to/your/tsconfig.json",
10        extraFileExtensions: [".svelte"],
11      },
12    },
13  },
14  // Svelte config
15  {
16    files: [
17      // Set .svelte/.js/.ts files. See above for more details.
18    ],
19    languageOptions: {
20      parser: svelteParser,
21      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
22      parserOptions: {
23        parser: tsParser,
24      },
25    },
26  },
27];

Multiple parsers

To switch parsers for each language, provide an object:

1import tsParser from "@typescript-eslint/parser";
2import espree from "espree";
3
4export default [
5  {
6    files: [
7      // Set .svelte/.js/.ts files. See above for more details.
8    ],
9    languageOptions: {
10      parser: svelteParser,
11      parserOptions: {
12        parser: {
13          ts: tsParser,
14          js: espree,
15          typescript: tsParser,
16        },
17      },
18    },
19  },
20];

parserOptions.svelteConfig

If you use eslint.config.js, you can specify a svelte.config.js file via parserOptions.svelteConfig.

1import svelteConfig from "./svelte.config.js";
2
3export default [
4  {
5    files: [
6      // Set .svelte/.js/.ts files. See above for more details.
7    ],
8    languageOptions: {
9      parser: svelteParser,
10      parserOptions: {
11        svelteConfig,
12      },
13    },
14  },
15];

If parserOptions.svelteConfig is not set, the parser attempts to statically read some config from svelte.config.js.

parserOptions.svelteFeatures

You can configure how Svelte-specific features are parsed via parserOptions.svelteFeatures.

For example:

1export default [
2  {
3    files: [
4      // Set .svelte/.js/.ts files. See above for more details.
5    ],
6    languageOptions: {
7      parser: svelteParser,
8      parserOptions: {
9        svelteFeatures: {
10          // This is for Svelte 5. The default is true.
11          // If false, ESLint won't recognize rune symbols.
12          // If not specified, the parser tries to read compilerOptions.runes from `svelte.config.js`.
13          // If `parserOptions.svelteConfig` is not given and static analysis fails, it defaults to true.
14          runes: true,
15        },
16      },
17    },
18  },
19];

---

Editor Integrations

Visual Studio Code

Use the dbaeumer.vscode-eslint extension provided by Microsoft.

By default, it only targets *.js and *.jsx, so you need to configure .svelte file support. For example, in .vscode/settings.json:

1{
2  "eslint.validate": ["javascript", "javascriptreact", "svelte"]
3}

---

Usage for Custom Rules / Plugins

• See AST.md for the AST specification. You can explore it on the Live DEMO.
• This parser generates its own ScopeManager. Check the Live DEMO.
• Several rules are [already implemented] in [eslint-plugin-svelte], and their source code can be a helpful reference.

---

Contributing

Contributions are welcome! Please open an issue or submit a PR on GitHub.
For internal details, see internal-mechanism.md.

---

License

See LICENSE (MIT) for rights and limitations.