"Parsing error identifier expected" on v-on:change

Issue

I had an issue where importing a class to be used only as a typescript type annotation caused a no-unused vars error. This thread said to add "plugin:@typescript-eslint/recommended" to the eslint config, which solved the issue but caused more parsing errors:

• ESLint: Parsing error: Identifier expected which occurred on v-on:change
• ESLint: Parsing error: '}' expected. which occurred on components: {} in @Component(...)

/App.vue:

<template>
    <div id="app" style="height: 100%">
        <input v-on:change="onChange"/> <!--This is the "Identifier expected" error -->
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Foo from "@/path/to/Foo";
import Bar from "@/path/to/Bar";

@Component({
    components: {  //This is where the `'}' expected.` error occurs
        
    }
})
export default class App extends Vue {
    onChange(e : any) : void {
        let f : Foo = Bar.baz();  //This is what caused the "no-unused-vars" problem before
        f.someFunc();
    }
}
</script>

Here is my Eslint config from package.json:

"eslintConfig": {
    "root": true,
    "env": {
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "eslint:recommended",
        "@vue/typescript",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "parser": "@typescript-eslint/parser"
    },
    "rules": {}
}

I've tried enabling vue/valid-v-on in the rules, as well as each of the other exports used in the GitHub thread above.

What should I do to fix this?

Thanks in advance.

Edit: I've removed plugin:@typescript-eslint/recommended" from the eslint config, and put the line // eslint-disable-next-line no-unused-vars above each "unused" import in the code. This is not an optimum solution, so I'll leave the question open.

Solution

Update (a year on): I've had this error a few times now, and I found that jsut restarting the TypeScript service usually fixes it.

At the bottom right of the IntelliJ Idea window, click on "Vue TypeScript ", then click "Restart TypeScript Service". After a second or two all the "errors" will have been reevaluated and anything incorrectly marked as an error should be cleared.

This can also be used to "fix" lots of other issues with the TypeScript error checker.

Answered By - sonrad10