Js-beautify: As tags Span não recuam corretamente

Estamos usando o embelezador html de beautify-web / js-beautify.
Testar o exemplo em http://jsbeautifier.org/ mostra que o problema é com o formatador.

Você pode fornecer uma entrada de reprodução mais compacta?

@bitwiseman - Receio que não. A formatação funciona para mim na maioria das vezes. Ele só falha com este arquivo de modelo específico. Pode até ser que o problema tenha a ver com a entrada não ser compacta .

Conforme observado, este é um arquivo de modelo Angular 2, html não válido, então isso pode ser parte do problema. Se você tirar a coisa Angular, melhore.

Mas parece que o problema principal é com as tags span. Essa entrada também representa o problema:

<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>

Se você substituir <span> s por <div> s, as coisas ficam melhores, mas as tags <select> também parecem se reproduzir:

<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>

Eu testei também. Substituir spans por divs é aceitável. O modelo ainda funciona no Angular2. A formatação da instrução select ainda não funciona, mesmo com divs. Então, pelo menos isso deve ser consertado.

Pensando bem ... não espero que o embelezamento valide meu HTML. Eu uso outras ferramentas para isso. Só espero que torne meu código mais fácil de ler. Considerando isso, acho que a formatação dos dados de teste originais (com spans) também deve funcionar.

Isso provavelmente é causado pelo fato de que span e select estão na lista padrão para "unformatted" .

@HookyQR é algo que eu, como um usuário do Visual Studio Code, posso mudar? Se sim, como? Eu ficaria feliz em tentar isso.

Sim, com certeza. Você pode editar "html.format.unformatted" em suas configurações. Ele deve ser preenchido automaticamente com os padrões ao adicioná-lo. Em seguida, remova span e select e pronto.

Obrigado, @HookyQR. Remover select and span da lista unformatted corrigiu o problema para mim.

Obrigado, @HookyQR. Este com certeza é o caminho a percorrer. Substituir spans por divs, o que é um conselho estúpido. É como sugerir substituir os sapatos por patins. Tecnicamente, você coloca todos no chão, não é?

Eu fiz:
"html.format.contentUnformatted": "", "html.format.unformatted": "",

Agora todas as minhas tags estão sendo bem formatadas.

Isso parece ter sido resolvido (pelo menos os exemplos de entrada do bitewiseman) na v1.8.0-rc4

Resultado para ambos os exemplos:

<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 Por favor, dê uma olhada e verifique em http://jsbeautifier.org/