Daha temiz web kodu için çevrimiçi JavaScript düzenleyici

Giriş

Üretim için küçültülmüş ya da biçimlendirmeye pek dikkat edilmeden alelacele yazılmış JavaScript kodunu okumak gerçekten zordur: tutarlı bir girinti yoktur, birkaç ifade aynı satıra sıkıştırılmıştır, bloklar birbirinden görsel olarak ayrılmaz. Güzelleştirme bu kodu yeniden biçimlendirir — girinti ekler, ifadeler arasına satır sonu koyar, boşlukları eşitler — ama kodun ne yaptığını değiştirmez. Mantık, değişken adları ve davranış aynı kalır; değişen yalnızca kodun ekranda nasıl göründüğüdür. JavaScript'i yazmayı değil okumayı öğrenen biri için bu ayrım önemlidir: tek bir yoğun satır halindeyken göz korkutan bir betik, düzgün girintilenmiş ifadelere ve bloklara ayrıldığında tamamen anlaşılır hale gelir.

Bu araç kodunuzu nasıl biçimlendirir

Araç, yapıştırdığınız kodu parça parça okur; metindeki kalıplara bakarak satır sonu serpiştirmek yerine dizeleri, yorumları, parantezleri ve işleçleri ayrı birer öğe olarak tanır. Bir yorumu başlatan / işaretini, düzenli ifadenin parçası olan işaretten ve bölme anlamına gelen işaretten doğru biçimde ayırt edebilmesi de bundan kaynaklanır — salt metne dayalı bir biçimlendirici burada yanılırdı. Girintiyi baştan ve tek bir kurala göre kurar (her iç içe geçme düzeyi için üç boşluk), satır sonlarını ise kodun yapısına bakarak kendisi belirler; böylece her ifade ve her blok kendi satırına düşer. Yorumlar silinmez: kodla birlikte korunur ve onunla birlikte yeniden biçimlendirilir, dolayısıyla bir işlevi açıklayan not ya da lisans başlığı çıktıda yerinde durur.

Noktalı virgüller yalnızca yeni düzene göre kaydırılır; ne eklenir ne de silinir. JavaScript, bir ifadenin çoğu durumda noktalı virgülsüz bitmesine izin verir — dilin resmî belirtimi bu boşluğu otomatik noktalı virgül ekleme adlı bir kuralla kendiliğinden doldurur — ve kimi geliştiriciler bilerek bu biçimde yazar. Araç bu üslup tercihinde taraf tutmaz: özgün kodunuzda noktalı virgül yoksa biçimlendirilmiş çıktıda da olmaz; varsa tam durdukları yerde kalır, sadece yeni satır sonlarının ve girintinin arasına yerleşir. JavaScript'te ifadelerin nasıl bittiğini anlatmak ya da öğrenmek için aracı kullanıyorsanız bunu bilmekte fayda var; çünkü araç bir üslubu ötekine "düzeltmez".

Kullanmadan önce bilinmesi gerekenler

Buraya gerçek kod yapıştırmadan önce bilinmesinde yarar olan iki nokta var:

• Boş satırlar korunmaz. Biçimlendirici satır sonlarını, yapıştırdığınız metinde boş satırları nereye koyduğunuza göre değil, kodun kendi yapısına göre belirler. Bir betiğin bölümlerini boş satırlarla görsel olarak ayırdıysanız bu ayrımın biçimlendirmeden sonra korunacağının güvencesi yoktur — mantık ve bütün ifadeler yerinde kalır, yalnızca özgün gruplamanız kaybolur.
• Şablon dizeleri (ters tırnaklı metinler) dize olarak tanınmaz. Modern JavaScript, `Hello, ${name}` örneğindeki gibi ters tırnak ve gömülü ifadelerle dize kurmanıza olanak tanır. Bu aracın biçimlendiricisi ters tırnak arasındaki metni, normal tırnak içindeki metni saydığı gibi bir dize saymaz; dolayısıyla şablon dizelerine dayanan kod bu bölümlerde hatalı biçimlendirilebilir. Betiğiniz bunları kullanıyorsa güzelleştirmeden sonra çıktının o kısmını dikkatle gözden geçirin ya da betiğin geri kalanını biçimlendirip o satırları olduğu gibi bırakın.

İki durum da özgün kodunuzun işleyişini değiştirmez — her zaman kendi yapıştırdığınız metin üzerinde çalışırsınız ve biçimlendirilmiş sonucu projenize geri kopyalamadıkça hiçbir şey değişmez.

Bu araç ne zaman doğru seçim

• Başkasının küçültülmüş betiğini okumak. Herkese açık bir sitenin JavaScript'ine tarayıcının geliştirici araçlarından bakıldığında genellikle yoğun, biçimlendirilmemiş bir dosya görünür; bunu buraya yapıştırıp güzelleştirmek kodun nasıl çalıştığını gerçekten inceleyebilmeyi sağlar — basit bir temizlik adımı değil, gerçek bir dijital okuryazarlık çalışmasıdır.
• Öğrencinin teslim ettiği kodu incelemek. Tutarlı biçimlendirmesi olmayan bir betiği okumak ve değerlendirmek daha uzun sürer; önce güzelleştirmek geri bildirim vermeyi hem hızlandırır hem kolaylaştırır.
• Ödevi teslim etmeden önce kendi kodunuzu düzenlemek. Tutarlı bir biçimlendirme, öğretmenin — ya da birkaç ay sonra sizin — mantığı izlemesini kolaylaştırır.
• Ders için kod örneği hazırlamak. Ders planlarken çabucak yazılan bir işlev projeksiyonda çoğu zaman yoğun ve takip edilmesi güç görünür; önceden güzelleştirildiğinde sınıfın arka sıradan bile okuyabileceği temiz, eşit girintili bir kod elde edilir.

Büyük ölçüde şablon dizelerine dayanan bir kod için ya da çıktının kesinlikle doğru olması gereken büyük ve modern bir kod tabanı için, bir kod düzenleyicisinin yerleşik biçimlendiricisi daha güvenilir bir seçimdir — yukarıdaki kısıtlamaya bakın. Bu araç, sınıf ölçeğindeki tipik betikler için en uygun seçimdir.

Örnek

Bir öğrenci, bir eğitim sitesinde tek bir yoğun satıra küçültülmüş, kısa ve etkileşimli bir betik bulur ve kendi projesine uyarlamadan önce nasıl çalıştığını anlamak ister. Betiği bu araca yapıştırdığında kod düzgün girintilenmiş ifadelere ve bloklara yayılır; böylece kesintisiz tek bir satırı gözle taramak yerine mantığı gerçekten okuyabilir — hangi işlevin hangi olayda çalıştığını, bir döngünün nerede başlayıp nerede bittiğini.

Sık sorulan sorular

Güzelleştirmek kodumun çalışma biçimini değiştirir mi?

Hayır. Yalnızca biçimlendirme — girinti, satır sonları ve boşluklar — değişir; mantık ve davranış aynı kalır.

Yorumlarım korunur mu?

Evet. Lisans başlıkları da dahil olmak üzere yorumlar korunur ve kodun geri kalanıyla birlikte yeniden biçimlendirilir.

Şablon dizelerini (ters tırnaklı metinleri) işleyebiliyor mu?

Güvenilir biçimde hayır. `like this ${example}` kullanan kod bu bölümlerde hatalı biçimlendirilebilir — çıktının o kısmını gözden geçirin ya da o satırları biçimlendirmeden bırakın.

Kodum bir yerde saklanıyor mu?

Hayır. Yapıştırılan kod biçimlendirilmiş sonucu üretmek için işlenir ve sonrasında saklanmaz; yalnızca aracın kullanıldığı bilgisi kaydedilir, kodun kendisi değil.

Noktalı virgül ekliyor ya da kaldırıyor mu?

Hayır. Noktalı virgüller özgün kodunuzda göründükleri gibi kalır, sadece yeni satır sonlarının ve girintinin arasına yerleşir — kodunuzda hiç yoksa çıktıda da olmayacaktır.

Birden fazla betiği aynı anda güzelleştirebilir miyim?

Her seferinde tek bir betik yapıştırıp güzelleştirin. Birlikte biçimlendirilmeleri gerekiyorsa dosyaları önce birleştirin ya da işlemi her biri için ayrı ayrı tekrarlayın.

Hangi ilgili araçları kullanabilirim?

Başka türden kodları biçimlendirmek için CSS Beautifier veya HTML Beauty araçlarını, CSS'i üretim için sıkıştırmaya hazır olduğunuzda ise CSS Minifier aracını kullanın.