html.format.wrapAttributes on handlebars template

[aeschli]

From @ifahrentholz on May 25, 2017 13:41

• VSCode Version: 1.12.2
• OS Version: OSX 10.11.6 (15G1217) (El Capitan)

Steps to Reproduce:

1. I've set the following settings:

"html.format.wrapLineLength": 0,
"html.format.wrapAttributes": "force-aligned",
"editor.wordWrap": "off",
"editor.wrappingIndent": "same",
"window.zoomLevel": 0,

2. Use the following markup:

<input type="radio"
       name="garage"
       id="garage-02"
       class="ns-e-togg__radio ns-js-form-binding"
       value="02"
       {{#ifCond data.antragsart "05"}}
       checked="checked"
       {{/ifCond}}>

3. Hit save and VSCode will break the ifCond statement on new lines - which causes a code bug.

Copied from original issue: microsoft/vscode#27272

[bitwiseman]

@aeschli
That gif is very pretty, but I could you provide just the resulting text output instead? The difference from the input will be just as visible and easier to work with. 😄

[ifahrentholz]

Resulting text output:

<input type="radio"
       name="garage"
       id="garage-02"
       class="ns-e-togg__radio ns-js-form-binding"
       value="02"
       {{#ifCond
       data.antragsart
       "05"}}
       checked="checked"
       {{/ifCond}}>

[ifahrentholz]

I've discovered an similar issue on HTML templates which are used for Assemble-Templates.

Before formatting (correct):

---
layout: mainLayout.html
page: default.html
---

<div>
    {{> componentXYZ my.data.key}}
    {{> componentABC my.other.data.key}}
    <span>Hello World</span>
    <p>Your paragraph</p>
</div>

After formatting (wrong):

--- layout: mainLayout.html page: default.html ---

<div>
    {{> componentXYZ my.data.key}} {{> componentABC my.other.data.key}}
    <span>Hello World</span>
    <p>Your paragraph</p>
</div>

I think an applicable solution would be that the formatter ignores elements it does not know completely - i think thats the way other Editors handle that case (tested on Webstorm / Intellij IDEA).

[brokenalarms]

Just led here by trying to find why js-beautify breaks hbs files when you're just trying to preserve all your newlines but get correct indenting... +1!

[MacKLess]

I just ran this in v1.8.0-rc14 and the actual output is unchanged from the input. I'm assuming this is the correct formatting. @ifahrentholz and @aeschli please let me know if this issue requires further attention.

Just for reference, here is the actual output for the second given example:

---
layout: mainLayout.html
page: default.html
---

<div>
    {{> componentXYZ my.data.key}}
    {{> componentABC my.other.data.key}}
    <span>Hello World</span>
    <p>Your paragraph</p>
</div>