Sık Sorulan Sorular

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.

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.

.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.

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.

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

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.

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.

Üçü 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.