Kod Biçimlendirici

Ne işe yarar

Kod biçimlendirici; sıkışık, küçültülmüş veya tutarsız girintili kodu alır ve temiz, tutarlı bir stille yeniden yazar. Web geliştirmede en sık karşılaşılan dilleri destekler: HTML, CSS, SCSS, Less, JavaScript, TypeScript, JSON, XML, Markdown, YAML ve GraphQL.

Arka planda milyonlarca projenin kullandığı Prettier çalışır; bu sayede sonuç, VS Code’da veya bir pre-commit hook ile biçimlendirilmiş kodla tamamen aynı görünür. Her dilin ayrıştırıcısı yalnızca o dili seçtiğinizde yüklenir, bu da sayfanın hızlı kalmasını sağlar.

Nasıl kullanılır

1. Kodunuzun Dil seçeneğini belirleyin.
2. Kodu yapıştırın veya bir dosya açın.
3. Bir Girinti stili (2 boşluk, 4 boşluk veya sekme) ve bir Satır genişliği seçin. Genişliği aşan satırlar, dilin izin verdiği yerlerden bölünür.
4. JavaScript ve TypeScript için ifadelerin noktalı virgül ile bitip bitmeyeceğini seçin. Betikler ve stil dosyaları için projeniz tercih ediyorsa tek tırnak seçeneğini açın.
5. Sonucu kopyalayın veya indirin.

Örnek

Örnek, satır içi CSS ve JavaScript içeren tek satırlık bir HTML sayfasıdır. Biçimlendirmeden sonra her öğe kendi satırına yerleşir, CSS kuralları satır başına bir bildirim olacak şekilde açılır ve betikteki ok fonksiyonu parantez ile noktalı virgül kazanır:

<script>
  const items = [1, 2, 3];
  items.forEach((i) => console.log(i));
</script>

İpuçları

• Biçimlendirme aynı zamanda hızlı bir sözdizimi kontrolüdür. Prettier girdiyi ayrıştıramazsa hata mesajı satır ve sütunu gösterir, böylece doğrudan hataya atlayabilirsiniz.
• XML, iç içe etiketlerin girintilenebilmesi için boşluklar önemsiz sayılarak biçimlendirilir. Belgeniz öğelerin içindeki boşlukların birebir korunmasına dayanıyorsa sonucu kullanmadan önce kontrol edin.
• Tersine mi ihtiyacınız var? Kodu üretim için küçültmek üzere JavaScript ve CSS küçültücüyü, JSON doğrulama ve küçültme için de JSON biçimlendiriciyi kullanın.