Sublime Text 2 kullanarak HTML kodunu nasıl yeniden biçimlendiririm?

Yeniden biçimlendirmek istediğim bazı kötü biçimlendirilmiş HTML kodlarım var. Sublime Text 2'de HTML kodunu otomatik olarak yeniden biçimlendirecek, böylece daha iyi görünecek ve okunması daha kolay olacak bir komut var mı?

Bunu yapmak için herhangi bir eklentiye ihtiyacınız yoktur. Tüm satırları seçin ( Ctrl A) ve ardından menüden Düzenle → Satır → Tekrarlan'ı seçin. Dosyanız .htmlveya benzeri HTML içeren bir uzantıyla kaydedilmişse, bu işe yarar .php.

Bunu sık sık yaparsanız, bu anahtar eşleştirmeyi faydalı bulabilirsiniz:

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

Dosyanız kaydedilmezse (örn. Bir parçacığı yeni bir pencereye yapıştırdıysanız), language of choicereindent seçeneğini belirlemeden önce Görünüm → Sözdizimi → menüsünü seçerek girinti dilini manuel olarak ayarlayabilirsiniz .

Sublime'da HTML'yi biçimlendirmek için yarım düzine yol var. En popüler eklentilerin her birini test ettim ( tüm ayrıntılar için blogumda yaptığım yazıya bakın), ancak en popüler seçeneklerden bazılarına hızlı bir genel bakış:

Reindent komutu

Artıları:

• Sublime ile birlikte gönderilir, bu nedenle eklenti yüklemesi gerekmez

Eksileri:

• Fazladan boş satırları silmez
• Küçültülmüş HTML, birden çok açık etiketi olan satırlar işlenemiyor
• <script>Blokları düzgün biçimlendirmiyor

Etiket

Artıları:

• ST2 / ST3'ü destekler
• Fazladan boş satırları kaldırır
• İkili bağımlılık yok

Eksileri:

• PHP etiketlerindeki bobinler
• <script>Blokları doğru işlemez

HTMLTidy

Artıları:

• PHP etiketlerini işler
• Biçimlendirmeyi değiştirmek için bazı ayarlar

Eksileri:

• PHP gerektirir (web hizmetine geri döner)
• Sadece ST2
• Terk?

HTMLBeautify

Artıları:

• ST2 / ST3'ü destekler
• Basit ve binaray bağımlılıkları yok
• OS X, Win ve Linux desteği

Eksileri:

• Satır içi yorumlarla biraz boğulur
• Küçültülmüş / sıkıştırılmış kodu genişletir

HTML-CSS-JS Ön İşlemi

Artıları:

• ST2 / ST3'ü destekler
• HTML, CSS, JS'yi işler
• Sublime'ın menüleriyle mükemmel entegrasyon
• Son derece özelleştirilebilir
• Proje başına ayarlar
• Kaydetme seçeneği

Eksileri:

• Node.js gerektirir
• Gömülü PHP için harika değil

Hangisi en iyi?

HTML-CSS-JS Prettify kitabımın galibi. Büyük özellikleri bir sürü, şikayet çok değil.

Bulabildiğim tek paket Tag .

Paket denetimini kullanarak yükleyebilirsiniz. https://sublime.wbond.net

Paket kontrolünü kurduktan sonra. Kontrol paketlemek gidin ( Tercihler -> Paket Kontrolü ) sonra yazın install, hit enter. Sonra yazın tagve vurun enter.

Etiketi yükledikten sonra metni vurgulayın ve Ctrl+ Alt+ kısayoluna basın F.

Bu eklentiyi tavsiye ederim: HTML / CSS / JS Prettify , Gerçekten çalışıyor.

Kurulumdan sonra kodu seçin ve tuşuna basın Ctrl+Shift+H.

Bitti!

Sadece genel bir ipucu. HTML'imi otomatik olarak düzenlemek için yaptığım, HTML_Tidy paketini yüklemek ve ardından varsayılan tuşlara (kullandığım) aşağıdaki tuş bağlamalarını eklemekti:

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

bu her enter ile HTML Tidy çalışır. Bunun dezavantajları olabilir, kendimi Sublime için oldukça yeniyim, ama istediğimi yapıyor gibi görünüyor :)

Her ne kadar soru HTML için olsa da, ayrıca ayrıca Yüce Metin 2 için Javascript kodunuzu otomatik olarak biçimlendirme hakkında bilgi vermek istiyorum ;

Tüm kodunuzu ( ctrl+ A) seçebilir ve uygulama içi işlevselliği, reindent'i ( Edit-> Line-> Reindent) kullanabilir veya kodunuzu nasıl biçimlendireceğinize Sublime Text 2ilişkin daha özelleştirilebilir ayarlara sahip olmak istiyorsanız JsFormat biçimlendirme eklentisini kullanabilirsiniz . Sublime Text'in varsayılan sekmesi / girinti ayarları.

https://github.com/jdc0589/JsFormat

Paket Kontrolü'nü ( -> ) kullanarak JsFormat'ı kolayca kurabilirsiniz.Paket kontrolünü açın ve install, hit yazın . Sonra yazın ve vurun , işiniz bitti. (Paket denetleyicisi kurulumun durumunu sol alt çubuğunda başarıyla ve hatalarla gösterecektir )PreferencesPackage Controlenterjs formatenterSublime

Anahtar bağlarınıza aşağıdaki satırı ekleyin ( Preferences-> Key Bindings User)

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

Ben kullanıyorum ctrl+ alt+ 2, sen istersen onu bu kısayol tuşunu değiştirebilir. Şimdiye kadar, JsFormatdenemeye değer iyi bir eklenti!

Umarım bu birine yardımcı olur.

SublimeHtmlTidy adında oldukça iyi çalışan bir eklenti var

https://github.com/welovewordpress/SublimeHtmlTidy

Benim için HTML Prettifyçözüm son derece basitti. HTML Prettify sayfasına gittim .

1. Gerekli Sublime Package Manager
2. Paket yöneticisini yüklemek için talimatları takip buraya
3. cmd + shift + pmenüyü getirmek için yazılmıştır
4. Yazılan prettify
5. Seçti HTML prettifymenüde seçim

Boom. Bitti. Harika görünüyor

Sadece

Düzenle -> Etiket -> Belgedeki etiketleri otomatik biçimlendir

HTML'yi yeniden biçimlendirmek için iyi bir iş yapan HTMLBeautify adlı bir Paket oluşturdum . Bunu 1997'de bulduğum bir Perl senaryosuna dayandırdım - tüm yeni kanatlı modern etiketlerle çalışacak şekilde güncelledim. :)

Göz atın ve ne düşündüğünüzü bana bildirin!

https://github.com/rareyman/HTMLBeautify

Bence bu aradığınız şey:

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

Henüz yorum yapma ayrıcalığım yok, bu yüzden bu sadece @ peter'in cevabının üstündeki cevabı ile ilgili ek bilgi .

Başlıktaki IE koşullu yorumları tamamen satır içi değilse, örneğin sola aynı hizada HTML'nin beklendiği gibi hizalanmadığını gördüm :

<!--[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]--> 

Güzel bir açık kaynak kodlu ( Forindenting boyunca) hepsi tek satırda bile kirli kodu güzelleştirebilir eklentisi vardır.

HTML'yi güzelleştirmek için özel derleme sistemi ile birlikte düzenli kullanıyorum .

Paketlerim / Kullanıcı / dizinimde HTMLTidy.sublime-build var:

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

ve tidy_config.cfg dosyası aynı dizinde:

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

Ve sadece derleme sistemini seçin ve dosya içeriğini yeniden biçimlendirmek için ctrl+ bveya cmd+ düğmesine basın b. Bununla ilgili küçük bir sorun, ST2'nin dosyayı otomatik olarak yeniden yüklememesidir, böylece sonuçları başka bir dosyaya ve geri (veya başka bir uygulamaya ve geri) geçmeniz gerekir.

Mac'te macidy'i derli toplu yüklemek için kullandım, Windows'ta kendiniz indirmeniz ve derlemenin bulunduğu derleme sisteminde çalışma dizinini belirtmeniz gerekir:

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

veya PATH'a ekleyin.

kısayol tuşunu F12kolayca ayarlayabilirsiniz !!!

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

ayrıntılara buradan bakın .