JSX Biçimlendirici
React bileşenlerini ve diğer JSX öğelerini bu JSX Biçimlendirici ile biçimlendirin. Kodunuzu yapıştırdığınızda araç, onu JSX etkin bir JavaScript modülü olarak ayrıştırır ve JavaScript öğesini iki boşluklu girinti ve noktalı virgüllerle yazdırır; çok satırlı JSX öğelerini ise parantezlerin içinde, iç içe etiketler kendi satırlarında olacak şekilde düzenler. Sözdizimi hataları bildirilir; böylece React geliştiricileri inceleme, hata ayıklama ve belgelendirme için okunaklı bileşenler elde eder.
Sık sorulan sorular
JSX Formatter nasıl çalışır?
Önce kodu, JSX etkin bir JavaScript modülü olarak ayrıştırır ve tutarlı bir stilde yazdırır. Ardından JSX öğeleri, HTML Formatter ile aynı kurallara göre düzenlenir; böylece iç içe blok etiketleri kendi girintili satırlarında yer alır.
Çok satırlı JSX öğeleri nasıl yazılır?
Bir öğe div, section, p, ul veya h1 gibi blok düzeyindeki alt öğeler içerdiğinde her alt öğe kendi satırına alınır ve öğenin tamamı parantez içine yerleştirilir. Tek bir bileşen etiketi gibi tek satıra sığan öğeler satır içinde kalır.
Parçalar ve kendiliğinden kapanan bileşenler destekleniyor mu?
Evet, <> ve </> biçimindeki parçalar ile <Item key={1}/> gibi kendiliğinden kapanan bileşenler ayrıştırılır ve korunur. Öznitelikleri ve küme parantezleri içindeki ifadeler yazıldıkları hâliyle kopyalanır.
Sözdizimi hatalarında ne olur?
Ayrıştırıcı durur ve araç, yarım biçimlendirilmiş kod döndürmek yerine beklenmeyen belirteç gibi hata mesajını gösterir. Bildirilen konumu düzeltip yeniden biçimlendirin.
JavaScript bölümü hangi stili kullanıyor?
Bloklarda iki boşluklu girinti kullanılır; her satırda bir ifade bulunur, operatörlerin çevresinde boşluk bırakılır ve ifadelerin sonuna noktalı virgül eklenir. Stili değiştirme seçeneği yoktur.
Yorumlar korunuyor mu?
Evet, JavaScript içindeki satır ve blok yorumları korunur. JSX ifadelerinin içindeki yorumlar küme parantezlerinin içinde kalır.
TSX dosyalarındaki TypeScript destekleniyor mu?
Hayır, tür açıklamaları bu aracın ayrıştırdığı JSX dilbilgisinin parçası değildir; bu nedenle tür içeren TSX sözdizimi hatası olarak reddedilir. Tür içeren kodlar için TypeScript Formatter'ı kullanın.
Biçimlendirme, bileşenimin nasıl görüntülendiğini değiştirir mi?
JavaScript yalnızca yeniden yazdırılır; JSX düzeni blok öğeleri arasındaki boşlukları değiştirir ve ayrı satırlarda olduğunda React bu boşlukları yok sayar. Tam boşluk önemliyse etiketlerin yanındaki satır içi metni kontrol edin.
Çıktı neden javascript olarak çitleniyor?
JSX, JavaScript'in bir uzantısıdır; bu nedenle sonuç javascript işaretli bir Markdown kod bloğu olarak döndürülür. .jsx dosyanız için çitlerin arasındaki satırları kopyalayın.
Bileşenim ne kadar büyük olabilir?
Her çalıştırmada en fazla 5 MB kod işlenir; daha büyük girdi bir mesajla reddedilir. Çıktı, Code Formatter'daki JSX seçeneğiyle aynıdır.