Vue3、Typescript 和 Eslint raise： "Parsing error: '}' expected"

Question

我用Vue3和Typescript编写代码，这是App.vue的代码，它是根组件:

<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>

但是eslint告诉我:

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

我花了很多时间在谷歌等，但仍然找不到一个有用的解决方案。这是eslint在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"
}
},
// ...
}

我不确定哪个配置是有用的，所以我把它们贴出来。谢谢。

Answer 1

错误是由于"plugin:@typescript-eslint/recommended"设置了顶级parser，与Vue的vue-eslint-parser发生了冲突。此外，你自己的配置重复了在插件中已经设置的顶级parser设置，也应该被删除。

Vue的ESLint配置为TypeScript项目解决了这个问题，所以考虑复制它:

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',
}
}]
}

另一个选择是用Vue CLI生成一个TypeScript项目，并复制结果ESLint配置。

Answer 2

我认为应该是:

import { router } from './router';

Answer 3

检查两个包中是否指定了eslintConfig。Json和单独的eslint配置文件。

最好从包中删除eslintConfig。