Prettier: Modern Frontend Geliştirmede Kod Biçimlendirme Rehberi

## Modern Yazılım Geliştirmede Prettier'ın Rolü **Prettier**, günümüz modern frontend geliştirme ekosisteminde kod kalitesini ve ekip içi uyumu sağlamak adına kullanılan en popüler 'opinionated' (fikir sahibi) kod biçimlendirme aracıdır. Yazılım projelerinde kodun nasıl yazıldığından ziyade, nasıl göründüğü üzerine odaklanan bu araç, geliştiricilerin stil tartışmalarına harcadığı zamanı minimize ederek doğrudan iş mantığına odaklanmalarını sağlar. **Prettier**, kaynak kodu okur ve kendi kuralları çerçevesinde, maksimum satır uzunluğunu da dikkate alarak kodu yeniden yazdırır. Bu süreçte kodun işlevselliği asla değişmez, sadece görsel sunumu standartlaştırılır. ## Prettier Nedir ve Neden Kullanılmalıdır? Teknik anlamda Prettier, kodunuzu bir **AST (Abstract Syntax Tree - Soyut Sözdizimi Ağacı)** yapısına dönüştüren ve ardından bu ağacı belirli stil kurallarıyla tekrar metne döken bir araçtır. Geleneksel 'linter' araçlarından (örneğin ESLint) farklı olarak, sadece stilistik hataları düzeltmekle kalmaz, tüm dosyayı baştan aşağı tutarlı bir formata sokar. Prettier kullanmanın temel avantajları şunlardır: - **Zaman Tasarrufu:** Kod incelemelerinde (Code Review) 'burada boşluk olmalı' veya 'tek tırnak kullanmalısın' gibi yorumları ortadan kaldırır. - **Evrensel Standart:** Ekibe yeni katılan bir geliştirici, projenin yazım stiline anında uyum sağlar. - **Hata Azaltma:** Yanlış hizalanmış parantezler veya karmaşık iç içe geçmiş yapılar, Prettier tarafından düzenlendiğinde mantıksal hataların fark edilmesi kolaylaşır. ## Prettier Kurulumu ve Başlangıç Adımları Bir projeye Prettier eklemek oldukça basittir. Node.js ortamında çalıştığınızı varsayarak, paket yöneticiniz aracılığıyla kurulumu gerçekleştirebilirsiniz. ```bash npm install --save-dev --save-exact prettier ``` Kurulumdan sonra, projenizin kök dizininde boş bir yapılandırma dosyası oluşturmanız önerilir. Bu, editörlerin Prettier'ın projede aktif olduğunu anlamasını sağlar: ```bash echo {}> .prettierrc.json ``` ## Detaylı Yapılandırma ve .prettierrc Kullanımı Prettier, 'minimum konfigürasyon' felsefesini benimsemiş olsa da, projenizin ihtiyaçlarına göre belirli kuralları özelleştirebilirsiniz. Aşağıdaki örnek, profesyonel bir projede yaygın olarak kullanılan bir `.prettierrc` içeriğidir: ```json { "semi": true, "trailingComma": "all", "singleQuote": true, "printWidth": 80, "tabWidth": 2, "useTabs": false, "bracketSpacing": true, "arrowParens": "always" } ``` Bu kuralların teknik açıklamaları: - **semi**: İfadelerin sonuna noktalı virgül eklenip eklenmeyeceğini belirler. - **singleQuote**: Çift tırnak yerine tek tırnak kullanımını zorunlu kılar. - **printWidth**: Bir satırın maksimum karakter uzunluğunu belirler. Bu sınır aşıldığında Prettier kodu alt satıra böler. ## Kod Biçimlendirme Örnekleri ### JavaScript Biçimlendirme Prettier öncesi karmaşık ve düzensiz bir kod bloğu: ```javascript function myFunction(arg1,arg2, arg3){const result=arg1+arg2+arg3; return {data:result,status:"success"}} ``` Prettier uygulandıktan sonraki hali: ```javascript function myFunction(arg1, arg2, arg3) { const result = arg1 + arg2 + arg3; return { data: result, status: 'success', }; } ``` ### HTML ve Şablon Yapıları HTML dosyalarında girintileme ve niteliklerin (attributes) düzenlenmesi okunabilirliği artırır: ```html ``` ### CSS ve SCSS Düzenleme CSS kurallarının standart bir yapıda olması, büyük projelerde bakım kolaylığı sağlar: ```css .card-container { display: flex; flex-direction: column; padding: 1rem; margin: 0 auto; background-color: #ffffff; } ``` ## Prettier ve ESLint Entegrasyonu En sık sorulan sorulardan biri, Prettier'ın ESLint ile nasıl birlikte çalışacağıdır. **ESLint** bir linter'dır (kod kalitesi ve mantıksal hataları denetler), **Prettier** ise bir formatter'dır (görsel biçimlendirme yapar). İkisini çakışmadan kullanmak için `eslint-config-prettier` paketini kullanmalısınız. Bu paket, ESLint'in Prettier ile çakışan tüm görsel kurallarını devre dışı bırakır. ```bash npm install --save-dev eslint-config-prettier ``` ESLint yapılandırmanızda (`.eslintrc`): ```json { "extends": [ "eslint:recommended", "prettier" ] } ``` ## Dosyaları Hariç Tutma: .prettierignore Derlenmiş dosyaların (dist, build) veya node_modules klasörünün biçimlendirilmesini istemeyiz. Bunun için `.prettierignore` dosyası kullanılır: ```text # Build çıktıları dist/ build/ # Paket yöneticileri node_modules/ # Log dosyaları *.log # Veritabanı dosyaları *.db ``` ## Gelişmiş Özellikler: Overrides Farklı dosya türleri için farklı kurallar uygulamak isteyebilirsiniz. Örneğin, Markdown dosyalarında farklı bir satır genişliği kullanmak için: ```json { "overrides": [ { "files": "*.md", "options": { "printWidth": 100, "proseWrap": "always" } } ] } ``` ## Prettier Alternatifleri ve Karşılaştırma Prettier tek seçenek değildir, ancak en yaygın olanıdır. İşte modern alternatiflerle karşılaştırması: | Özellik | Prettier | Biome (Rome) | ESLint (stylistic) | StandardJS | | :--- | :--- | :--- | :--- | :--- | | **Hız** | Orta | Çok Hızlı (Rust tabanlı) | Yavaş | Orta | | **Yapılandırma** | Düşük (Opinionated) | Orta | Çok Yüksek | Sıfır | | **Ekosistem** | Çok Geniş | Gelişmekte | Dev | Sabit | | **Dil Desteği** | Çok Geniş | Sınırlı (JS/TS/JSON) | JS/TS | JS Sadece | > **Not:** Biome, Rust ile yazıldığı için Prettier'dan çok daha hızlıdır ancak henüz Prettier'ın sunduğu geniş eklenti ve dil desteğine sahip değildir. ## CI/CD Süreçlerinde Prettier Kullanımı Kodun sadece geliştirici makinesinde değil, repoya girmeden önce de doğru formatta olduğunu doğrulamak kritik önem taşır. CI pipeline'ınızda şu komutu çalıştırarak kontrol sağlayabilirsiniz: ```bash npx prettier --check . ``` Eğer formatlanmamış bir dosya varsa, bu komut hata kodu döndürecek ve build işlemini durduracaktır. ### Git Hooks (Husky) Entegrasyonu Commit atmadan önce kodun otomatik formatlanması için Husky ve lint-staged kullanımı profesyonel bir yaklaşımdır: ```json { "lint-staged": { "**/*": "prettier --write --ignore-unknown" } } ``` ## Performans İpuçları 1. **Cache Kullanımı:** Büyük projelerde `--cache` bayrağını kullanarak sadece değişen dosyaların taranmasını sağlayın. 2. **Editör Entegrasyonu:** 'Format on Save' (Kaydederken Biçimlendir) özelliğini açarak CLI kullanımını azaltın. 3. **Hafif Yapılandırma:** Gereksiz pluginlerden kaçının. ## Sık Yapılan Hatalar - **Linter ile Çakıştırma:** ESLint kurallarıyla Prettier kurallarını manuel olarak eşitlemeye çalışmak. (Çözüm: `eslint-config-prettier` kullanın). - **Büyük Dosyaları Hariç Tutmamak:** `node_modules` gibi devasa klasörlerin taranmasına izin vermek performansı düşürür. - **Versiyon Uyumsuzluğu:** Ekip üyelerinin farklı Prettier versiyonları kullanması. (Çözüm: `package.json` içinde versiyonu sabitleyin). ## Sık Sorulan Sorular (FAQ) 1. **Prettier kodumu bozabilir mi?** Hayır, Prettier sadece AST üzerinden çalışır ve kodun mantığını değiştirmez, sadece sözdizimi görünümünü düzenler. 2. **Neden bazı kuralları değiştiremiyorum?** Prettier 'opinionated' bir araçtır. Tartışmaları bitirmek için sınırlı sayıda özelleştirme seçeneği sunar. 3. **Prettier sadece JavaScript için mi?** Hayır; TypeScript, HTML, CSS, Less, SCSS, JSON, GraphQL, Markdown ve YAML gibi birçok dili destekler. 4. **Performans sorunu yaşar mıyım?** Çok büyük dosyalarda (10.000+ satır) anlık gecikme olabilir, ancak genel kullanımda oldukça hızlıdır. 5. **Editör eklentisi kurmak yeterli mi?** Hayır, proje bazlı bir `prettier` bağımlılığı ve `.prettierrc` dosyası eklemek, tüm ekibin aynı kuralları kullanmasını garantiler. ## Özet ve Sonuç Prettier, modern web geliştirme süreçlerinde bir lüks değil, gerekliliktir. Kod tabanının okunabilirliğini artırır, ekip içi stil tartışmalarını sonlandırır ve CI/CD süreçlerinde standart bir çıktı sağlar. ESLint ile doğru entegre edildiğinde, yazılım kalitesini artıran en güçlü araçlardan birine dönüşür. Projenizin ölçeği ne olursa olsun, ilk günden itibaren Prettier kullanımını standartlaştırmak, teknik borcu (technical debt) azaltmanın en etkili yollarından biridir.