Js-beautify: スパンタグが正しく再インデントされない

beautify-web / js-beautifyのhtmlビューティファイアを使用しています。
http://jsbeautifier.org/で例を試して

よりコンパクトな再現入力を提供できますか？

@ bitwiseman-恐れていません。 ほとんどの場合、フォーマットは機能します。 この特定のテンプレートファイルでのみ失敗します。 問題は、入力がコンパクトでないことに関係している可能性もあります。

前述のように、これはAngular 2テンプレートファイルであり、有効なhtmlではないため、問題の一部である可能性があります。 Angularを取り除くと、改善されます。

しかし、主な問題はスパンタグにあるようです。 この入力も問題を再現します。

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

<span>を<div>置き換えると、状況は良くなりますが、 <select>タグも再現されているようです。

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

私もテストしました。 スパンをdivに置き換えることは許容されます。 テンプレートは引き続きAngular2で機能します。 selectステートメントのフォーマットは、divを使用しても機能しません。 したがって、少なくともそれは修正する必要があります。

しかし、考え直してみると... beautifyが私のHTMLを検証することは期待していません。 そのために他のツールを使用します。 コードが読みやすくなることを期待しています。 それを考えると、元のテストデータ（スパン付き）のフォーマットも同様に機能するはずです。

これは、 spanとselectが"unformatted"のデフォルトリストに含まれていることが原因である可能性があります。

@HookyQRは、私がVisual Studio Codeユーザーとして変更できるものですか？ もしそうなら、どのように？ ぜひお試しください。

はい、確かにあります。 設定で"html.format.unformatted"を編集できます。 追加すると、デフォルトで自動的に入力されます。 次に、 spanとselectを削除すれば、準備は完了です。

ありがとう、@ HookyQR。 unformattedリストからselectとspanを削除すると、問題が解決しました。

ありがとう、@ HookyQR。 これは確かに行く方法です。 スパンをdivに置き換えるなんてばかげたアドバイス。 靴をスケートに置き換えることを提案するようなものです。 技術的には、すべてを足元に置いていますね。

やった：
"html.format.contentUnformatted": "", "html.format.unformatted": "",

これで、すべてのタグが適切にフォーマットされました。

これはv1.8.0-rc4で解決されたようです（少なくともbitewisemanの入力例）

両方の例の出力：

<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を見て、上で確認してくださいhttp://jsbeautifier.org/