Js-beautify: Tag span tidak mengindentasi ulang dengan benar

Dibuat pada 30 Agu 2016 · 13Komentar · Sumber: beautify-web/js-beautify

_Dari @hhubik pada 28 Agustus 2016 20: 37_

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

Langkah-langkah untuk Mereproduksi:

Buka file tes dalam arsip zip terlampir di VS Code.
Jalankan perintah "Format Kode" (Alt-Shift-F).
Baris 68 dan 79 tidak diberi jarak dengan benar seperti yang ditunjukkan dalam foto ini

_Disalin dari masalah asli: Microsoft / vscode # 11069_

html fixed? bug

Sumber

aeschli

Komentar yang paling membantu

Ya, pasti ada. Anda dapat mengedit "html.format.unformatted" dalam pengaturan Anda. Ini harus otomatis mengisi dengan default saat Anda menambahkannya. Kemudian hapus span dan select dan Anda siap melakukannya.

HookyQR pada 21 Mar 2017

👍8 🎉1

Semua 13 komentar

Kami menggunakan html beautifier dari beautify-web / js-beautify.
Mencoba contoh di http://jsbeautifier.org/ menunjukkan bahwa masalahnya ada pada formatter.

aeschli pada 30 Agu 2016

Dapatkah Anda memberikan masukan repro yang lebih ringkas?

bitwiseman pada 30 Agu 2016

@ Bitwiseman - Saya khawatir tidak. Formatnya bekerja untuk saya hampir sepanjang waktu. Itu hanya gagal dengan file template khusus ini. Bahkan bisa jadi masalahnya ada hubungannya dengan input yang tidak kompak .

hhubik pada 30 Agu 2016

Seperti disebutkan, ini adalah file template Angular 2, bukan html yang valid, jadi itu bisa menjadi bagian dari masalah. Jika Anda menghapus hal Angular, perbaiki.

Tapi sepertinya masalah utama adalah dengan tag span. Masukan ini juga melaporkan masalahnya:

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

Jika Anda mengganti <span> s dengan <div> s semuanya menjadi lebih baik tetapi tag <select> juga tampaknya 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>

bitwiseman pada 1 Sep 2016

Saya mengujinya juga. Mengganti span dengan div diperbolehkan. Template masih berfungsi di Angular2. Pemformatan pernyataan pilih masih tidak berfungsi, bahkan dengan div. Jadi setidaknya itu harus diperbaiki.

hhubik pada 2 Sep 2016

Setelah dipikir-pikir lagi ... Saya tidak berharap beautify memvalidasi HTML saya. Saya menggunakan alat lain untuk itu. Saya hanya berharap itu membuat kode saya mudah dibaca. Mengingat itu, saya pikir pemformatan data uji asli (dengan bentang) harus berfungsi juga.

hhubik pada 2 Sep 2016

Hal ini kemungkinan besar disebabkan oleh fakta bahwa span dan select ada dalam daftar default untuk "unformatted" .

HookyQR pada 21 Mar 2017

👍1

@ HookyQR adalah bahwa sesuatu yang saya, sebagai pengguna Visual Studio Code, dapat mengubah? Jika ya, bagaimana caranya? Saya akan dengan senang hati mencobanya.

hhubik pada 21 Mar 2017

HookyQR pada 21 Mar 2017

👍8 🎉1

Terima kasih, @HookyQR. Menghapus pilih dan rentang dari daftar unformatted memperbaiki masalah saya.

hhubik pada 21 Mar 2017

Terima kasih, @HookyQR. Ini pasti cara untuk pergi. Mengganti span dengan div yang merupakan saran bodoh. Ini seperti menyarankan untuk mengganti sepatu dengan sepatu roda. Secara teknis Anda menempatkan mereka semua di kaki Anda bukan?

Denis-Frolov pada 8 Mei 2017

Aku melakukannya:
"html.format.contentUnformatted": "", "html.format.unformatted": "",

Sekarang semua tag saya diformat dengan baik.

andreshg112 pada 24 Mei 2017

👍4

Ini tampaknya telah diselesaikan (setidaknya contoh masukan bitewiseman) di v1.8.0-rc4

Output untuk kedua contoh:

<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 Silakan lihat dan verifikasi di http://jsbeautifier.org/