`vue/no-parsing-error` does not recognize typescript syntax

[yuntian001]

Before You File a Bug Report Please Confirm You Have Done The Following...

• I'm using eslint-plugin-vue.
• I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
• I have tried restarting my IDE and the issue persists.
• I have updated to the latest version of the packages.

What version of ESLint are you using?

8.40.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

• vue-eslint-parser@9.2.1
• eslint-plugin-vue@9.12.0

What did you do?

Configuration

module.exports = {
  root: true,
  extends: [
    // add more generic rulesets here, such as:
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
  ],
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: {
      // Script parser for `<script>`
      js: '@typescript-eslint/parser',

      // Script parser for `<script lang="ts">`
      ts: '@typescript-eslint/parser',

      // Script parser for vue directives (e.g. `v-if=` or `:attribute=`)
      // and vue interpolations (e.g. `{{variable}}`).
      // If not specified, the parser determined by `<script lang ="...">` is used.
      '<template>': 'espree',
    },
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    extraFileExtensions: ['.vue'],
  },
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        // 'vue/no-parsing-error':'off'
      },
    },
    {
      files: ['*.cjs'],
      rules: {
      },
    },
  ],
};

<template>
  <div>{{ show }}</div>
  <button @click="(event:Event) => {show = !show;setButton(event)}" />
</template>
<script setup lang="ts">
import {ref} from 'vue'
const show = ref(false);
const setButton = (event:Event)=>{
  (event.target as HTMLButtonElement).style.border='1px solid red';
}
</script>

What did you expect to happen?

Type declarations in typescript syntax·a:number and object!.value Normal recognition of such rules

What actually happened?

  3:25  error    Parsing error: Unexpected token :               vue/no-parsing-error     
  8:7   warning  'setButton' is assigned a value but never used  @typescript-eslint/no-unu

Link to Minimal Reproducible Example

https://github.com/yuntian001/vue-eslint-error-demo

Additional comments

No response

[ota-meshi]

If you want to write typescript with directives, you cannot use '<template>': 'espree'.

[yuntian001]

If you want to write typescript with directives, you cannot use '<template>': 'espree'.

Thank you very much. It's very useful for me