Получить ошибку синтаксического анализа без причины Typescript, Vue, vue -property-decorator, VSCode

Question

Я совершенно новичок в Typescript и Vue. js, я не мог найти здесь никакого решения.

Приведенный ниже код дает мне ошибку синтаксического анализа: '}' ожидалось

Я проверил все пары скобок и, на мой взгляд, все в порядке.

Базовый код здесь. Я его раздвоил из полностью рабочего базового примера. https://github.com/hanachan1026/vue-firebase-startup-kit

// Hello.vue
<template>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello
        {{userName}}
      </h1>
      <p>Firebase rocks!</p>
      <img id="img1" src="" alt="img1" />
    </div>
  </section>
</template>

<script lang="ts">
import { storage } from "../scripts/firebase";
import Vue from "vue";
import { Component } from "vue-property-decorator";

@Component
export default class Home extends Vue {
  created() { 
    const storageRef = storage.ref();

    const imagesRef = storageRef.child('images');

    const fileName = 'IMG_1009.JPG';

    const imgRef = imagesRef.child(fileName);

    imgRef.getDownloadURL().then(function (url) {
      const img: HTMLImageElement = <HTMLImageElement>document.getElementById('img1');

      img.src = url;
    }).catch(function(error) {
      console.log(error); // <= parse error here. why?
    });
  }

  get userName(): string {
    if (this.$store.state.user) {
      return this.$store.state.user.displayName;
    }
    return "";
  }
}
</script>

Я знаю, что на это нелегко ответить, потому что на это может быть масса причин. Если у вас есть аналогичный опыт, я хотел бы получить комментарии. Спасибо.

* добавить

➤ npm run serve

> vue_kit@0.1.0 serve /Users/me/show-cam-img-demo
> vue-cli-service serve

 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                           3:34:02 PM

 error  in ./src/views/Hello.vue

Module Error (from ./node_modules/eslint-loader/index.js):

/Users/me/show-cam-img-demo/src/views/Hello.vue
  35:24  error  Parsing error: '}' expected

✖ 1 problem (1 error, 0 warnings)


 @ ./src/router/index.ts 4:0-37 9:13-17
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.37:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

No type errors found
Version: typescript 3.8.3
Time: 20252ms

Answer 1

ошибка возникает в eslint. вам нужно config eslint для машинописного текста и vue.
tslint с vue -tslint-loader был решением до 2019 года.