svelte-eslint-parser

Svelte parser for ESLint.
You can check it on Online DEMO.

⤴️ Motivation

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

The eslint-plugin-svelte is an ESLint plugin that uses the svelte-eslint-parser. I have already implemented some rules.

ESLint Plugins Using svelte-eslint-parser

eslint-plugin-svelte

ESLint plugin for Svelte.
It provides many unique check rules by using the template AST.

@intlify/eslint-plugin-svelte

ESLint plugin for internationalization (i18n) with Svelte.
It provides rules to help internationalization your application created with Svelte.

❗ Attention

The svelte-eslint-parser can not be used with the eslint-plugin-svelte3.

💿 Installation

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

📖 Usage

1. Write overrides.parser option into your .eslintrc.* file.
2. Use glob patterns or --ext .svelte CLI option.

{
    "extends": "eslint:recommended",
    "overrides": [
        {
            "files": ["*.svelte"],
            "parser": "svelte-eslint-parser"
        }
    ]
}

$ eslint "src/**/*.{js,svelte}"
# or
$ eslint src --ext .svelte

🔧 Options

parserOptions has the same properties as what espree, the default parser of ESLint, is supporting. For example:

{
    "parser": "svelte-eslint-parser",
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2021,
        "ecmaFeatures": {
            "globalReturn": false,
            "impliedStrict": false,
            "jsx": false
        }
    }
}

parserOptions.parser

You can use parserOptions.parser property to specify a custom parser to parse <script> tags. Other properties than parser would be given to the specified parser. For example:

{
    "parser": "svelte-eslint-parser",
    "parserOptions": {
        "parser": "@typescript-eslint/parser"
    }
}

For example, if you are using the "@typescript-eslint/parser", and if you want to use TypeScript in <script> of .svelte, you need to add more parserOptions configuration.

module.exports = {
  // ...
  parser: "@typescript-eslint/parser",
  parserOptions: {
    // ...
    project: "path/to/your/tsconfig.json",
    extraFileExtensions: [".svelte"], // This is a required setting in `@typescript-eslint/parser` v4.24.0.
  },
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
      parserOptions: {
        parser: "@typescript-eslint/parser",
      },
    },
    // ...
  ],
  // ...
}

Multiple parsers

If you want to switch the parser for each lang, specify the object.

{
    "parser": "svelte-eslint-parser",
    "parserOptions": {
        "parser": {
            "ts": "@typescript-eslint/parser",
            "js": "espree",
            "typescript": "@typescript-eslint/parser"
        }
    }
}

Parser Object

When using JavaScript configuration (.eslintrc.js), you can also give the parser object directly.

const tsParser = require("@typescript-eslint/parser")
const espree = require("espree")

module.exports = {
    parser: "svelte-eslint-parser",
    parserOptions: {
        // Single parser
        parser: tsParser,
        // Multiple parser
        parser: {
            js: espree,
            ts: tsParser,
        }
    },
}

💻 Editor Integrations

Visual Studio Code

Use the dbaeumer.vscode-eslint extension that Microsoft provides officially.

You have to configure the eslint.validate option of the extension to check .svelte files, because the extension targets only *.js or *.jsx files by default.

Example .vscode/settings.json:

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

Usage for Custom Rules / Plugins

• AST.md is AST specification. You can check it on the Online DEMO.
• The parser will generate its own ScopeManager. You can check it on the Online DEMO.
• I have already implemented some rules in the eslint-plugin-svelte. The source code for these rules will be helpful to you.

🍻 Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

See also the documentation for the internal mechanism.

• internal-mechanism.md

🔒 License

See the LICENSE file for license rights and limitations (MIT).