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

user_13031497 0
Viewed 8498

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.

eslint vue.js
3 Answers

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.

user_62771510

I think it should be:

import { router } from './router';
user_146369540

Check if you have eslintConfig specified in both package.json and separate eslint config file. Both of these conflict and give this inconsistent state.

Its best to remove eslintConfig from package.json and move those to eslint config file.

user_51311390
Related