Js-beautify: Span tags do not re-indent correctly

[aeschli]

_From @hhubik on August 28, 2016 20:37_

• VSCode Version: Code 1.4.0 (6276dcb0ae497766056b4c09ea75be1d76a8b679, 2016-08-04T16:45:31.680Z)
• OS Version: Windows_NT ia32 6.3.9600

Steps to Reproduce:

1. Open the test file in the attached zip archive in VS Code.
2. Execute "Formate Code" command (Alt-Shift-F).
3. Lines 68 and 79 are not properly indented as shown in this snapshot

_Copied from original issue: Microsoft/vscode#11069_

[aeschli]

We're using the html beautifier from beautify-web/js-beautify.
Trying the example on http://jsbeautifier.org/ shows that the issue is with formatter.

[bitwiseman]

Can you provide a more compact repro input?

[hhubik]

@bitwiseman - I am afraid not. The formatting works for me most of the time. It only fails with this particular template file. It could even be that the problem has something to do with the input not being compact.

[bitwiseman]

As noted, this is an Angular 2 template file, not valid html , so that could be part of the problem. If you strip out the Angular thing improve.

But It looks like main issue is with the span tags. This input also repro's the problem:

<div class="ui-grid-row ">
    <div class="ui-grid-col-12">
        <p-editor formControlName="voteDescriptionControl" [style]="{'height':'320px'}">
            <header>
                <span class="ql-formats">
                            <select class="ql-header">
                                <option selected></option>
                                <option value="1"></option>
                                <option value="2"></option>
                                <option value="3"></option>
                            </select>
                        </span>
                <span class="ql-formats">
        <button class="ql-bold"></button>
                            <button class="ql-italic"></button>
                            <button class="ql-underline"></button>
                                  <button class="ql-strike"></button>
                        </span>
                <span class="ql-formats"> 
                            <button class="ql-list" value="ordered"></button> 
                            <button class="ql-list" value="bullet"></button> 
                        </span>
                <span class="ql-formats"> 
                     <select class="ql-align"> 
 <option selected></option> 
                         <option value="center"></option> 
                         <option value="right"></option> 
                         <option value="justify"></option> 
                     </select> 
                 </span>
            </header>
        </p-editor>
    </div>
</div>

If you replace the <span>s with <div>s things get better but the <select> tags also seem to repro:

<div class="ui-grid-row ">
    <div class="ui-grid-col-12">
        <p-editor formControlName="voteDescriptionControl" [style]="{'height':'320px'}">
            <header>
                <div class="ql-formats">
                    <select class="ql-header">
                                <option selected></option>
                                <option value="1"></option>
                                <option value="2"></option>
                                <option value="3"></option>
                            </select>
                </div>
                <div class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </div>
                <div class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                </div>
                <div class="ql-formats">
                    <select class="ql-align"> 
 <option selected></option> 
                         <option value="center"></option> 
                         <option value="right"></option> 
                         <option value="justify"></option> 
                     </select>
                </div>
            </header>
        </p-editor>
    </div>
</div>

[hhubik]

I tested it too. Replacing spans with divs is acceptable. The template still works in Angular2. Formatting of the select statement still does not work, even with divs. So at least that should be fixed.

[hhubik]

On a second thought though ... I do not expect beautify to validate my HTML. I use other tools for that. I just expect it to make my code easy read. Given that, I think formatting of the original test data (with spans) should work as well.

[HookyQR]

This is likely caused by the fact that span and select are in the default list for "unformatted".

[hhubik]

@HookyQR is that something I, as a Visual Studio Code user, can change? If so, how? I'd be happy to try that.

[HookyQR]

Yep, there sure is. You can edit "html.format.unformatted" in your settings. It should auto fill with the defaults when you add it. Then remove span and select and you're good to go.

[hhubik]

Thanks, @HookyQR. Removing select and span from the unformatted list fixed the problem for me.

[Denis-Frolov]

Thanks, @HookyQR. This sure is the way to go. Replacing spans with divs whata stupid advice. It's like suggesting to replace shoes with skates. Technically you put em all on your feet ain't it?

[andreshg112]

I did:
"html.format.contentUnformatted": "", "html.format.unformatted": "",

Now all my tags are being well formatted.

[MacKLess]

This appears to have been resolved (at least the bitewiseman input examples) in v1.8.0-rc4

Output for both examples:

<div class="ui-grid-row ">
    <div class="ui-grid-col-12">
        <p-editor formControlName="voteDescriptionControl" [style]="{'height':'320px'}">
            <header>
                <div class="ql-formats">
                    <select class="ql-header">
                        <option selected></option>
                        <option value="1"></option>
                        <option value="2"></option>
                        <option value="3"></option>
                    </select>
                </div>
                <div class="ql-formats">
                    <button class="ql-bold"></button>
                    <button class="ql-italic"></button>
                    <button class="ql-underline"></button>
                    <button class="ql-strike"></button>
                </div>
                <div class="ql-formats">
                    <button class="ql-list" value="ordered"></button>
                    <button class="ql-list" value="bullet"></button>
                </div>
                <div class="ql-formats">
                    <select class="ql-align">
                        <option selected></option>
                        <option value="center"></option>
                        <option value="right"></option>
                        <option value="justify"></option>
                    </select>
                </div>
            </header>
        </p-editor>
    </div>
</div>

@aeschli Please take a look and verify on http://jsbeautifier.org/