HTML formatting issues with custom tag names (like angular 2 tags)

[cl0udninja]

• Operating System (+Version): MacOS Sierra 10.12.2
• VS Code Version: 1.8.1
• beautify Version: 0.7.3

Provide the settings you use:
(VS Code workspace and user settings, .jsbeautifyrc, .editorconfig)
eg.:
VS Code:

# http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true


[*.md]
max_line_length = 0
trim_trailing_whitespace = false

# Indentation override
#[lib/**.js]
#[{package.json,.travis.yml}]
#[**/**.js]

.jsbeautifyrc

{
  // Documentation: https://atom.io/packages/atom-beautify

  "brace_style": "collapse",
  "break_chained_methods": false,
  "end_with_newline": true,
  "eol": "\n",
  "indent_char": " ",
  "indent_level": 0,
  "indent_size": 2,
  "indent_with_tabs": false,
  "max_preserve_newlines": 2,
  "preserve_newlines": true,
  "unescape_strings": false,
  "wrap_attributes": "auto",
  "wrap_attributes_indent_size": 4,
  "wrap_line_length": 120,
  "html": {
    "indent_handlebars": false,
    "indent_inner_html": false,
    "indent_scripts": "keep",
    "wrap_attributes": "force"
  },
  "css": {
    "newline_between_rules": true,
    "selector_separator": " ",
    "selector_separator_newline": true
  },
  "js": {
    "brace_style": "collapse-preserve-inline",
    "jslint_happy": false,
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_after_anon_function": false,
    "space_before_conditional": true,
    "space_in_empty_paren": false,
    "space_in_paren": false
  }
}

Action performed

Format javascript file with HookyQR.beautifyFile command
Format on save

Expected results

Expected ... to ...
provide example (expected) output

        <clr-dg-row *clrDgItems="let user of orgUsers"
            [clrDgItem]="user">
          <clr-dg-cell>{{user.firstName}}</clr-dg-cell>
          <clr-dg-cell>{{user.lastName}}</clr-dg-cell>
          <clr-dg-cell>{{user.email}}</clr-dg-cell>
        </clr-dg-row>

Actual results

Details of what happened ...
provide example (actual) output

        <clr-dg-row *clrDgItems="let user of orgUsers"
            [clrDgItem]="user">
          <clr-dg-cell>{{user.firstName}}</clr-dg-cell>
          <clr-dg-cell>{{user.lastName}}</clr-dg-cell>
          <clr-dg-cell>{{user.email}}</clr-dg-cell>
          </clr-dg-row>

[HookyQR]

It's not the custom tags that are causing it. It's the attribute wrapping. I've logged an issue for it: beautifier/js-beautify#1103

[cl0udninja]

thanks!

[matheusdavidson]

same problem here!

[HookyQR]

New version released with the js-beautify fix manually added.