CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-eslint-plugin-svelte

ESLint plugin for Svelte applications providing comprehensive linting rules and configurations using AST parsing

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

eslint-plugin-svelte

ESLint plugin for Svelte applications providing comprehensive linting rules and configurations using AST parsing. It leverages the AST generated by svelte-eslint-parser to deliver custom linting for Svelte's unique syntax and component structure.

Package Information

  • Package Name: eslint-plugin-svelte
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install --save-dev eslint-plugin-svelte

Core Imports

import svelte from "eslint-plugin-svelte";

For individual components:

import { configs, rules, meta, processors } from "eslint-plugin-svelte";

Basic Usage

JavaScript Project

// eslint.config.js
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import globals from 'globals';

export default [
  js.configs.recommended,
  ...svelte.configs.recommended,
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    }
  }
];

TypeScript Project

// eslint.config.js
import js from '@eslint/js';
import svelte from 'eslint-plugin-svelte';
import ts from 'typescript-eslint';

export default ts.config(
  js.configs.recommended,
  ...ts.configs.recommended,
  ...svelte.configs.recommended,
  {
    files: ['**/*.svelte', '**/*.svelte.ts'],
    languageOptions: {
      parserOptions: {
        projectService: true,
        extraFileExtensions: ['.svelte']
      }
    }
  }
);

Architecture

eslint-plugin-svelte is structured around four main components:

  • Configuration Presets: Pre-built ESLint configurations (base, recommended, prettier, all)
  • Rules Engine: 79 specialized rules for Svelte patterns, security, and best practices
  • Processor: Custom ESLint processor for handling .svelte files and comment directives
  • Type System: Complete TypeScript definitions for rule contexts and AST nodes

Capabilities

Configuration Management

Predefined ESLint configurations optimized for Svelte development with different rule sets and compatibility options.

interface PluginConfigs {
  base: Linter.Config[];
  recommended: Linter.Config[];
  prettier: Linter.Config[];
  all: Linter.Config[];
  'flat/base': Linter.Config[];
  'flat/recommended': Linter.Config[];
  'flat/prettier': Linter.Config[];
  'flat/all': Linter.Config[];
}

Configuration Presets

Rule Management

Comprehensive collection of ESLint rules specifically designed for Svelte applications, covering security, best practices, styling, and Svelte-specific patterns.

interface PluginRules extends Record<string, Rule.RuleModule> {
  // 79 individual rules available
  'no-at-html-tags': Rule.RuleModule;
  'prefer-class-directive': Rule.RuleModule;
  'valid-compile': Rule.RuleModule;
  // ... and 76 more rules
}

Individual Rules

File Processing

Custom ESLint processor for handling Svelte files, supporting comment directives and proper AST parsing.

interface SvelteProcessor {
  preprocess(code: string, filename: string): string[];
  postprocess(messages: Linter.LintMessage[][], filename: string): Linter.LintMessage[];
  supportsAutofix: boolean;
  meta: {
    name: string;
    version: string;
  };
}

Svelte File Processor

Plugin Metadata

interface PluginMeta {
  name: "eslint-plugin-svelte";
  version: "3.12.1";
}

Types

Core Plugin Interface

interface ESLintPluginSvelte {
  configs: PluginConfigs;
  rules: PluginRules;
  meta: PluginMeta;
  processors: {
    '.svelte': SvelteProcessor;
    svelte: SvelteProcessor;
  };
}

Rule Definition Types

interface RuleModule {
  meta: RuleMetaData;
  create: (context: RuleContext) => RuleListener;
}

interface RuleMetaData {
  docs: {
    description: string;
    category: RuleCategory;
    recommended: boolean | 'base';
    url: string;
    ruleId: string;
    ruleName: string;
  };
  messages: { [messageId: string]: string };
  fixable?: 'code' | 'whitespace';
  hasSuggestions?: boolean;
  schema: JSONSchema4 | JSONSchema4[];
  type: 'problem' | 'suggestion' | 'layout';
}

type RuleCategory = 
  | 'Possible Errors'
  | 'Security Vulnerability' 
  | 'Best Practices'
  | 'Stylistic Issues'
  | 'Extension Rules'
  | 'SvelteKit'
  | 'Experimental'
  | 'System';

Configuration Types

interface RuleContext {
  id: string;
  options: any[];
  settings?: {
    svelte?: {
      ignoreWarnings?: unknown;
      compileOptions?: {
        babel?: boolean;
        postcss?: false | { configFilePath?: unknown };
      };
      kit?: {
        files?: {
          routes?: string;
        };
      };
    };
  };
  filename: string;
  sourceCode: SourceCode;
  report(descriptor: ReportDescriptor): void;
}

Compatibility

  • ESLint: v8.57.1+, v9.0.0+
  • Node.js: v18.18.0+, v20.9.0+, v21.1.0+
  • Svelte: v3.37.0+, v4.0.0+, v5.0.0+
  • Parser: svelte-eslint-parser v1.3.0+
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-svelte@3.12.x
Publish Source
CLI
Badge
tessl/npm-eslint-plugin-svelte badge