Skip to content

Angular Output/Input decorators are moved to new line #4924

@bengry

Description

@bengry

Prettier 1.14.0
Playground link

--parser typescript

Input:

@Component({
  selector: 'toh-hero-button',
  template: `<button>{{label}}</button>`
})
export class HeroButtonComponent {
  @Output() change = new EventEmitter<any>();
  @Input() label: string;
}

Output:

@Component({
  selector: "toh-hero-button",
  template: `<button>{{label}}</button>`
})
export class HeroButtonComponent {
  @Output()
  change = new EventEmitter<any>();
  @Input()
  label: string;
}

Expected behavior:
Decorators are kept on the same line.

More details:
When using Angular, it's recommended to follow their style guide, which specifies:

Placing the decorator on the same line usually makes for shorter code and still easily identifies the property as an input or output. Put it on the line above when doing so is clearly more readable.

Angular classes are a valid (and common) use-case for Prettier, but with Prettier 1.14 (relevant PR) it deviates from the Angular style guide, causing unwanted changed for most people using Angular.
Note that the above code example (input) is taken directly from the Angular style guide.

The original PR to change this behavior mentions that mobx is the only library using same-line decorators, which is clearly not the case, with Angular being a (big) second one.

To avoid reverting the new behavior completely, which is probably still wanted by some people - I suggest adding an option to the config to keep the old behavior, or prefer the new one (default should be discussed further).

Metadata

Metadata

Assignees

Labels

help wantedWe're a small group who can't get to every issue promptly. We’d appreciate help fixing this issue!lang:javascriptIssues affecting JSlocked-due-to-inactivityPlease open a new issue and fill out the template instead of commenting.

Type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions