Softonic

JavaScript Biçimlendirici

Adım 1 / 3
Sonraki

Küçültülmüş ya da düzensiz girintili bir JavaScript parçasını yapıştırın; editörlerin kullandığı kurallarla biçimlendirilmiş, temiz ve okunaklı kodu geri alın. Sekme mi boşluk mu, tek mi çift tırnak mı, noktalı virgül olsun mu olmasın, sondaki virgüller ES5’te mi yoksa her yerde mi kullanılsın seçin. Modern söz dizimini işler: isteğe bağlı zincirleme, null birleştirme, JSX, TypeScript ve üst düzey await.

JavaScript nasıl biçimlendirilir

  1. 1

    Kaynağı yapıştırın

    Geçerli her türlü JS, JSX veya TypeScript. Ayrıştırıcı, söz diziminden lehçeyi belirler.

  2. 2

    Tercihlerinizi ayarlayın

    Girinti boyutu, sekme mi boşluk mu, tırnak stili, noktalı virgül, satır genişliği, sondaki virgüller.

  3. 3

    Biçimlendirin

    Araç, Prettier ile uyumlu bir işlem çalıştırır ve biçimlendirilmiş sonucu verir.

  4. 4

    Çıktıyı kopyalayın

    Tek tıklamayla kopyalayın ya da dosya olarak indirin. Özgün girinti, üstüne eklenmez; atılır.

Stil seçenekleri

Seçenek Değerler Varsayılan
Girinti tab, 2, 4 2 boşluk
Tırnak stili single, double çift
Noktalı virgül always, never her zaman
Satır genişliği 60 - 120 80
Sondaki virgüller none, es5, all es5
Ok fonksiyonu parantezleri always, avoid her zaman
Parantez içi boşluk true, false true
JSX tek tırnak true, false false

Biçimlendirme neden önemli

Biçimlendirme kozmetik bir şey değildir; bilişsel yükü azaltmakla ilgilidir. Tutarlı biçimlendirilmiş bir kod tabanı, gözden geçirenlerin yanlış yere konmuş bir parantezi aramak yerine mantık değişikliğine odaklanmasını sağlar.

  • Ayrıntı tartışmaları, bir proje biçimlendirici benimsediği anda sona erer. git diff, girinti tartışmalarını değil, gerçek değişikliği gösterir.
  • Commit öncesi kancalar (Husky + lint-staged gibi araçlarla) hazırlanan dosyaları commit edilmeden önce otomatik biçimlendirir.
  • Editör entegrasyonu (VS Code, WebStorm) kaydederken aynı kuralları uygular.

Biçimlendirmenin yapmadıkları

  • Lint yapmaz. Stil kuralları (no-unused-vars, eqeqeq) ESLint’in alanıdır. Bir biçimlendirici yalnızca boşlukları ve noktalama işaretlerini yeniden düzenler; mantık sorunları yüzünden kodu reddetmez.
  • Söz dizimi hatalarını düzeltmez. Girdi geçersiz JS ise biçimlendirici hata verir. Kodunuzun en azından ayrıştırılabildiğini doğrulayan bir sağlamlık kontrolü olarak kullanın.
  • Adlandırma kurallarını dayatmaz. camelCase ile snake_case arasındaki fark bir lint kuralıdır, biçimlendirici kuralı değil.

Sık yapılan hatalar

  • Biçimlendiriciyle çekişmek. Çalıştıktan sonra kodu sürekli yeniden biçimlendiriyorsanız ikiniz de zaman kaybediyorsunuz. Ya seçenekleri yapılandırın ya da projenin tercihini kabul edin.
  • Oluşturulmuş bir dosyada biçimlendirme çalıştırmak. Paketleyici çıktısı, transpile edilmiş kod, .min.js, hiçbiri bundan yararlanmaz. Yapaylara değil, kaynaklara biçim verin.
  • Ayrıştırmadan biçimlendirmek. Regex tabanlı bir “düzgün yazdırma”, şablon değişmezlerini, regex değişmezlerini ve JSX’i bozar. Her zaman AST tabanlı bir biçimlendirici kullanın (bunun gibi).

Sık Sorulan Sorular

Evet. Ayrıştırıcı, TypeScript söz dizimini (tipler, arayüzler, jenerikler, dekoratörler) algılar ve buna göre biçimlendirir. JSX ayrıca .tsx / .jsx dosyalarında da desteklenir.

Prettier’ın varsayılanlarıyla aynı kuralları izler ve alışılmış seçeneklerle (satır genişliği, tırnaklar, noktalı virgül, sondaki virgüller) yapılandırılabilir. Burada biçimlendirilen bir dosya, aynı yapılandırmayla Prettier tarafından biçimlendirilen bir dosyayla eşleşmelidir.

Biçimlendirici, geçerli ve ayrıştırılabilir JavaScript ister. Bir hata alıyorsanız kodda büyük olasılıkla bir söz dizimi sorunu vardır (kapatılmamış parantez, geçersiz JSX, yazım hatası). Mesaj net değilse önce kodu bir linter’dan geçirin.

Evet. Hem tek satırlık (//) hem de blok (/* */) yorumlar çıktıda korunur ve kaynakta bulundukları yerin yakınına yerleştirilir.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Araç diğer dillerde mevcuttur