Angular Template Formatter README

Extension for formatting Angular 2+ HTML templates. This extension is opinionated and not very configurable.

Formatting:

When run, this extension will put each HTML attribute on its own line—unless there is a single attribute declared on the HTML tag. In the case of a single attribute, the tag and attribute will be put on a single line.

Example:

This template from the Angular Tour of Heroes:

``html

Hero Search

(click)="gotoDetail(hero)" class="search-result" >
{{hero.name}}

`

will get formatted to:

`html

Hero Search

#searchBox
id="search-box"
(keyup)="search(searchBox.value)"
>

*ngFor="let hero of heroes | async"
(click)="gotoDetail(hero)"
class="search-result"
>
{{hero.name}}

`

Recommended Configuration:

`
{
// turn off default vs code formatter
"html.format.enable": false,
// enable formatting by default
"editor.formatOnSave": true,
"editor.formatOnPaste": true
}
`

Release Notes

$3

Preserves HTML escaped entitities

$3

Does not remove tags when formatting.

$3

Now formats svgs in templates

$3

Added option for preventing closing tag > from being on their own line: angular-template-formatter.closeTagSameLine`. Thanks @larscom!

$3

Added an option for tabs vs spaces. Thanks @Empereol!

$3

Added configuration option for indentWidth, defaults to 4.

$3

Initial release of Angular template formatter