Using @ typescript-eslint and TypeScript in Svelte Files causes Error "Parsing error:'>' expected" in Svelte file

[miily8310s]

To use TypeScript files in Svelte apps generated from npx degit sveltejs / template, install"@ typescript-eslint / eslint-plugin" and "@ typescript-eslint / parser"and npx eslint src / ** When I typed --ext .ts, .js, .svelte, I got the following error:

$ npx eslint src / ** --ext .ts, .js, .svelte

/svelte-app/src/App.svelte
  1: 8 error Parsing error:'>' expected

✖ 1 problem (1 error, 0 warnings)

Commenting out "plugin: @typescript-eslint/recommended" and parser: "@typescript-eslint/parser" in .eslintrc.js eliminate the error.
Is there a solution?
The set .eslintrc.js and development environment are as follows.

# .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint: recommended",
    "plugin: @ota-meshi/svelte/recommended",
    "plugin: @typescript-eslint/recommended",
    "prettier",
  ],,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module",
  },
  plugins: ["@typescript-eslint"],
  rules: {
    "@ota-meshi / svelte / button-has-type": "error",
  },
};

# My Development Environment
OS: Windows 10 (WSL2 Ubuntu-18.04)
Used Packages:
"@ ota-meshi / eslint-plugin-svelte": "^ 0.0.19"
"@ typescript-eslint / eslint-plugin": "^ 4.24.0",
"@ typescript-eslint / parser": "^ 4.24.0",
"" prettier ":" ^ 2.3.0 ",
"eslint-config-prettier": "^ 8.3.0"

[ota-meshi]

Thank you for posting this issue!

To use Svelte with TypeScript you need to set the following:

{
    "overrides": [
        {
            "files": ["*.svelte"],
            "parser": "svelte-eslint-parser",
            "parserOptions": {
               "parser": "@typescript-eslint/parser"
            }
        }
    ]
}

This is written in the parser documentation.

https://github.com/ota-meshi/svelte-eslint-parser#parseroptionsparser

I noticed that I forgot to write in the documentation for this plugin how to use it with TypeScript 😓

[ota-meshi]

@miily8310s The project I tested also set extraFileExtensions: ['.svelte'].
I added the documentation for that too.

https://ota-meshi.github.io/eslint-plugin-svelte/user-guide/#parser-configuration

module.exports = {
  // ...
  extends: ["plugin:@ota-meshi/svelte/recommended"],
  // ...
  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",
      },
    },
    // ...
  ],
  // ...
}