Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork25
sveltejs/svelte-eslint-parser
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Svelte parser forESLint.
You can check it onOnline DEMO.
Note that this parser has experimental support for Svelte v5, but may break with new versions of Svelte v5.
Thesvelte-eslint-parser aims to make it easy to create your own ESLint rules forSvelte.
Theeslint-plugin-svelte is an ESLint plugin that uses thesvelte-eslint-parser. I have alreadyimplemented some rules.
ESLint plugin for Svelte.
It provides many unique check rules by using the template AST.
ESLint plugin for internationalization (i18n) with Svelte.
It provides rules to help internationalization your application created with Svelte.
Thesvelte-eslint-parser can not be used with theeslint-plugin-svelte3.
npm install --save-dev eslint svelte-eslint-parser
- Write
parseroption into your ESLint Config file. - Use glob patterns or
--ext .svelteCLI option.
importjsfrom"@eslint/js";importsvelteParserfrom"svelte-eslint-parser";exportdefault[js.configs.recommended,{files:["**/*.svelte","*.svelte"],languageOptions:{parser:svelteParser,},},];
{"extends":"eslint:recommended","overrides": [ {"files": ["*.svelte"],"parser":"svelte-eslint-parser" } ]}$eslint"src/**/*.{js,svelte}"#or$eslint src --ext .svelte
parserOptions has the same properties as whatespree, the default parser of ESLint, is supporting.For example:
{"parserOptions": {"sourceType":"module","ecmaVersion":2021,"ecmaFeatures": {"globalReturn":false,"impliedStrict":false,"jsx":false } }}You can useparserOptions.parser property to specify a custom parser to parse<script> tags.Other properties than parser would be given to the specified parser.
For example ineslint.config.js:
importtsParserfrom"@typescript-eslint/parser";exportdefault[{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 moreparserOptions configuration.
For example ineslint.config.js:
importtsParserfrom"@typescript-eslint/parser";exportdefault[// ...{// ...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",},},// ...],// ...};
If you want to switch the parser for each lang, specify the object.
For example ineslint.config.js:
importtsParserfrom"@typescript-eslint/parser";importespreefrom"espree";exportdefault[{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" } }}If you are usingeslint.config.js, you can provide asvelte.config.js in theparserOptions.svelteConfig property.
For example:
importsvelteConfigfrom"./svelte.config.js";exportdefault[{files:["**/*.svelte","*.svelte"],languageOptions:{parser:svelteParser,parserOptions:{svelteConfig:svelteConfig,},},},];
IfparserOptions.svelteConfig is not specified, some config will be statically parsed from thesvelte.config.js file.
The.eslintrc.* style configuration cannot loadsvelte.config.js because it cannot use ESM. We recommend using theeslint.config.js style configuration.
You can useparserOptions.svelteFeatures property to specify how to parse related to Svelte features.
For example ineslint.config.js:
exportdefault[{files:["**/*.svelte","*.svelte"],languageOptions:{parser:svelteParser,parserOptions:{svelteFeatures:{/* -- Experimental Svelte Features -- *//* It may be changed or removed in minor versions without notice. */runes:"auto",// or `true` or `false`/* -- 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/38experimentalGenerics: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.*/"runes":"auto",// or `true` or `false`/* -- 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, }, },}Configures whether ESLint recognizes rune symbols.
true... The parser recognizes rune symbols, and always passesparserServices.svelteParseContext.runesastrue."auto"... The parser recognizes rune symbols, and passestruetoparserServices.svelteParseContext.runesif the file contains rune symbols,falseif it does not.false... The parser does not recognize rune symbols, and always passesparserServices.svelteParseContext.runesasfalse.
If not configured this option, The parser will try to read the option fromcompilerOptions.runes fromsvelte.config.js.IfparserOptions.svelteConfig is not specified and the file cannot be analyzed by static analysis, or neither hascompilerOptions.runes, it will behave as"auto".
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 readparserOptions.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 ineslint.config.js:
importsvelteConfigfrom"./svelte.config.js";exportdefault[{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)...",/* ...*/ }, }, ],}Use thedbaeumer.vscode-eslint extension that Microsoft provides officially.
You have to configure theeslint.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"]}- AST.md is AST specification. You can check it on theOnline DEMO.
- The parser will generate its ownScopeManager. You can check it on theOnline DEMO.
- I have alreadyimplemented some rules in the
eslint-plugin-svelte. The source code for these rules will be helpful to you.
Welcome contributing!
Please use GitHub's Issues/PRs.
See also the documentation for the internal mechanism.
See theLICENSE file for license rights and limitations (MIT).
About
Svelte parser for ESLint
Topics
Resources
License
Security policy
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors13
Uh oh!
There was an error while loading.Please reload this page.