Live Demo •Documentation •Discord

Introduction

Installation

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

Configuration

JavaScript project

// eslint.config.jsimportjsfrom'@eslint/js';importsveltefrom'eslint-plugin-svelte';importglobalsfrom'globals';importsvelteConfigfrom'./svelte.config.js';/**@type {import('eslint').Linter.Config[]} */exportdefault[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.        svelteConfig}}},{rules:{// Override or add rule settings here, such as:// 'svelte/rule-name': 'error'}}];

TypeScript project

npm install --save-dev typescript-eslint

// eslint.config.jsimportjsfrom'@eslint/js';importsveltefrom'eslint-plugin-svelte';importglobalsfrom'globals';importtsfrom'typescript-eslint';importsvelteConfigfrom'./svelte.config.js';exportdefaultts.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 .svelteparser: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.        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, seetypescript-eslint/typescript-eslint#6778.

Available Configurations

settings.svelte

// eslint.config.jsexportdefault[// ...{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/configurationkit:{files:{routes:'src/routes'}}}}}// ...];

Editor Integrations

{"eslint.validate": ["javascript","javascriptreact","svelte"]}

Migration Guide

Versioning Policy

Rules

Possible Errors

Security Vulnerability

Best Practices

Stylistic Issues

Extension Rules

SvelteKit

Experimental

System

Deprecated

Contributing

License