Js-beautify: Les balises Span ne se ré-indentent pas correctement

Nous utilisons l'embellisseur html de beautify-web / js-beautify.
Essayer l'exemple sur http://jsbeautifier.org/ montre que le problème vient du formateur.

Pouvez-vous fournir une entrée de repro plus compacte?

@bitwiseman - J'ai bien peur que non. Le formatage fonctionne pour moi la plupart du temps. Il échoue uniquement avec ce fichier de modèle particulier. Il se peut même que le problème soit lié au fait que l'entrée n'est pas compacte .

Comme indiqué, il s'agit d'un fichier de modèle Angular 2, non html valide, ce qui pourrait faire partie du problème. Si vous supprimez la chose angulaire, améliorez-vous.

Mais il semble que le problème principal soit lié aux balises span. Cette entrée représente également le problème:

<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 vous remplacez les <span> s par <div> les choses s'améliorent mais les balises <select> semblent également se reproduire:

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

Je l'ai testé aussi. Le remplacement des travées par des divs est acceptable. Le modèle fonctionne toujours dans Angular2. Le formatage de l'instruction select ne fonctionne toujours pas, même avec les div. Au moins, cela devrait être corrigé.

Sur une seconde réflexion cependant ... je ne m'attends pas à embellir pour valider mon HTML. J'utilise d'autres outils pour cela. Je m'attends juste à ce que mon code soit facile à lire. Compte tenu de cela, je pense que le formatage des données de test d'origine (avec des étendues) devrait également fonctionner.

Cela est probablement dû au fait que span et select sont dans la liste par défaut pour "unformatted" .

@HookyQR est-ce quelque chose que je peux changer, en tant qu'utilisateur de Visual Studio Code? Si c'est le cas, comment? Je serais heureux d'essayer ça.

Oui, c'est sûr. Vous pouvez modifier "html.format.unformatted" dans vos paramètres. Il devrait se remplir automatiquement avec les valeurs par défaut lorsque vous l'ajoutez. Supprimez ensuite span et select et vous êtes prêt à partir.

Merci, @HookyQR. La suppression de select et span de la liste unformatted résolu le problème pour moi.

Merci, @HookyQR. C'est certainement la voie à suivre. Remplacement des travées par des divs quel conseil stupide. C'est comme suggérer de remplacer les chaussures par des patins. Techniquement, vous les mettez tous sur pieds, n'est-ce pas?

J'ai fait:
"html.format.contentUnformatted": "", "html.format.unformatted": "",

Maintenant, toutes mes balises sont bien formatées.

Cela semble avoir été résolu (au moins les exemples d'entrée bitewiseman) dans v1.8.0-rc4

Sortie pour les deux exemples:

<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 Veuillez jeter un œil et vérifier sur http://jsbeautifier.org/