Apakah ada fitur auto-indentation HTML atau plugin untuk Sublime Text (alias prettify / beautify / format)?

Misalnya, sesuatu untuk diubah:

<section><article><h1></h1><p></p></article></section>

untuk:

<section>
  <article>
    <h1></h1>
    <p></p>
  </article>
</section>

... yang berfungsi di laman dan cuplikan lengkap.

Dibangun di Edit > Line > Reindentpengaturan tidak melakukan hal ini
Plugin menambahkan headdan bodytag HTMLTidy , sehingga tidak berfungsi untuk sebagian, juga memiliki berbagai masalah lainnya
Tag plugin memiliki berbagai masalah , cukup sehingga pada dasarnya tidak berfungsi
Plugin HTMLPrettify memiliki berbagai masalah , memerlukan node.js, dan belum diperbarui dalam beberapa bulan
gist.github.com/mcdonc/3898894 mengklaim untuk melakukannya, tetapi membutuhkan Emacs

(Notepad ++ memiliki indentasi otomatis, Dreamweaver telah Menerapkan Pemformatan Sumber, Aptana memiliki Format, dll.)

Plugin Tag menangani tag inline secara salah , misalnya menggunakannya pada snippet ini:

<p>foo<a>bar<span>baz<span>qux</span></span></a></p>

menghasilkan:

<p>
    foo
    <a>
        bar
        <span>
            baz
            <span>qux</span>
        </span>
    </a>
</p>

html sublime-text-2 autoindent

— pengguna110241
sumber

Apa pertanyaannya? Tidak jelas dari pos Anda apa pertanyaannya.

— Brad Patton

Judul yang diedit menjadi interogatif. Saya mencoba menemukan beberapa cara untuk mengindentasi HTML secara otomatis dalam Sublime Text.

— user110241

Lihat juga Memformat Kode HTML menggunakan Sublime Text 2 .

— Karan

Terima kasih, saya mencoba setiap solusi di utas itu, tidak ada yang berhasil. Saya telah membuat daftar alasan mengapa banyak dari mereka tidak bekerja di utas ini.

— user110241

Saya pikir ini adalah solusi terbaik: jsbeautifier.org Saya memiliki persyaratan yang sama untuk memformat beberapa tag inline. Yang ini bekerja dengan sangat baik. Itu membuat markup yang tepat untuk teks luhur juga yang dapat menutup potongan. Ini juga tersedia di CLI sebagai npmjs.com/package/js-beautify

— Sai krishna Deep

Jawaban:

Tidak reindentselalu bekerja untuk cuplikan. Anda dapat menggunakan Tagplugin (instal dari kontrol paket). Kemudian cukup tekan ctrl+ shift+ p, dan ketik tag. Anda akan melihat opsi Auto-Format tags on document. Pilih dan tekan Enter. Itu akan melakukannya.

— Bibhas
sumber

Seperti yang saya sebutkan di posting asli, plugin Tag rusak, terutama dalam penanganan tag inline, di antara bug yang sangat buruk. Penulis mengatakan dia perlu "menulis ulang semuanya". Reindent sama sekali tidak berfungsi untuk HTML, itu tidak memperbaiki indentasi; itu hanya menyelaraskan tag ke tingkat indentasi tertentu.

— user110241

baik, Tag bekerja untuk saya. Saya menggunakan cuplikan HTML Anda. Itu bekerja dengan sempurna. Dan reindent berfungsi untuk HTML tetapi dalam beberapa kondisi tertentu.

— Bibhas

coba gunakan autoformat Tag pada cuplikan ini: <p>foo<a>bar<span>baz<span>qux</span></span></a></p>untuk melihat apa yang saya maksud. Itu juga mengacaukan pemformatan tag HTML pembuka yang dibungkus dengan komentar bersyarat IE yang merupakan bagian dari HTML5 Boilerplate (dan komentar pada umumnya). Coba gunakan bawaanLine > Reindent pada snippet ini: jsfiddle.net/y8xXj untuk melihat bagaimana kegagalannya.

— user110241

FYI - Baru saja mencoba Sublime Text 3 dengan cuplikan HTML dan itu memang berhasil!

— Steven

Masalah yang sama. Saya telah menggunakan editor yang tak terhitung jumlahnya di masa lalu, Coda, Sublime, Espresso, Chocolat, TextMate ... tetapi tidak ada yang bisa memformat teks dengan sempurna seperti Dreamweaver's Apply Source Formatting. Di mana orang cukup menyarankan Tidy atau plugin lain yang tidak pernah berfungsi seperti Dreamweaver. Saya senang seseorang "Zooted" melihat masalah ini. Sangat disayangkan masih belum ada solusi. Dalam Sublime Text 3 sebagai Zooted Noted bahkan dengan Tag itu tidak berfungsi dengan baik (seperti pada contoh di atas). Dan fitur Reindent asli cukup berharga.

— cchiera

Pilih Semua -> Edit menu -> Line -> Reindend akan dilakukan. Anda dapat mengatur kombinasi pintasan untuk penggunaan yang sama.

{"keys": ["ctrl + shift + r"], "command": "reindent", "args": {"single_line": false}}

— Jasim Mahmood
sumber

Seperti yang saya sebutkan dalam pertanyaan, ini tidak berhasil. Cobalah di cuplikan pertama yang saya berikan: <section><article><h1></h1><p></p></article> </section>

— user110241

Bekerja untukku. Sintaks diatur ke HTML?

— Manuel Arwed Schmidt

Tidak bekerja untuk saya.

— Derek 朕會功夫

Ya, itu melakukan pekerjaan yang cukup baik, tetapi akhirnya mulai menurun, dalam kasus saya <div>membuka tag.

— ruffin

Agar fitur Reindent berfungsi, Anda harus menghapus centang opsi untuk "Indent Using Spaces":

Lihat >> Indentasi >> Indent Menggunakan Spasi

Setelah opsi ini tidak dicentang, Anda dapat memilih teks dan Reindent Anda:

Edit >> Baris >> Reindent

Ini akan bekerja untuk sintaks HTML dan juga XML. Tidak mengujinya pada orang lain.

— Sidz
sumber

Saya sebenarnya sudah bekerja dengan hal itu. Perintah yang Anda sebutkan tidak melakukan apa pun pada cuplikan ini di ST3:<html><head></head><body><div><p>foobar<span>baz</span></p></div></body></html>

— user110241