CODEWITHSUNDEEP
vue.jseslint
Peterlits Zo
Peterlits Zo

Reputation: 536

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

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.

Upvotes: 9

Views: 16008

Answers (3)

AnandShiva
AnandShiva

Reputation: 1339

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.

Upvotes: 0

tony19
tony19

Reputation: 138196

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.

Upvotes: 18

Crabby Fish
Crabby Fish

Reputation: 140

I think it should be:

import { router } from './router';

Upvotes: 1

Related Questions