Skip to content

Typescript ESlint Airbnb preset = weird @Component decorator formatting #2435

Open
@wujekbogdan

Description

@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.
eslint/typescript-eslint-parser#438

Ther's no solution so far. There's only a nasty workaround: eslint/typescript-eslint-parser#438 (comment)
It forces ESlint to ignore decorators.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions