eslint-plugin-svelte3

4.0.0 verified Sat Apr 25 auth: no javascript deprecated

An ESLint plugin for linting Svelte v3 components. Version 4.0.0 transforms Svelte compiler errors/warnings into ESLint messages, lints script blocks and template expressions with existing rules, and respects Svelte scoping (stores, reactive declarations). Requires ESLint 8+ and Svelte 3.2+. Differentiates from svelte-eslint-parser by being processor-based and using the Svelte compiler directly; deprecated in favor of eslint-plugin-svelte for Svelte 4+.

Common errors

error ESLint couldn't find the plugin "eslint-plugin-svelte3". ↓

cause Plugin not installed or not in node_modules.

fix

Run: npm install --save-dev eslint-plugin-svelte3

error Definition for rule 'no-unused-vars' was not found. ↓

cause eslint-plugin-svelte3 does not define rules; it only provides a processor. The rule comes from eslint core.

fix

Ensure eslint is properly installed and your config includes 'eslint:recommended' or the rule explicitly.

error Failed to load parser '@typescript-eslint/parser'. ↓

cause Missing @typescript-eslint/parser package when using TypeScript.

fix

Install: npm install --save-dev @typescript-eslint/parser

error The 'svelte3/svelte3' processor is not exported from the plugin. ↓

cause Using an older version (<1.0.0) that didn't export the processor this way.

fix

Upgrade to >=1.0.0: npm install eslint-plugin-svelte3@latest

Warnings

deprecated This plugin is deprecated. Svelte 4+ users should use eslint-plugin-svelte with svelte-eslint-parser. ↓

fix Migrate to eslint-plugin-svelte (https://github.com/sveltejs/eslint-plugin-svelte)

breaking Version 4.0.0 requires ESLint 8+. ESLint 6/7 are no longer supported. ↓

fix Upgrade to ESLint 8+ or stick with v3 (deprecated) if using older ESLint.

gotcha Processor must be 'svelte3/svelte3', not 'svelte3'. The default export is not a processor. ↓

fix Set processor to 'svelte3/svelte3' in overrides.

gotcha TypeScript mode requires passing the typescript package to settings.svelte3/typescript. Without it, template expressions are not linted. ↓

fix Add 'svelte3/typescript': () => require('typescript') to settings.

deprecated Setting 'svelte3/ignore-styles' returns a function now; in v3 it was a boolean. Booleans may cause unexpected behavior. ↓

fix Use a function: 'svelte3/ignore-styles': () => true

Install

npm install eslint-plugin-svelte3

yarn add eslint-plugin-svelte3

pnpm add eslint-plugin-svelte3

Imports

processor

wrong

processor: 'svelte3'

correct

module.exports = { plugins: ['svelte3'], overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }] }

Must be 'svelte3/svelte3' not just 'svelte3'

settings.svelte3/typescript

wrong

settings: { svelte3: { typescript: true } }

correct

settings: { 'svelte3/typescript': () => require('typescript') }

Function form enables dynamic require; boolean true loads peer dependency

config with TypeScript parser
wrong
```
parser: 'typescript-eslint-parser'
```
correct
```
parser: '@typescript-eslint/parser', plugins: ['svelte3','@typescript-eslint']
```
Use @typescript-eslint/parser (v2+) not the deprecated typescript-eslint-parser

Quickstart

Basic ESLint config for Svelte v3 using eslint-plugin-svelte3 processor, ignoring CSS styles.

// .eslintrc.js
module.exports = {
  parserOptions: {
    ecmaVersion: 2019,
    sourceType: 'module'
  },
  env: {
    es6: true,
    browser: true
  },
  plugins: ['svelte3'],
  overrides: [
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3'
    }
  ],
  rules: {
    'no-unused-vars': ['error', { varsIgnorePattern: '^\\$' }]
  },
  settings: {
    'svelte3/ignore-styles': () => true // ignore CSS linting
  }
};