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 plugin for Svelte.
Provides a variety of template-based checks using the Svelte AST.
ESLint plugin for internationalization (i18n) in Svelte applications, offering helpful i18n-related rules.
npm install --save-dev eslint svelte-eslint-parserimport js from "@eslint/js"; import svelteParser from "svelte-eslint-parser"; export default [ js.configs.recommended, { files: [ "**/*.svelte", "*.svelte", // Need to specify the file extension for Svelte 5 with rune symbols "**/*.svelte.js", "*.svelte.js", "**/*.svelte.ts", "*.svelte.ts", ], languageOptions: { parser: svelteParser, }, }, ];eslint "src/**/*.{js,svelte}"The parserOptions for this parser generally match what espree—ESLint's default parser—supports.
For example:
import svelteParser from "svelte-eslint-parser"; export default [ // ... { files: [ // Set .svelte/.js/.ts files. See above for more details. ], languageOptions: { parser: svelteParser, parserOptions: { sourceType: "module", ecmaVersion: 2024, ecmaFeatures: { globalReturn: false, impliedStrict: false, jsx: false, }, }, }, }, ];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.
import tsParser from "@typescript-eslint/parser"; export default [ { files: [ // Set .svelte/.js/.ts files. See above for more details. ], languageOptions: { parser: svelteParser, parserOptions: { parser: tsParser, }, }, }, ];If you use @typescript-eslint/parser for TypeScript within <script> of .svelte files, additional configuration is needed. For example:
import tsParser from "@typescript-eslint/parser"; export default [ // Other config for non-Svelte files { languageOptions: { parser: tsParser, parserOptions: { project: "path/to/your/tsconfig.json", extraFileExtensions: [".svelte"], }, }, }, // Svelte config { files: [ // Set .svelte/.js/.ts files. See above for more details. ], languageOptions: { parser: svelteParser, // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration. parserOptions: { parser: tsParser, }, }, }, ];To switch parsers for each language, provide an object:
import tsParser from "@typescript-eslint/parser"; import espree from "espree"; export default [ { files: [ // Set .svelte/.js/.ts files. See above for more details. ], languageOptions: { parser: svelteParser, parserOptions: { parser: { ts: tsParser, js: espree, typescript: tsParser, }, }, }, }, ];If you use eslint.config.js, you can specify a svelte.config.js file via parserOptions.svelteConfig.
import svelteConfig from "./svelte.config.js"; export default [ { files: [ // Set .svelte/.js/.ts files. See above for more details. ], languageOptions: { parser: svelteParser, parserOptions: { svelteConfig, }, }, }, ];If parserOptions.svelteConfig is not set, the parser attempts to statically read some config from svelte.config.js.
You can configure how Svelte-specific features are parsed via parserOptions.svelteFeatures.
For example:
export default [ { files: [ // Set .svelte/.js/.ts files. See above for more details. ], languageOptions: { parser: svelteParser, parserOptions: { svelteFeatures: { // This is for Svelte 5. The default is true. // If false, ESLint won't recognize rune symbols. // If not specified, the parser tries to read compilerOptions.runes from `svelte.config.js`. // If `parserOptions.svelteConfig` is not given and static analysis fails, it defaults to true. runes: true, }, }, }, }, ];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:
{ "eslint.validate": ["javascript", "javascriptreact", "svelte"] }- 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.
Contributions are welcome! Please open an issue or submit a PR on GitHub.
For internal details, see internal-mechanism.md.
See LICENSE (MIT) for rights and limitations.
![@renovate[bot]](https://avatars.githubusercontent.com/in/2740?s=64&v=4){kind=small}
![@github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=64&v=4){kind=small}
