Çevrimiçi JavaScript biçimlendirme
Küçültülmüş bir .js dosyasını, webpack paketini veya tek satırlık kod parçasını yapıştırın; sağ panelde düzgün girintilenmiş JavaScript elde edin. Prettier, biçimlendirmeyi doğrudan tarayıcınızda yapar; hiçbir içerik yüklenmez.
JavaScript neden okunamaz hâle gelir?
Modern derleme süreçleri, JavaScript kodunu yayımlamadan önce küçültür. Terser, esbuild, SWC ve benzeri araçlar boşluklarla yorumları kaldırır, yerel değişken ve işlev adlarını tek harfle değiştirir, iç içe blokları zincirleme ifadelere dönüştürür ve uygulamayı bir veya iki dosyada birleştirir. Başlangıçta üç yüz okunabilir kaynak dosyasından oluşan bir React uygulaması, tarayıcıya birkaç yüz kilobaytlık tek satır olarak ulaşabilir. Kod çalışmaya devam eder, fakat okumak istediğinizde tutunabileceğiniz bir yapı bulamazsınız.
Biçimlendirme size ne kazandırır?
Paketi biçimlendirmek, kod içinde gezinmeyi sağlayan düzeni geri getirir. İfadeler ayrı satırlara yerleşir; 1. satırın 24815. sütununa işaret eden yığın izindeki kodu incelemek kolaylaşır. İç içe yapı görünür olduğunda işlevin nerede başlayıp bittiğini, koşulun hangi dalı koruduğunu ve geri çağırım zincirinin nasıl kurulduğunu görebilirsiniz. Dizeler, URL’ler ve uç nokta adları kolayca taranır. Özellikle üçüncü taraf bir betiği denetlerken aradığınız ayrıntılar çoğunlukla bunlardır.
Modern sözdizimi desteği
Biçimlendirici, JavaScript’in eski bir alt kümesiyle sınırlı değildir. Ok işlevleri, sınıflar, async ve await, üreteçler, isteğe bağlı zincirleme, nullish coalescing, şablon dizeleri, parçalama ataması, spread sözdizimi, dinamik içe aktarmalar ve ES modülleri biçimlendirilir. JSX de desteklenir; bu, JSX sözdizimi dönüştürülmeden kalan React bileşenlerini incelerken işe yarar. İşlemi Prettier yaptığı için çıktı, editörünüzün kendi dosyalarınıza uyguladığı alışılmış kuralları izler.
Aracın sınırları
Biçimlendirme özgün kaynağı yeniden oluşturmaz. Küçültücü yorumları silmiş ve değişkenleri yeniden adlandırmışsa, hiçbir biçimlendirici artık n adını taşıyan değişkenin eskiden remainingRetries olduğunu tahmin edemez. Proje bir kaynak haritası yayımladıysa bunu tarayıcınızın geliştirici araçlarında yükleyin; gerçek kaynağa dönmenin yolu budur. Dosya yalnızca küçültülmüş değil, kasıtlı olarak karmaşıklaştırılmışsa okunabilir bir yapı bekleyebilirsiniz, fakat kodun amacı yine gizli kalabilir.
Sık sorulan sorular
webpack veya Vite paketini biçimlendirebilir mi?
Evet. Paketi yapıştırın veya Dosya seç ile açın; diğer JavaScript dosyaları gibi biçimlendirilir. İşlem kendi bilgisayarınızda yapıldığından büyük paketler birkaç saniye sürebilir. Girintiler düzenlendiğinde paket içindeki modül yapısını izlemek kolaylaşır.
JavaScript karmaşıklaştırmasını çözer mi?
Karmaşıklaştırılmış kodu biçimlendirerek okumayı kolaylaştırır, fakat karmaşıklaştırmayı geri almaz. Kodlanmış dizeler, yapay kontrol akışı ve bilerek eklenen ölü kod yerinde kalır.
Kodumun çalışmasını bozar mı?
Biçimlendirici, tutarlı bir stil uygularken JavaScript davranışını korumayı amaçlar. Noktalama, tırnak kullanımı ve yerleşim değişebilir; sonuç bayt bayt aynı bir kopya değildir. Özgün dosyayı saklayın, çıktıyı inceleyin ve düzenlenmiş paketi canlı ortamda kullanmadan önce proje testlerini çalıştırın.