# eslint-plugin-svelte **Repository Path**: mirrors_ai/eslint-plugin-svelte ## Basic Information - **Project Name**: eslint-plugin-svelte - **Description**: ESLint plugin for Svelte using AST - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-11-15 - **Last Updated**: 2025-11-26 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README [![NPM license](https://img.shields.io/npm/l/eslint-plugin-svelte.svg)](https://www.npmjs.com/package/eslint-plugin-svelte) [![NPM version](https://img.shields.io/npm/v/eslint-plugin-svelte.svg)](https://www.npmjs.com/package/eslint-plugin-svelte) [![NPM downloads](https://img.shields.io/badge/dynamic/json.svg?label=downloads&colorB=green&suffix=/day&query=$.downloads&uri=https://api.npmjs.org//downloads/point/last-day/eslint-plugin-svelte&maxAge=3600)](http://www.npmtrends.com/eslint-plugin-svelte) [![NPM downloads](https://img.shields.io/npm/dw/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte) [![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte) [![NPM downloads](https://img.shields.io/npm/dy/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte) [![NPM downloads](https://img.shields.io/npm/dt/eslint-plugin-svelte.svg)](http://www.npmtrends.com/eslint-plugin-svelte) [![Build Status](https://github.com/sveltejs/eslint-plugin-svelte/workflows/CI/badge.svg?branch=main)](https://github.com/sveltejs/eslint-plugin-svelte/actions?query=workflow%3ACI) [![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fsveltejs%2Feslint-plugin-svelte%2Fmain%2Fpackage.json)](https://github.com/plantain-00/type-coverage) [![Conventional Commits](https://img.shields.io/badge/conventional%20commits-1.0.0-yellow.svg)](https://conventionalcommits.org) [![Code Style: Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier) [![changesets](https://img.shields.io/badge/maintained%20with-changesets-176de3.svg)](https://github.com/atlassian/changesets)
# eslint-plugin-svelte ## ESLint plugin for Svelte using AST [Live Demo](https://eslint-online-playground.netlify.app/#eslint-plugin-svelte%20with%20typescript) • [Documentation](https://sveltejs.github.io/eslint-plugin-svelte/) • [Discord](https://svelte.dev/chat)
## Introduction `eslint-plugin-svelte` is the official [ESLint](https://eslint.org/) plugin for [Svelte](https://svelte.dev/).\ It leverages the AST generated by [svelte-eslint-parser](https://github.com/sveltejs/svelte-eslint-parser) to provide custom linting for Svelte.\ Note that `eslint-plugin-svelte` and `svelte-eslint-parser` cannot be used alongside [eslint-plugin-svelte3](https://github.com/sveltejs/eslint-plugin-svelte3). ## Installation ```bash npm install --save-dev svelte eslint eslint-plugin-svelte globals ``` > [!NOTE] > > **Requirements:** > > - ESLint v8.57.1, v9.0.0, and above > - Node.js v18.18.0, v20.9.0, v21.1.0 and above ## Usage Use the `eslint.config.js` file to configure rules. For more details, see the [ESLint documentation](https://eslint.org/docs/latest/use/configure/configuration-files-new). ### Configuration #### JavaScript project ```js // eslint.config.js import js from '@eslint/js'; import svelte from 'eslint-plugin-svelte'; import globals from 'globals'; import svelteConfig from './svelte.config.js'; /** @type {import('eslint').Linter.Config[]} */ export default [ js.configs.recommended, ...svelte.configs.recommended, { languageOptions: { globals: { ...globals.browser, ...globals.node // Add this if you are using SvelteKit in non-SPA mode } } }, { files: ['**/*.svelte', '**/*.svelte.js'], languageOptions: { parserOptions: { // We recommend importing and specifying svelte.config.js. // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly. // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it, // explicitly specifying it ensures better compatibility and functionality. // // If non-serializable properties are included, running ESLint with the --cache flag will fail. // In that case, please remove the non-serializable properties. (e.g. `svelteConfig: { ...svelteConfig, kit: { ...svelteConfig.kit, typescript: undefined }}`) svelteConfig } } }, { rules: { // Override or add rule settings here, such as: // 'svelte/rule-name': 'error' } } ]; ``` #### TypeScript project ```shell npm install --save-dev typescript-eslint ``` ```js // eslint.config.js import js from '@eslint/js'; import svelte from 'eslint-plugin-svelte'; import globals from 'globals'; import ts from 'typescript-eslint'; import svelteConfig from './svelte.config.js'; export default ts.config( js.configs.recommended, ...ts.configs.recommended, ...svelte.configs.recommended, { languageOptions: { globals: { ...globals.browser, ...globals.node } } }, { files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'], // See more details at: https://typescript-eslint.io/packages/parser/ languageOptions: { parserOptions: { projectService: true, extraFileExtensions: ['.svelte'], // Add support for additional file extensions, such as .svelte parser: ts.parser, // Specify a parser for each language, if needed: // parser: { // ts: ts.parser, // js: espree, // Use espree for .js files (add: import espree from 'espree') // typescript: ts.parser // }, // We recommend importing and specifying svelte.config.js. // By doing so, some rules in eslint-plugin-svelte will automatically read the configuration and adjust their behavior accordingly. // While certain Svelte settings may be statically loaded from svelte.config.js even if you don’t specify it, // explicitly specifying it ensures better compatibility and functionality. // // If non-serializable properties are included, running ESLint with the --cache flag will fail. // In that case, please remove the non-serializable properties. (e.g. `svelteConfig: { ...svelteConfig, kit: { ...svelteConfig.kit, typescript: undefined }}`) svelteConfig } } }, { rules: { // Override or add rule settings here, such as: // 'svelte/rule-name': 'error' } } ); ``` > [!WARNING] > The TypeScript parser uses a singleton internally, meaning it only respects the options provided during its initial initialization. > If you try to change the options for a different file or override them later, the parser will ignore the new options, which may lead to errors. > For more context, see [typescript-eslint/typescript-eslint#6778](https://github.com/typescript-eslint/typescript-eslint/issues/6778). ### Available Configurations This plugin provides the following configurations: - **`eslintPluginSvelte.configs.base`** ... Enables correct Svelte parsing. - **`eslintPluginSvelte.configs.recommended`** ... Includes `base` configuration, plus rules to prevent errors or unintended behavior. - **`eslintPluginSvelte.configs.prettier`** ... Disables rules that may conflict with [Prettier](https://prettier.io/). You still need to configure Prettier to work with Svelte manually, for example, by using [prettier-plugin-svelte](https://github.com/sveltejs/prettier-plugin-svelte). - **`eslintPluginSvelte.configs.all`** ... Includes all available rules. **Note:** This configuration is not recommended for production use, as it changes with every minor and major version of `eslint-plugin-svelte`. Use at your own risk. For more details, see [the rule list](https://sveltejs.github.io/eslint-plugin-svelte/rules/) to explore the rules provided by this plugin. ### settings.svelte You can customize the behavior of this plugin using specific settings. ```js // eslint.config.js export default [ // ... { settings: { svelte: { // Specifies an array of rules to ignore reports within the template. // For example, use this to disable rules in the template that may produce unavoidable false positives. ignoreWarnings: [ '@typescript-eslint/no-unsafe-assignment', '@typescript-eslint/no-unsafe-member-access' ], // Specifies options for Svelte compilation. // This affects rules that rely on Svelte compilation, // such as svelte/valid-compile and svelte/no-unused-svelte-ignore. // Note that this setting does not impact ESLint’s custom parser. compileOptions: { // Specifies options related to PostCSS. You can disable the PostCSS processing by setting it to false. postcss: { // Specifies the path to the directory that contains the PostCSS configuration. configFilePath: './path/to/my/postcss.config.js' } }, // Even if settings.svelte.kit is not specified, the rules will attempt to load information from svelte.config.js. // However, if the default behavior does not work as expected, you should specify settings.svelte.kit explicitly. // If you are using SvelteKit with a non-default configuration, you need to set the following options. // The schema is a subset of SvelteKit’s configuration, so refer to the SvelteKit documentation for more details. // https://svelte.dev/docs/kit/configuration kit: { files: { routes: 'src/routes' } } } } } // ... ]; ``` ## Editor Integrations **Visual Studio Code**\ Install [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).\ Configure `.svelte` files in `.vscode/settings.json`: ```json { "eslint.validate": ["javascript", "javascriptreact", "svelte"] } ``` ## Migration Guide If you’re migrating from `eslint-plugin-svelte` v1 or [`@ota-meshi/eslint-plugin-svelte`](https://www.npmjs.com/package/@ota-meshi/eslint-plugin-svelte), see the [migration guide](https://sveltejs.github.io/eslint-plugin-svelte/migration/). ## Versioning Policy This project follows [Semantic Versioning](https://semver.org/). Unlike [ESLint’s versioning policy](https://github.com/eslint/eslint#semantic-versioning-policy), new rules may be added to the recommended config in minor releases. If these rules cause unwanted warnings, you can disable them. ## Rules :wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the reported problems.\ :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).\ :star: Indicates that the rule is included in the `plugin:svelte/recommended` config. ## Possible Errors These rules relate to possible syntax or logic errors in Svelte code: | Rule ID | Description | | |:--------|:------------|:---| | [svelte/infinite-reactive-loop](https://sveltejs.github.io/eslint-plugin-svelte/rules/infinite-reactive-loop/) | Svelte runtime prevents calling the same reactive statement twice in a microtask. But between different microtask, it doesn't prevent. | :star: | | [svelte/no-dom-manipulating](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dom-manipulating/) | disallow DOM manipulating | :star: | | [svelte/no-dupe-else-if-blocks](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-else-if-blocks/) | disallow duplicate conditions in `{#if}` / `{:else if}` chains | :star: | | [svelte/no-dupe-on-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-on-directives/) | disallow duplicate `on:` directives | :star: | | [svelte/no-dupe-style-properties](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-style-properties/) | disallow duplicate style properties | :star: | | [svelte/no-dupe-use-directives](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-dupe-use-directives/) | disallow duplicate `use:` directives | :star: | | [svelte/no-not-function-handler](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-not-function-handler/) | disallow use of not function in event handler | :star: | | [svelte/no-object-in-text-mustaches](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: | | [svelte/no-raw-special-elements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-raw-special-elements/) | Checks for invalid raw HTML elements | :star::wrench: | | [svelte/no-reactive-reassign](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-reassign/) | disallow reassigning reactive values | :star: | | [svelte/no-shorthand-style-property-overrides](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/) | disallow shorthand style properties that override related longhand properties | :star: | | [svelte/no-store-async](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-store-async/) | disallow using async/await inside svelte stores because it causes issues with the auto-unsubscribing features | :star: | | [svelte/no-top-level-browser-globals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-top-level-browser-globals/) | disallow using top-level browser global variables | | | [svelte/no-unknown-style-directive-property](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: | | [svelte/prefer-svelte-reactivity](https://sveltejs.github.io/eslint-plugin-svelte/rules/prefer-svelte-reactivity/) | disallow using mutable instances of built-in classes where a reactive alternative is provided by svelte/reactivity | :star: | | [svelte/require-store-callbacks-use-set-param](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-callbacks-use-set-param/) | store callbacks must use `set` param | :bulb: | | [svelte/require-store-reactive-access](https://sveltejs.github.io/eslint-plugin-svelte/rules/require-store-reactive-access/) | disallow to use of the store itself as an operand. Need to use $ prefix or get function. | :star::wrench: | | [svelte/valid-compile](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-compile/) | disallow warnings when compiling. | | | [svelte/valid-style-parse](https://sveltejs.github.io/eslint-plugin-svelte/rules/valid-style-parse/) | require valid style element parsing | | ## Security Vulnerability These rules relate to security vulnerabilities in Svelte code: | Rule ID | Description | | |:--------|:------------|:---| | [svelte/no-at-html-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-html-tags/) | disallow use of `{@html}` to prevent XSS attack | :star: | | [svelte/no-target-blank](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-target-blank/) | disallow `target="_blank"` attribute without `rel="noopener noreferrer"` | | ## Best Practices These rules relate to better ways of doing things to help you avoid problems: | Rule ID | Description | | |:--------|:------------|:---| | [svelte/block-lang](https://sveltejs.github.io/eslint-plugin-svelte/rules/block-lang/) | disallows the use of languages other than those specified in the configuration for the lang attribute of `