HTML Güzel Biçimlendirme: Online HTML Formatlama Aracı

Biçimlendirilmiş Çıktı

Biçimlendirici yukarıdaki girdiye uygulandığında şunu üretir:

<div class="container">
  <header class="header">
    <nav>
      <a href="/" class="logo">DevBento</a>
      <ul class="nav-list">
        <li><a href="/tools">Tools</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="hero">
      <h1>Developer Tools</h1>
      <p>Free, privacy-first tools that run in your browser.</p>
      <a href="/tools" class="cta-button">Get Started</a>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 DevBento</p>
  </footer>
</div>

İç içe yapı hemen görünür hale gelir. header, main ve footer bölgeleri belirgindir. Her li, içeriği tek bir satır içi öğe olduğu için tek satırda kalır.

HTML Biçimlendirme Kuralları

HTML biçimlendirme, çoğu aracın üzerinde anlaştığı küçük bir kurallar kümesini izler:

Blok öğeler (div, section, header, main, footer, ul, ol, li, p, h1 ile h6, table, form) kendi satırlarını alır. Her alt öğe, ebeveynine göre bir seviye girintilenir.

Satır içi öğeler (a, span, strong, em, code, img) mümkün olduğunda çevreleyen içerikle aynı satırda tutulur. Yalnızca tek bir a etiketi içeren bir li tek satırlık olarak kalır. Karışık metin ve satır içi öğeler içeren bir p tek satırda kalır.

Void öğeler (br, hr, img, input, meta, link) kapanış etiketi almaz. Biçimlendirici, normalleştirme yapacak şekilde yapılandırmadığınız sürece dosyada zaten hangi kural varsa onu korur.

Öznitelikler, satır uzunluğu sınırı öznitelik sarmayı tetikleyecek kadar öznitelik olmadığı sürece açılış etiketiyle aynı satırda kalır. Öznitelikler sarıldığında, her öznitelik etiket adının altında kendi satırına gider ve kapanış > karakteri kendi satırında olur.

HTML Biçimlendirme Ne Zaman Önemlidir

Biçimlendirilmemiş HTML, birkaç spesifik durumda gerçek sorunlara neden olur:

Sürüm kontrolündeki şablon dosyaları. Statik siteler, e-posta ve sunucu tarafında işlenen uygulamalar için HTML şablonları zaman içinde birden çok kişi tarafından düzenlenir. Biçimlendirilmemiş şablonlar, tek bir içerik değişikliğinin tamamen minify edilmiş bir satırı etkilediği diff’ler üretir. Biçimlendirilmiş şablonlar tam olarak neyin değiştiğini gösteren diff’ler üretir.

E-posta HTML’si. E-posta HTML’si genellikle e-posta istemcilerinin sınırlamaları etrafında çalışmak için elle yazılır. Geliştiriciler sık sık e-posta HTML’sini bir tasarımcıdan veya üçüncü taraf bir araçtan tek bir minify edilmiş string olarak alır. Biçimlendirmek, düzenlemeden önceki ilk adımdır çünkü e-posta HTML’si birkaç seviye derinliğinde tablolar içerir ve girinti olmadan okunamaz.

Statik site oluşturucuları. Eleventy, Hugo, Jekyll veya Astro kullanan projeler şablon dosyalarını sürüm kontrolüne gönderir. Biçimlendirilmiş şablonlar, oluşturulmuş veya kopyala-yapıştır yapılmış HTML’den çok daha kolay incelenir ve düzenlenir.

İşlenmiş çıktıda hata ayıklama. Bir sunucu tarafı işleme hatası bozuk HTML ürettiğinde, ham yanıtı biçimlendirmek kapanmamış etiketleri, beklenmedik iç içe geçmeleri veya eksik öğeleri bulmanın en hızlı yoludur. Tarayıcınızın “Sayfa Kaynağını Görüntüle” özelliğini kullanın ve gerçek ağaç yapısını görmek için burada biçimlendirin.

Bileşen Çerçevelerinde Biçimlendirme

React JSX ve Vue tek dosya bileşenleri HTML’e benzeyen ancak HTML olmayan sözdizimi kullanır. JSX’i bir HTML biçimlendiriciye yapıştırırsanız, className üzerinde hata verir, kendi kendine kapanan <div /> üzerinde takılır veya {user.name} gibi ifade kaplarını kaldırır.

JSX ve TSX dosyaları için doğru araç Prettier’dir. Proje başına bir kez yükleyin:

npm install prettier --save-dev

npx prettier --write src/components/MyComponent.tsx

Prettier, JSX girintilemesini, öznitelik sarmayı ve kendi kendine kapanan etiketleri JavaScript’e uyguladığı kurallara göre işler ve tüm kod tabanınızda tutarlı biçimlendirme sağlar.

Vue .vue dosyaları için Prettier, @prettier/plugin-vue ile şablonu, betiği ve stil bloklarını kendi ayrıştırıcılarına göre bağımsız olarak biçimlendirir.

HTML için Prettier Entegrasyonu

Projenizdeki .html dosyaları için Prettier, HTML ayrıştırıcısı aracılığıyla biçimlendirmeyi halleder:

npx prettier --write "**/*.html"

HTML için varsayılan Prettier yapılandırması 2 boşluklu girinti ve 80 karakterlik satır genişliği kullanır. Öznitelikler, bir etiket 80 karakteri aştığında sarılır. Bu, .prettierrc dosyasında yapılandırılabilir:

{
  "htmlWhitespaceSensitivity": "css",
  "printWidth": 100,
  "tabWidth": 2
}

htmlWhitespaceSensitivity seçeneği, Prettier’ın satır içi öğeler etrafındaki boşlukları nasıl işleyeceğini kontrol eder. css değeri (varsayılan), öğenin display özelliğine saygı gösterir ve tarayıcı davranışıyla eşleşir. Her satır içi öğe etrafındaki boşluğu korumanız gerekiyorsa strict, görüntüleme türünden bağımsız olarak tutarlı biçimlendirme istiyorsanız ignore kullanın.

HTML biçimlendirmeyi bir commit öncesi iş akışına entegre etmek için Prettier’ı lint-staged ile birleştirin, böylece HTML dosyaları her commit’te geliştiricilerin manuel olarak çalıştırması gerekmeden otomatik olarak biçimlendirilir. Bu, bir ekip genelinde tutarlı biçimlendirmeyi sürdürmenin en güvenilir yoludur.

Diff denetleyici, orijinal ve güzelleştirilmiş HTML’i karşılaştırmak ve biçimlendirme sırasında hiçbir içeriğin yanlışlıkla değişmediğini doğrulamak için kullanışlıdır.