Bagaimana cara memformat ulang kode HTML menggunakan Sublime Text 2?

Saya memiliki beberapa kode HTML dengan format yang buruk yang ingin saya format ulang. Apakah ada perintah yang secara otomatis akan memformat ulang kode HTML di Sublime Text 2 sehingga terlihat lebih baik dan lebih mudah dibaca?

Anda tidak perlu plugin untuk melakukan ini. Cukup pilih semua baris ( Ctrl A) dan kemudian dari menu pilih Edit → Line → Reindent. Ini akan berfungsi jika file Anda disimpan dengan ekstensi yang berisi HTML like .htmlatau .php.

Jika Anda sering melakukan ini, Anda mungkin menemukan pemetaan kunci ini berguna:

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

Jika file Anda tidak disimpan (misalnya Anda baru saja menempelkan potongan ke jendela baru), Anda dapat secara manual mengatur bahasa untuk lekukan dengan memilih menu View → Syntax → language of choicesebelum memilih opsi reindent.

Ada setengah lusin cara untuk memformat HTML di Sublime. Saya telah menguji masing-masing plugin yang paling populer (lihat artikel yang saya lakukan di blog saya untuk detail lengkap), tetapi di sini adalah ikhtisar singkat dari beberapa opsi yang paling populer:

Perintah reindent

Pro:

• Dikirim dengan Sublime, jadi tidak perlu menginstal plugin

Cons:

• Tidak menghapus baris kosong ekstra
• Tidak dapat menangani HTML kecil, baris dengan banyak tag terbuka
• Tidak memformat <script>blok dengan benar

Menandai

Pro:

• Mendukung ST2 / ST3
• Menghapus garis kosong ekstra
• Tidak ada dependensi biner

Cons:

• Tersedak tag PHP
• Tidak menangani <script>blok dengan benar

HTMLTidy

Pro:

• Menangani tag PHP
• Beberapa pengaturan untuk mengubah format

Cons:

• Membutuhkan PHP (kembali ke layanan web)
• Hanya ST2
• Ditinggalkan?

HTMLBeautify

Pro:

• Mendukung ST2 / ST3
• Sederhana dan tidak ada ketergantungan binaray
• Dukungan untuk OS X, Win dan Linux

Cons:

• Tersedak sedikit dengan komentar sebaris
• Apakah memperluas kode diminimalkan / dikompresi

HTML-CSS-JS Prettify

Pro:

• Mendukung ST2 / ST3
• Menangani HTML, CSS, JS
• Integrasi hebat dengan menu Sublime
• Sangat dapat dikustomisasi
• Pengaturan per proyek
• Format pada opsi simpan

Cons:

• Membutuhkan Node.js
• Tidak bagus untuk PHP yang disematkan

Mana yang terbaik?

HTML-CSS-JS Prettify adalah pemenang dalam buku saya. Banyak fitur hebat, tidak banyak yang dikeluhkan.

Satu-satunya paket yang saya dapat temukan adalah Tag .

Anda dapat menginstalnya menggunakan kontrol paket. https://sublime.wbond.net

Setelah menginstal kontrol paket. Buka kontrol paket ( Preferensi -> Kontrol Paket ) lalu ketik install, tekan enter. Kemudian ketik tagdan tekan enter.

Setelah menginstal Tag, sorot teks dan tekan pintasan Ctrl+ Alt+ F.

Saya merekomendasikan plugin ini: Prettify HTML / CSS / JS , Ini benar-benar berfungsi.

Setelah instalasi, cukup pilih kode dan tekan Ctrl+Shift+H.

Selesai!

Hanya tip umum. Apa yang saya lakukan untuk merapikan HTML saya secara otomatis, adalah menginstal paket HTML_Tidy, dan kemudian menambahkan pengikat tombol berikut ke pengaturan default (yang saya gunakan):

{ "keys": ["enter"], "command": "html_tidy" },

ini menjalankan HTML Tidy dengan setiap entri. Mungkin ada kekurangan untuk ini, saya cukup baru untuk Sublime sendiri, tetapi tampaknya melakukan apa yang saya inginkan :)

Meskipun pertanyaannya adalah untuk HTML, saya juga ingin memberikan info tentang cara memformat otomatis kode Javascript Anda untuk Sublime Text 2 ;

Anda dapat memilih semua kode Anda ( ctrl+ A) dan menggunakan fungsionalitas dalam aplikasi, reindent ( Edit-> Line-> Reindent) atau Anda dapat menggunakan plugin format JsFormat Sublime Text 2jika Anda ingin memiliki pengaturan yang lebih dapat disesuaikan tentang cara memformat kode Anda selain menambahkan tab default / pengaturan indentasi Sublime Text.

https://github.com/jdc0589/JsFormat

Anda dapat dengan mudah menginstal JsFormat dengan menggunakan Kontrol Paket ( Preferences-> Package Control) Buka kontrol paket lalu ketik instal, tekanenter . Kemudian ketik js formatdan tekan enter, selesai. (Pengontrol paket akan menunjukkan status pemasangan dengan sukses dan kesalahan pada bilah kiri bawahSublime )

Tambahkan baris berikut ke binding utama Anda ( Preferences-> Key Bindings User)

{ "keys": ["ctrl+alt+2"], "command": "js_format"}

Saya menggunakan ctrl+ alt+ 2, Anda dapat mengubah kunci pintas ini apa pun yang Anda mau. Sejauh ini, JsFormatmerupakan plugin yang bagus, layak untuk dicoba!

Semoga ini bisa membantu seseorang.

Ada sebuah plugin bernama SublimeHtmlTidy yang berfungsi cukup baik

https://github.com/welovewordpress/SublimeHtmlTidy

Bagi saya, HTML Prettifysolusinya sangat sederhana. Saya pergi ke halaman HTML Prettify .

1. Membutuhkan Sublime Package Manager
2. Ikuti Instruksi untuk menginstal manajer paket di sini
3. diketik cmd + shift + puntuk membuka menu
4. Diketik prettify
5. Pilih HTML prettifypilihan di menu

Ledakan. Selesai Tampak hebat

Cukup buka

Edit -> Tag -> Tag format otomatis pada dokumen

Saya membuat Paket yang disebut HTMLBeautify yang melakukan pekerjaan yang layak untuk memformat ulang HTML. Saya mendasarkannya pada skrip Perl yang saya temukan pada tahun 1997 — saya memutakhirkannya agar berfungsi dengan semua tag modern baru yang sudah ketinggalan jaman. :)

Lihatlah dan beri tahu saya apa yang Anda pikirkan!

https://github.com/rareyman/HTMLBeautify

Saya pikir inilah yang Anda cari:

https://github.com/victorporof/Sublime-HTMLPrettify

Saya belum memiliki hak istimewa untuk berkomentar jadi ini hanyalah informasi tambahan yang terkait dengan jawaban @ peter di atas.

Saya menemukan HTML tidak sejajar seperti yang diharapkan jika komentar bersyarat IE di header tidak sepenuhnya in-line misalnya flush ke kiri:

<!--[if lt IE 7]>
<p class='chromeframe'>Your browser is <em>unsupported</em>. <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Ada plugin CodeFormatter open source yang bagus , yang (bersama pengindeksan ulang) dapat mempercantik kode kotor meskipun semuanya dalam satu baris.

Saya menggunakan rapi bersama-sama dengan sistem build khusus untuk membuat HTML cantik.

Saya memiliki HTMLTidy.sublime-build di direktori Paket / Pengguna / saya:

{
  "cmd": ["tidy", "-config", "$packages/User/tidy_config.cfg", "$file"]
}

dan file tidy_config.cfg di direktori yang sama:

indent: auto
tab-size: 4
show-warnings: no
write-back: yes
quiet: yes
indent-cdata: yes
tidy-mark: no
wrap: 0

Dan cukup pilih sistem bangun dan tekan ctrl+ batau cmd+b untuk memformat ulang konten file. Satu masalah kecil dengan itu adalah bahwa ST2 tidak secara otomatis memuat ulang file sehingga untuk melihat hasil Anda harus beralih ke beberapa file lain dan kembali (atau ke aplikasi lain dan kembali).

Di Mac, saya menggunakan macports untuk menginstal rapi, di Windows Anda harus mengunduhnya sendiri dan menentukan direktori kerja di sistem build, di mana rapi berada:

"working_dir": "c:\\HTMLTidy\\"

atau menambahkannya ke PATH.

Anda dapat mengatur tombol pintas dengan F12mudah !!!

{ "keys": ["f12"], "command": "reindent" , "args": { "single_line": false } }

lihat detail di sini .