JSX Biçimlendirici

Yükle

0 karakter

GeekFormat JSX biçimlendirme aracı, React JSX/TSX bileşen kodunu profesyonel olarak güzelleştirmek için Prettier v3 Standalone motoruna dayanır. 12 biçimlendirme yapılandırmasını (girinti boyutu, noktalı virgül, tırnak stili, sondaki virgül, parantez aralığı, ok fonksiyonu parantezleri, yazdırma genişliği, JSX tek tırnak, JSX parantez aynı satır, özellik tırnak stratejisi vb.) destekler, yerleşik Terser sıkıştırma motoru ile. JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON arasında yedi dil arasında geçiş sunar. CodeMirror 6 sözdizimi vurgulamalı editör, iki sütunda gerçek zamanlı karşılaştırma, dosya yükleme/indirme desteği, geçmiş, URL paylaşımı, tek tıkla kopyalama. Saf tarayıcı işleme, kod sunucuya gönderilmez.

İlgili Öneriler

JSX Sıkıştırma

TSX Formatlama

JavaScript Biçimlendirme

CSS Biçimlendirme

JSON Biçimlendirici

JSX Biçimlendirme Hakkında

JSX, JavaScript XML'in kısaltmasıdır, React çatısı tarafından tanıtılan bir JavaScript sözdizimi uzantısıdır ve JavaScript kodunda doğrudan HTML benzeri etiket yapıları yazmanıza olanak tanır. JSX, derleme sırasında Babel veya TypeScript gibi araçlar tarafından sıradan React.createElement() fonksiyon çağrılarına dönüştürülür. JSX, bileşen kod yapısını daha sezgisel hale getirir — geliştiriciler HTML yazıyormuş gibi UI yapısını tanımlayabilir, aynı zamanda JavaScript'in tam ifade gücünü elde eder. Ancak JSX kodu standart biçimlendirme eksikliği gösteriyorsa — dağınık etiket iç içe geçme seviyeleri, düzensiz öznitelikler, tutarsız girintiler — bu, okunabilirliği ve bakım verimliliğini ciddi şekilde etkileyecektir, işte JSX biçimlendirme araçlarının değeri buradan gelir.

Prettier, şu anda JavaScript/JSX ekosisteminde en baskın kod biçimlendirme aracıdır, 2017 yılında James Long tarafından yaratılmıştır ve şimdi de facto standart haline gelmiştir. Prettier'ın temel felsefesi 'görüşlü biçimlendirici' (opinionated formatter) — yalnızca birkaç yapılandırılabilir öğe sunar, geri kalan kurallar yerleşiktir ve değiştirilemez. Bunun avantajı, ekipler arasında sonsuz kod stili tartışmalarını ortadan kaldırmasıdır. Prettier, JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown gibi birden fazla dili ve formatı destekler, React, Vue, Angular gibi ana akım çerçeve toplulukları tarafından geniş çapta kabul görür. Modern ön uç projelerinin çoğu, tutarlı kod stilini garanti etmek için Prettier'i CI/CD boru hatlarına entegre eder.

JSX biçimlendirmesinin temel kuralları şunlardır: Birincisi, girinti seviyeleri — her iç içe geçmiş JSX etiketi ve ifade bir seviye girinti artırır, ağaç benzeri DOM yapısını yansıtır; İkincisi, öznitelik sıralaması — bir etiket çok fazla özniteliğe sahip olduğunda ve satır genişliğini aştığında, her öznitelik bir satır kaplar ve hizalanır; Üçüncüsü, parantez işleme — çok satırlı JSX ifadeleri genellikle otomatik noktalı virgül ekleme (ASI) sorunlarını önlemek için yuvarlak parantezlerle sarılır; Dördüncüsü, kendi kendine kapanan etiketler — alt öğesi olmayan bileşenler <Component /> formunu kullanır; Beşincisi, dize tırnakları — JSX öznitelikleri varsayılan olarak çift tırnak kullanır (HTML ile tutarlı), JavaScript dizeleri varsayılan olarak tek tırnak kullanır; Altıncısı, boşluk işleme — etiketler içindeki {} kıvırcık parantezlerinin her iki tarafına boşluk eklenip eklenmeyeceği yapılandırılabilir.

JSX sıkıştırma (Minification), biçimlendirmenin ters işlemidir, amacı JSX'i üretim ortamı dağıtımı için minimum hacimli çalıştırılabilir koda dönüştürmek, ağ aktarım hacmini azaltmak ve yükleme hızını hızlandırmaktır. JSX sıkıştırma genellikle aşağıdaki adımları içerir: önce JSX'i Babel aracılığıyla React.createElement çağrılarına (yani sıradan JavaScript) derleyin, ardından sıkıştırıcı (Terser, UglifyJS gibi) kullanarak: yorumları ve boşluk karakterlerini kaldırma, değişken ve fonksiyon adlarını kısaltma (mangling), ölü kod eliminasyonu (dead code elimination), koşullu ifadeleri ve deyimleri basitleştirme, bildirimleri birleştirme, satır içi fonksiyonlar vb. Modern yapı araçları (Webpack, Vite, Rollup) production modunda kod sıkıştırmayı otomatik olarak gerçekleştirir.

Kod biçimlendirmesi neden önemlidir? Ekip çalışmasında, tek tip kod stili okunabilirliği ve inceleme verimliliğini büyük ölçüde artırabilir. Her geliştirici kodu kendi tercihlerine göre biçimlendirirse, Git diff anlamsız format değişiklikleriyle dolacak, incelemecilerin gerçek mantıksal değişiklikleri bulması zorlaşacaktır. Araştırmalar, geliştiricilerin kodu yazmaktan çok daha fazla zamanını kod okumaya harcadığını gösterir ve tutarlı biçimlendirme stili, okurken bilişsel yükü büyük ölçüde azaltabilir. Google, Meta, Airbnb gibi büyük şirketlerin katı kod stili standartları ve otomatik biçimlendirme araç zincirleri vardır, bu da yazılım mühendisliğinin olgunluğunu da yansıtır.

Prettier ile Linter'ların (ESLint, TSLint gibi) işbölümü, modern ön uç mühendisliğinin en iyi uygulamalarından biridir: Prettier yalnızca formatla (formatting) ilgilenir — satır sonları, girintiler, boşluklar, noktalı virgül, tırnaklar, virgüller ve diğer saf stil sorunları; ESLint yalnızca kaliteyle (code quality) ilgilenir — kullanılmayan değişkenler, potansiyel hatalar, güvenlik sorunları, en iyi uygulamalar ve diğer mantıksal sorunlar. Birlikte kullanılırken, çakışmaları önlemek için eslint-config-prettier aracılığıyla ESLint'teki Prettier ile örtüşen format kuralları devre dışı bırakılmalıdır. Birçok ekip ayrıca kodu göndermeden önce Prettier ve ESLint'i otomatik olarak çalıştırmak için pre-commit kancalarını (husky + lint-staged aracılığıyla) yapılandırır ve depoya gönderilen tüm kodun standartları karşıladığını garanti eder.

JSX biçimlendirme aracı seçilirken dikkate alınması gereken birkaç faktör vardır: Birincisi, motor seçimi — motor olarak Prettier'i tercih edin, çünkü topluluk standardıdır, sonuçlar tahmin edilebilir ve IDE uzantılarıyla tutarlıdır; İkincisi, yapılandırılabilirlik — ekip ihtiyaçlarına göre ayarlanabilir parametre sayısını seçin; çok fazla seçenek tersine karar verme maliyetini artırır; Üçüncüsü, güvenlik — aracın kodu yerel olarak işlediğinden emin olun, sunucuya göndermez, kaynak kodu sızıntısı riskini önler; Dördüncüsü, ek özellikler — sıkıştırma, sözdizimi vurgulama, geçmiş, paylaşım ve diğer işlevler kullanım verimliliğini artırabilir; Beşincisi, çok dilli destek — JS/TS/JSX/TSX/CSS/HTML/JSON gibi birden fazla dili kapsayan araç, araç değiştirme maliyetini azaltabilir.

Çevrimiçi kod biçimlendirme araçlarını kullanırken güvenlik önlemleri: Birincisi, saf tarayıcı işlemeli araçları tercih edin — bu araçlar sunucu gerektirmez, kod yalnızca yerel olarak çalışır, maksimum güvenlik; İkincisi, hassas bilgiler içeren kodu yapıştırmayın — örneğin veritabanı şifreleri, API anahtarları, iç iş mantığı, tescilli algoritmalar vb. Araç göndermediğini iddia etse de, güvenlik bilincini koruyun; Üçüncüsü, aracın HTTPS kullanıp kullanmadığını kontrol edin — aktarım sırasında dinlenmeyi önler (her ne kadar yerel işlemli araçlar aktarım gerektirmese de, sayfanın kendisi de güvenli yüklemeye ihtiyaç duyar); Dördüncüsü, önemli kod için yerel araçlar kullanın — çekirdek iş kodu için yerel olarak yüklenmiş Prettier CLI veya IDE uzantıları kullanmanız önerilir, çevrimiçi hizmetlere güvenmeyin; Beşincisi, aracın güvenilirliğini düzenli olarak kontrol edin — açık kaynak olup olmadığını, topluluk değerlendirmesini, gizlilik politikası olup olmadığını vb. kontrol edin.

Kullanım senaryoları

İnternetten kopyalanmış dağınık formatlı React bileşen kodu — daha kolay okuma ve öğrenme için hızlı biçimlendirme
Eski projeleri devralırken JSX bileşen dosyalarını düzenleme, ikincil geliştirmeden önce kod stilini birleştirme
Kod incelemesinden önce biçimlendirme, format farklarından kaynaklanan anlamsız diff'leri ortadan kaldırma, mantıksal incelemeye odaklanma
Sıkıştırılmış üretim JSX kodunu yeniden biçimlendirme, üretim sorunlarını teşhis ederken karıştırılmış kodu okuma
Teknik bloglar veya belgeler yazmadan önce örnek JSX kodunu güzelleştirme, içeriğin profesyonelliğini artırma
Farklı biçimlendirme yapılandırmalarının efektlerini karşılaştırma, ekip Prettier yapılandırması için referans olarak kullanma
Eğitim sunumlarında dağınıktan standardize edilmişe JSX kod biçimlendirme sürecini gösterme
Çevrimiçi React kod parçacıklarını hata ayıklarken — önce biçimlendirin, sonra yapıyı analiz edin ve hataları bulun
JSX kodu üreten bileşen kitaplığı belgelerinde, örnek kod stilinin tekdüze ve düzenli olmasını garanti etme
İşe alım görüşmelerinden önce React projesi kodunu düzenleme, gönderilen kod örneklerinin standart stilde olmasını sağlama
AI tarafından üretilen JSX kodunu projeye koymadan önce biçimlendirme, AI çıktısındaki format tutarsızlığı sorunlarını ortadan kaldırma
React Native veya Next.js projeleri geliştirirken — çevrimiçi olarak bileşen kod parçacıklarını hızla biçimlendirme

Nasıl Kullanılır

Sol editöre JSX/TSX kodunu yapıştırın, veya yükle düğmesini tıklayarak .jsx/.tsx dosyalarını içe aktarın, veya doğrudan örneklerden yükleyin
Ayarlar düğmesini tıklayarak biçimlendirme parametrelerini ayarlayın: girinti boyutu, noktalı virgül, tırnak işareti, sondaki virgül, yazdırma genişliği, JSX seçenekleri vb., veya varsayılan yapılandırmayı koruyun
Biçimlendirme düğmesini tıklayın (veya kısayol tuşunu kullanın) ve biçimlendirmeyi gerçekleştirin. Sağ panel sonucu anında gösterir. Panel genişliğini ayarlamak için sürükleyebilirsiniz
Sıkıştırmaya ihtiyacınız varsa, sıkıştırma düğmesini tıklayarak sıkıştırma moduna geçin. Terser motoru minimize edilmiş JSX kodunu gösterecektir
Kopyala düğmesini tıklayarak sonucu panoya kopyalayın, veya indir düğmesine tıklayarak dosya olarak kaydedin, veya paylaşım bağlantısı yoluyla başkalarına gönderin

Özellikler

Prettier v3 Motoru: Endüstri standardı en popüler Prettier v3 Standalone'ı Babel ayrıştırıcı ile birleştirerek biçimlendirme motoru olarak kullanır. Sonuçlar VS Code'daki Prettier uzantısı ile tutarlıdır, ekip kod stili tekdüzeliğini garanti eder
12 Biçimlendirme Yapılandırması: Girinti boyutunu (2/4/8 boşluk veya Tab), noktalı virgül, tek/çift tırnak, sondaki virgül (none/es5/all), parantez aralığı, ok fonksiyonu parantezleri, yazdırma genişliği, JSX tek tırnak, JSX parantez aynı satır, özellik tırnak stratejisi ve diğer 12 parametreyi özelleştirin
JSX Sözdizimi Vurgulamalı Editör: CodeMirror 6 tabanlı profesyonel kod editörü, JSX/TSX sözdizimi vurgulama, satır numaraları, parantez eşleştirmeyi destekler, solda giriş sağda gerçek zamanlı sonuç
JSX Sıkıştırma Özelliği: Yerleşik Terser sıkıştırma motoru, tek tıkla JSX bileşen kodunu minimum hacme sıkıştırır. Değişken adı karartma (mangle), ölü kod kaldırma, console/debugger temizleme ve diğer gelişmiş sıkıştırma seçeneklerini destekler
7 Dil Arasında Geçiş: JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — yedi popüler ön uç dilini destekler. Tek araç tam yığın tüm biçimlendirme ihtiyaçlarını kapsar
Dosya Yükleme ve İndirme: .jsx/.tsx/.js/.ts/.css/.html/.json dosyalarını doğrudan biçimlendirme için yüklemeyi destekler, işlemden sonra indirilip yerel olarak kaydedilebilir
Geçmiş Paneli: Son biçimlendirme kayıtlarını otomatik olarak kaydeder, geçmiş sürümlere geri dönmeyi ve farklı yapılandırmaların biçimlendirme efektlerini karşılaştırmayı destekler
Tek Tıkla Sonuç Kopyalama: Biçimlendirilmiş veya sıkıştırılmış kod tek tıkla panoya kopyalanır, doğrudan IDE'ye veya projeye yapıştırılır
URL Paylaşım Özelliği: Kod ve yapılandırmayı LZ-String sıkıştırması yoluyla URL hash'ine kodlar. Tam kodu ve biçimlendirme parametrelerini paylaşmak için bağlantıyı kopyalayın
Dostça Sözdizimi Hata İpuçları: Biçimlendirme başarısız olduğunda sözdizimi hatalarını diğer hatalardan ayırt eder, kod sorunlarını hızla düzeltmek için konum ipuçları sağlar
Sürüklenebilir Sütunlar: Sol ve sağ panel genişliği serbestçe sürüklenerek ayarlanabilir, farklı ekran boyutlarına ve okuma alışkanlıklarına uyum sağlar
Tarayıcıda Yerel İşleme: Tüm biçimlendirme, sıkıştırma ve analiz tarayıcıda JavaScript ile gerçekleştirilir. Kod hiçbir sunucuya gönderilmez, kaynak kodu güvenliğini garanti eder

Sık Sorulan Sorular

JSX biçimlendirme prensibi nedir? Prettier ile ilişkisi nedir?

Bu araç, alt katmanda biçimlendirme motoru olarak Prettier v3 Standalone sürümünü kullanır. Babel ayrıştırıcı aracılığıyla JSX sözdizimini analiz eder, ardından yapılandırılmış kurallara göre düzenli biçimlendirilmiş kodu yeniden dışa aktarır. Prettier, şu anda ön uç ekosisteminde en popüler kod biçimlendirme aracıdır, React/Vue/Angular projelerinde yaygın olarak kullanılır. Bu aracın biçimlendirme sonuçları, VS Code'da JSX dosyalarını biçimlendirmek için Prettier uzantısı kurulumunun sonuçlarıyla temel olarak tutarlıdır. Yerel IDE açmaya gerek kalmadan hızlı çevrimiçi biçimlendirme için uygundur.

Hangi biçimlendirme seçenekleri desteklenir? Girintiyi ve tırnak stilini özelleştirebilir miyim?

12 biçimlendirme yapılandırmasını destekler: 1) Girinti boyutu: 2 boşluk/4 boşluk/8 boşluk veya Tab kullanımı; 2) Noktalı virgül kullanımı; 3) Tek veya çift tırnak; 4) Sondaki virgül stratejisi: none (yok)/es5 (diziler ve nesneler)/all (fonksiyon parametreleri dahil); 5) Nesne kıvırcık parantezleri içinde boşluk; 6) Tek parametreli ok fonksiyonunda parantez; 7) Yazdırma genişliği (satır başına maksimum karakter sayısı); 8) JSX nitelikleri için tek veya çift tırnak; 9) Çok satırlı JSX'in sağ parantezi içerikle aynı satırda kalır mı; 10) Nesne özellikleri için tırnak stratejisi: as-needed/preserve/consistent; 11) HTML boşluk hassasiyeti; 12) Girinti için Tab kullanımı. Ayar panelinde serbestçe ayarlayın.

Biçimlendirme JSX kodunun mantığını değiştirir mi? Güvenli midir?

Biçimlendirme yalnızca boşluk karakterlerini (satır sonları, girintiler, boşluklar) ve tırnak, noktalı virgül gibi sözdizimi şeker formlarını ayarlar, hiçbir kod mantığını değiştirmez. Prettier, dünya çapında milyonlarca geliştirici tarafından doğrulanmış olgun bir araçtır. Biçimlendirilmiş kod, orijinal kodla anlamsal olarak eşdeğerdir. Ancak dikkat edin: orijinal kod sözdizimi hataları içeriyorsa (örneğin, eşleşmeyen parantezler, kapatılmamış etiketler), biçimlendirme başarısız olur ve sözdizimi hatası bildirir. Bu durumda biçimlendirmeden önce kod sorunu düzeltilmelidir.

JSX sıkıştırma özelliği nasıl çalışır? Hangi sıkıştırma seçenekleri desteklenir?

JSX sıkıştırma, tarayıcıda yerel olarak çalışan Terser motorunu (endüstrideki en popüler JavaScript sıkıştırıcılarından birini) kullanır. Sıkıştırma şunları içerir: yorumların ve fazladan boşlukların kaldırılması, değişken adlarının kısaltılması ve karartılması (mangle), ölü kod eliminasyonu (dead_code), kullanılmayan değişkenlerin kaldırılması (unused), fonksiyon/değişken hoisting optimizasyonu, koşullu ifade basitleştirme, döngü optimizasyonu vb. Sıkıştırma, önce JSX'i Babel aracılığıyla sıradan JavaScript'e derler, ardından sıkıştırma ve optimizasyon gerçekleştirir. Not: sıkıştırılmış kod okunabilirliği büyük ölçüde azalır, üretim ortamı dağıtımı için uygundur, geliştirme ve hata ayıklama için uygun değildir.

TypeScript (TSX) destekleniyor mu? JSX'ten farkı nedir?

Desteklenir. Araç varsayılan olarak JSX dilini kullanır. Sol üst köşedeki dil geçiş menüsü aracılığıyla TSX moduna geçebilirsiniz. TSX modu TypeScript ayrıştırıcı kullanır, TypeScript tip ek açıklamalarını (interface, type, jenerikler, tip iddiaları vb.) doğru şekilde tanır, tip sözdizimi nedeniyle hata vermez. JSX modu Babel ayrıştırıcı kullanır, saf JavaScript'teki React bileşenleri için uygundur. TSX sıkıştırılırken, tip ek açıklamaları Terser sıkıştırmasından önce otomatik olarak kaldırılır.

Girilen JSX kodu sunucuya gönderilir mi? Gizlilik güvenli midir?

Tamamen güvenli. Bu aracın tüm işlevleri (biçimlendirme, sıkıştırma, sözdizimi algılama, geçmiş) tarayıcınızda JavaScript aracılığıyla yerel olarak çalışır. Kod içeriği ağ üzerinden hiçbir harici sunucuya gönderilmez. Prettier ve Terser, saf JavaScript ile uygulanmış kütüphanelerdir, doğrudan tarayıcı tarafında çalıştırılabilirler. Bu aracı çevrimdışı da kullanabilirsiniz — tüm işlevler hala normal çalışır. Geçmiş, tarayıcının localStorage'ında saklanır, yalnızca mevcut cihazınızda görünür.

Geçmiş nerede saklanır? Kaybolabilir mi?

Geçmiş, tarayıcının localStorage'ında (yerel depolama) saklanır, belirli bir tarayıcı ve cihazla ilişkilidir. Tarayıcı verilerini temizlerseniz, tarayıcı değiştirirseniz veya gizli mod kullanırsanız geçmiş kaybolur. Geçmiş, son biçimlendirilen kod parçacıklarına hızlıca geri dönmek için kullanılır, farklı yapılandırmaların efektlerini karşılaştırmayı kolaylaştırır. Önemli kodu dosya olarak kendiniz kaydetmeniz önerilir, yalnızca geçmiş işlevine güvenmeyin.

URL paylaşım özelliği kodu sunucuya gönderiyor mu?

Hayır. URL paylaşım özelliği, kodu ve yapılandırmayı LZ-String ile sıkıştırır ve URL hash bölümüne (#'dan sonraki içerik) kodlar. URL hash'inin önemli bir özelliği vardır: HTTP isteği ile sunucuya gönderilmez, yalnızca tarayıcıda JavaScript tarafından yerel olarak okunur ve ayrıştırılır. Alıcı paylaşım bağlantısını açtığında, tarayıcı doğrudan hash'i ayrıştırır ve kodu görüntülemek için çözer — tüm süreç sunucu katılımı gerektirmez. Ancak dikkat edin: paylaşım bağlantısı tam kod içeriğini içerir. Kod hassassa, bunu kamu kanallarında paylaşmayın.

Biçimlendirme başarısız olursa ve sözdizimi hatası bildirirse ne yapmalıyım?

Biçimlendirme başarısızlığının en yaygın nedeni, kodun kendisinin sözdizimi hataları içermesidir: 1) Kapatılmamış JSX etiketleri — tüm etiketlerin karşılık gelen bir çifti olup olmadığını kontrol edin, kendi kendine kapanan etiketler doğru mu (<img /> yerine <img> değil); 2) Eşleşmeyen parantezler — kıvırcık parantezler {}, yuvarlak parantezler (), köşeli parantezler [] eşleşiyor mu kontrol edin; 3) Kapatılmamış tırnak işaretleri — dize tırnakları tamam mı; 4) Yanlış yazılmış sözdizimi — örneğin JSX'te izin verilmeyen sözdizimi kullanımı. Önce ipucundaki satır numarasını ve hata mesajını kontrol ederek sorunu bulun, veya kodu basitleştirerek adım adım keşfedin.

Yazdırma genişliği (printWidth) ne anlama gelir? Hangi değeri ayarlamalıyım?

Yazdırma genişliği (printWidth), Prettier'ın temel parametrelerinden biridir, kod satırı başına maksimum karakter sayısını ifade eder. Kod satırı bu genişliği aştığında Prettier otomatik olarak satır kırar. Varsayılan değer 80 karakterdir, bu eski bir programlama kuralıdır (delikli kartlardan ve terminal genişliğinden gelir). Yaygın değerler: 80 (klasik muhafazakar), 100 (daha yaygın), 120 (geniş ekran dostu). Çok küçük değer ayarlamak sık satır kırılmasına neden olur ve okumayı zorlaştırır; çok büyükse satır çok uzun olur ve dar ekranlarda okumak zorlaşır. Ekip standartlarına ve monitör genişliğine göre 80-120 arasında bir değer seçmeniz önerilir.

Sondaki virgül (trailing comma) ne işe yarar? Hangi modu seçmeliyim?

Sondaki virgül, diziler, nesneler ve fonksiyon parametreleri gibi çok satırlı yapılarda son elemandan sonra da virgül eklenmesini ifade eder. Avantajları şunlardır: 1) Öğe ekleme/silme yalnızca bir satırı değiştirir, daha temiz Git diff; 2) Virgül eklemeyi unutmaktan kaynaklanan sözdizimi hatalarından kaçınma; 3) Bazı durumlarda daha kararlı ayrıştırma. Prettier üç mod sunar: none (sondaki virgül yok, en kısa), es5 (yalnızca ES5'in desteklediği yerlerde, yani diziler ve nesneler, en uyumlu), all (tüm mümkün yerlerde, fonksiyon parametreleri dahil, ES2017+ veya Babel/TS desteği gerektirir). Modern projeler için 'all' modu önerilir, Babel veya TypeScript derlemesi ile mükemmel şekilde çalışır.

jsxSingleQuote ve jsxBracketSameLine ne gibi etkiler sağlar?

jsxSingleQuote (JSX tek tırnak): JSX nitelik değerlerinin tek tırnak mı yoksa çift tırnak mı kullandığını kontrol eder. Varsayılan olarak kapalıdır (çift tırnak), bu HTML nitelik kuralıyla tutarlıdır. Açıldıktan sonra JSX'teki öznitelik dizeleri tek tırnak kullanır. jsxBracketSameLine (JSX parantez aynı satır): Çok satırlı JSX öğelerinin kapanış sağ parantezinin (/> veya >) son satırın sonunda (aynı satır) mı yoksa yeni bir satırda mı (farklı satır) olduğunu kontrol eder. Varsayılan olarak kapalıdır (yeni satır). Açıldıktan sonra sağ parantez son öznitelikle aynı satırda olur. Farklı ekiplerin farklı tercihleri vardır — projeyle tutarlı stili seçin.

Toplu çok dosya biçimlendirmesi destekleniyor mu?

Şu anda web aracı esas olarak tek dosya hızlı biçimlendirme senaryoları için tasarlanmıştır, tek dosya yüklemeyi destekler. Birden fazla JSX/TSX dosyasını toplu olarak biçimlendirmeniz gerekiyorsa, projeye Prettier CLI aracını yüklemeniz ve komut satırı aracılığıyla toplu işlem yapmanız önerilir (örneğin npx prettier --write "src/**/*.jsx"). Bu aracın temel motoru Prettier ile tamamen aynıdır, biçimlendirme sonuçları aynıdır. Gelecekteki sürümler toplu işleme özelliği eklemeyi düşünebilir.

ESLint ile birlikte kullanılabilir mi?

Evet. Gerçek projelerde, kod formatı için Prettier (satır sonları, girintiler, boşluklar, tırnaklar vb.) kullanmanız, kod kalitesi için ESLint (kullanılmayan değişkenler, potansiyel hatalar, en iyi uygulamalar vb.) kullanmanız önerilir. Ortak kullanım için önerilen uygulama: 1) eslint-config-prettier yükleyerek ESLint'teki Prettier ile çakışan format kurallarını devre dışı bırakın; 2) Önce Prettier biçimlendirmesini çalıştırın, ardından ESLint denetimini. Bu araç biçimlendirmeye (Prettier'in iyi olduğu şeye) odaklanır ve ESLint kod denetimi işlevlerini kapsamaz.

Telefonda kullanılabilir mi? Mobil deneyim nasıl?

Telefon tarayıcısında kullanılabilir. Araç duyarlı tasarım benimser, küçük ekranlı cihazlarda otomatik olarak düzeni ayarlar — sol-sağ sütunlar üst-alt hale gelir, araç çubuğu düğmeleri dokunmaya uygun boyutlarda optimize edilir. Ancak telefonda kod düzenleme bilgisayara göre daha kötü bir deneyime sahiptir. Esas olarak bilgisayarda kullanmanız önerilir. Mobil cihazlarda sık sık kod işlemeniz gerekiyorsa, Prettier'i destekleyen mobil kod editörü uygulamaları kullanmanız önerilir.

Sorun Giderme

Biçimlendirme başarısız olursa ve sözdizimi hatası bildirirse ne yapmalıyım?

Önce kodun eksiksiz olduğundan emin olun: JSX bileşenleri genellikle export'a ihtiyaç duyar veya en azından JSX döndüren bir fonksiyon içerir. Yaygın sözdizimi hataları şunları içerir: 1) Kapatılmamış JSX etiketleri — her açılış etiketinin karşılık gelen bir kapanış etiketi veya kendi kendine kapanma işareti olup olmadığını kontrol edin; 2) Eşleşmeyen kıvırcık parantezler — JSX'teki {} ifade parantezleri eşleşiyor mu; 3) Kapatılmamış dize tırnakları — tüm tek tırnak/çift tırnak/backtick kontrol edin; 4) JSX'te ayrılmış kelimelerin kullanımı — örneğin class className olarak yazılmalıdır, for htmlFor olarak; 5) Birden fazla kök öğe — JSX yalnızca bir kök öğeye izin verir, birden fazla öğe <>...</> veya <div> içine sarılmalıdır. Hata mesajları genellikle satır numarasını ve nedeni belirtir, bunları konum bulmak için kullanabilirsiniz.

Dosya yüklendikten sonra tepki yok veya format yanlış mı?

Önce dosya uzantısının doğru olduğundan emin olun — .jsx/.tsx/.js/.ts/.css/.html/.json dosyaları yüklenebilir. Dosya uzantısı standart değilse, araç dil biçimini yanlış tanıyabilir, bunun sonucunda biçimlendirme beklentilere uymayabilir. Çözümler: 1) Dosya uzantısının standart biçimde olduğundan emin olun; 2) Yükledikten sonra sol üst köşedeki dil seçiminin doğru olup olmadığını kontrol edin, yanlışsa manuel olarak geçebilirsiniz; 3) Dosya içeriğinin düz metin olduğundan emin olun, ikili dosya değil; 4) Çok büyük dosyalar (1MB'dan fazla) tarayıcının donmasına neden olabilir, işleme için masaüstü araçları kullanmanız önerilir.

Biçimlendirilmiş kod yerel Prettier'ımın sonucundan farklı mı?

Olası nedenler: 1) Sürüm farkı — bu araç Prettier v3 kullanır, projeniz v2 sürümünü kullanıyorsa, bazı detaylar farklılık gösterebilir (örneğin sondaki virgül varsayılan değeri değişti); 2) Farklı yapılandırmalar — yazdırma genişliği, girinti, tırnak, sondaki virgül gibi parametrelerin proje yapılandırmasıyla uyumlu olup olmadığını kontrol edin; 3) Farklı ayrıştırıcılar — JSX Babel ayrıştırıcı kullanır, TSX TypeScript ayrıştırıcı kullanır, doğru olanın seçildiğinden emin olun; 4) Eklenti farkı — yerel Prettier'a ek eklentiler yüklendiyse (örneğin prettier-plugin-tailwindcss), bu araç bu eklentileri kapsamaz. Bu aracın yapılandırmasını projenin .prettierrc dosyasıyla uyumlu olacak şekilde ayarlamanız önerilir.

JSX sıkıştırıldıktan sonra kod düzgün çalışmıyor mu?

JSX sıkıştırma Terser motorunu kullanır, önce JSX'i sıkıştırmadan önce sıradan JavaScript'e derler. Sıkıştırılmış kod çalışmıyorsa, şunları kontrol edin: 1) Sıkıştırma yapılandırmasının çok agresif olup olmadığı — örneğin toplevel'in etkinleştirilmesi modül davranışını değiştirebilir; 2) Kod eval veya dinamik özellik erişimi kullanıyor mu — değişken karartma ad uyumsuzluğuna neden olabilir; 3) Belirli fonksiyon veya sınıf adlarına bağımlı olup olmadığı — eğer öyleyse, keep_fnames veya keep_classnames seçeneklerini etkinleştirmelisiniz. Üretim ortamı sıkıştırması için proje yapı araçlarını (Vite/Webpack) kullanmanız önerilir, bunlar daha eksiksiz yapılandırmalara ve eklenti ekosistemine sahiptir.

Sözlük

JSX: JavaScript XML'in kısaltmasıdır, React tarafından tanıtılan bir JavaScript sözdizimi uzantısıdır ve JS'de HTML benzeri etiket yapıları yazmanıza olanak tanır. Derlemeden sonra React.createElement() çağrılarına dönüştürülür.
Prettier: Şu anda en popüler görüşlü (opinionated) kod biçimlendirme aracıdır, JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown vb. destekler, ön uç kod biçimlendirme için de facto standart haline gelmiştir.
Babel: ES6+/JSX/TS gibi yeni sözdizimlerini eski tarayıcılarla uyumlu ES5 koduna dönüştürebilen bir JavaScript derleyicisidir, ayrıca Prettier'ın JSX'i analiz etmek için temel motoru olarak hizmet eder.
Terser: Endüstrideki en popüler JavaScript/JSX sıkıştırıcılardan (minifier) biridir, değişken karartma, ölü kod eliminasyonu, kod sıkıştırma vb. destekler. Webpack/Vite gibi yapı araçlarının varsayılan sıkıştırıcısıdır.
Print Width: Prettier'ın temel parametrelerinden biridir, kod satırı başına maksimum karakter sayısını ifade eder, bu genişliği aştığında otomatik satır kırma. Varsayılan olarak 80 karakter, yaygın ayarlar 80/100/120.
Trailing Comma: Diziler, nesneler ve fonksiyon parametreleri gibi çok satırlı yapılarda son elemandan sonra da virgül eklenmesi. Git diff'i daha temiz hale getirebilir ve sözdizimi hatalarından kaçınabilir. Prettier üç modu destekler: none/es5/all.
Mangle: Kod sıkıştırma sırasında değişken/fonksiyon adlarını kısaltma tekniği, anlamlı uzun adları a/b/c gibi kısa adlarla değiştirir, kod hacmini azaltırken aynı zamanda okuma zorluğunu da artırır.
Dead Code Elimination: Hiç çalıştırılmayan kodu (örneğin false koşulu altındaki kod, kullanılmayan değişkenler ve fonksiyonlar) kaldıran sıkıştırıcı optimizasyon tekniği, ürün hacmini azaltır.
CodeMirror: Bu araç tarafından kullanılan tarayıcı tarafı kod editörü bileşeni (sürüm 6), sözdizimi vurgulama, satır numaraları, parantez eşleştirme gibi profesyonel düzenleme işlevleri sağlar, çeşitli çevrimiçi IDE'lerde yaygın olarak kullanılır.
LZ-String: JavaScript ile uygulanmış bir LZ sıkıştırma algoritmasıdır, URL hash'inde kod içeriğini verimli bir şekilde sıkıştırmak ve saklamak için kullanılır. Yüksek sıkıştırma oranı ve hızlı çözme hızı, paylaşım bağlantısı senaryoları için uygundur.
localStorage: Tarayıcı tarafından sağlanan anahtar-değer yerel depolama API'si, kapasite yaklaşık 5-10MB, veriler kalıcı olarak saklanır (aktif olarak temizlenmedikçe). Bu araç, biçimlendirme geçmişini saklamak için kullanır.
ESLint: Bir JavaScript/TypeScript statik kod denetim aracıdır (Linter), esas olarak kod kalitesinden ve en iyi uygulamalardan sorumludur, genellikle Prettier ile birlikte kullanılır (Prettier formatla ilgilenir, ESLint kaliteyle ilgilenir).

Desteklenen Diller ve Dosya Formatları

Araç, sol üst köşedeki menü aracılığıyla serbestçe geçiş yapılabilen 7 popüler ön uç dilini destekler:

Dil	Dosya Uzantısı	Biçimlendirme Motoru	Sıkıştırma Motoru
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (önce tipleri kaldırır)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (önce tipleri kaldırır)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Özel uygulama
JSON	`.json`	Prettier (JSON)	JSON.stringify

Biçimlendirme Yapılandırması Genel Bakışı

12 yapılandırılabilir biçimlendirme parametresi ve işlevleri:

Ayar	Kullanılabilir Değerler	Varsayılan Değer	Açıklama
tabWidth Girinti Boyutu	`2 / 4 / 8 / Tab`	`2 boşluk`	Her girinti seviyesi için boşluk sayısı, veya Tab karakteri kullanımı
semi Noktalı Virgül	`true / false`	`true`	Deyim sonuna noktalı virgül eklenip eklenmeyeceği
singleQuote Tek Tırnak	`true / false`	`false (çift tırnak)`	JS dizelerinin tek tırnak mı yoksa çift tırnak mı kullandığı
trailingComma Sondaki Virgül	`none / es5 / all`	`es5`	Çok satırlı yapılarda son elemandan sonra sondaki virgül eklenip eklenmeyeceği
bracketSpacing Parantez Aralığı	`true / false`	`true`	Nesne kıvırcık parantezleri içine boşluk eklenip eklenmeyeceği
arrowParens Ok Parantezleri	`always / avoid`	`always`	Tek parametreli ok fonksiyonunda parantez eklenip eklenmeyeceği
printWidth Yazdırma Genişliği	`Sayı (önerilen 80-120)`	`80`	Satır başına maksimum karakter sayısı, aşıldığında otomatik satır kırma
jsxSingleQuote JSX Tek Tırnak	`true / false`	`false`	JSX öznitelik değerleri tek tırnak kullanır (varsayılan: çift tırnak)
jsxBracketSameLine JSX Parantez Aynı Satır	`true / false`	`false`	Çok satırlı JSX'in sağ parantezinin son öznitelikle aynı satırda olup olmayacağı
quoteProps Özellik Tırnakları	`as-needed / preserve / consistent`	`as-needed`	Nesne özellik adlarına ne zaman tırnak ekleneceği

JSX Sıkıştırma Öncesi ve Sonrası Efekt Karşılaştırması

Tipik bir React bileşeni örneğinde, sıkıştırma öncesi ve sonrası hacim değişikliğini gösteriyoruz:

Karşılaştırma Noktası	Biçimlendirilmiş (Geliştirme)	Sıkıştırılmış (Üretim)	Sıkıştırma Oranı
Kod Hacmi	Yaklaşık 2.5 KB	Yaklaşık 0.8 KB	`~68%`
Satır Sayısı	Yaklaşık 80 satır	1 satır	`~99%`
Değişken Adları	Anlamlı adlar	Tek harfler a/b/c/d	`—`
Yorumlar	Tüm yorumlar korunur	Tümü kaldırılır	`—`
Okunabilirlik	Yüksek (hata ayıklama ve okuma)	Çok düşük (yalnızca makine okuması için)	`—`
Uygulanabilir Senaryolar	Geliştirme, hata ayıklama, inceleme	Üretim dağıtımı, CDN dağıtımı	`—`

Privacy & Security

Bu JSX biçimlendirme aracının tüm işlemleri tamamen tarayıcıda yerel olarak gerçekleştirilir: girdiğiniz veya yüklediğiniz kod yalnızca tarayıcıda JavaScript ile biçimlendirilir ve sıkıştırılır, ağ üzerinden hiçbir harici sunucuya gönderilmez. Prettier ve Terser, doğrudan tarayıcı tarafında çalıştırılabilen saf JavaScript kütüphaneleridir. Geçmiş, tarayıcının localStorage'ında (yerel depolama) saklanır, yalnızca mevcut cihaz ve tarayıcıda görünür. URL paylaşım özelliği, kodu LZ-String aracılığıyla sıkıştırır ve URL hash bölümüne kodlar (#'dan sonraki içerik sunucuya gönderilmez). Site izleme çerezi kullanmaz, kullanıcı tarafından girilen kod içeriğini toplamaz. Bu aracı çevrimdışı kullanabilirsiniz, temel işlevler normal şekilde çalışır.

Authoritative References

prettier.ioPrettier Resmi Belgeleri
terser.orgTerser - JavaScript Sıkıştırıcı
react.devReact Resmi Belgeleri - JSX'e Giriş