sveltejs/svelte-eslint-parserPublic

NotificationsYou must be signed in to change notification settings
Fork25
Star110

Svelte parser for ESLint

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

License

MIT license

110 stars 25 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 537 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
.eslintignore		.eslintignore
.eslintrc-for-playground.js		.eslintrc-for-playground.js
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.npmrc		.npmrc
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
renovate.json		renovate.json
tsconfig.build.json		tsconfig.build.json
tsconfig.json		tsconfig.json

Repository files navigation

svelte-eslint-parser

Svelte parser forESLint.
You can check it onOnline DEMO.

⤴️ Motivation

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 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

Thesvelte-eslint-parser can not be used with theeslint-plugin-svelte3.

💿 Installation

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

📖 Usage

Writeoverrides.parser option into your.eslintrc.* file.
Use glob patterns or--ext .svelte CLI option.

{"extends":"eslint:recommended","overrides": [        {"files": ["*.svelte"],"parser":"svelte-eslint-parser"        }    ]}

$eslint"src/**/*.{js,svelte}"#or$eslint src --ext .svelte

🔧 Options

parserOptions has the same properties as whatespree, the default parser of ESLint, is supporting.For example:

{"parser":"svelte-eslint-parser","parserOptions": {"sourceType":"module","ecmaVersion":2021,"ecmaFeatures": {"globalReturn":false,"impliedStrict":false,"jsx":false        }    }}

parserOptions.parser

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:

{"parser":"svelte-eslint-parser","parserOptions": {"parser":"@typescript-eslint/parser"    }}

For example, 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.

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.

{"parser":"svelte-eslint-parser","parserOptions": {"parser": {"ts":"@typescript-eslint/parser","js":"espree","typescript":"@typescript-eslint/parser"        }    }}

Parser Object

When using JavaScript configuration (.eslintrc.js), you can also give the parser object directly.

consttsParser=require("@typescript-eslint/parser")constespree=require("espree")module.exports={parser:"svelte-eslint-parser",parserOptions:{// Single parserparser:tsParser,// Multiple parserparser:{js:espree,ts:tsParser,}},}

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.

When using this mode in an ESLint configuration, it is recommended to set it per file pattern as below.

{"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)...",...            }        }    ]}

💻 Editor Integrations

Visual Studio Code

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"    ]}

Usage for Custom Rules / Plugins

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 theeslint-plugin-svelte. The source code for these rules will be helpful to you.