Vue3、Typescript 和 Eslint 引发：“解析错误：预期为 '}'”

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

我在Google等上使用了很多时间，但仍然找不到有用的解决方案。这是 eslint 的配置package.json：

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

我不确定哪个配置有用，所以我将它们发布出来。谢谢。

Answer 1

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

Vue 的 TypeScript 项目的 ESLint 配置解决了这个问题，因此请考虑复制它：

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 配置。