JavaScript Biçimlendirme

0 karakter

Prettier tarzı hassas yapılandırma, Terser sıkıştırma ve obfuskasyon desteği sunan, yerleşik CodeMirror editörü, anlık önizleme, klavye kısayolları ve dosya yükleme/indirme özellikleri bulunan tarayıcı tabanlı JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON kod biçimlendirme aracı.

İlgili Öneriler

JS Sıkıştırma

CSS Formatter

JSX Biçimlendirici

QR Code ve Barkod Üretici

cURL'den Koda Dönüştürücü

JS Obfuscation

Kullanım senaryoları

  • Frontend geliştirme sırasında sıkıştırılmış üçüncü taraf JS kodunu yapıştırarak, okunabilirlik ve hata ayıklama için düzeni hızla güzelleştirme
  • Ekip kod incelemesinden önce JavaScript/TypeScript kod biçimlendirmesini standartlaştırarak girinti, tırnak ve noktalı virgül stil farklılıklarını ortadan kaldırma ve mantık incelemesine odaklanma
  • Eski projeleri devralırken, dağınık düzenlenmiş eski JS kodunu tek tıklamayla biçimlendirerek kod yapısını ve mantık hiyerarşisini hızla anlama
  • Üretim ortamına dağıtımdan önce JavaScript kodunu Terser sıkıştırma ile obfuske ederek dosya boyutunu küçültme ve sayfa yükleme hızını artırma
  • Çevrimiçi JS/JSX demo yazarken kodu anlık olarak biçimlendirerek düzenli tutma, iş arkadaşları veya toplulukla paylaşımı kolaylaştırma
  • Prettier'ın çeşitli yapılandırma seçeneklerinin etkilerini, seçenekleri ayarlarken anlık olarak biçimlendirme sonuçlarını önizleyerek öğrenme, tabWidth, trailingComma ve diğer parametrelerin işlevini anlama
  • Stack Overflow, GitHub gibi platformlardan kopyalanan kod parçacıklarını işleyerek girinti ve satır sonu sorunlarını otomatik olarak düzeltme
  • JSON yapılandırma dosyaları yazarken girintileri ve satır sonlarını otomatik olarak biçimlendirerek virgül veya parantez hatalarından kaynaklanan ayrıştırma hatalarını önleme
  • CSS/HTML sayfa geliştirirken aynı projedeki JS+CSS+HTML kodunu tek noktadan biçimlendirerek tutarlı stil sağlama
  • Mülakatlardan önce algoritma sorularının JS kodunu hızla düzenleyerek standart biçimlendirme ile kod görünümünü iyileştirme

Nasıl Kullanılır

  1. JavaScript biçimlendirme aracı sayfasını açın, kodu doğrudan sol düzenleme alanına yapıştırın veya yerel dosya seçmek için yükle düğmesine tıklayın (desteklenen formatlar .js/.ts/.jsx/.tsx/.css/.html/.json)
  2. Uygun dil türünü seçin: araç genellikle otomatik olarak tanır, ancak tanıma hatalıysa dil açılır menüsünden JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON'u manuel olarak seçin
  3. Biçimlendirme seçeneklerini yapılandırın: hızlı stil hazır ayarı (default/modern/classic) seçebilir veya Prettier seçeneklerini manuel olarak ayarlayabilirsiniz (girinti genişliği, sekme/boşluk, satır genişliği, noktalı virgül, tırnaklar, sondaki virgül, ok fonksiyon parantezleri)
  4. Kodu sıkıştırmak istiyorsanız sıkıştırma moduna geçin ve Terser sıkıştırma seçeneklerini yapılandırın (compress etkinleştirilsin mi, değişken adları mangle edilsin mi, üst seviye değişkenler sıkıştırılsın mı), CSS optimizasyon seviyesi ve HTML sıkıştırma seçenekleri
  5. Araç kodu anlık olarak işler, sağ düzenleme alanı biçimlendirilmiş veya sıkıştırılmış sonucu hemen gösterir ve alttaki durum çubuğu karakter sayısı, bayt sayısı ve sıkıştırma oranı istatistiklerini anlık olarak gösterir
  6. Verimlilik için klavye kısayollarını kullanın: Ctrl+Shift+B biçimlendirmeyi tetikler, Ctrl+Shift+M sıkıştırma modunu değiştirir, Ctrl+Shift+O dosya açar, Ctrl+Shift+D sonucu indirir, Ctrl+Shift+K editörü temizler
  7. Memnun kaldıktan sonra sonucu panoya kopyalamak için kopyala düğmesine veya yerel dosya olarak kaydetmek için indir düğmesine tıklayın; kod ve yapılandırma içeren bir URL bağlantısı oluşturup başkalarıyla paylaşmak için paylaş düğmesine de tıklayabilirsiniz

Özellikler

  • Çoklu dil desteği: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON dahil 7 yaygın frontend dilini aynı anda biçimlendirme — frontend kodunu tek noktadan toplu işleme
  • Prettier tarzı hassas yapılandırma: tabWidth girinti genişliği (2/4/8 boşluk), useTabs sekme vs boşluk, printWidth satır genişliği, semi noktalı virgül, singleQuote tek tırnak vs çift tırnak, trailingComma sondaki virgül, arrowParens ok fonksiyon parantezleri ve daha fazla seçenek
  • Kod sıkıştırma özelliği: compress (kod sıkıştırma), mangle (değişken adı bozma), toplevel (üst seviye değişken sıkıştırma) gibi üretim seviyesi sıkıştırma seçenekleriyle entegre Terser sıkıştırma motoru
  • CSS özel optimizasyonu: CSS sıkıştırma, yorum kaldırma, boşluk kaldırma gibi özel işlemler için CSS optimizasyon seviyesi yapılandırması
  • HTML sıkıştırma seçenekleri: HTML minify yapılandırması ile boşluk daraltma, yorum kaldırma, nitelik tırnaklarını kaldırma desteği
  • Anlık işlem: kod yapıştırdıktan sonra gerçek zamanlı biçimlendirme ve önizleme — düğmeye tıklamadan düzenleme sonuçlarını görme
  • CodeMirror editörü: sözdizimi vurgulama, satır numaraları, parantez eşleştirme, kod katlama ve diğer profesyonel düzenleme özellikleriyle yerleşik CodeMirror editörü
  • Dosya yükleme ve indirme: yerel .js/.ts/.jsx/.tsx/.css/.html/.json dosyalarını doğrudan yükleme ve işlenmiş dosyayı tek tıklamayla indirme desteği
  • Paylaşım bağlantıları: kod ve yapılandırmayı URL hash'inde kaydederek, mevcut biçimlendirme senaryosunu yeniden oluşturmak için iş arkadaşlarınıza gönderebileceğiniz paylaşım bağlantıları oluşturma
  • Geçmiş: biçimlendirme geçmişini otomatik olarak localStorage'a kaydetme, önceki kod sürümlerine ve yapılandırmalara istediğiniz zaman geri dönebilme
  • Klavye kısayolları: Ctrl+Shift+B ile biçimlendirme, Ctrl+Shift+M ile sıkıştırma, Ctrl+Shift+O ile dosya açma, Ctrl+Shift+D ile indirme, Ctrl+Shift+K ile temizleme ve daha fazla kısayol desteği
  • Hızlı hazır ayarlar: default (varsayılan), modern (modern), classic (klasik) olmak üzere 3 hızlı yapılandırma hazır ayarı — popüler stiller arasında tek tıklamayla geçiş yapma
  • Karakter istatistikleri: orijinal ve işlenmiş kod için karakter sayısı, bayt sayısı ve sıkıştırma oranı karşılaştırmasını anlık olarak gösterme
  • Örnek kod: çeşitli diller için yerleşik örnek kod, tek tıklamayla yükleyip özellikleri hızlıca deneyimleme

Sık Sorulan Sorular

Biçimlendirmeden sonra JavaScript kodunun mantığı değişir mi?

Hayır. Biçimlendirme yalnızca "düzen" ile ilgili konuları ayarlar — boşluk, girinti, satır sonu, parantez konumları, tırnak stili — ve AST dönüşümüne dayanır. Biçimlendirme öncesi ve sonrası kodun AST yapısı tamamen aynıdır ve yürütme mantığı %100 aynıdır. Kod sözdizimi açısından doğruysa ve düzgün ayrıştırılabiliyorsa, biçimlendirme hiçbir yürütme davranışını değiştirmez, gönül rahatlığıyla kullanabilirsiniz. Ancak sıkıştırma (mangle) da mantığı değiştirmese de, eval ve global değişken exportları gibi özel senaryolara dikkat etmeli, yanlış yapılandırmadan kaçınmalısınız.

Araçtaki biçimlendirme sonuçları yerel VS Code/Prettier biçimlendirmesinden farklıysa ne yapmalıyım?

Bu aracın biçimlendirme mantığı Prettier'ın resmi davranışıyla tutarlı olmaya çalışır. Sonuçlar farklıysa yapılandırma seçeneklerini kontrol edin: bu temel seçeneklerin — tabWidth, useTabs, semi, singleQuote, trailingComma, arrowParens — iki tarafta da tamamen aynı olup olmadığına bakın. Ayrıca Prettier sürüm farklılıklarına dikkat edin — Prettier 2/3'ün varsayılan yapılandırmalarında ince farklılıklar vardır (v3 varsayılan trailingComma: all, v2 varsayılan es5; v2'den itibaren arrowParens varsayılan always). Yerel projenizde .prettierrc yapılandırma dosyası varsa, web sitesindeki seçenekleri ona göre ayarlayın ve biçimlendirme sonuçları aynı olacaktır.

Sıkıştırılmış kod geri yüklenebilir mi? Mangle edilmiş değişken adları kurtarılabilir mi?

Biçimlendirilmiş kod tamamen tersine çevrilebilir — çünkü yalnızca düzen değişmiştir, tüm tanımlayıcılar ve mantık tamamen korunur ve yeniden biçimlendirme onları geri getirir. Ancak sıkıştırılmış kod için: yalnızca boşluk ve yorumların kaldırıldığı kısım yeniden biçimlendirilerek düzen geri getirilebilir, ancak mangle (değişken adı obfuskasyonu) geri döndürülemez — orijinal anlamlı değişken adları (userName gibi) a olur ve bu süreç tek yönlüdür, orijinal adları otomatik olarak kurtarmak imkansızdır. Üretim ortamında sıkıştırılmış kodda hata ayıklamanız gerekiyorsa, Source Map dosyaları oluşturacak şekilde yapılandırın ve Source Map aracılığıyla kaynak kod konumlarına geri eşleyin. Bu nedenle sıkıştırmadan önce orijinal, sıkıştırılmamış kaynak kodu mutlaka saklayın!

Hangi tarayıcılar destekleniyor? Telefonda kullanılabilir mi?

Bu araç tüm modern tarayıcıları destekler: Chrome, Firefox, Safari, Edge'in en son sürümleri düzgün çalışır. IE tarayıcısı desteklenmiyor (artık kimse IE ile geliştirme yapmıyor). Duyarlı düzen telefon ekranlarına uyarlanmıştır, ancak küçük ekranlarda kod düzenleme deneyimi iyi değildir — masaüstü tarayıcıda kullanılması önerilir, büyük ekran daha yüksek verimlilik sağlar. Tüm biçimlendirme ve sıkıştırma hesaplamaları tarayıcıda yerel olarak çalışır, kod hiçbir sunucuya gönderilmez, kod tarayıcınızdan çıkmaz, bu da güvenli ve güvenilirdir.

Neden bazı kodlar biçimlendirilemiyor ve ayrıştırma hatası veriyor?

Biçimlendirme aracı çalışmak için önce kodu AST'ye ayrıştırmalıdır. Kodda sözdizimi hatası varsa (eşleşmeyen parantezler, kapanmayan string'ler, yanlış yazılmış anahtar kelimeler, fazla virgüller vb.), ayrıştırıcı kod yapısını anlayamaz ve hata verir. Önce kodun kendisindeki sözdizimi hatalarını kontrol edin: konsolda hata mesajları olup olmadığına, editörde hata konumlarını gösteren kırmızı dalgalı çizgiler olup olmadığına bakın — sözdizimi hatalarını düzelttikten sonra biçimlendirme düzgün çalışacaktır. Ayrıca doğru dil modunun seçildiğinden emin olun, JSX/TSX kodu sıradan JS olarak ayarlanmamalıdır.

Kodum sunucuya yüklenecek mi? Kod güvenli mi?

Hayır. Tüm biçimlendirme, sıkıştırma ve sözdizimi vurgulama işlemi JavaScript ile tarayıcınızda yerel olarak çalışır, kod hiçbir sunucuya gönderilmez ve tamamen cihazınızda işlenir. Bunu ağ bağlantısını keserek test edebilirsiniz: ağ bağlantısını kestikten sonra araç hala düzgün çalışır. Paylaşım bağlantısı özelliği kod ve yapılandırmayı URL hash'inde kodlar, paylaşa tıklamak yalnızca bir URL oluşturur, kod yüklenmez — ancak bağlantıyı birine gönderirseniz ve o kişi açarsa kodunuzu görebilir, bu nedenle hassas kod içeren bağlantıları paylaşmayın.

Vue tek dosyalı bileşenleri (.vue dosyaları) biçimlendirilebilir mi? Peki ya Svelte?

Şu anda bu aracın çoklu dil desteği JS/TS/JSX/TSX/CSS/HTML/JSON'u kapsamaktadır. <template>/<script>/<style> içeren Vue tek dosyalı bileşenler (SFC) ve Svelte bileşenleri şu anda doğrudan toplu biçimlendirme için desteklenmiyor, ancak script kısmını (JS/TS), style kısmını (CSS) ve template kısmını (HTML) ayrı ayrı kopyalayıp ilgili dili seçerek ayrı ayrı biçimlendirebilirsiniz. Gelecekte Vue/Svelte SFC biçimlendirme desteği eklenmesi düşünülmektedir.

Ekipte tek tip biçimlendirme standardı nasıl ayarlanır?

Ekip tek tip standardı için üç katmanlı işbirliği önerilir: ① temel editör ayarlarını standartlaştırmak için proje kök dizinine .editorconfig yerleştirin (girinti, satır sonları, kodlama); ② Prettier kullanın ve projeye bir .prettierrc yapılandırma dosyası yerleştirin, herkes ve CI bu yapılandırmayla biçimlendirsin, bu araç da yapılandırmayla eşleşen seçenekleri seçebilir; ③ ESLint stil kurallarını kapatmak ve yalnızca kod kalitesini kontrol etmek için ESLint + eslint-config-prettier kullanın. Editörü kaydederken otomatik biçimlendirme yapacak şekilde yapılandırın (VS Code — Prettier uzantısını yükleyin, editor.formatOnSave: true ayarlayın), CI'ya biçim kontrolü için lint adımı ekleyin ve commit edilen kodun standarda uygun olduğundan emin olun.

Sondaki virgüllerin (trailingComma) ne faydası var? Açmalı mıyım?

Sondaki virgüllerin açılması şiddetle tavsiye edilir (en azından es5 seviyesi, all seviyesi önerilir). Sondaki virgüllerin faydaları: ① daha temiz Git diff: son elemanı eklerken önceki satırı virgül eklemek için değiştirmeniz gerekmez — yalnızca yeni satırın diff'i olur, virgül ekleyerek önceki satırın diff'ini kirletmezsiniz; ② elemanların sırasını yeniden düzenlerken daha kullanışlıdır, sondaki virgül sorununu halletmeniz gerekmez; ③ modern tarayıcılar ve Node.js sondaki virgülleri tam olarak destekler, eski IE desteklemez ama artık IE'yi dikkate almamıza gerek yok. Tek dezavantajı fazladan bir virgüldür, ancak sağladığı kolaylığa kıyasla buna kesinlikle değer. Prettier v3 varsayılan olarak all'dur.

Sıkıştırma sırasında mangle açmalı mıyım? compress ile mangle arasındaki fark nedir?

Üretim sıkıştırması için hem compress hem de mangle'ın açılması önerilir — bunlar bağımsız sıkıştırma seçenekleridir: compress kod optimizasyonudur (sabit katlama, ölü kod kaldırma, ifade basitleştirme vb.), kod yapısını yalnızca basitleştirebildiğinde değiştirir, değişken adlarını değiştirmez; mangle yerel değişken adlarını kısaltmadır, uzun değişken adlarını tek karaktere değiştirir — bu, boyut küçültmesinin en büyük kaynaklarından biridir. Kodunuz değişken adlarının dışarıdan doğrudan çağrılacağı bir kütüphane değilse veya eval ile değişken adlarına dinamik olarak erişmiyorsanız, mangle güvenlidir ve boyutu önemli ölçüde küçültebilir. API adlarının korunması gereken bir açık kaynak kütüphaneyse, dışa aktarılan adları korumak için mangle.reserved yapılandırın.

JSON biçimlendirirken neden bazı karakterler otomatik olarak kaçış karakteriyle (escape) işleniyor?

JSON özelliğinin katı sözdizimi gereksinimleri vardır: string'ler çift tırnak içinde olmalı, sondaki virgül olmamalı, özel karakterler kaçış karakteriyle işlenmelidir (yeni satır → \n, tırnak → \", ters eğik çizgi → \\, Tab → \t vb.). JSON string'inizde kaçış karakteriyle işlenmemiş özel karakterler varsa, biçimlendirme sırasında JSON özelliğine göre otomatik olarak kaçış karakteriyle işlenir, bu doğru davranıştır. Not: JSON JavaScript değildir, JSON'da yorum yazamazsınız, tek tırnak kullanamazsınız, undefined olamaz — bunların hepsi JSON ayrıştırmasının başarısız olmasına neden olur.

Ok fonksiyonu parametrelerinin her zaman parantezli olmasını nasıl sağlarım? Veya parantezli olmamasını?

arrowParens seçeneğini ayarlayın: always her zaman parantez eklemek demektir ((x) => x), bu Prettier v2+ varsayılanıdır, avantajı parametre eklerken/çıkarırken parantez ekleyip çıkarmanız gerekmez, diff'ler daha temiz olur; avoid tek parametrede parantez atlarsınız (x => x), kod daha kısadır. Ekip stiline göre seçin — iki stil de doğru veya yanlış değildir, yeter ki standartlaştırın. Not: parametre tipi açıklamaları, varsayılan parametreler, parçalama parametreleri yapılandırmadan bağımsız olarak her zaman parantezli olacaktır.

Biçimlendirme ESLint'in bildirdiği stil sorunlarını otomatik olarak düzeltebilir mi?

Bu araç Prettier tarzı biçimlendirmedir ve yalnızca Prettier'ın sorumlu olduğu stil sorunlarını düzeltebilir (girinti, tırnaklar, noktalı virgül, sondaki virgüller, satır genişliği, boşluklar vb.). ESLint'in bildirdiği kod kalitesi sorunları (kullanılmayan değişkenler, eksik return, === sorunları gibi) mantıksal sorunlardır ve biçimlendirme aracı tarafından otomatik olarak düzeltilemez — manuel değişiklik gerekir. ESLint'iniz eslint-config-prettier ile yapılandırılmışsa, Prettier biçimlendirmesinden sonra ESLint artık stille ilgili hataları bildirmez ve kalan kalite sorunlarını manuel olarak düzeltmeniz yeterlidir.

En fazla ne kadar büyük kod dosyaları destekleniyor? Büyük dosyaları biçimlendirmek donar mı?

Biçimlendirme tarayıcıda yerel olarak çalıştığı için desteklenen dosya boyutu cihazınızın performansına bağlıdır — genellikle onlarca KB'den birkaç MB'a kadar JS dosyaları normal şekilde işlenebilir, bu da sıradan projelerdeki tekil JS dosyaları için tamamen yeterlidir. Çok büyük paketlenmiş JS dosyası (onlarca MB) söz konusuysa gecikme ve hatta bellek yetersizliği olabilir — bu tür çok büyük dosyaların Node.js+Prettier/Terser ile komut satırından yerel olarak işlenmesi önerilir. Günlük geliştirmedeki tekil kaynak dosya boyutları genellikle desteklenen aralık içindedir.

Chrome'da Ctrl+Shift+B kısayolu neden yer imleri yöneticisini açıyor?

Bu Chrome tarayıcısının varsayılan kısayol çakışmasıdır: Ctrl+Shift+B Chrome'un yer imleri çubuğunu gösterme/gizleme kısayoludur ve tarayıcı kısayolları web sayfası JS kısayollarından daha yüksek önceliğe sahiptir, bu nedenle Chrome tarafından yakalanır. Çözüm: ① biçimlendirme düğmesiyle işlem yapın; ② Mac kullanıcısıysanız Cmd+Shift+B Chrome ile çakışmaz; ③ Chrome ayarlarından tarayıcı kısayollarını değiştirebilirsiniz; ④ önce editöre odaklanabilirsiniz, bazı durumlarda editör odağı kısayolu yakalayabilir. Diğer tarayıcılarda da kısayol çakışması varsa, her zaman düğmelerle işlem yapabilirsiniz.

Sorun Giderme

Biçimlendirme sırasında "sözdizimi ayrıştırma hatası" veriyor, biçimlendirilemiyor

Kodun kendisinde sözdizimi hatası var: eşleşmeyen parantezler, kapanmayan string'ler, eksik anahtar kelimeler, fazla virgüller vb. Sözdizimi hataları AST ayrıştırmasının başarısız olmasına neden olur ve biçimlendirmeyi imkansız kılar — önce sözdizimi hatalarını düzeltin Yanlış dil modu seçimi: örneğin JSX/TSX kodu JavaScript olarak seçilmiş, generik sözdizimi yanlışlıkla JSX etiketi olarak algılanmış veya tersi — doğru dil türünü manuel olarak seçin Deneysel sözdizimi içeriyor: kod henüz standart haline gelmemiş çok yeni JavaScript sözdizimi önerileri kullanıyor (dekoratörler, Pipeline operatörü gibi) ve ayrıştırıcı bunları desteklemiyor Dosyada BOM başlığı var: başlangıçta üç bayt UTF-8 BOM (EF BB BF) var, bazı ayrıştırıcılar bunu işleyemeyebilir — BOM'suz UTF-8 olarak kaydetmeyi deneyin Koda başka dil kodu karışmış: örneğin HTML'ye gömülü şablon dilleri (EJS, Handlebars, Vue şablon yönergeleri) saf JS/HTML değildir ve ayrıştırıcı tarafından tanınmaz Kodda kapanmayan blok yorumları var: /* karşılığı olmayan */, kapanmayan yorum sonraki tüm kodun yorum olarak algılanmasına neden olur Normal ifade belirsizliği: bölme/operatör gibi görünen bazı yerler aslında normal ifade değişmezleridir ve ayrıştırıcı tarafından yanlış algılanır — belirsizliği gidermek için normal ifadeden önce noktalı virgül ekleyin

Sıkıştırma (Minify) sırasında hata veriyor, sıkıştırılamıyor

Kod sözdizimi hatası: biçimlendirme gibi sıkıştırma da AST'ye dayanır, kodun sıkıştırılabilmesi için sözdizimi açısından doğru olması gerekir — önce sözdizimi hatalarını düzeltin ES Module import/export kullanılıyor ancak modül türü doğru işaretlenmemiş veya sıkıştırma yapılandırması modül türüyle eşleşmiyor Özellik adı mangle sırasında sorun: özellik adı mangle etkinleştirilmişse (varsayılan olarak kapalıdır), dinamik özellik erişimi obj['key'] özelliğin bulunamamasına neden olur — property mangle'ı gereksiz yere açmayın Kodda eval() veya with ifadesi var: Terser eval/with ile karşılaştığında mangle hatalı çalışabilir, çünkü eval kapsamdaki değişken adlarına dinamik olarak erişebilir — üretim kodunda eval kullanmaktan kaçının Ayrılmış ad yapılandırma hatası: mangle.reserved yapılandırıldıysa ancak yazım hataları varsa veya korunması gereken adlar (jQuery, $ gibi global kütüphaneler) atlandıysa, çalışma zamanı hatalarına neden olabilir toplevel sıkıştırma yapılandırma sorunu: kodunuz bir IIFE/modül içinde paketlenmek yerine global kapsamda çalışıyorsa, compress.toplevel: true'yu etkinleştirmek global değişken başvurularını bozabilir Hedef tarayıcı sürümü çok eski: Terser sıkıştırma sırasında hedef tarayıcının desteklemediği sözdizimini kullanabilir — çıktı JS sözdizimi sürümünü belirtmek için ecma sürümünü yapılandırabilirsiniz

Biçimlendirmeden sonra Çince karakterler/Çince yorumlar bozuk görünüyor

Dosya kodlaması UTF-8 değil: yüklenen yerel dosya GBK/GB2312 gibi Çince kodlamasına sahip, araç varsayılan olarak UTF-8 olarak ayrıştırdığı için bozuk görünüm oluşur — dosyayı yüklemeden önce editörde UTF-8 kodlamasına dönüştürün Tarayıcı sayfa kodlaması yanlışlıkla değiştirilmiş: mevcut tarayıcılar varsayılan olarak UTF-8 kullanmasına rağmen, bazı eski tarayıcılar veya özel ayarlar nedeniyle kodlama yanlış olabilir — tarayıcı menüsünden sayfa kodlamasının UTF-8 olarak ayarlandığını kontrol edin Dosyada UTF-8 BOM başlığı var: BOM genellikle bozuk görünüme neden olmasa da, bazı ayrıştırıcılar BOM'u hatalı işleyebilir — editörle BOM'u kaldırıp BOM'suz UTF-8 olarak kaydedin Kopyalama yapıştırma sırasında kodlama dönüşüm sorunu: bazı eski programlardan (eski Not Defteri, Word gibi) kod kopyalarken özel karakterler (Çince tırnaklar, tam genişlikli boşluklar gibi) yanlış dönüştürülebilir — VS Code gibi modern editörlerden kopyalamaya çalışın Yazı tipi sorunu: bazı sabit genişlikli yazı tipleri Çince karakterleri iyi desteklemez ve bozuk görünüme neden olur — bu kodlama sorunu değil, yalnızca yazı tipi sorunudur; Çince destekleyen sabit genişlikli bir yazı tipine geçin Özel Unicode karakterler: kod emoji, sıfır genişlikli boşluk, kontrol karakterleri ve diğer özel görünmez karakterler içeriyor; bu karakterler bozuk görünüme veya biçimlendirme hatalarına neden olabilir — kontrol etmek için editörde görünmez karakterleri görüntülemeyi açın gzip sıkıştırma veya proxy sorunu: dağıtımdan sonra bozuk görünüm oluşuyorsa, sunucunun Content-Type: application/javascript; charset=utf-8 yanıt başlığını doğru ayarlayıp ayarlamadığını kontrol edin

JSX/TSX kod biçimlendirmesi başarısız oluyor veya ayrıştırma hatası veriyor

Dil modu JSX/TSX yerine JavaScript seçilmiş: sıradan JS ayrıştırıcısı <tag> sözdizimini tanımaz ve JSX etiketlerini karşılaştırma operatörleri olarak yanlış yorumlayarak hata verir — manuel olarak JSX veya TSX dilini seçin TSX generik sözdizimi belirsizliği: TSX'deki <T> generik parametresi yanlışlıkla JSX etiketi olarak algılanabilir, örneğin const f = <T>(x: T) => x — belirsizliği gidermek için <T>'den sonra <T,> şeklinde virgül ekleyin (bu TSX'te yaygın bir kullanımdır) JSX etiketleri kapanmamış: JSX tüm etiketlerin doğru şekilde kapanmasını gerektirir, kendinden kapalı etiketlerde /> olmalıdır, HTML'nin tersine — <img> <img/> olarak yazılmalıdır JSX'teki JS ifadesi parantez sorunu: {} içindeki JS ifadeleri doğru şekilde kapanmalıdır, kapanmayan } içeren {obj.prop} sonraki ayrıştırmayı bozacaktır Fragment kısa sözdizimi sorunu: <></> boş etiketleri React 16+ desteği gerektirir ve doğru şekilde kapanmalıdır; <Fragment> kullanıyorsanız doğru import gerekir JSX nitelik değeri tırnak sorunu: JSX nitelik değeri bir string ise (çift) tırnak içinde olmalı, bir ifade ise {} içinde olmalıdır, ikisini karıştırmayın TSX dosya uzantısı .tsx yerine .ts: TypeScript ayrıştırıcısı JSX ayrıştırmasını yalnızca .tsx uzantısı için etkinleştirir, .ts dosyasında JSX yazmak hata verecektir — doğru uzantıyı kullanın

Biçimlendirmeden sonra girintiler yanlış, beklenenle eşleşmiyor

Yanlış tabWidth yapılandırması: girinti genişliği ayarının 2 mi 4 mü olduğunu kontrol edin — ekipler genellikle 2 boşluk kullanır, 4 boşluk bekliyorsanız tabWidth seçeneğini manuel olarak ayarlamanız gerekir Yanlış useTabs yapılandırması: ekip sekme ile girinti kullanıyorsa ve siz boşluk yapılandırdıysanız veya tersi, useTabs seçeneğinin doğru olup olmadığını kontrol edin Kodun kendisinde sözdizimi hataları var: sözdizimi hataları AST yapısının bozulmasına neden olur ve biçimlendirmeden sonra girintiler dağınık görünür — önce kırmızı dalgalı çizgilerle gösterilen sözdizimi hatalarını düzeltin Sekme ve boşluk karışık kullanılmış: orijinal kodda bazı yerler sekme bazı yerler boşlukla girintilenmiş — biçimlendirme stili yapılandırılan stile göre standartlaştıracaktır, ancak orijinal kod çok dağınıksa birden fazla biçimlendirme gerekebilir printWidth çok küçük ayarlanmış: satır genişliği çok küçükse (örneğin 40), kod sık sık satır sonu alır ve bu da dağınık girinti gibi görünür — 80 veya 100 daha uygundur bracketSameLine/arrowParens gibi düzen seçenekleri beklentiyle eşleşmiyor: süslü parantez konumu, ok fonksiyon parantezleri ve diğer stiller yapılandırmaya göre belirlenir, bu girinti sorunu değildir — ilgili seçenekleri ayarlayın EditorConfig ile yerel editör yapılandırması çakışıyor: yerel editör .editorconfig'den otomatik girinti ayarı alıyorsa ve tarayıcıdaki seçenekler farklı yapılandırılmışsa, iki taraftaki biçimlendirme sonuçları tutarsız olacaktır — yapılandırmayı standartlaştırın

Klavye kısayolları çalışmıyor, bastığımda tepki vermiyor

Odak editörde değil: kısayollar yalnızca editör odaklandığında çalışır, odak düğme, giriş alanı veya sayfanın başka bir yerindeyse kısayol tetiklenmez — önce editör alanına tıklayarak odaklanın Tarayıcı kısayol çakışması: bazı kısayollar (Chrome'da Ctrl+Shift+B yer imleri çubuğunu açar, Firefox'ta Ctrl+Shift+O geçmişi açar gibi) tarayıcı tarafından kullanılıyor — düğmelerle işlem yapabilir veya (Mac'te) Ctrl yerine Cmd kullanmayı deneyebilirsiniz Giriş yöntemi sorunu: Çince giriş yönteminde bazı kısayollar yakalanabilir — kısayolları kullanmadan önce İngilizce giriş yöntemine geçin Diğer uzantı/eklentiler tarafından kullanım: tarayıcı kısayol uzantıları, Tampermonkey betikleri, proxy eklentileri kısayolları kullanıyor olabilir — sayfayı gizli modda açmayı deneyin Sistem kısayol çakışması: işletim sistemi veya çalışan diğer programlar (ekran görüntüsü araçları, giriş yöntemleri, IDE gibi) ilgili tuş kombinasyonlarını global kısayollarla kullanıyor olabilir — diğer programlardaki kısayolları değiştirebilir veya bu aracın düğmeleriyle işlem yapabilirsiniz Mac/Windows klavye farklılıkları: unutmayın, Mac Cmd (⌘) tuşu kullanır, Windows/Linux Ctrl tuşu kullanır — karıştırmayın; Mac'te Option Windows'taki Alt'a karşılık gelir Tarayıcı güvenlik kısıtlamaları: dosya erişimiyle ilgili bazı kısayollar tarayıcının güvenlik politikası tarafından kısıtlanabilir ve JS tarafından tam olarak simüle edilemeyebilir — gerektiğinde doğrudan ilgili düğmelere tıklayın

Sözlük

Prettier
Şu anda en popüler frontend kod biçimlendirme aracıdır, Opinionated tasarım felsefesini benimser, JS/TS/CSS/HTML/Markdown gibi birden fazla dili destekler, kod stilini zorla standartlaştırır ve ekip stil tartışmalarını sonlandırır.
Terser
Modern JavaScript sıkıştırma aracıdır, UglifyJS'in ES6+ uyumlu fork'udur, ES6+ sözdizimi sıkıştırma ve obfuskasyonunu destekler, Webpack, Rollup, Vite gibi modern yapı araçlarının varsayılan sıkıştırıcısıdır.
UglifyJS
Klasik JavaScript sıkıştırma aracıdır, Terser'ın öncülüdür, ancak yalnızca ES5 ve daha eski sözdizimini destekler, ES6+ yeni özellikleri desteklemez — yeni projelerde genellikle Terser kullanılır.
AST (Abstract Syntax Tree)
Soyut Sözdizimi Ağacı, kaynak kodun sözdizimi yapısının ağaç benzeri temsilidir; her düğüm koddaki bir sözdizimi yapısını temsil eder. Babel, Prettier, Terser, ESLint gibi araçlar AST temel alınarak uygulanır.
ESLint
JavaScript/TypeScript ekosistemindeki en popüler kod kontrol aracıdır (Linter), kod kalitesi sorunlarını bulmak ve kod stilini standartlaştırmak için kullanılır, Prettier ile birlikte kullanılabilir.
EditorConfig
Editörler arası kod stilini standartlaştıran yapılandırma dosyasıdır; girinti stili, girinti boyutu, satır sonları, kodlama gibi temel ayarları tanımlar ve farklı editörlerin aynı projeyi açarken tutarlı davranmasını sağlar.
CodeMirror
Tarayıcı tabanlı kod editörü bileşenidir; sözdizimi vurgulama, satır numaraları, parantez eşleştirme, kod katlama, çoklu imleç gibi profesyonel düzenleme özellikleri sunar — web kod editörleri için baskın seçimlerden biridir.
minify (sıkıştırma)
Kod mantığını değiştirmeden boşlukları, yorumları kaldırma, değişken adlarını kısaltma, kod optimizasyonu gibi yöntemlerle kod boyutunu en aza indirme işlemidir; üretim ortamlarında yüklemeyi hızlandırmak için kullanılır.
mangle (bozma/zarar verme)
Sıkıştırma sırasında değişken adlarını, fonksiyon adlarını ve parametre adlarını tek karaktere kısaltma adımıdır; kod boyutunu önemli ölçüde küçültürken kodun okunmasını zorlaştırır, değişken adı obfuskasyonu olarak da adlandırılır.
beautify (güzelleştirme)
Yani kod biçimlendirme; sıkıştırılmış veya dağınık kodu girintileri, satır sonlarını ve boşlukları yeniden düzenleyerek okunabilirliği artırma, minify'ın tersi.
trailing comma (sondaki virgül)
Nesnelerde, dizilerde ve fonksiyon parametrelerinde son elemandan sonraki virgüldür; yeni eleman eklerken Git diff'in daha temiz olmasını sağlar, ES5+ ortamlarında desteklenir.
arrow parens (ok fonksiyon parantezleri)
Tek parametreli ok fonksiyonunda parametrenin parantez içinde olup olmayacağını belirler, örneğin x => x (parantezsiz) vs (x) => x (parantezli).
printWidth (satır genişliği)
Biçimlendirme sırasında bir satırdaki karakter sayısını aştığında otomatik olarak satır sonu ekleneceğini belirtir; Prettier varsayılan 80 karakterdir, ekipler monitör boyutuna göre 100 veya 120 olarak ayarlayabilir.
semicolons (noktalı virgül)
JavaScript ifadelerinin sonuna noktalı virgül eklenip eklenmeyeceğini belirler. JS'de ASI otomatik noktalı virgül ekleme mekanizması vardır, ancak çoğu senaryoda sürprizleri önlemek için noktalı virgül eklenmesi önerilir.
single quote (tek tırnak)
String'lerde tek tırnak mı çift tırnak mı kullanılacağı. JS'de işlevsellik tamamen eşdeğerdir, bu yalnızca stil tercihidir ve JSON özelliği çift tırnak zorunlu kılar.
double quote (çift tırnak)
String'leri çift tırnakla çevreleme, birçok dilde varsayılan stildir ve aynı zamanda JSON özelliğinin gerektirdiği string formatıdır.
tab width (girinti genişliği)
Her girinti seviyesine karşılık gelen boşluk sayısı. Frontend topluluğu genellikle 2 boşluk kullanır, backend dilleri 4 boşluk kullanır.
BOM (Byte Order Mark)
Bayt Sıra İşareti, UTF-8 kodlamalı dosyanın başında bulunabilen EF BB BF üç baytıdır, kodlamayı işaretlemek için kullanılır ve bazı senaryolarda JS ayrıştırma hatalarına neden olabilir.
UTF-8
Unicode Dönüşüm Formatı 8-bit, şu anda Web ve frontend projelerinde standart dosya kodlamasıdır, tüm Unicode karakterlerini destekler ve varsayılan olarak önerilen kodlamadır.
source map (kaynak harita)
Sıkıştırılmış/transpile edilmiş kodu orijinal kaynak kod konumlarına geri eşleyen dosyadır; üretim ortamı hata ayıklaması için kullanılır, sıkıştırılmış kod hata verdiğinde kaynak kod satır numarasını bulmayı sağlar.

Prettier temel seçenekleri karşılaştırma tablosu

JavaScript kodunun sıkıştırma öncesi ve sonrası karşılaştırma örneği

Klavye kısayolları hızlı başvuru tablosu