Format component attributes next line in Visual Studio Code

Question

Is there any way we can set the VS code formatter to format components in Angular 2+ templates to wrap attributes in a new line. I want it to be this format:

  <app 
    [input1]="input1$ | async" 
    [input2]="input2$ | async" 
    (inputChanged)="setInput(input)">
  </app>

It would be nice for us to have auto-format on and have them format this way. React has something similar for wrapping JSX attributes in the next line and aligning them.

Answer 1

In vscode(1.27.2), press ctrl+shift+p and type open user settings then go to user setting file and add "html.format.wrapAttributes": "force-aligned" command.