svelte-eslint-parser

svelte-eslint-parser

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

❓ Why?

Svelte has the official ESLint plugin the eslint-plugin-svelte3. The eslint-plugin-svelte3 works well enough to check scripts. However, it does not handle the AST of the template, which makes it very difficult for third parties to create their own the ESLint rules for the Svelte.

The svelte-eslint-parser aims to make it easy to create your own rules for the Svelte by allowing the template AST to be used in the rules.

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

Benefits of Using AST

• We can create rules using the information contained in the AST.
  e.g.
  • svelte/no-dupe-else-if-blocks rule
  • svelte/no-at-html-tags rule
  • svelte/no-at-debug-tags rule
• Rules that use text work well.
  e.g.
  • eol-last rule
  • unicode-bom rule
  • eslint-plugin-prettier

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,
        }
    },
}

:computer: 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.

:beers: Contributing

Welcome contributing!

Please use GitHub's Issues/PRs.

See also the documentation for the internal mechanism.

• internal-mechanism.md

:lock: License

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