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-parserESLint 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-parserESLint Config (
eslint.config.js
)
import 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, }, }, }, ];Using TypeScript in
<script>
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, }, }, }, }, ];parserOptions.svelteConfig
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"] }Usage for Custom Rules / Plugins
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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4