facing-dev/vue-facing-decorator

ESLint: Parsing error: Unexpected character '@'

Closed this issue · 3 comments

j-d-carmichael commented

I am trying to use vue3 and decorators in an electron app.

https://facing-dev.github.io/vue-facing-decorator/#/en/class-component/component/component

I have a simple component:

<template>
  <h2>HomeView</h2>

  <n-button @click="redrawData()">
    naive-ui
  </n-button>


  This is the home page: {{ data }}
</template>

<script lang="ts">
import { Component, toNative, Vue } from 'vue-facing-decorator';

import { NButton } from 'naive-ui';

@Component({
  components: {
    NButton
  }
})
class HomePage extends Vue {
  data = ''

  goToAbout () {
    this.$router.push('/about');
  }

  redrawData () {
    this.data = window.electronAPI.sendData();
  }
}

export default toNative(HomePage);
</script>

But the IDE (jetbrains) says for the decorator there:

ESLint: Parsing error: Unexpected character '@'

I could not find anything in the docs about the decorators for eslint, but i guess there is just a rule missing?

eslint looks like:

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/recommended",
    "plugin:import/electron",
    "plugin:import/typescript",
    "plugin:vue/vue3-recommended"
  ],
  "parser": "vue-eslint-parser"
}

In addition, the ide cannot jump to data attrbute of the class or any of the methods...

j-d-carmichael commented

Hi & thanks for the reply

Yes, I was wondering this too but thought that with it bring 2024 there would have been a solution for this.

OK thanks I will give this a go.