Vue3, Typescript and Eslint raise: "Parsing error: '}' expected"

Question

I am writing code by Vue3 and Typescript, and this is the code of App.vue, which is the root component:

<template>
  <router-view v-if="inited" />
  <div v-else>
    Initing...
  </div>
</template>

<script lang="ts">
import router from './router';
import { defineComponent } from 'vue';
import { useStore } from 'vuex';
import { key } from './store';

const store = useStore(key);

export default defineComponent({
  data() {
    return { inited: store.state.inited };
  },
});
</script>

But the eslint tell me:

/home/peter/proj/skogkatt-next/src/App.vue
  17:9  error  Parsing error: '}' expected

I use many time on Google and so on, but still cannot find a useful solution. This is the config of eslint in package.json:

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

I am not sure which config is useful or not, so I post those out. Thanks.

Answer 1

The error is caused by "plugin:@typescript-eslint/recommended", which sets the top-level parser, which collides with Vue's vue-eslint-parser. In addition, your own config duplicates the top-level parser setting already set in the plugin, and should also be removed.

Vue's ESLint config for TypeScript projects addresses this problem, so consider copying it:

module.exports = {
  plugins: ['@typescript-eslint'],
  // Prerequisite `eslint-plugin-vue`, being extended, sets
  // root property `parser` to `'vue-eslint-parser'`, which, for code parsing,
  // in turn delegates to the parser, specified in `parserOptions.parser`:
  // https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error
  parserOptions: {
    parser: require.resolve('@typescript-eslint/parser'),
    extraFileExtensions: ['.vue'],
    ecmaFeatures: {
      jsx: true
    }
  },
  extends: [
    'plugin:@typescript-eslint/eslint-recommended'
  ],
  overrides: [{
    files: ['*.ts', '*.tsx'],
    rules: {
      // The core 'no-unused-vars' rules (in the eslint:recommeded ruleset)
      // does not work with type definitions
      'no-unused-vars': 'off',
    }
  }]
}

Another option is to generate a TypeScript project with Vue CLI, and copying the resulting ESLint config.

Answer 2

I think it should be:

import { router } from './router';