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

23

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:

18

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
1
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
2
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
6

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
1
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
2
Tidak bekerja untuk saya.
Derek 朕 會 功夫
Ya, itu melakukan pekerjaan yang cukup baik, tetapi akhirnya mulai menurun, dalam kasus saya <div>membuka tag.
ruffin
0

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