JavaScript Biçimlendirici & Sıkıştırıcı

JavaScript biçimlendiricileri 2017'de Prettier'in opinion'lı biçimlendirmeyi haritada tuttuğu günden beri kendi kategorisidir. 'Sadece Prettier çalıştır' artık girinti, tırnak stili veya trailing virgül tartışmasının varsayılan cevabıdır; ilkesi her modern codebase'e sızmıştır — biçimlendirme aracın işidir, insanın değil. Bu araç o akışın ad-hoc, yapıştır-ve-biçimlendir tamamlayıcısıdır: bir snippet'ı (Stack Overflow, minify bundle, dinamik üretilmiş function body, DevTools yapıştırması) proje kurmadan biçimlendirmek istediğinizde.

Biçimlendirici js-beautify JavaScript modunu kullanır. Modern JS'in tüm yüzeyini işler: ES modülleri, async/await, generator, class, destructuring, default parameter, rest/spread, optional chaining (?.), nullish coalescing (??), logical assignment (||=, &&=, ??=), template literal, private class field (#field), top-level await, dynamic import, top-level statement. JSX desteklenir. Yapılandırma: girinti (2/4/tab), süslü yerleşimi (collapse/end-expand/expand), satır wrap, trailing comma.

Sıkıştırma dürüst bir uyarı gerektirir. Gerçek production minifier'ları (Terser, esbuild, SWC) boşluk daraltmadan çok fazlasını yapar: lokal değişkenleri tek harfe rename eder, tek-kullanım fonksiyonları inline eder, sabit ifadeleri katlar, ulaşılmaz dalları dead-code-elimine eder. Buradaki sıkıştırıcı boşluk-only daraltıcıdır: yorumları sil, boş satırları düşür, güvenli noktalama etrafındaki boşluğu kaldır. Tasarruf elle yazılmış kodda %10-20, zaten biçimli kodda daha düşük. Sarı uyarı banner'ı tam bunu söylüyor — gerçek minifier'larla yarışmıyoruz.

Boşluk-only sıkıştırıcının değer katığı yerler: Build pipeline'a getirmek aşırı olan inline statik sayfa scripts, HTML attribute inline event handler, ad-hoc lightweight obfuscation (güvenlik mekanizması değil), boyut sınırlı container'a kod sığdırma. Bunların ötesinde gerçek minifier kullanın.

Modern sözdizimi yönetimi naif biçimlendiricilerin parçalandığı yerdir. Embed expression'lı template literal (`${name}`) ${} içindeki süslü derinliğini takip etmeli, regex literal'ları bağlamla bölmeden ayırt etmeli, tagged template'leri (sql`SELECT ...`) korumak gerekir. Biçimlendirici ve sıkıştırıcı bu vakaları parser bağlamı izleyen state machine ile işler.

JSX özel durumdur — JavaScript içine gömülü HTML şekilli sözdizimi. Biçimlendirici JSX çocuklarını ebeveynden bir seviye derin girintiler, uzun attribute listelerini wrap'ler. Sıkıştırıcı JSX etrafında düz JavaScript'ten daha tutucudur — JSX boşluğu semantik anlamlı olabilir.

TypeScript çoğunlukla biçimlendirici tarafından işlenir. TS-spesifik sözdizimi (tip annotation, interface, type alias, generic, decorator) doğru biçimlenir. Sıkıştırıcı yorumu ve boşluğu sıyırır ama tip annotation'larını silmez (TypeScript compiler'ı yapar).

Gizlilik aynı: yükleme yok, log yok, tarayıcıda. Yapıştırdığınız JS — embed API key, dahili URL, ön sürüm mantık — cihazınızdan ayrılmaz. Komşu utiliti'ler: HTML Formatter, CSS Formatter, JSON Viewer, JSON to TypeScript, Regex Tester.