sveltejs/svelte-eslint-parserPublic

NotificationsYou must be signed in to change notification settings
Fork23
Star109

Svelte parser for ESLint

sveltejs.github.io/svelte-eslint-parser/

License

MIT license

109 stars 23 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 805 Commits
.changeset		.changeset
.devcontainer		.devcontainer
.github		.github
.vscode		.vscode
benchmark		benchmark
docs		docs
explorer-v2		explorer-v2
src		src
tests		tests
tools		tools
.env-cmdrc		.env-cmdrc
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
package.json		package.json
prettier.config.mjs		prettier.config.mjs
renovate.json		renovate.json
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json

Repository files navigation

svelte-eslint-parser

Svelte parser forESLint

Live DEMO •Discord

Motivation

Thesvelte-eslint-parser aims to make it easy to create your own ESLint rules forSvelte.

eslint-plugin-svelte is an ESLint plugin built upon this parser, and it alreadyimplements 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

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

Usage

ESLint Config (`eslint.config.js`)

importjsfrom"@eslint/js";importsvelteParserfrom"svelte-eslint-parser";exportdefault[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,},},];

CLI

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

Options

TheparserOptions for this parser generally match whatespree—ESLint's default parser—supports.

For example:

importsvelteParserfrom"svelte-eslint-parser";exportdefault[// ...{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,},},},},];

parserOptions.parser

Use theparserOptions.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.

importtsParserfrom"@typescript-eslint/parser";exportdefault[{files:[// Set .svelte/.js/.ts files. See above for more details.],languageOptions:{parser:svelteParser,parserOptions:{parser:tsParser,},},},];

Using TypeScript in`<script>`

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

importtsParserfrom"@typescript-eslint/parser";exportdefault[// 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,},},},];

Multiple parsers

To switch parsers for each language, provide an object:

importtsParserfrom"@typescript-eslint/parser";importespreefrom"espree";exportdefault[{files:[// Set .svelte/.js/.ts files. See above for more details.],languageOptions:{parser:svelteParser,parserOptions:{parser:{ts:tsParser,js:espree,typescript:tsParser,},},},},];

parserOptions.svelteConfig

If you useeslint.config.js, you can specify asvelte.config.js file viaparserOptions.svelteConfig.

importsvelteConfigfrom"./svelte.config.js";exportdefault[{files:[// Set .svelte/.js/.ts files. See above for more details.],languageOptions:{parser:svelteParser,parserOptions:{        svelteConfig,},},},];

IfparserOptions.svelteConfig is not set, the parser attempts to statically read some config fromsvelte.config.js.

parserOptions.svelteFeatures

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

For example:

exportdefault[{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,},},},},];

Editor Integrations

Visual Studio Code

Use thedbaeumer.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"]}

Usage for Custom Rules / Plugins

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