Formatting HTML in Angular project. Force the wrapAttributes in vscode only to angular component tags

Question

After searching for a while as I couldn't find a way to achieve what I want posting the question here. I want to format the angular HTML file in a way that is explained below.

There was enough way to format. Using extensions or overwriting the vscode settings by "html.format.wrapAttributes": "force" This is how the file is formatted after pressing Ctrl+Shift+Enter

I want only the angular component selectors' attributes to be formatted as shown below.

Any extensions or customizations or any better way to do that is appreciated?

Answer 1

You can use the following option in VS Code settings:

"html.format.wrapAttributes": "preserve-aligned"

If you split the angular components' attributes into different lines (and keep the remaining HTML attributes in a single line), it will correctly format you document without breaking the "rules" you defined.

Yes, it has a bit of manual work, but is the best alternative I've found.