JavaScript Formatla

Biçimlendirilmiş Kod

Yukarıdaki küçültülmüş JavaScript’e biçimlendiriciyi uygulamak şunu üretir:

const calculateTotal = (items, discount) => {
  let total = 0;
  for (const item of items) {
    total += item.price * item.quantity;
  }
  if (discount > 0) {
    total = total * (1 - discount / 100);
  }
  return Math.round(total * 100) / 100;
};

const formatCurrency = (amount) =>
  new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
  }).format(amount);

async function fetchProducts(category) {
  const response = await fetch(`/api/products?category=${category}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const data = await response.json();
  return data.products
    .filter((p) => p.inStock)
    .sort((a, b) => a.price - b.price);
}

export { calculateTotal, formatCurrency, fetchProducts };

Her ifade kendi satırını alır. Arrow function gövdeleri yazdırma genişliğini aştığında satırlara bölünür. Daha temiz diff’ler için çok satırlı yapılara sondaki virgüller eklenir.

JavaScript Biçimlendirme Neden Önemli

Biçimlendirilmemiş JavaScript bakım yüküdür. Küçültülmüş tek satır yazarken çalışır ama başka birinin değiştirmesi gerektiği an okunamaz hale gelir. Biçimlendirme birkaç şeyi hızlandırır:

Kod incelemesi. Her ifade kendi satırındayken inceleyen kişi işlev mantığını, argüman destructuring işlemini ve kontrol akışını bağımsız olarak denetleyebilir. Tek satırlık bir işlevde herhangi bir bölümü doğrulamak için tüm dizeyi zihinden ayrıştırman gerekir.

Hata ayıklama. Bir işlev yanlış sonuç döndürdüğünde sorunu genellikle console.log ifadeleri ekleyerek veya satırları yorum satırı yaparak yalıtırsın. Düzgün biçimlendirilmiş kod bu süreci kolaylaştırır.

Pull request diff’leri. Tek bir koşuldaki değişiklik diff’te tek değişen satır olarak görünmelidir. Küçültülmüş bir dosyada her değişiklik tüm satıra dokunur ve diff’i inceleme için anlamsız hale getirir.

Prettier Stil Kararları

Biçimlendirici Prettier’ın sabit fikirli varsayılanlarını kullanır. Bu araçta yapılandırılamazlar ama en yaygın kuralları kapsarlar:

Noktalı virgül: Her zaman eklenir. Hata ayıklaması zor ASI (otomatik noktalı virgül ekleme) hatalarını önler.

Tırnak: Dizelerde çift tırnak. Bu Prettier varsayılanıdır ve dizeler kesme işareti içerdiğinde kaçış ihtiyacını ortadan kaldırır.

Sondaki virgül: Çok satırlı dizilere, nesnelere ve işlev parametrelerine eklenir. Son öğe önceki satıra virgül eklemeden değiştirilebildiği için daha temiz git diff’leri üretir.

Girinti: 2 boşluk. Bu, JavaScript projelerinde en yaygın kuraldır ve çoğu linter ve düzenleyicideki varsayılanla eşleşir.

Yazdırma genişliği: 80 karakter. Bu sınırı aşan satırlar mantıklı noktalardan bölünür (oklardan sonra, operatörlerden önce, argüman sınırlarında).

Prettier Ne Zaman Kullanılmamalı

Prettier bir kod biçimlendiricidir, linter değildir. Hata yakalamaz, en iyi uygulamaları dayatmaz veya kullanılmayan değişkenleri işaretlemez. Bunun için ESLint kullan. Prettier kod organizasyonunu da ele almaz: işlevleri dosyalar arasında taşımaz, import’ları yeniden sıralamaz (bir eklentiyle yapılandırılmadıkça) veya modül sistemini yeniden yapılandırmaz. Bazı kod stilleri belirli kullanım durumlarında Prettier varsayılanlarından gerçekten daha iyidir: girinti için sekmeler, tek tırnak, noktalı virgülsüz stil. Projenin Prettier varsayılanlarından farklı yerleşik bir stili varsa Prettier’ı buna göre yapılandır veya farklı bir biçimlendirici kullan.