✨ Code Beautifier — HTML, CSS & JS Formatter

Tam Rehber: Kod Güzelleştirici — js-beautify ile HTML, CSS ve JavaScript Formatlayıcı

Kod Güzelleştirici Nedir ve Neden Önemlidir?

Kod Güzelleştirici, açık kaynaklı js-beautify kütüphanesiyle güçlendirilmiş, HTML, CSS ve JavaScript kodu için tarayıcı tabanlı bir formatlayıcıdır — binlerce geliştirici aracında, VS Code uzantısında ve derleme pipeline'larında kullanılan aynı motor. Tutarsız girintili, sıkıştırılmış veya kötü yapılandırılmış kodu alır ve yapılandırılabilir stil kurallarına göre yeniden biçimlendirir: tutarlı girinti, uygun satır sonları, operatör boşluğu ve doğru etiket/parantez hizalaması.

Bu neden önemli? Kod stili tutarsızlığı gerçek bir bakım yüküdür. Üç geliştiriciden oluşan bir ekip farklı girintiler (sekme veya boşluk, 2 veya 4 boşluk), farklı parantez stilleri ve farklı tırnak tercihleri kullandığında, kod tabanı okunması güçleşir ve Git geçmişi gerçek değişiklikleri gizleyen gürültülü yalnızca-boşluk diff'leriyle dolar.

Tek başına çalışan geliştiriciler için bile yeniden biçimlendirme şu durumlarda vazgeçilmezdir: Stack Overflow'dan kod kopyalamak (neredeyse her zaman kötü biçimlendirilmiş), sıkıştırılmış üretim JavaScript'ini tersine mühendislik yapmak, tutarsız kurallar kullanan yapay zeka tarafından oluşturulan kodu temizlemek veya hiçbir zaman düzgün organize edilmemiş, zaman baskısı altında yazılan bir dosyaya geri dönmek.

Adım Adım Kullanım Kılavuzu

1. Dil seçin — açılır menüden: HTML, CSS veya JavaScript. Bu, hangi js-beautify motorunun ve kural setinin uygulanacağını belirler.
2. Kodunuzu yapıştırın — giriş editörüne. Araç sıkıştırılmış tek satırlık kodu, tutarsız girintili çok satırlı kodu veya kısmen biçimlendirilmiş kodu kabul eder.
3. Biçimlendirme seçeneklerini yapılandırın (isteğe bağlı): girinti boyutunu (2 veya 4 boşluk ya da sekme), maksimum satır uzunluğunu, tırnak stilini (JS için tek veya çift), parantez stilini ve mevcut yeni satırların korunup korunmayacağını seçin.
4. "Güzelleştir"e tıklayın (veya Ctrl+Enter). Biçimlendirilmiş sonuç sözdizimi vurgulamasıyla sağ panelde görünür.
5. Çıktıyı kopyalayın — Kopyala düğmesiyle veya dosya olarak indirin. Biçimlendirmenin dosyayı ne kadar değiştirdiğini görmek için önceki/sonraki karakter sayısı gösterilir.

HTML Biçimlendirmesi — Neler Düzeltilir?

HTML güzelleştirici şunları işler: tutarsız etiket girintisi (alt öğeleri üst öğelerine göre girintili olarak normalleştirir), hatalı özellik biçimlendirmesi (birçok özelliği olan etiketler için satır başına bir özellik), öz kapanan etiket normalleştirmesi, satır içi ve blok öğe ayrımlarının korunması (<span> gibi satır içi öğeler, <div> gibi blok öğelerin yaptığı gibi gereksiz yere ayrı satırlara bölünmez) ve boşluğun önemli olduğu <pre> ve <textarea> bloklarının akıllıca işlenmesi. Ayrıca HTML dosyaları içindeki gömülü JavaScript (<script> blokları) ve CSS (<style> blokları) da biçimlendirilir.

CSS Biçimlendirmesi — Neler Düzeltilir?

CSS güzelleştirici şunları normalleştirir: seçici biçimlendirme (virgülle ayrılmış listelerde her seçici kendi satırında), özellik bildirim sıralaması (satır başına bir özellik), değer boşluğu (iki nokta üst üsteden sonra boşluk), parantez yerleşimi ve okunabilirlik için kural blokları arasına boş satır ekleme. Standart CSS, CSS Özel Özellikleri, medya sorguları, anahtar kare animasyonları ve çoğu ön işlemci benzeri sözdizimini işler.

JavaScript Biçimlendirmesi — Neler Düzeltilir?

JavaScript güzelleştirici üçünün en güçlüsüdür. Şunları işler: parantez stili (yapılandırılabilir — K&R stili için aynı satır, Allman stili için sonraki satır), ifade girintisi, operatör boşluğu, fonksiyon bildirimi biçimlendirmesi, ok fonksiyon biçimlendirmesi, şablon literal koruması, yorum koruması ve hizalama. ES6+ sözdizimini doğru şekilde işler: yapısöküm, yayma operatörleri, async/await ve isteğe bağlı zincirleme dahil.

Pratik Kullanım Senaryoları

Sıkıştırılmış vendor JavaScript'ini temizlemek: Bir üretim sorununu hata ayıklamak için bir tedarikçi kütüphanesi kopyaladınız. Dosya 4.000 karakterlik tek bir satır. Güzelleştiriciye yapıştırın, JavaScript'i seçin, Güzelleştir'e tıklayın — çıktı bir saniyenin altında okunabilir 120 satır kod. Artık kesme noktaları ayarlayabilir ve mantığı anlayabilirsiniz.

Ekip kod tabanını normalleştirmek: İki geliştirici aynı anda bir CSS dosyası üzerinde çalışıyor — biri 2 boşluklu girinti kullanıyor, diğeri 4 boşluklu. Birleşik dosyayı yapıştırın, 2 boşluklu girintiye yapılandırın ve güzelleştiriciyi çalıştırın. Tüm stil tutarsızlıkları tek işlemde çözülür.

Yapay zeka tarafından oluşturulan kodu temizlemek: Bir yapay zeka asistanından bir JavaScript yardımcı işlevi oluşturmasını istediniz. Çıktı bazı yerlerde çift tırnak, bazı yerlerde tek tırnak, operatörler etrafında tutarsız boşluk kullanıyor. Tercih ettiğiniz stil ayarlarıyla güzelleştiriciye yapıştırın ve temiz, tutarlı biçimlendirilmiş çıktı alın.

Kod incelemesine hazırlanmak: Bir pull request göndermeden önce tüm değiştirilen dosyaları güzelleştiriciden geçirin; diff'te tesadüfi boşluk değişikliklerinin görünmemesini sağlayın. Bu, kod incelemelerini biçimlendirme yerine mantığa odaklı tutar.

Biçimlendirme Seçenekleri Açıklandı

• Girinti boyutu: 2 boşluk modern varsayılandır (Google stil kılavuzları, Airbnb JS kılavuzu, Bootstrap tarafından kullanılır). 4 boşluk eski gelenektir ve Python topluluklarında yaygındır. Sekme girintisi bazı erişilebilirlik kılavuzları tarafından tercih edilir.
• Parantez stili (JS): "collapse" = aynı satırda açılış parantezi (K&R/JavaScript varsayılanı). "expand" = yeni satırda açılış parantezi (Allman stili). "end-expand" = yalnızca yeni satırda kapanış parantezi.
• Yeni satırları koru: Etkinleştirildiğinde, mevcut kasıtlı boş satırlar (mantıksal bölümleri ayırmak gibi), formatlayıcının kendisi eklemese bile korunur.
• Tırnak stili (JS): Tüm dize literallerini tek veya çift tırnağa normalleştirin.
• Maksimum satır uzunluğu: Bundan uzun satırlar mümkün olan yerlerde sarılır. 80 geleneksel terminal genişliğidir; 120 modern geniş monitörler için yaygındır.

Kod Güzelleştirici vs Linter vs Minifier

Bir güzelleştirici (formatlayıcı), kodu okunabilirlik için yeniden biçimlendirir — boşlukları ve stili değiştirir ancak asla semantiği değiştirmez. Bir linter (JS için ESLint veya CSS için stylelint gibi), mantıksal hataları, potansiyel hataları ve kullanımdan kaldırılmış kalıpları kontrol eder. Bir minifier (UglifyJS veya cssnano gibi), güzelleştiricinin tam tersini yapar — dosya boyutunu azaltmak için tüm gereksiz boşlukları kaldırır. Eksiksiz bir geliştirme iş akışı için: okunabilirlik için geliştirme sırasında güzelleştirin, doğruluk için lint edin, üretim dağıtımı için minify edin.

Çıktınızı güzelleştirmek yerine küçültmek için özel CSS Minifier'ı kullanın. SQL'i özellikle biçimlendirmek için SQL Formatlayıcı'yı kullanın. JavaScript kodunuzdaki kalıpları doğrulamak için Regex Test Aracı'na bakın.

Sık Sorulan Sorular

js-beautify ile Prettier aynı mı?
Hayır. Prettier, kişisel tercih yerine tutarlılığı ön planda tutan az yapılandırılabilir seçenekle sabit bir stili zorunlu kılan daha fikirli bir formatlayıcıdır. js-beautify daha yapılandırılabilir ve daha müsamahakardır — kendi stilini dayatmak yerine sizin stilinize uyum sağlar. Bu araç js-beautify kullanır çünkü yapılandırılabilirliği onu genel amaçlı bir web aracı olarak daha kullanışlı kılar.

Güzelleştirici kodumun mantığını veya davranışını değiştirir mi?
Hayır. Güzelleştirici yalnızca boşlukları (boşluk, sekme, yeni satır) ve tırnak normalleştirmesini değiştirir. Asla ifadeleri yeniden sıralamaz, değişken adlarını değiştirmez veya herhangi bir mantığı değiştirmez. Çıktı her zaman girdiyle anlamsal olarak özdeştir.

TypeScript veya JSX dosyalarını güzelleştirebilir miyim?
"JavaScript" modunu seçin. js-beautify çoğu TypeScript ve JSX sözdizimini doğru şekilde işler — JavaScript bölümlerini biçimlendirir ve TypeScript tür ek açıklamalarını ve JSX etiketlerini olduğu gibi bırakır.

Kodumda sözdizimi hataları varsa ne olur?
Güzelleştirici sözdizimsel olarak geçersiz kodu bile en iyi şekilde biçimlendirmeye çalışır — kısmen biçimlendirilmiş çıktı üretebilir. Temiz sonuçlar için önce sözdizimi hatalarını düzeltin (tarayıcı konsolunu veya bir linter'ı kullanın).