Typescript ESlint Airbnb preset = weird @Component decorator formatting

[wujekbogdan]

Version

3.0.1

Reproduction link

https://pastebin.com/DvhT0qvD

Node and OS info

any

Steps to reproduce

Create a new project with Vue CLI. Select: TypeScript + ESlint + Airbnb preset

What is expected?

The code to be formatted this way:

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
}

What is actually happening?

The code to be formatted this way:

@Component({
  components: {
  HelloWorld,
  },
  })
export default class Home extends Vue {}

ESlint is not complaining about the formatting, so the formatting matches linter's rules, but the code looks weird, so I suppose that there are some Vue-specific overrides that break Airbnb formatting.

When I format the code properly then ESlint shows errors.

If I set up a non-TypeScript project with Vue CLI choosing ESlint + Airbnb preset and install vue-class-component on my own then I can format the code properly and the linter is not complaining:

import Vue from 'vue';
import Component from 'vue-class-component/';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
}

So there's definitely something wrong with the TypeScript + ESLint + Airbnb template.

---

EDIT: I found what causes an issue. It's the typescript-eslint-parser that's buggy. It's not Vue CLI's fault. https://github.com/eslint/typescript-eslint-parser/issues/438

Ther's no solution so far. There's only a nasty workaround: https://github.com/eslint/typescript-eslint-parser/issues/438#issuecomment-415756967 It forces ESlint to ignore decorators.

[GuoQichen]

+1 same problem

[IgorSzymanski]

I would consider closing this issue as it's not related to vue-cli, but typescript-eslint-parser rather, as mentioned earlier.