Loading…

Hakkında Çevrimiçi GraphQL Biçimlendirici

GraphQL SDL ve operasyonlarınızı okunabilir ve tutarlı tutun. Bu çevrimiçi GraphQL biçimlendirici, belgelerinizi yeniden girintilemek, sarmalamak ve normalleştirmek için Prettier'ın GraphQL ayrıştırıcısını kullanır. Mümkün olduğunda tarayıcıda çalışır ve gerekirse sunucu biçimlendiriciye geçer, böylece araçlar hakkında düşünmeden güvenilir çıktı alırsınız.

Bu GraphQL Biçimlendirici Ne Yapar

  • Tutarlı, topluluk standartı biçimlendirme uygulamak için Prettier'ın GraphQL ayrıştırıcısını kullanır
  • Sorguları, mutasyonları, abonelikleri, fragmentleri ve tam şema SDL'sini (tipler, arayüzler, birlikler, numaralandırmalar, girdiler, direktifler) destekler
  • Ayarlanabilir girinti: boşluk veya sekmeler seçin ve girinti boyutunu yapılandırın (1–8)
  • İsteğe bağlı satır uzunluğu / sarma kontrolü, yapılandırılabilir sütun genişliği ile
  • Açıklamaları (`"""…"""`) ve satır içi yorumları düzenlerini normalleştirirken bozulmadan korur
  • GraphQL belge yapınızı biçimlendirmenin bir parçası olarak doğrular; geçersiz sözdizimi, sessizce kodu bozmak yerine hataları gösterir
  • Hibrit yürütme: mümkün olduğunda Prettier'ı tarayıcıda çalıştırır ve gerekirse sunucu biçimlendiriciye geçer
  • .graphql / .gql dosyalarını yapıştırın veya yükleyin, ardından biçimlendirilmiş sonucu önizleyin, kopyalayın veya indirin

📝 GraphQL Çevrimiçi Nasıl Biçimlendirilir for graphql-formatter

1

GraphQL Kodunuzu Yapıştırın veya Yükleyin

GraphQL şemanızı veya sorgularınızı düzenleyiciye yapıştırın veya bir `.graphql` / `.gql` dosyasını bırakın. Biçimlendirici hem SDL hem de işlem belgeleri için çalışır.

2

Biçimlendirme Seçeneklerini Ayarlayın

Boşluk veya sekmeleri seçin, girinti boyutunu belirleyin ve tercih ettiğiniz satır uzunluğunu yapılandırın. Bu seçenekler Prettier'ın GraphQL biçimlendiricisine iletilir.

3

Biçimlendir, İncele ve Dışa Aktar

Değişiklikleri uygulamak için Biçimlendir'e tıklayın. Sonucu önizleme panosunda inceleyin, ardından düzenleyicinize geri kopyalayın veya biçimlendirilmiş dosyayı indirin.

Teknik Özellikler

Desteklenen Girdi

Standart GraphQL şema ve işlem belgeleri için tasarlanmıştır.

TürÖrneklerNotlar
Şema SDLschema.graphql, schema.gqlTipler, arayüzler, birlikler, numaralandırmalar, girdiler, direktifler, şema tanımı
İşlemlerqueries.graphql, app.gqlSorgular, mutasyonlar, abonelikler ve parçalar
Uzantılarayrı dosyalardaki şema uzantılarıörn., `extend type Query { … }` blokları

Biçimlendirme Motoru

Biçimlendirme, Prettier'ın GraphQL desteği kullanılarak gerçekleştirilir. Çoğu durumda Prettier, hafif bir çalışma zamanı aracılığıyla tarayıcıda çalışır. GraphQL eklentisi mevcut ortamda çözümlenemezse, biçimlendirici şeffaf bir şekilde sunucu tarafındaki bir Prettier çalışanına geri döner.

Mevcut Seçenekler (Prettier ile Eşlenmiş)

SeçenekDavranışTipik Değerler
Girinti StiliBoşluklar ve sekmeler arasında seçim yapınboşluk (varsayılan) veya sekme
Girinti BoyutuGirinti seviyesi başına boşluk sayısı (boşluk kullanılırken)1–8, varsayılan: 2
Satır UzunluğuUzun seçimleri kaydırma / bölme için hedef sütun0–120 (0 ≈ etkin bir şekilde kaydırma yok)

Sınırlar ve Performans

Araç, tipik GraphQL şemaları ve işlem dosyaları için ayarlanmıştır. Birkaç yüz KB ile ~2 MB arasındaki istekler genellikle güvenlidir; aşırı büyük belgeler zaman aşımları veya boyut korumaları ile karşılaşabilir.

Gizlilik & Güvenlik

GraphQL belgeleri tarayıcınızda veya encode64'ün biçimlendirici arka ucu üzerinde biçimlendirilir. Bunlar yürütülmez veya üçüncü taraf hizmetlere gönderilmez. Hassas şemalar için, aynı yapılandırmayı Prettier ile yerel olarak kopyalayabilirsiniz.

Komut Satırı Eşdeğeri (Prettier)

Eğer Node.js ve Prettier zaten yüklüyse, bu davranışı yerel olarak yeniden oluşturabilirsiniz.

Node.js (tüm platformlar)

Bir GraphQL şema dosyasını yerinde biçimlendir

npx prettier --write schema.graphql

Prettier, dosya uzantısına dayanarak GraphQL'yi otomatik olarak algılar.

Özel girinti ve satır uzunluğu ile biçimlendir

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

Çevrimiçi araçta sunulan girinti ve sarma seçeneklerini yansıtır.

Stdin'den biçimlendir (ör. başka bir araçtan borulanmış)

cat input.graphql | npx prettier --stdin-filepath input.graphql

Kabuk betiklerinde, CI işlem hatlarında veya Git kancalarında kullanışlıdır.

Yaygın GraphQL Biçimlendirici Kullanım Senaryoları

API Şema Geliştirme

  • Büyük şema dosyalarını kolay gezinme için tutarlı biçimlendirilmiş tutun
  • Şema PR'larındaki gürültülü boşluk farklarını azaltın
  • Kod üretim araçları için temiz SDL hazırlayın
# Önce
type User{ id:ID! name:String!}

# Sonra
type User {
  id: ID!
  name: String!
}

Önyüz İşlemleri & Parçaları

  • Birden fazla uygulama veya paket arasında paylaşılan sorguları normalleştirin
  • Hata ayıklama sırasında iç içe seçimleri taramayı kolaylaştırın
  • Belge parçacıklarını ve oyun alanı örneklerini güzelce biçimlendirilmiş tutun

Testler, Sabitler & Araçlar

  • Anlık görüntü testlerinde kullanılan GraphQL sabitlerini standartlaştırın
  • Biçimlendirmeyi önceden işleme kancalarına veya CI işlerine entegre edin
  • Temiz belgeleri şema doğrulama veya fark araçlarına besleyin

❓ Frequently Asked Questions

GraphQL biçimlendirici gerçekte neyi değiştirir?

GraphQL belgelerinizi Prettier'ın GraphQL kurallarına göre yeniden yapılandırır: girinti, satır sonları, noktalama çevresindeki boşluklar ve seçimler ile alanların düzeni. Alanları yeniden adlandırmaz, argüman eklemez veya şema anlamını değiştirmez.

Hem işlemleri hem de şema SDL'sini destekliyor mu?

Evet. Biçimlendirici, standart GraphQL işlemleri (sorgular, mutasyonlar, abonelikler, parçalar) ve şema tanım dili (tipler, arayüzler, numaralandırmalar, birleşimler, girdiler, yönergeler, şema tanımları ve uzantıları) için çalışır.

Yorumlar ve açıklama dizeleri korunuyor mu?

Evet. Üç tırnaklı açıklama dizeleri (`"""…"""`) ve satır içi `#` yorumları korunur. Biçimlendirici onları yeniden akışlandırabilir veya çevreleyen boşluğu ayarlayabilir ancak kasıtlı olarak kaldırmaz.

GraphQL kodum çalıştırılıyor mu?

Hayır. Araç, GraphQL kodunuzu biçimlendirmek için metin olarak ayrıştırır, ancak sorguları çalıştırmaz veya herhangi bir GraphQL sunucusuna bağlanmaz.

Biçimlendirme nerede çalışır: istemci mi sunucu mu?

Biçimlendirici, yanıt hızı için Prettier'ı doğrudan tarayıcınızda çalıştırmayı tercih eder. Gerekli GraphQL eklentisi burada yüklenemezse, aynı seçeneklerle sunucudaki bir Prettier çalışanına geri döner.

Bu ücretsiz mi kullanılabilir?

Evet. Araç, performansı sabit tutmak için adil kullanım korumalarıyla ücretsizdir. Yoğun veya özel iş yükleri için, kendi ortamınızda Prettier ile aynı yapılandırmayı yansıtın.

Pro Tips

Best Practice

Lint eklemeden veya yıkıcı değişiklikler yapmadan önce, eski şemaları standartlaştırmak için bu biçimlendiriciyi kullanın; bu, sonraki farkların incelenmesini çok daha kolaylaştırır.

Best Practice

Yerel ve web biçimlendirmesini aynı tutmak için çevrimiçi araç ayarlarınızı (girinti boyutu ve satır uzunluğu) projenizin Prettier yapılandırmasıyla hizalayın.

Best Practice

Uzun gömülü GraphQL dizelerini kodunuzdan `.graphql` dosyalarına çıkarın, böylece tek tip şekilde biçimlendirilebilir ve yeniden kullanılabilirler.

Best Practice

Biçimlendirmeyi lint ile (örneğin, GraphQL ESLint) eşleştirerek, boşluk ve sarmalama dışındaki şema ve sorgu sorunlarını yakalayın.

Additional Resources

GraphQL Spesifikasyonu
Documentation
Prettier – GraphQL Biçimlendirme
Documentation
GraphQL Resmi Belgeleri – Öğrenin
Documentation
GraphQL ESLint (Lint Kuralları)
Documentation

Other Tools