Question 1

Prettier Config Generator nedir?

Accepted Answer

Prettier Config Generator, her Prettier seçeneğini görsel olarak yapılandırmanıza ve elde edilen .prettierrc dosyasını anında kopyalamanıza olanak tanıyan ücretsiz, etkileşimli bir web aracıdır. Manuel düzenleme gerekmez.

Question 2

Prettier nedir ve neden kullanmalıyım?

Accepted Answer

Prettier, kod tabanınızda tutarlı bir stili zorunlu kılan, görüş bildiren bir kod biçimlendiricisidir. Tüm orijinal stili kaldırır ve kodunuzu tek tip bir biçimde yeniden yazar, kod incelemelerindeki stil tartışmalarını ortadan kaldırır.

Question 3

.prettierrc dosyası nedir?

Accepted Answer

.prettierrc dosyası, projenizin kök dizinine yerleştirilen ve Prettier'a kodunuzu nasıl biçimlendireceğini söyleyen bir yapılandırma dosyasıdır. Girinti, tırnak stili ve satır genişliği gibi seçenekleri kontrol eder.

Question 4

Yapılandırmamı oluşturmak için bu aracı nasıl kullanırım?

Accepted Answer

Ana sayfada istediğiniz Prettier seçeneklerini seçin. Yapılandırmanız kenar çubuğunda gerçek zamanlı olarak güncellenir. JSON'u panonuza kopyalamak için "Yapılandırmayı Kopyala" düğmesine tıklayın, ardından projenizin kök dizinindeki bir .prettierrc dosyasına yapıştırın.

Question 5

Prettier Config Generator ücretsiz mi?

Accepted Answer

Evet, tamamen ücretsiz. Kayıt yok, hesap gerekmez ve kullanım sınırı yoktur. Araç ayrıca GitHub'da açık kaynaktır.

Question 6

Bu araç tüm Prettier seçeneklerini kapsıyor mu?

Accepted Answer

Evet. Bu araç, resmi olarak desteklenen her Prettier seçeneğini içerir; her biri için açıklamalar ve varsayılan değerler gösterilir, böylece bilinçli seçimler yapabilirsiniz.

Question 7

Oluşturulan yapılandırmayı nasıl kopyalayıp kullanırım?

Accepted Answer

Masaüstünde kenar çubuğundaki "Yapılandırmayı Kopyala" düğmesine tıklayın veya mobilde yüzen eylem düğmesine dokunun. Kopyalanan JSON içeriğini projenizin kök dizinindeki .prettierrc adlı yeni bir dosyaya yapıştırın.

Question 8

.prettierrc, prettier.config.js ve package.json içindeki prettier anahtarı arasındaki fark nedir?

Accepted Answer

Üçü de Prettier'ı yapılandırmanın geçerli yollarıdır. .prettierrc, JSON veya YAML'i destekler. prettier.config.js bir JavaScript modülüdür ve dinamik yapılandırmaya izin verir. package.json içindeki prettier anahtarı her şeyi tek dosyada tutar. İşlevsellik aynıdır — bu bir tercih meselesidir.

Question 9

Prettier; TypeScript, React ve Vue ile çalışıyor mu?

Accepted Answer

Evet. Prettier; TypeScript, JSX/TSX (React), Vue tek dosyalı bileşenler ve diğer birçok format için yerleşik desteğe sahiptir. Bazı framework'ler için ek eklentiler yüklemeniz gerekebilir.

Question 10

Prettier'ı VS Code ile nasıl entegre ederim?

Accepted Answer

VS Code marketplace'ten "Prettier - Code formatter" uzantısını yükleyin. Ardından VS Code ayarlarınıza "editor.defaultFormatter": "esbenp.prettier-vscode" ve "editor.formatOnSave": true ekleyin.

Question 11

Prettier'ı projemin tamamı üzerinde nasıl çalıştırırım?

Accepted Answer

Proje kökünüzde npx prettier --write . komutunu çalıştırın. Bu, tüm desteklenen dosyaları biçimlendirir. Ekibiniz genelinde tutarlı sonuçlar için npm install --save-dev prettier ile prettier'ı dev bağımlılık olarak ekleyin.

Question 12

Prettier hangi dilleri ve dosya türlerini destekler?

Accepted Answer

Prettier; JavaScript, TypeScript, JSX, TSX, CSS, SCSS, Less, HTML, Vue, Angular, JSON, YAML, Markdown ve daha fazlasını destekler. Ayrıca eklentilerle ek dillere genişletilebilir.

Question 13

Dosyaları Prettier biçimlendirmesinden nasıl hariç tutarım?

Accepted Answer

Proje kökünüzde .prettierignore dosyası oluşturun ve .gitignore ile aynı söz dizimini kullanın. Orada listelenen dosyalar ve dizinler Prettier tarafından atlanır.

Question 14

Prettier'ı ESLint ile birlikte kullanabilir miyim?

Accepted Answer

Evet. Prettier ile çakışan ESLint biçimlendirme kurallarını devre dışı bırakmak için eslint-config-prettier yükleyin. Biçimlendirme için Prettier'ı ve kod kalitesi kuralları için ESLint'i çalıştırın — birbirlerini mükemmel şekilde tamamlarlar.

Question 15

printWidth seçeneği ne işe yarar?

Accepted Answer

printWidth, Prettier'a kodu sığdırmaya çalışması gereken satır uzunluğunu söyler. Varsayılan 80'dir. Bu, esnek bir hedeftir — Prettier, satırı kırmak kodu daha az okunabilir hale getirecekse bu sınırı aşar.

Question 16

singleQuote ile jsxSingleQuote arasındaki fark nedir?

Accepted Answer

singleQuote, Prettier'ın JavaScript/TypeScript dizelerinde tek tırnak kullanıp kullanmayacağını kontrol eder. jsxSingleQuote, özellikle JSX nitelik dizelerini kontrol eder. Bunları bağımsız olarak ayarlayabilirsiniz.

Question 17

Bu sitedeki arama özelliğini nasıl kullanırım?

Accepted Answer

Prettier seçeneklerini ada, açıklamaya veya anahtar kelimeye göre filtrelemek için sayfanın üst kısmındaki arama çubuğunu kullanın. Sonuçlar yazdıkça anında güncellenir.

Question 18

Bu site karanlık modu destekliyor mu?

Accepted Answer

Evet. Açık mod, karanlık mod ve sistem tercihi arasında geçiş yapmak için başlıktaki tema değiştirme düğmesine tıklayın. Seçiminiz otomatik olarak kaydedilir.

Question 19

Prettier'ın varsayılan yapılandırması nedir?

Accepted Answer

Prettier varsayılanları şunları içerir: printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: false, trailingComma: "all", bracketSpacing: true ve arrowParens: "always".

Question 20

Bir hata nasıl bildirilir veya bu projeye nasıl katkıda bulunulur?

Accepted Answer

GitHub deposunda bir issue veya pull request açın. Proje; yeni özellikler, hata düzeltmeleri ve çeviri iyileştirmeleri dahil her türlü katkıyı memnuniyetle karşılar.

Question 21

Bu araç hangi Prettier sürümlerini destekler?

Accepted Answer

Sürüm açılır menüsünden herhangi bir Prettier 3.x sürümünü seçebilirsiniz — 3.0'dan 3.6'ya ve "latest" dahil. Seçilen sürümün paketi jsDelivr'dan talep üzerine yüklenir, böylece seçenek listesi her zaman o sürümün gerçek şemasıyla eşleşir.

Question 22

Kodunuz sekmesinde hangi dilleri biçimlendirebilirim?

Accepted Answer

TypeScript, JavaScript, Flow, CSS, SCSS, Less, HTML, Vue, Angular şablonları, JSON, JSON5, yorumlu JSON, Markdown, MDX, YAML ve GraphQL. Ayrıştırıcı, girişten otomatik olarak algılanır, ancak açılır menüden geçersiz kılabilirsiniz.

Question 23

Paylaşılabilir URL nasıl çalışır?

Accepted Answer

Paylaş düğmesine tıklayın; geçerli Prettier sürümü, seçili seçenekler, kod ve ayrıştırıcı geçersiz kılması LZ ile sıkıştırılarak URL hash'ine paketlenir ve panonuza kopyalanır. Bu bağlantıyı açmak tam olarak aynı yapılandırmayı geri yükler. Sunucuya hiçbir şey gönderilmez — her şey tarayıcıda kalır.

Question 24

Karşılaştırmanın yanındaki token sayısı ne anlama gelir?

Accepted Answer

Girdiniz ve çıktınızın seçili modelde kaç AI tokeni tutacağını gösterir. GPT-4o / GPT-4 / GPT-3.5, tam sayım için resmi BPE tokenleştiricilerini kullanır; Claude, Gemini, Llama ve Mistral, "~" ön ekiyle karakter tabanlı bir yaklaşım kullanır.

Question 25

Sayfa yenilemesinden sonra çalışmam korunur mu?

Accepted Answer

Evet. Prettier sürümünüz, seçenek tercihleriniz ve bölünmüş görünüm / tokenleştirici tercihleriniz localStorage'a kaydedilir, böylece yeniden yükleme her şeyi geri yükler. Sayfayı açtığınızda paylaşılabilir bir URL hash'i mevcutsa, o öncelik kazanır.

Question 26

Biçimlendirme hatası şeridi neden bazen görünür?

Accepted Answer

Prettier'ın ayrıştırıcısı girdinizi ayrıştıramadığında — genellikle seçilen ayrıştırıcı koda uymadığı için (örn. CSS seçildi ama JSX yapıştırıldı) — hata mesajı karşılaştırmanın üzerindeki kırmızı şeritte görünür. Ayrıştırıcıyı kodunuza uyacak şekilde değiştirin, hata kaybolur.

Question 27

Yapılandırmamı JavaScript dışındaki dillere karşı önizleyebilir miyim?

Accepted Answer

Evet. Önizleme sekmesinin karşılaştırma anahtarının yanında kendi ayrıştırıcı açılır menüsü vardır ve her ayrıştırıcı amaca yönelik bir örnekle gelir — CSS, SCSS, Less, HTML, Vue, Angular, JSON / JSON5 / JSONC, Markdown, MDX, YAML, GraphQL artı TypeScript / JS. Ayrıştırıcıları değiştirmek, eşleşen örneği geçerli seçeneklerinizle yeniden biçimlendirir, böylece proseWrap, htmlWhitespaceSensitivity ve vueIndentScriptAndStyle gibi dile özgü seçeneklerin etkilerini göstermek için bir yeri olur. Seçiminiz yeniden yüklemeler arasında korunur.

Sık Sorulan Sorular