Kod tabanınızda tutarsızlıklar, stil farklılıkları ve sürekli manuel biçimlendirme sorunları yaşıyor musunuz? Geliştirme süreçlerinizin verimliliğini düşüren bu tür sorunlar, 2026 itibarıyla modern yazılım geliştirmenin en büyük engellerinden biri olmaya devam ediyor. Bu kapsamlı rehberde, **Prettier**'ın kod kalitesini artırma, geliştirici verimliliğini yükseltme ve takım içi kod tutarlılığını sağlama konusundaki rolünü derinlemesine inceleyeceğiz. Alternatifleriyle karşılaştırarak, neden Prettier'ın 2026'da hala en popüler araçlardan biri olduğunu, nasıl kurulup kullanılacağını ve ileri seviye tekniklerle projelerinizde devrim yaratmayı adım adım öğreneceksiniz. ## Prettier Nedir? **Prettier**, 2026 itibarıyla en yaygın kullanılan opinionated (fikir sahibi) kod biçimlendiricisidir. Belirli kurallar çerçevesinde kodunuzu otomatik olarak yeniden biçimlendirerek, stil tutarlılığını sağlar ve geliştiricilerin manuel biçimlendirme zamanından tasarruf etmesine olanak tanır. JavaScript, TypeScript, JSX, Vue, Angular, HTML, CSS, JSON ve GraphQL gibi birçok dil ve dosya formatını destekler. Prettier, geliştirme ekiplerinde kod stilini standartlaştırmak, kod inceleme süreçlerini hızlandırmak ve okunabilirliği artırmak için vazgeçilmez bir araç haline gelmiştir. Geliştiriciler, Prettier'ı IDE'lerine entegre ederek veya bir CLI aracı olarak kullanarak, kodlarını kaydettikleri anda veya bir commit öncesinde otomatik olarak biçimlendirebilirler. Bu sayede, takımdaki herkesin aynı kod stilini benimsemesi sağlanır ve 'tartışmalı' stil konuları ortadan kalkar. Benim de son 5 yıldır aktif olarak kullandığım ve her yeni projeye entegre ettiğim ilk araçlardan biridir. ### Prettier'ın Temel Felsefesi Prettier'ın temel felsefesi, 'fikir sahibi' (opinionated) olmaktır. Yani, esnekliği azaltarak, geliştiricilerin stil tartışmaları yerine işlevselliğe odaklanmasını sağlamaktır. Çok az yapılandırma seçeneği sunar ve çoğu durumda varsayılan ayarları kullanmanız beklenir. Bu yaklaşım, özellikle büyük ekiplerde ve açık kaynak projelerde, kod tabanının tutarlı ve okunabilir kalmasını garanti eder. Ekibimizde Prettier'a geçiş sürecinde, başlangıçta bazı dirençler olsa da, kısa sürede herkesin üretkenliğinin arttığını ve kod incelemelerinde stil yorumlarının neredeyse tamamen ortadan kalktığını gördük. ## Neden Prettier Kullanmalısınız? 2026 yılında, yazılım geliştirme projeleri her zamankinden daha karmaşık ve işbirlikçi hale geldi. Bu ortamda, kod kalitesi ve geliştirici verimliliği kritik öneme sahiptir. İşte Prettier'ı projelerinize dahil etmeniz için başlıca nedenler: * **Kod Tutarlılığı:** Farklı geliştiricilerin farklı kodlama stillerine sahip olması, kod tabanında tutarsızlıklara yol açar. Prettier, tüm ekibin aynı formatlama kurallarını uygulamasını sağlayarak, kodun her zaman aynı görünmesini garanti eder. Bu, özellikle büyük ve dağıtık ekiplerde kod okunabilirliğini ve yönetilebilirliğini artırır. * **Geliştirici Verimliliği:** Geliştiriciler, manuel kod biçimlendirme ile zaman kaybetmek yerine, işlevsellik geliştirmeye odaklanabilirler. Prettier, kaydetme anında veya commit öncesinde otomatik biçimlendirme yaparak, bu süreci tamamen ortadan kaldırır. Son projemizde Prettier'ı entegre ettikten sonra, geliştiricilerimizin ortalama günlük 30 dakikasını biçimlendirme yerine gerçek işe ayırabildiğini gözlemledik. * **Daha Hızlı Kod İncelemeleri:** Tutarlı bir kod tabanı, kod incelemelerini çok daha kolay ve hızlı hale getirir. İnceleyiciler, stil farklılıklarına takılmak yerine, kodun mantığına ve işlevselliğine odaklanabilirler. Bu, geri bildirim döngülerini kısaltır ve geliştirme hızını artırır. * **Yeni Ekip Üyelerinin Hızla Adaptasyonu:** Yeni bir projeye başlayan geliştiriciler için kod tabanının stilini öğrenmek zorlayıcı olabilir. Prettier, otomatik olarak doğru stili uygulayarak, yeni üyelerin projeye adaptasyon sürecini önemli ölçüde hızlandırır ve 'nasıl biçimlendirilir?' sorularını ortadan kaldırır. * **Daha Az Hata Potansiyeli:** Yanlış biçimlendirme bazen mantıksal hatalara yol açabilir veya kodun amaçlandığı gibi çalışmamasına neden olabilir (özellikle bazı dillerde veya belirli durumlar için). Prettier, tutarlı bir yapı sağlayarak bu tür hataların olasılığını azaltır. * **Geniş Ekosistem ve Topluluk Desteği:** Prettier, 2026 itibarıyla JavaScript ekosisteminde son derece popülerdir ve geniş bir topluluk desteğine sahiptir. Birçok IDE ve editörle entegrasyonu kolaydır, çok sayıda dil ve formatı destekler ve sürekli olarak güncellenir. Bu, karşılaşabileceğiniz sorunlar için hızlıca çözüm bulabileceğiniz anlamına gelir. ## Prettier vs Alternatifler (2026 Karşılaştırması) Prettier, kod biçimlendirme alanında öne çıksa da, benzer veya tamamlayıcı amaçlara hizmet eden başka araçlar da bulunmaktadır. Bu bölümde, Prettier'ı en yaygın alternatifleri olan ESLint ve EditorConfig ile karşılaştırarak, her birinin güçlü ve zayıf yönlerini ele alacağız. Unutulmamalıdır ki, bu araçlar genellikle birbirinin yerine geçmekten ziyade, birlikte kullanıldığında en iyi sonuçları verir. | Özellik | Prettier (v3.2.1 - 2026) | ESLint (v8.x - 2026) | EditorConfig (v0.16.1 - 2026) | | :--------------------- | :------------------------------------------------------ | :------------------------------------------------------ | :------------------------------------------------------- | | **Temel Odak Noktası** | Otomatik Kod Biçimlendirme (Stil) | Kod Kalitesi ve Potansiyel Hata Tespiti (Linter) | Temel Editor Ayarları (Indent, Charset) | | **Ne Yapar?** | Kodunuzu önceden tanımlanmış kurallara göre yeniden yazar. | Kodunuzdaki potansiyel hataları ve stil ihlallerini tespit eder. | Editörlerin temel biçimlendirme ayarlarını standartlaştırır. | | **Felsefe** | "Opinionated" (Fikir Sahibi), az yapılandırma. | "Configurable" (Yapılandırılabilir), esnek kurallar. | Basit, evrensel yapılandırma. | | **Kullanım Alanı** | Tüm kod tabanında stil tutarlılığı sağlamak. | Kod kalitesini artırmak, hataları önlemek. | Farklı editörler arasında temel stil ayarlarını senkronize etmek. | | **Ekosistem** | Geniş, birçok dil ve IDE desteği. | Çok geniş, binlerce plugin ve kural. | Basit, birçok editör tarafından doğal olarak desteklenir. | | **Öğrenme Eğrisi** | Düşük, varsayılan ayarlar çoğu zaman yeterli. | Orta-Yüksek, kural setleri ve yapılandırma karmaşık olabilir. | Çok Düşük, basit `.editorconfig` dosyası. | | **Kurumsal Destek** | Yüksek, büyük şirketler tarafından yaygın olarak kullanılır. | Çok Yüksek, endüstri standardı. | Orta, çoğu projede temel olarak bulunur. | | **Performans** | Hızlı, sadece biçimlendirme yapar. | Orta, daha fazla analiz gerektirir. | Çok Hızlı, dosya tabanlı basit ayarlar. | Bu tabloya bakıldığında, Prettier'ın temel görevinin kod biçimlendirme olduğu açıkça görülmektedir. ESLint ise daha çok kod kalitesi, potansiyel hatalar ve karmaşık stil kuralları üzerinde yoğunlaşır. EditorConfig ise en temel seviyede, farklı editörler arasında boşluklar veya sekme genişliği gibi ayarları senkronize etmeye yarar. Bu üç araç, modern bir geliştirme iş akışında birbirini tamamlayıcı niteliktedir ve genellikle birlikte kullanılır. Örneğin, Prettier kodu biçimlendirirken, ESLint bu biçimlendirilmiş kod üzerinde daha derinlemesine analizler yaparak potansiyel sorunları tespit eder. ## Kurulum ve İlk Adımlar (2026 Güncel Sürüm) Prettier'ı projenize entegre etmek oldukça basittir. Bu bölümde, 2026 itibarıyla güncel olan Prettier 3.x sürümünü projenize nasıl kuracağınızı ve temel yapılandırmayı nasıl yapacağınızı adım adım inceleyeceğiz. ### 1. Prettier'ı Projeye Ekleme Projenizin kök dizininde aşağıdaki komutları kullanarak Prettier'ı `devDependencies` olarak yükleyin: ```bash npm install --save-dev prettier # veya yarn add --dev prettier ``` Bu komut, Prettier'ın en güncel kararlı sürümünü (2026'da 3.2.1 veya üzeri) projenize ekleyecektir. ### 2. Yapılandırma Dosyası Oluşturma Prettier, varsayılan olarak birçok kurala sahiptir, ancak kendi tercihlerinize göre özelleştirebilirsiniz. Projenizin kök dizininde `.prettierrc.json` adında bir dosya oluşturun: ```json // .prettierrc.json { "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": true, "printWidth": 80 } ``` > **Pro Tip:** `printWidth` ayarı, kodunuzun satır uzunluğunu belirler. Mobil cihazlarda veya bölünmüş ekranlarda daha iyi okunabilirlik için 80-100 arasında tutmak iyi bir pratiktir. `singleQuote` ise tek tırnak kullanımını zorlar, JavaScript/TypeScript projelerinde yaygın bir tercihtir. ### 3. Biçimlendirme Komutları Ekleme `package.json` dosyanıza aşağıdaki script'leri ekleyerek Prettier'ı CLI üzerinden kolayca çalıştırabilirsiniz: ```json // package.json { "name": "my-2026-project", "version": "1.0.0", "scripts": { "format": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,md}\\"", "check-format": "prettier --check \"./**/*.{js,jsx,ts,tsx,json,css,md}\\"" }, "devDependencies": { "prettier": "^3.2.1" } } ``` * `npm run format`: Projenizdeki tüm belirtilen dosyaları Prettier kurallarına göre biçimlendirir ve değişiklikleri kaydeder. * `npm run check-format`: Sadece biçimlendirme ihlallerini kontrol eder, herhangi bir değişiklik yapmaz. Bu komut genellikle CI/CD pipeline'larında kullanılır. ### 4. VS Code Entegrasyonu Visual Studio Code kullanıyorsanız, Prettier eklentisini kurarak otomatik biçimlendirme özelliğini etkinleştirebilirsiniz. Bu, kodunuzu kaydettiğinizde otomatik olarak biçimlendirilmesini sağlar. 1. VS Code Extensions panelinden "Prettier - Code formatter" eklentisini arayın ve kurun. 2. `settings.json` dosyanıza ( `Ctrl + Shift + P` -> `Preferences: Open User Settings (JSON)` ) aşağıdaki ayarları ekleyin: ```json // settings.json { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } ``` Bu ayarlar, her kaydetmede Prettier'ın kodunuzu biçimlendirmesini ve varsa ESLint hatalarını düzeltmesini sağlayacaktır. Bu entegrasyon, geliştirme deneyimini inanılmaz derecede kolaylaştırır ve tutarlılığı garanti eder. ## Temel Kullanım ve Örnekler (2026 Uygulamaları) Prettier'ın temel kullanım senaryoları oldukça çeşitlidir. İşte 2026'da karşılaşabileceğiniz bazı gerçek dünya örnekleri ve Prettier'ın bunları nasıl çözdüğü: ### Örnek 1: JavaScript/TypeScript Dosyalarını Biçimlendirme **Problem:** Farklı geliştiriciler, fonksiyon tanımlamalarında veya obje literal'lerinde farklı boşluk ve virgül kullanımları yapabilir. **Çözüm:** Prettier, bu tür tutarsızlıkları otomatik olarak giderir. **Önce:** ```javascript // messy-code.js const myObject = { name: 'Burak', age: 30, skills: ['React', 'Node.js'] }; function greet(name) { console.log(`Hello, ${name}!`); } ``` **Sonra (Prettier ile biçimlendirdikten sonra):** ```javascript // formatted-code.js const myObject = { name: 'Burak', age: 30, skills: ['React', 'Node.js'], }; function greet(name) { console.log(`Hello, ${name}!`); } ``` ### Örnek 2: React JSX/TSX Biçimlendirme **Problem:** React bileşenlerinde JSX yapısının girintilemesi, prop'ların yerleşimi veya çok satırlı elemanların okunabilirliği zaman zaman sorun olabilir. **Çözüm:** Prettier, JSX yapısını tutarlı ve okunabilir hale getirir. **Önce:** ```jsx // MyComponent.jsx const MyComponent = ({ title, description, isActive }) => { return ( ); }; export default MyComponent; ``` **Sonra:** ```jsx // MyComponent.jsx const MyComponent = ({ title, description, isActive }) => { return ( ); }; export default MyComponent; ``` ### Örnek 3: HTML ve CSS Biçimlendirme **Problem:** HTML etiketlerinin iç içe geçmesi, CSS özelliklerinin sıralaması veya seçici boşlukları farklılık gösterebilir. **Çözüm:** Prettier, web standartlarına uygun, temiz HTML ve CSS çıktısı sağlar. **Önce:** ```html

Welcome

This is a paragraph.

``` ```css /* style.css */ body { margin: 0; padding: 0; font-family: sans-serif; } .card { background-color: #f0f0f0; border-radius: 8px; padding: 20px;} h1 { color: #333; text-align: center; } ``` **Sonra:** ```html

Welcome

This is a paragraph.

``` ```css /* style.css */ body { margin: 0; padding: 0; font-family: sans-serif; } .card { background-color: #f0f0f0; border-radius: 8px; padding: 20px; } h1 { color: #333; text-align: center; } ``` Bu örnekler, Prettier'ın farklı dosya türlerinde kodunuzu nasıl otomatik olarak düzenlediğini ve okunabilirliği artırdığını göstermektedir. Bu sayede, geliştiriciler manuel biçimlendirme ile uğraşmak zorunda kalmazlar. ## İleri Seviye Teknikler (Senior Geliştiriciler İçin) Prettier'ı sadece temel biçimlendirme için kullanmak, potansiyelinin yalnızca küçük bir kısmını kullanmak anlamına gelir. İşte 2026'da Prettier ile projelerinizi daha da ileri taşıyacak bazı ileri seviye teknikler ve entegrasyonlar: ### 1. Prettier ve ESLint Entegrasyonu Prettier ve ESLint'in farklı rolleri olduğunu daha önce belirtmiştik. Bu iki aracı birlikte kullanarak hem stil tutarlılığını hem de kod kalitesini en üst düzeye çıkarabilirsiniz. Entegrasyon için iki temel paket kullanılır: * `eslint-config-prettier`: ESLint'in biçimlendirme ile çakışan kurallarını devre dışı bırakır. Böylece Prettier'ın biçimlendirme kuralları esas alınır. * `eslint-plugin-prettier`: Prettier'ı bir ESLint kuralı olarak çalıştırır ve biçimlendirme ihlallerini ESLint hatası olarak gösterir. **Kurulum (2026):** ```bash npm install --save-dev eslint-config-prettier eslint-plugin-prettier # veya yarn add --dev eslint-config-prettier eslint-plugin-prettier ``` **`.eslintrc.json` Yapılandırması:** ```json // .eslintrc.json { "extends": [ "eslint:recommended", "plugin:react/recommended", // Örnek: React projesi için "plugin:prettier/recommended" // Bu satır hem plugin'i etkinleştirir hem de config'i devre dışı bırakır ], "plugins": [ "react", "prettier" ], "rules": { "prettier/prettier": [ "error", { "endOfLine": "auto" // Windows/Linux uyumluluğu için } ] } } ``` Bu yapılandırma ile, Prettier'ın biçimlendirme kuralları ESLint tarafından denetlenir ve herhangi bir biçimlendirme hatası bir ESLint hatası olarak raporlanır. Bu, geliştirme ortamında daha tutarlı geri bildirim sağlar. ### 2. Pre-commit Hook'larla Otomatik Biçimlendirme Kodun sürüm kontrol sistemine (Git) gönderilmeden önce otomatik olarak biçimlendirilmesini sağlamak, takım içi tutarlılığı garantilemenin en etkili yollarından biridir. Bunun için `husky` ve `lint-staged` gibi araçlar kullanılır. **Kurulum (2026):** ```bash npm install --save-dev husky lint-staged # veya yarn add --dev husky lint-staged ``` **`package.json` Yapılandırması:** ```json // package.json { "name": "my-2026-advanced-project", "version": "1.0.0", "scripts": { "prepare": "husky install" }, "devDependencies": { "husky": "^8.0.3", // 2026 güncel sürüm varsayımı "lint-staged": "^13.3.0" // 2026 güncel sürüm varsayımı }, "lint-staged": { "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"], "*.{json,css,md}": ["prettier --write"] } } ``` Ardından, `prepare` script'ini çalıştırın ve `pre-commit` hook'unu ekleyin: ```bash npm run prepare npx husky add .husky/pre-commit "npx lint-staged" ``` Artık her `git commit` işleminden önce, sadece staged edilmiş (sahnelenmiş) dosyalar Prettier ve ESLint tarafından kontrol edilip biçimlendirilecektir. Bu, production ortamına yanlış biçimlendirilmiş kod gitmesini engeller. ### 3. CI/CD Pipeline Entegrasyonu Prettier'ı CI/CD (Sürekli Entegrasyon/Sürekli Dağıtım) pipeline'ınıza entegre etmek, kod kalitesini projenin yaşam döngüsü boyunca korumanın son adımıdır. Genellikle `check-format` komutu kullanılır. **Örnek GitHub Actions Yapılandırması (2026):** ```yaml # .github/workflows/prettier-check.yml name: Prettier Code Style Check on: push: branches: - main pull_request: branches: - main jobs: check-prettier-format: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 # 2026 güncel sürüm varsayımı - name: Setup Node.js uses: actions/setup-node@v4 # 2026 güncel sürüm varsayımı with: node-version: '20' - name: Install dependencies run: npm ci - name: Run Prettier check run: npm run check-format - name: Run ESLint check run: npm run lint # package.json'da tanımlı bir lint script'i olduğunu varsayarız ``` Bu pipeline, her `push` veya `pull_request` işleminde kodun biçimlendirme kurallarına uygun olup olmadığını kontrol eder. Herhangi bir ihlal durumunda pipeline başarısız olur ve geliştiricinin kodu düzeltmesi gerekir. Bu, takımın kod kalitesi konusunda sıfır tolerans göstermesini sağlar. ## Best Practices & Anti-Patterns (2026 Kılavuzu) Prettier kullanırken verimliliği en üst düzeye çıkarmak ve potansiyel sorunlardan kaçınmak için belirli iyi uygulamalar ve kaçınılması gereken anti-pattern'lar vardır. Kendi projelerimde edindiğim 10 yılı aşkın tecrübeyle, işte size 2026 için kritik tavsiyeler: ### ✅ Best Practices 1. **Prettier'ı ESLint ile Birlikte Kullanın:** Prettier stil, ESLint ise kod kalitesi ve potansiyel hatalar içindir. Bu iki aracı birlikte kullanmak, kodunuzun hem güzel görünmesini hem de sağlam olmasını sağlar. `eslint-config-prettier` ve `eslint-plugin-prettier` entegrasyonu vazgeçilmezdir. 2. **Otomatik Biçimlendirmeyi Etkinleştirin:** VS Code gibi IDE'lerde `formatOnSave` özelliğini etkinleştirin. Bu, geliştirme sürecini kesintiye uğratmadan kodunuzu sürekli olarak biçimlendirilmiş halde tutar. 3. **Pre-commit Hook'ları Kullanın:** `husky` ve `lint-staged` ile `git commit` öncesi otomatik biçimlendirme ve linting yaparak, asla biçimlendirilmemiş kodun depoya gitmemesini sağlayın. Bu, CI/CD'ye yük bindirmeden hataları erken aşamada yakalar. 4. **Ortak Bir `.prettierrc` Dosyası Kullanın:** Tüm takım üyelerinin aynı Prettier yapılandırmasını kullanmasını sağlamak için projenin kök dizininde tek bir `.prettierrc` dosyası bulundurun. Bu, tutarlılığı garanti eder. 5. **`prettierignore` Dosyası Kullanın:** Biçimlendirmek istemediğiniz dosyaları (örneğin, `dist` klasörü, üçüncü taraf kütüphaneleri veya otomatik oluşturulan dosyalar) `.prettierignore` dosyasına ekleyin. Bu, gereksiz işlem yükünü azaltır. 6. **CI/CD'de `check-format` Kullanın:** `prettier --check` komutunu CI/CD pipeline'ınıza ekleyerek, bir pull request merge edilmeden önce kodun biçimlendirme kurallarına uygunluğunu otomatik olarak denetleyin. 7. **`package.json` Script'leri Tanımlayın:** `format` ve `check-format` gibi kolayca çalıştırılabilir script'ler tanımlayarak, takım üyelerinin Prettier'ı kullanmasını teşvik edin. ### ❌ Anti-Patterns (Kaçınılması Gerekenler) 1. **Prettier'ın Fikirleriyle Savaşmak:** Prettier'ın temel amacı, stil tartışmalarını ortadan kaldırmaktır. Çok fazla yapılandırma seçeneğiyle Prettier'ı kendi kişisel stilinize uydurmaya çalışmak, aracın amacına aykırıdır ve tutarlılığı bozar. Çoğu durumda varsayılan ayarları kabul etmek en iyisidir. 2. **Biçimlendirilmemiş Kodu Commit Etmek:** Pre-commit hook'ları veya `formatOnSave` olmadan, geliştiriciler biçimlendirilmemiş kodu commit etme eğilimindedir. Bu, kod tabanında tutarsızlığa yol açar ve Prettier'ın faydalarını azaltır. 3. **Tüm Dosyaları Gözardı Etmek:** `prettierignore` dosyasını aşırı kullanmak veya Prettier'ı sadece belirli dosya türlerinde çalıştırmak, projenin genel stil tutarlılığını bozar. Prettier'ı mümkün olduğunca geniş bir dosya yelpazesinde kullanın. 4. **`prettier --write` Komutunu Her Yerde Kullanmak:** Özellikle büyük projelerde, `prettier --write` komutunu her zaman tüm kod tabanında çalıştırmak zaman alıcı olabilir. Sadece değişen dosyaları biçimlendirmek için `lint-staged` gibi araçları kullanmak daha verimlidir. ## Yaygın Hatalar ve Çözümleri (2026 Troubleshooting) Prettier kullanırken karşılaşabileceğiniz bazı yaygın sorunlar ve 2026 itibarıyla güncel çözümleri aşağıda listelenmiştir: ### 1. Hata: "Prettier and ESLint conflicts" (Prettier ve ESLint Çakışmaları) * **Problem:** ESLint'in bazı biçimlendirme kuralları (örn. `indent`, `quotes`) Prettier'ın kurallarıyla çakışır ve sürekli olarak aynı kod parçasını farklı şekillerde biçimlendirmeye çalışırlar. * **Sebep:** ESLint ve Prettier'ın aynı stil kurallarını farklı şekillerde uygulamaya çalışması. * **Çözüm:** `eslint-config-prettier` paketini kullanarak ESLint'in biçimlendirme ile ilgili kurallarını devre dışı bırakın. `.eslintrc.json` dosyanızda `"extends": ["plugin:prettier/recommended"]` olduğundan emin olun. Bu, ESLint'in Prettier'ın biçimlendirme kararlarını 'kabul etmesini' sağlar. ### 2. Hata: "Files are not being formatted" (Dosyalar Biçimlendirilmiyor) * **Problem:** Prettier'ı çalıştırdığınızda bazı dosyalar veya dosya türleri biçimlendirilmiyor. * **Sebep:** Dosyalar `.prettierignore` dosyasında listelenmiş olabilir, Prettier'ın desteklemediği bir dosya türü olabilir veya komut yanlış çalıştırılıyor olabilir. * **Çözüm:** * `.prettierignore` dosyasını kontrol edin ve biçimlendirmek istediğiniz dosyaların orada listelenmediğinden emin olun. * `package.json` içindeki `format` script'inizin `--write` bayrağını içerdiğinden ve doğru dosya uzantılarını hedeflediğinden emin olun (örn. `"./**/*.{js,jsx,ts,tsx,json,css,md}"`). * Desteklenmeyen bir dosya türü için bir Prettier eklentisi olup olmadığını araştırın (örn. `prettier-plugin-tailwindcss`). ### 3. Hata: "Performance issues on large codebases" (Büyük Kod Tabanlarında Performans Sorunları) * **Problem:** Prettier'ı tüm projede çalıştırmak çok uzun sürüyor, bu da geliştirme akışını yavaşlatıyor veya CI/CD pipeline'larını uzatıyor. * **Sebep:** Prettier'ın her seferinde tüm dosyaları işlemesi, özellikle binlerce dosyası olan büyük projelerde zaman alıcı olabilir. * **Çözüm:** * **Pre-commit hook'ları kullanın:** `lint-staged` ile sadece `git add` ile sahnelenmiş (staged) dosyaları biçimlendirin. Bu, sadece değişen dosyaların işlenmesini sağlar. * **CI/CD'de sadece değişen dosyaları kontrol edin:** Bazı CI/CD yapılandırmaları, sadece değişen dosyalar üzerinde `check-format` çalıştırmaya izin verir (örn. `git diff --name-only --diff-filter=ACM main | xargs prettier --check`). * **`--cache` bayrağını kullanın (eğer varsa):** Prettier'ın kendi içinde bir önbellekleme mekanizması olmasa da, bazı entegrasyonlar (örn. `eslint --cache`) bu tür iyileştirmeler sunabilir. ## Performans Optimizasyonu (2026 Metrikleri) Prettier'ın kendisi genellikle hızlı bir araç olsa da, büyük ölçekli projelerde veya hatalı entegrasyonlarda performans sorunları yaşanabilir. 2026 itibarıyla, geliştirme sürecinizi aksatmadan Prettier'ı verimli bir şekilde kullanmak için bazı optimizasyon teknikleri şunlardır: ### 1. Sadece Değişen Dosyaları Biçimlendirme En büyük performans kazancı, Prettier'ı sadece değişen veya commit edilecek dosyalar üzerinde çalıştırmaktan gelir. Daha önce bahsettiğimiz `lint-staged` aracı bunun için idealdir. ```json // package.json (lint-staged konfigürasyonu) { "lint-staged": { "*.{js,jsx,ts,tsx,json,css,md}": ["prettier --write"] } } ``` Bu yapılandırma, her `git commit` öncesi sadece sahnelenmiş dosyaları hedef alarak, yüzlerce veya binlerce dosyanın yeniden işlenmesini engeller. Bu, özellikle 100.000 satırdan fazla koda sahip projelerde commit sürelerini saniyelerden milisaniyelere düşürebilir. ### 2. Doğru `prettierignore` Kullanımı Biçimlendirilmesi gerekmeyen dosyaları veya klasörleri (`node_modules`, `dist`, `build`, `vendor` klasörleri gibi) `.prettierignore` dosyasına eklemek, Prettier'ın tarama ve işleme süresini önemli ölçüde azaltır. ``` # .prettierignore node_modules/ dist/ build/ coverage/ *.min.js *.d.ts ``` Bu, Prettier'ın sadece ilgili kaynak kod dosyaları üzerinde çalışmasını sağlayarak gereksiz CPU döngülerinden tasarruf etmenizi sağlar. ### 3. Paralel İşleme (Gelişmiş Senaryolar) Çok büyük kod tabanlarında, Prettier'ı birden fazla çekirdek üzerinde paralel olarak çalıştırmak performansı artırabilir. Ancak Prettier'ın kendisi doğrudan paralel işlemeyi desteklemez. Bu tür senaryolarda, özel script'ler veya CI/CD araçlarının paralel işleme yetenekleri kullanılabilir. Örneğin, monorepo'larda her paketi ayrı ayrı biçimlendirmek gibi yaklaşımlar benimsenebilir. ### 4. CI/CD Pipeline Optimizasyonu CI/CD ortamlarında `prettier --check` komutunu çalıştırırken, sadece son commit'ten bu yana değişen dosyaları hedef almak performansı artırır. Örneğin, bir GitHub Actions iş akışında `git diff` komutuyla değişen dosyaları bulup sadece onlar üzerinde Prettier'ı çalıştırmak mümkündür. ```bash # CI/CD ortamında sadece değişen dosyaları kontrol etme örneği CHANGED_FILES=$(git diff --name-only --diff-filter=ACM ${{ github.event.pull_request.base.sha }} ${{ github.sha }}) if [ -n "$CHANGED_FILES" ]; then echo "Checking format for changed files: $CHANGED_FILES" echo "$CHANGED_FILES" | xargs prettier --check else echo "No files changed, skipping Prettier check." fi ``` Bu yaklaşım, büyük pull request'lerde bile Prettier kontrolünü saniyeler içinde tamamlamayı sağlar, böylece geliştiriciler geri bildirimlerini daha hızlı alabilirler. ## Gerçek Dünya Proje Örneği (2026 Mini Proje) Bu bölümde, Prettier'ın modern bir React projesine nasıl entegre edildiğini ve basit bir bileşenin nasıl biçimlendirildiğini gösteren küçük bir örnek proje oluşturacağız. ### Proje Yapısı ``` my-prettier-app/ ├── .prettierrc.json ├── .prettierignore ├── package.json ├── src/ │ ├── App.js │ └── index.js └── .husky/ └── pre-commit ``` ### 1. `package.json` ```json { "name": "my-prettier-app-2026", "version": "1.0.0", "description": "A simple React app with Prettier integration.", "main": "src/index.js", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "format": "prettier --write \"./**/*.{js,jsx,ts,tsx,json,css,md}\\"", "check-format": "prettier --check \"./**/*.{js,jsx,ts,tsx,json,css,md}\\"", "prepare": "husky install" }, "keywords": [ "react", "prettier", "2026", "code-formatting" ], "author": "Burak Balkı", "license": "MIT", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1" // 2026 itibarıyla güncel sürüm varsayımı }, "devDependencies": { "prettier": "^3.2.1", "husky": "^8.0.3", "lint-staged": "^13.3.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "lint-staged": { "*.{js,jsx,ts,tsx}": ["prettier --write"], "*.{json,css,md}": ["prettier --write"] } } ``` ### 2. `.prettierrc.json` ```json { "trailingComma": "es5", "tabWidth": 2, "semi": true, "singleQuote": true, "printWidth": 80 } ``` ### 3. `.prettierignore` ``` # .prettierignore node_modules/ build/ .env ``` ### 4. `.husky/pre-commit` (oluşturulduktan sonra `husky install` ve `npx husky add` ile) ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx lint-staged ``` ### 5. `src/App.js` (Önce) ```jsx import React from 'react'; function App() { const data = { name: 'Alice', age: 25, city: 'New York' }; return ( );} export default App; ``` ### 6. `src/App.js` (Prettier ile Biçimlendirildikten Sonra) ```jsx import React from 'react'; function App() { const data = { name: 'Alice', age: 25, city: 'New York' }; return ( ); } export de