@zerebos/eslint-config-svelte

A comprehensive ESLint configuration for Svelte projects with TypeScript support.

Features

• 🚀 Built on top of the official eslint-plugin-svelte recommended config
• 📝 TypeScript support with typescript-eslint integration
• 🔒 Security-focused rules (no @html tags, target="_blank" protection)
• 🎨 Consistent code style and formatting
• ⚡ Performance optimizations
• 🧹 Best practices enforcement

Installation

npm install -D @zerebos/eslint-config-svelte eslint

Peer Dependencies

This config requires the following peer dependencies:

npm install -D eslint-plugin-svelte typescript-eslint

Usage

Basic Setup

Create an eslint.config.js file in your project root:

import { build } from "@zerebos/eslint-config-svelte";

export default build();

With Custom Svelte Config

If you have a custom svelte.config.js, pass it to the build function:

import { build } from "@zerebos/eslint-config-svelte";
import svelteConfig from "./svelte.config.js";

export default build(svelteConfig);

Extending the Configuration

You can extend or override rules as needed:

import { build } from "@zerebos/eslint-config-svelte";

export default [
  ...build(),
  {
    rules: {
      // Override or add custom rules
      "svelte/no-at-debug-tags": "warn", // Change from error to warning
      "svelte/prefer-style-directive": "off", // Disable rule
    }
  }
];

What's Included

File Targeting

• **/*.svelte - Svelte component files
• **/*.svelte.ts - TypeScript files in Svelte components

Key Rules

Error-Level Rules

• Component Logic: Prevents infinite reactive loops, invalid reactive statements
• Template Safety: Blocks dangerous HTML injection, ensures proper event handlers
• TypeScript Integration: Enforces TypeScript in script blocks
• Store Patterns: Validates Svelte store usage and patterns
• Accessibility: Button type requirements, proper ARIA usage

Style & Consistency

• HTML Formatting: Consistent quote style, self-closing tags, spacing
• Attribute Organization: Proper linebreaks and spacing for readability
• Directive Usage: Prefers shorthand syntax where applicable
• Comment Standards: Consistent comment formatting

Security

• svelte/no-at-html-tags: Prevents XSS vulnerabilities
• svelte/no-target-blank: Protects against reverse tabnabbing

Configuration Details

TypeScript Setup

This configuration assumes you're using TypeScript and enforces:

• "block-lang": ["error", {script: "ts"}] - Requires TypeScript in script blocks
• Proper TypeScript parser integration with Svelte files

Disabled Rules

• svelte/no-dom-manipulating: Disabled to allow direct DOM manipulation when needed
• svelte/no-inline-styles: Disabled for flexibility
• svelte/indent: Disabled to avoid conflicts with Prettier
• svelte/max-attributes-per-line: Disabled for developer preference
• svelte/sort-attributes: Disabled to allow manual organization

Integration with Other Tools

Prettier

This config is designed to work alongside Prettier. Make sure to install:

npm install -D prettier prettier-plugin-svelte

VS Code

For the best experience, install these VS Code extensions:

• Svelte for VS Code
• ESLint

Add to your VS Code settings:

{
  "eslint.validate": ["svelte"],
  "svelte.enable-ts-plugin": true
}

Common Issues

TypeScript Errors

If you're seeing TypeScript-related errors, ensure:

1. You have a valid tsconfig.json in your project
2. Your svelte.config.js includes proper TypeScript preprocessing
3. You've installed typescript and @tsconfig/svelte

Parser Errors

If ESLint can't parse your Svelte files:

1. Ensure eslint-plugin-svelte is installed
2. Check that your eslint.config.js is using this config correctly
3. Verify your Svelte version compatibility

Example Project Structure

my-svelte-project/
├── src/
│   ├── lib/
│   │   └── Component.svelte
│   ├── routes/
│   │   └── +page.svelte
│   └── app.html
├── eslint.config.js
├── svelte.config.js
├── tsconfig.json
└── package.json

Contributing

Issues and pull requests are welcome! Please check the main repository for contribution guidelines.

Related Packages

• @zerebos/eslint-config - Base ESLint configuration
• @zerebos/eslint-config-typescript - TypeScript ESLint configuration