Prettier'ın kurallarını izleyen bir kod güzelleştirici
Küçültülmüş bir stil sayfasını, tek satırlık bir API yanıtını ya da birinin sekme ve boşluk karışımıyla girintilediği bir betiği yapıştırın ve onu tek, tutarlı bir düzende geri okuyun. Bu kod güzelleştirici, sayfada Prettier 3 çalıştırır. JavaScript'i (JSX dahil), JSON'u, CSS'i, SCSS'i, LESS'i ve HTML'yi işler.
Prettier düzeninizi kopyalamaz. Kodu ayrıştırır ve kendi satır bölme kurallarıyla baştan yeniden yazdırır. Bu yüzden aynı kodu farklı aralıklarla yapıştıran iki kişi aynı çıktıyı alır.
Yapıştır, seç, kopyala: dört adım
- Kodu soldaki kutuya yapıştırın ya da seçili dil için bir örnek yüklemek üzere Örnek kod'a basın.
- Dil'i Otomatik algıla'da bırakın veya kendiniz seçin. Araç hangi dili algıladığını gösterir.
- Girinti'yi (2 boşluk, 4 boşluk veya sekme) ve Yazdırma genişliği'ni (80, 100 veya 120) ayarlayın. JavaScript için tırnakları, noktalı virgülleri, sondaki virgülleri ve küme parantezi boşluğunu ekleyin.
- Sonucu sağda okuyun, satır sayılarını karşılaştırın, ardından Kopyala veya İndir'e basın. Dosyanın adı
formatted.js,.json,.css,.scss,.lessveya.html'dir.
JSON, CSS ve satır içi betik için hangi seçenekler hâlâ geçerli
Bir dil için anlamsız olan seçenekler kapatılır ve ayarların altındaki bir satır hangilerinin kapandığını söyler. JSON tırnakları ve sondaki virgülleri yok sayar. CSS, SCSS ve LESS noktalı virgülleri, sondaki virgülleri ve küme parantezi boşluğunu yok sayar, çünkü stil kuralları bunları sabitler.
HTML ayrı bir durumdur. Kendi işaretlemesinin tırnak ya da noktalı virgül ayarı yoktur, ama sayfanın içindeki betik ve stil blokları sizin seçimlerinizle biçimlendirilir.
Çıktı girdiden neden boşluklardan fazlasıyla farklı olabilir
Prettier fikir sahibidir. Varsayılan ayarlarla tek tırnakları çift tırnağa çevirir, eksik noktalı virgülleri ekler ve çok satırlı bir listenin son öğesinden sonra virgül koyar. Bunların her birini seçeneklerde tersine çevirebilirsiniz. Yorumları korur. Hiçbir şeyi yeniden adlandırmaz, yeniden sıralamaz ya da onarmaz; bu yüzden girdideki bir hata çıktıda da hata olarak kalır.
Bir alışkanlık JSON ve JavaScript nesnelerinde insanları şaşırtır: ilk anahtar açılış küme parantezi ile aynı satırdaysa ve nesne yazdırma genişliğine sığıyorsa Prettier onu tek satırda tutar. İlk anahtarı kendi satırına koyarsanız nesne açık kalır.
Otomatik algılama, sözdizimi hataları ve 2.000.000 karakter sınırı
Otomatik algılama kısa bir tahmindir, bir ayrıştırıcı değildir. < ile başlayan kod HTML'dir. Küme ya da köşeli parantezle başlayan ve JSON olarak ayrıştırılan metin JSON'dur. a { color: red; } gibi kuralları olan ve function, const ya da => içermeyen metin bir stil sayfasıdır; SCSS veya LESS değişkenleri bu ikisini seçer. Geri kalan her şey JavaScript'tir. Tahmin yanlışsa dili elle seçin.
Kod ayrıştırılamazsa satırı, sütunu ve Prettier iletisinin ilk satırını görürsünüz. 2.000.000 karakterin üzerindeki girdi reddedilir. TypeScript, Vue ve Markdown bu aracın parçası değildir.
Yapıştırdığınız koda ne olur
Bir dili ilk biçimlendirişinizde sayfa, ihtiyaç duyduğu Prettier dosyalarını bu siteden yükler. Sonrasında biçimlendirme yerel olarak çalışır ve kodunuz hiçbir yere gönderilmez. Bir düğmeye basarken tarayıcınızın ağ panelini izleyebilirsiniz. Araç metni yalnızca ayrıştırır ve yazdırır. Onu asla çalıştırmaz. Kopyala panoyu kullanır, İndir sayfadan bir dosya kaydeder.