Package Exports

svelte-eslint-parser
svelte-eslint-parser/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (svelte-eslint-parser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

svelte-eslint-parser

Svelte parser for ESLint.

Live DEMO • Discord

Motivation

The svelte-eslint-parser aims to make it easy to create your own ESLint rules for Svelte.

eslint-plugin-svelte is an ESLint plugin built upon this parser, and it already implements some rules.

ESLint Plugins Using svelte-eslint-parser

eslint-plugin-svelte

ESLint plugin for Svelte.
Provides a variety of template-based checks using the Svelte AST.

@intlify/eslint-plugin-svelte

ESLint plugin for internationalization (i18n) in Svelte applications, offering helpful i18n-related rules.

Installation

npm install --save-dev eslint svelte-eslint-parser

Usage

ESLint Config (`eslint.config.js`)

import js from "@eslint/js";
import svelteParser from "svelte-eslint-parser";

export default [
  js.configs.recommended,
  {
    files: [
      "**/*.svelte",
      "*.svelte",
      // Need to specify the file extension for Svelte 5 with rune symbols
      "**/*.svelte.js",
      "*.svelte.js",
      "**/*.svelte.ts",
      "*.svelte.ts",
    ],
    languageOptions: {
      parser: svelteParser,
    },
  },
];

CLI

eslint "src/**/*.{js,svelte}"

Options

The parserOptions for this parser generally match what espree—ESLint's default parser—supports.

For example:

import svelteParser from "svelte-eslint-parser";

export default [
  // ...
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        sourceType: "module",
        ecmaVersion: 2021,
        ecmaFeatures: {
          globalReturn: false,
          impliedStrict: false,
          jsx: false,
        },
      },
    },
  },
];

parserOptions.parser

Use the parserOptions.parser property to define a custom parser for <script> tags. Any additional parser options (besides the parser itself) are passed along to the specified parser.

import tsParser from "@typescript-eslint/parser";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: tsParser,
      },
    },
  },
];

Using TypeScript in `<script>`

If you use @typescript-eslint/parser for TypeScript within <script> of .svelte files, additional configuration is needed. For example:

import tsParser from "@typescript-eslint/parser";

export default [
  // Other config for non-Svelte files
  {
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        project: "path/to/your/tsconfig.json",
        extraFileExtensions: [".svelte"],
      },
    },
  },
  // Svelte config
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
      parserOptions: {
        parser: tsParser,
      },
    },
  },
];

Multiple parsers

To switch parsers for each language, provide an object:

import tsParser from "@typescript-eslint/parser";
import espree from "espree";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        parser: {
          ts: tsParser,
          js: espree,
          typescript: tsParser,
        },
      },
    },
  },
];

parserOptions.svelteConfig

If you use eslint.config.js, you can specify a svelte.config.js file via parserOptions.svelteConfig.

import svelteConfig from "./svelte.config.js";

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        svelteConfig,
      },
    },
  },
];

If parserOptions.svelteConfig is not set, the parser attempts to statically read some config from svelte.config.js.

parserOptions.svelteFeatures

You can configure how Svelte-specific features are parsed via parserOptions.svelteFeatures.

For example:

export default [
  {
    files: [
      // Set .svelte/.js/.ts files. See above for more details.
    ],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        svelteFeatures: {
          // This is for Svelte 5. The default is true.
          // If false, ESLint won't recognize rune symbols.
          // If not specified, the parser tries to read compilerOptions.runes from `svelte.config.js`.
          // If `parserOptions.svelteConfig` is not given and static analysis fails, it defaults to true.
          runes: true,
        },
      },
    },
  },
];

Editor Integrations

Visual Studio Code

Use the dbaeumer.vscode-eslint extension provided by Microsoft.

By default, it only targets *.js and *.jsx, so you need to configure .svelte file support. For example, in .vscode/settings.json:

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

Usage for Custom Rules / Plugins

See AST.md for the AST specification. You can explore it on the Live DEMO.
This parser generates its own ScopeManager. Check the Live DEMO.
Several rules are [already implemented] in [eslint-plugin-svelte], and their source code can be a helpful reference.

Contributing

Contributions are welcome! Please open an issue or submit a PR on GitHub.
For internal details, see internal-mechanism.md.

License

See LICENSE (MIT) for rights and limitations.