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

【问题标题】：Vue3, Typescript and Eslint raise: "Parsing error: '}' expected"Vue3、Typescript 和 Eslint 引发：“解析错误：'}' 预期”
【发布时间】：2021-06-05 15:30:39
【问题描述】：

我正在用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 等上使用了很多时间，但仍然找不到有用的解决方案。这是package.json中eslint的配置：

{
  // ...
  "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"
    }
  },
  // ...
}

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

【问题讨论】：

标签： vue.js eslint

【解决方案1】：

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

Vue's ESLint config for TypeScript projects 解决了这个问题，所以考虑复制它：

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

【讨论】：

【解决方案2】：

我认为应该是：

import { router } from './router';

【讨论】：

对不起，在src/router/index.ts，有export default router;这样的说法，所以不是因为这个。
@Crabby 其：import router from './router/index.js'; 或 import router from './router/router.js';

【解决方案3】：

检查你是否在 package.json 和单独的 eslint 配置文件中指定了 eslintConfig。这两者都冲突并给出了这种不一致的状态。

最好从 package.json 中删除 eslintConfig 并将其移动到 eslint 配置文件中。

【讨论】：