Parsing error: Unexpected token

[pavlexander]

Tell us about your environment

• ESLint version: 8.14.0

• eslint-plugin-vue version: 8.7.1

• Node version: 8.7.0

• Operating System: win10 x64

• Extensions: Volar v0.34.11, Prettier v9.5.0, ESLint v2.2.2

Please show your full configuration (.eslintrc):

module.exports = {
  env: {
    node: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
  rules: {  },
};

What did you do?

<template>
  <h1>Test</h1>
</template>

<script lang="ts">
  import { ref, Ref } from 'vue'

  var test1: string = '' // error: Parsing error: Unexpected token :eslint

  export default {
    setup() {
      const test2: Ref<string[]> = ref([]) // no error
    }
</script>

I try to set the type for the variable test1, but get eslint error.

What did you expect to happen?
no errors

What actually happened?
error for variable declaration :

Parsing error: Unexpected token :eslint

Repository to reproduce this issue
https://github.com/pavlexander/eslint-bug-repro

this is pretty much a standard vite template for vue.js projects, to which I added:

npm install --save-dev eslint eslint-plugin-vue

and added a .eslintrc file

Additional context

Also, I don't know if it's related to the problem described above, but for some reason I get no warning highlights in vscode. as an example if you hover over a variable you see the warning:

'test2' is declared but its value is never read.ts(6133)

but in problems window no warnings are showed, nor there is any visual indicator in the text editor about the warning

I also tried overriding the rule for unused variables to make it show errors instead of warnings:

module.exports = {
  env: {
    node: true,
  },
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
  rules: {
    "vue/no-unused-vars": "error",
  },
};

but it has no effect at all.. Hopefully both issues are connected otherwise I don't know what to do with the second one :(

both cases are reproducible from the app.vue file in repository above.

[FloEdelmann]

ESLint and eslint-plugin-vue don't support Typescript out of the box. You need the @typescript-eslint/parser. See also "How to use a custom parser?".

You might also be interested in the @typescript-eslint/eslint-plugin.