Js-beautify: Las etiquetas de extensión no se vuelven a sangrar correctamente

Estamos usando el embellecedor html de beautify-web / js-beautify.
Probar el ejemplo en http://jsbeautifier.org/ muestra que el problema está en el formateador.

¿Puede proporcionar una entrada de reproducción más compacta?

@bitwiseman - Me temo que no. El formato me funciona la mayor parte del tiempo. Solo falla con este archivo de plantilla en particular. Incluso podría ser que el problema tenga algo que ver con que la entrada no sea compacta .

Como se señaló, este es un archivo de plantilla Angular 2, no HTML válido, por lo que podría ser parte del problema. Si eliminas lo Angular, mejora.

Pero parece que el problema principal son las etiquetas de intervalo. Esta entrada también reproduce el 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>

Si reemplaza <span> s con <div> s, las cosas mejoran, pero las etiquetas <select> también parecen reproducir:

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

Yo también lo probé. Reemplazar los intervalos con divs es aceptable. La plantilla todavía funciona en Angular2. El formateo de la instrucción select aún no funciona, incluso con divs. Así que al menos eso debería arreglarse.

Sin embargo, pensándolo bien ... no espero que beautify valide mi HTML. Utilizo otras herramientas para eso. Solo espero que facilite la lectura de mi código. Dado eso, creo que el formateo de los datos de prueba originales (con intervalos) también debería funcionar.

Es probable que esto se deba al hecho de que span y select están en la lista predeterminada para "unformatted" .

@HookyQR ¿ es algo que yo, como usuario de Visual Studio Code, puedo cambiar? ¿Si es así, cómo? Estaría feliz de intentarlo.

Sí, seguro que lo hay. Puedes editar "html.format.unformatted" en tu configuración. Debería completarse automáticamente con los valores predeterminados cuando lo agregue. Luego elimine span y select y estará listo para comenzar.

Gracias, @HookyQR. Eliminar select y span de la lista unformatted solucionó el problema.

Gracias, @HookyQR. Seguro que este es el camino a seguir. Reemplazando los intervalos con divs, qué estúpido consejo. Es como sugerir reemplazar los zapatos por patines. Técnicamente, los pones todos de pie, ¿no?

Yo hice:
"html.format.contentUnformatted": "", "html.format.unformatted": "",

Ahora todas mis etiquetas están bien formateadas.

Esto parece haberse resuelto (al menos los ejemplos de entrada de bitewiseman) en v1.8.0-rc4

Salida para ambos ejemplos:

<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 Eche un vistazo y verifique en http://jsbeautifier.org/