JavaScript Biçimlendirme

Nasıl çalışır?

Bir sitenin betiğini incelerken, hata ayıklarken ya da bir yerden kopyaladığınız kodu anlamaya çalışırken JavaScript çoğu zaman tek satırdır: yüzlerce fonksiyon noktalı virgüllerle birbirine yapışmıştır. Kodu sol panele yapıştırın; sağ panelde her ifade kendi satırına iner, fonksiyon gövdeleri, if/else blokları ve döngüler seçtiğiniz genişlikte girintilenir, nesne ve dizi değerleri okunur biçimde açılır. Süslü parantezin aynı satırda mı (if (a) {) yoksa alt satırda mı duracağını seçebilirsiniz. Dize içindeki boşluklara, şablon dizelerine (`...`) ve düzenli ifadelere (/a{2}/) dokunulmaz; kodun davranışı değişmez, yalnız görünümü değişir. Küçültücünün kısalttığı değişken adları (a, b, n) geri gelmez, çünkü özgün adlar dosyada artık yoktur; ama yapı okunur hale gelir. TypeScript ve JSX kodu çoğunlukla doğru girintilenir, tip tanımlarında sonuç garanti değildir. Ne yapılsın? ayarından Küçültülmüş'ü seçerseniz tersini yapar: boşluk ve yorumlar atılır, yerel adlar kısalır; kod okunamıyorsa hatanın satır ve sütunu yazılır.

Bu araç javascript formatter, js beautifier, javascript girintileme, typescript formatter, react formatter, babel formatter aramalarıyla da biliniyor.

JavaScript nedir?

JavaScript, web sayfalarına davranış kazandıran programlama dilidir: bir düğmeye basınca menünün açılması, formun gönderilmeden denetlenmesi, sepet toplamının anında güncellenmesi JavaScript ile yapılır. Tarayıcı kodu satır ve boşluklardan bağımsız okur; ifadeleri noktalı virgül ve süslü parantezler ayırır. Bu yüzden aynı kod hem okunur girintiyle hem de tek satırda yazılabilir; yayındaki sitelerde genellikle ikincisi kullanılır.

Beautifier nedir?

Beautifier (güzelleştirici, biçimleyici), kodun anlamına dokunmadan yalnız görünümünü düzenleyen araçtır: satır sonları ekler, blokları girintiler, operatörlerin çevresine boşluk koyar. Prettier gibi geliştirme araçlarından farkı, bir yapılandırma dosyası ya da kurulum istememesi ve bir kez yapıştırıp sonucu almak için kullanılmasıdır. Bu sayfa açık kaynak js-beautify kütüphanesini tarayıcının içinde çalıştırır.

JavaScript biçimlendirme ile küçültme arasındaki fark nedir?

Biçimlendirme kodu insana göre düzenler: satır sonu ve girinti ekler, hiçbir adı ve değeri değiştirmez. Küçültme kodu tarayıcıya göre sıkıştırır: boşluk ve yorumları atar, yerel değişken adlarını tek harfe indirir, kullanılmayan kodu siler. Biçimlendirme tamamen geri alınabilir; küçültmede ise silinen yorumlar ve özgün adlar kaybolur, küçültülmüş kodu biçimlendirmek yalnız yapıyı geri getirir.

Biçimlendirme kodu değiştirir mi?

Girintili modda hayır: yalnız boşluk, satır sonu ve girinti eklenir. JavaScript bu boşlukları yok saydığı için biçimlenmiş kod aynı çalışır. Tek dikkat noktası, noktalı virgül konmamış satırlardır: JavaScript bazı satır sonlarını noktalı virgül sayar, biçimleyici de bu yüzden var olan satır sonlarını anlam değiştirecek biçimde birleştirmez.

Araç kodu çalıştırmaz ve söz dizimini denetlemez; hatalı kod da girintilenir. Biçimlendirme küçültülmüş kodun özgün adlarını da geri getiremez: küçültücü toplamFiyat adını n yaptıysa biçimlenmiş kodda da n görürsünüz. Özgün kaynağa ancak geliştiricinin yayımladığı kaynak haritası (source map) varsa dönülebilir.

Girintili mi, küçültülmüş mü?

Girintili kod okumak, hata ayıklamak ve bir ekiple çalışmak içindir. Küçültülmüş kod yayın içindir: tarayıcıya giden betik ne kadar küçükse sayfa o kadar hızlı etkileşime hazır olur.

Bu sayfadaki Küçültülmüş seçeneği terser ile standart küçültme yapar: boşluk ve yorumlar atılır, yerel değişken adları kısalır, ölü kod silinir; /*! ile başlayan lisans yorumları korunur. Adların kısalıp kısalmayacağını ya da console.log satırlarının silinip silinmeyeceğini kendiniz seçmek ve önce-sonra bayt karşılaştırmasını görmek için JavaScript küçültme aracını kullanın.

• Başkasının .min.js dosyasını okumak → Girintili
• Kendi kodunuzu tutarlı girintiye sokmak → Girintili
• Yayına koymak → Küçültülmüş

Sık sorulanlar

Küçültülmüş JavaScript kodu nasıl okunur hale getirilir?

Kodu bu sayfadaki sol panele yapıştırın; her ifade kendi satırına iner, bloklar girintilenir. Kısaltılmış değişken adları geri gelmez ama kodun yapısı okunur hale gelir. Sonucu kopyalayabilir ya da .js dosyası olarak indirebilirsiniz.

TypeScript veya React (JSX) kodunu da biçimlendirebilir miyim?

Çoğunlukla evet: JSX etiketleri ve TypeScript'in çoğu yazımı doğru girintilenir. Ancak biçimleyici tipleri anlamaz; karmaşık tip tanımlarında ve genel tiplerde (<T>) girinti beklediğiniz gibi çıkmayabilir. Kodun anlamı yine değişmez, yalnız boşluklar yer değiştirir.

Biçimlendirme kodumun çalışmasını bozar mı?

Hayır. Girintili modda yalnız boşluk ve satır sonu eklenir; dizelere, şablon dizelerine ve düzenli ifadelere dokunulmaz. JavaScript boşlukları yok saydığı için kod aynı çalışır.

Kodum bir sunucuya gönderiliyor mu?

Hayır. Biçimlendirme ve küçültme tamamen tarayıcınızın içinde yapılır; kodunuz bu sayfadan çıkmaz.