baseballyama/svelte-eslint-parser

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

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 plugin for Svelte.
It provides many unique check rules by using the template AST.

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

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

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

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

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

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",
      },
    },
    // ...
  ],
  // ...
}

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

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

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"
    ]
}

• 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.

Welcome contributing!

Please use 's Issues/PRs.

See also the documentation for the internal mechanism.

• internal-mechanism.md

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