Svelte
Official ESLint plugin for Svelte, providing linting rules and best practices for Svelte components.
What is Svelte?
eslint-plugin-svelte is the official ESLint plugin for the Svelte framework. It enables developers to enforce code quality, security, and best practices specifically within Svelte components by leveraging the AST generated by svelte-eslint-parser. This tool is essential for maintaining consistent and error-free Svelte codebases.
Svelte developers and teams building applications with Svelte or SvelteKit who need to lint their component code. It is particularly useful for projects requiring adherence to Svelte-specific best practices and security guidelines.
Developers choose this plugin because it is the authoritative, official linting solution for Svelte, offering over 70 framework-aware rules that cover possible errors, security vulnerabilities, best practices, and stylistic issues. It integrates seamlessly with the modern ESLint ecosystem, supports TypeScript, and provides ready-to-use configurations like 'recommended' and 'prettier'.
Overview
ESLint plugin for Svelte using AST
Use Cases
Best For
- Enforcing Svelte-specific code quality and best practices in component files.
- Detecting and preventing security vulnerabilities like XSS attacks from {@html} usage in Svelte templates.
- Linting SvelteKit projects with rules tailored for page components and navigation.
- Integrating ESLint with Prettier in Svelte projects using the provided 'prettier' configuration.
- Automatically fixing stylistic issues in Svelte components with fixable rules via ESLint's --fix option.
- Maintaining consistent code style and structure across Svelte codebases with rules for indentation, attribute formatting, and mustache spacing.
Not Ideal For
- Projects still relying on eslint-plugin-svelte3 for legacy Svelte setups or compatibility reasons.
- Environments with Node.js below v18.18.0 or ESLint below v8.57.1, as these are minimum requirements.
- Teams seeking a minimalist, zero-config linting solution without Svelte-specific rule customization.
Pros & Cons
Pros
As the official ESLint plugin maintained by the Svelte team, it seamlessly integrates with the framework's compiler and ecosystem, ensuring authoritative support.
Offers over 70 Svelte-specific rules covering errors, security vulnerabilities like XSS from {@html}, best practices, and stylistic issues, as listed in the README's rule table.
Fully supports TypeScript with dedicated configuration and provides a 'prettier' config to avoid conflicts, though it requires additional setup for TypeScript projects.
Includes many fixable rules that can automatically correct issues like indentation or attribute formatting using ESLint's --fix option, improving developer workflow.
Cons
The README warns of a TypeScript parser singleton issue that can cause errors if options are changed, complicating configuration for advanced TypeScript projects.
New rules can be added to recommended configs in minor releases per the versioning policy, potentially introducing unexpected warnings that require manual disabling.
Relies on svelte-eslint-parser for AST generation, adding a layer of dependency that can introduce points of failure or compatibility issues in the linting pipeline.
Frequently Asked Questions
Related Projects
React HooksThe library for web and native user interfaces.
MeteorMeteor, the JavaScript App Platform
ReactReact-specific linting rules for ESLint
VueJSOfficial ESLint plugin for Vue.js
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.