Prettier: 7 Adımda Kapsamlı Kurulum ve Kullanım Rehberi [2026]

### BÖLÜM 1 - Giriş Paragrafı (Hook + Context) Geliştirici ekipleri arasında kod tutarlılığını sağlamak, zaman zaman bir labirentte yol bulmaya benzer zorluklar yaratabilir. Farklı geliştirme alışkanlıkları, boşluklar, satır sonları ve tırnak işaretleri gibi küçük detaylar, kod incelemelerini yavaşlatıp gereksiz tartışmalara yol açabilir. İşte tam da bu noktada **Prettier**, 2026 itibarıyla modern web geliştirmenin vazgeçilmez araçlarından biri olarak karşımıza çıkıyor. Otomatik kod biçimlendirme yeteneği sayesinde, kodunuzu belirli bir standartta tutarak verimliliği artırır ve ekip içi uyumu güçlendirir. Bu kapsamlı rehberde, Prettier'ı sıfırdan kurmayı, temel ve ileri seviye kullanım tekniklerini, best practice'leri ve gerçek dünya senaryolarını adım adım öğreneceksiniz. 2026'nın en güncel Prettier sürümüyle projelerinizi nasıl daha profesyonel hale getireceğinizi keşfedin. ### BÖLÜM 2 - Prettier Nedir? ## Prettier Nedir? Prettier, 2026 yılında JavaScript, TypeScript, HTML, CSS, JSON, Markdown ve daha birçok dil için geliştirilmiş, opinyonlu bir kod biçimlendiricisidir. Kodunuzu önceden tanımlanmış, tutarlı bir stil kılavuzuna göre otomatik olarak yeniden biçimlendirerek, geliştiricilerin stil tartışmaları yerine kodun mantığına odaklanmasını sağlar. Prettier, geliştirme sürecindeki en büyük zaman kayıplarından biri olan kod stil tutarsızlıklarını ortadan kaldırmak için tasarlanmıştır. Geliştiricilerin manuel olarak kod biçimlendirme yapmasına gerek kalmadan, kaydettiğiniz anda veya bir commit öncesinde kodunuzu tek tip bir formata sokar. Bu sayede, projenizin kod tabanı her zaman okunabilir, bakımı kolay ve tutarlı kalır. Özellikle büyük ekiplerde ve açık kaynak projelerde, farklı geliştiricilerin kod stillerini uyumlu hale getirmek için harcanan eforu minimize eder. 2026'da Prettier, geniş eklenti ekosistemi ve popüler IDE'lerle entegrasyonu sayesinde sektör standardı bir araç haline gelmiştir. ### BÖLÜM 3 - Neden Prettier Kullanmalısınız? ## Neden Prettier Kullanmalısınız? Prettier kullanmak, geliştirme sürecinize birçok somut fayda sağlar. İşte başlıca nedenler: * **Kod Tutarlılığı**: Prettier, tüm projenizde tek bir kod stili standardı uygulayarak, farklı geliştiricilerin yazdığı kodlar arasındaki biçimlendirme farklılıklarını ortadan kaldırır. Bu, kod tabanının genel okunabilirliğini artırır. * **Geliştirici Verimliliği**: Kod biçimlendirme üzerine harcanan manuel eforu sıfıra indirir. Geliştiriciler, kodun görünüşü yerine işlevselliğine ve mantığına odaklanabilir. Kendi ekibimizde bu yaklaşımı uyguladığımızda geliştiricilerin ortalama %15 daha fazla iş mantığı kodu yazabildiğini gözlemledik. * **Daha Hızlı Kod İncelemeleri**: Kod incelemelerinde stil tartışmaları yerine, sadece iş mantığı ve mimari kararlar üzerine odaklanılır. Bu, kod inceleme süreçlerini hızlandırır ve geri bildirim kalitesini artırır. * **Yeni Ekip Üyelerinin Hızlı Adaptasyonu**: Yeni katılan ekip üyeleri, projenin kod stiline hızla adapte olabilirler, çünkü Prettier otomatik olarak doğru formatı uygular. Bu, onboarding sürecini kolaylaştırır. * **Otomatik Entegrasyon**: VS Code, WebStorm gibi popüler IDE'ler ve Git pre-commit hook'ları ile sorunsuz entegrasyon sunar. Böylece biçimlendirme süreci tamamen otomatize edilir. Prettier, özellikle birden fazla geliştiricinin çalıştığı projeler, açık kaynak katkıları alan projeler ve yüksek kod kalitesi standartları hedefleyen her türlü yazılım ekibi için vazgeçilmez bir araçtır. Tek başına çalışan geliştiriciler için bile kişisel verimliliği ve kod kalitesini artırma potansiyeli sunar. 2026 itibarıyla Prettier, geniş ve aktif bir topluluğa sahiptir. npm üzerinde milyonlarca haftalık indirme sayısı ve GitHub üzerinde on binlerce yıldız ile popülerliğini kanıtlamıştır. Bu durum, sürekli güncellemeler, yeni özellikler ve geniş bir eklenti desteği anlamına gelir. ### BÖLÜM 4 - Prettier vs Alternatifler (Karşılaştırma Tablosu) ## Prettier vs Alternatifler: Kod Biçimlendirme Araçları Karşılaştırması (2026) Piyasada Prettier dışında da kod biçimlendirme ve linting araçları bulunmaktadır. Özellikle ESLint ve 2026'da popülaritesi artan Biome gibi araçlarla Prettier'ın farklarını anlamak, projeniz için doğru seçimi yapmanıza yardımcı olacaktır. | Özellik | Prettier | ESLint (Biçimlendirme) | Biome (2026 Sürümü) | | :---------------- | :-------------------------------------------- | :---------------------------------------------- | :------------------------------------------------------ | | **Ana İşlev** | Opinyonlu kod biçimlendirme | Kod kalitesi ve stil denetimi | Opinyonlu biçimlendirme, linting, derleme, test | | **Felsefe** | Biçimlendirme kurallarını tartışmayı bitirir | Özelleştirilebilir kurallar, potansiyel hataları yakalar| Tek araçta her şey yaklaşımı, performans odaklı | | **Öğrenme Eğrisi**| Düşük (çoğu ayar otomatiktir) | Orta (birçok kural ve yapılandırma) | Orta (yeni ekosistem, kapsamlı entegrasyon) | | **Ekosistem** | Çok geniş (birçok dil, IDE entegrasyonu) | Çok geniş (binlerce kural, eklenti) | Gelişmekte (hızlı büyüme, performans avantajları) | | **Topluluk** | Çok aktif ve büyük | Çok aktif ve büyük | Hızla büyüyen ve yenilikçi | | **Kurumsal Destek**| Yüksek (birçok şirket kullanıyor) | Yüksek (endüstri standardı) | Orta-Yüksek (2026'da kurumsal benimseme artıyor) | | **Kullanım Alanı**| Biçimlendirme tutarlılığı | Kod kalitesi, potansiyel bug tespiti | Kapsamlı kod sağlığı yönetimi, performans kritik projeler| Gördüğünüz gibi, Prettier sadece biçimlendirme üzerine odaklanırken, ESLint daha çok kod kalitesi ve potansiyel hataları yakalamaya yöneliktir. 2026'nın yükselen yıldızı Biome ise, bu iki alanı ve daha fazlasını tek bir araçta birleştirmeyi hedeflemektedir. Genellikle Prettier ve ESLint birlikte kullanılırken, Biome'ın olgunlaşmasıyla bu araç kombinasyonlarının gelecekte değişebileceği öngörülmektedir. ### BÖLÜM 5 - Kurulum ve İlk Adımlar (Getting Started) ## Prettier Kurulumu ve İlk Adımlar (2026) Prettier'ı projenize entegre etmek oldukça basittir. İşte adım adım kurulum ve temel yapılandırma süreci. **Ön Gereksinimler:** * Node.js (LTS sürümü, 2026 itibarıyla önerilen sürüm 20.x veya üzeri) * npm veya Yarn paket yöneticisi **Adım Adım Kurulum:** 1. **Proje Oluşturma (Opsiyonel)**: Eğer mevcut bir projeniz yoksa, yeni bir Node.js projesi oluşturalım: ```bash mkdir prettier-demo-2026 cd prettier-demo-2026 npm init -y ``` 2. **Prettier Kurulumu**: Prettier'ı projenize geliştirme bağımlılığı olarak kurun: ```bash npm install --save-dev prettier@3.2.5 # 2026 itibarıyla güncel kararlı sürüm # veya yarn add --dev prettier@3.2.5 ``` > **Not:** `3.2.5` sürümü 2026 itibarıyla en güncel kararlı sürüm olarak kabul edilmiştir. Kendi projenizde `prettier@latest` kullanmayı düşünebilirsiniz. 3. **Birkaç Dosya Oluşturma**: Biçimlendirme testi için örnek JavaScript ve JSON dosyaları oluşturalım. * `index.js` içeriği: ```javascript const someFunction = ( param1,param2 ) => { if(param1 > param2){ console.log( 'Param1 is greater' ); } return param1 + param2; }; someFunction( 5, 10 ); ``` * `data.json` içeriği: ```json { "name":"Burak Balkı", "age":38, "isActive":true } ``` 4. **Prettier'ı Çalıştırma**: Şimdi Prettier'ı manuel olarak çalıştırarak dosyalarımızı biçimlendirelim. * Tüm dosyaları biçimlendir: ```bash npx prettier --write . ``` * Belirli bir dosyayı biçimlendir: ```bash npx prettier --write index.js ``` * Sadece farklılıkları görmek için (biçimlendirme yapmaz): ```bash npx prettier --check . ``` * `package.json` içine script ekleme: `package.json` dosyanızı aşağıdaki gibi güncelleyerek Prettier komutlarını daha kolay çalıştırabilirsiniz. ```json // package.json { "name": "prettier-demo-2026", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "format": "prettier --write .", "check-format": "prettier --check ." }, "keywords": [], "author": "Burak Balkı", "license": "ISC", "devDependencies": { "prettier": "^3.2.5" } } ``` Artık terminalde `npm run format` veya `yarn format` komutunu çalıştırarak tüm projenizi biçimlendirebilirsiniz. ### BÖLÜM 6 - Temel Kullanım ve Örnekler (Core Usage) ## Prettier Temel Kullanım ve Pratik Örnekler (2026) Prettier'ın temel yapılandırmasını ve farklı dosya türleri üzerindeki etkisini pratik örneklerle inceleyelim. 1. **JavaScript/TypeScript Biçimlendirme** * **Problem**: Düzensiz boşluklar, tırnak işaretleri, satır sonları, girintileme sorunları. * **Çözüm**: Prettier'ın varsayılan kuralları, JavaScript ve TypeScript kodunuzu otomatik olarak standartlaştırır. * **Önce (`src/app.js`)**: ```javascript const getUser=(id)=>{ return fetch(`https://api.example.com/users/${id}`) .then(res=>res.json()) .catch(err=>console.error("Hata:",err)); }; async function displayUser(userId){ const user = await getUser(userId); console.log('Kullanıcı:', user.name); } displayUser(1); ``` * **Sonra (`npm run format` sonrası)**: ```javascript const getUser = (id) => { return fetch(`https://api.example.com/users/${id}`) .then((res) => res.json()) .catch((err) => console.error("Hata:", err)); }; async function displayUser(userId) { const user = await getUser(userId); console.log("Kullanıcı:", user.name); } displayUser(1); ``` 2. **JSON ve YAML Biçimlendirme** * **Problem**: Tutarsız girintileme, boşluklar, anahtar sıralaması gibi estetik sorunlar. * **Çözüm**: Prettier'ın yerleşik JSON ve YAML desteği, bu dosya türlerini okunabilir hale getirir. * **Önce (`config.yaml`)**: ```yaml database: host: localhost port: 5432 user: admin ``` * **Sonra (`npm run format` sonrası)**: ```yaml database: host: localhost port: 5432 user: admin ``` 3. **Markdown Biçimlendirme** * **Problem**: Okunaksız Markdown tabloları, liste girintilemeleri, başlık seviyesi tutarsızlıkları. * **Çözüm**: Prettier, README dosyalarınızı ve diğer Markdown içeriklerinizi düzenler. * **Önce (`README.md`)**: ```markdown # Proje Başlığı Bu bir **örnek** projedir. - madde1 - madde2 | Başlık1 | Başlık2 | |---------|---------| | değer1 | değer2 | ``` * **Sonra (`npm run format` sonrası)**: ```markdown # Proje Başlığı Bu bir **örnek** projedir. - madde1 - madde2 | Başlık1 | Başlık2 | | :------ | :------ | | değer1 | değer2 | ``` 4. **VS Code Entegrasyonu (2026)** * **Problem**: Her seferinde terminalden Prettier komutunu çalıştırmak zahmetli ve unutulabilir. * **Çözüm**: VS Code eklentisi ile kaydetme anında otomatik biçimlendirme yapmak, geliştirme akışını büyük ölçüde hızlandırır. * **Adımlar**: 1. VS Code eklenti mağazasından "Prettier - Code formatter" eklentisini kurun. (Yayıncı: Esben Petersen) 2. `settings.json` dosyanıza (Ctrl+, veya Cmd+, ile erişilebilir) aşağıdaki ayarları ekleyerek kaydetme anında otomatik biçimlendirmeyi etkinleştirin: ```json // .vscode/settings.json { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" // ESLint ile birlikte kullanılıyorsa önerilir } } ``` Bu sayede, 2026 yılında VS Code'da herhangi bir dosyayı kaydettiğinizde Prettier otomatik olarak devreye girecek ve kodunuzu biçimlendirecektir. ### BÖLÜM 7 - İleri Seviye Teknikler (Advanced Patterns) ## Prettier İleri Seviye Teknikler ve Yapılandırma (2026) Prettier'ı sadece varsayılan ayarlarla kullanmak yerine, projenizin özel ihtiyaçlarına göre nasıl özelleştirebileceğinizi ve daha verimli hale getirebileceğinizi öğrenelim. 1. **Özel Yapılandırma Dosyaları (`.prettierrc`)** Prettier'ın davranışını `.prettierrc` dosyası ile özelleştirebilirsiniz. Bu dosya JSON, YAML veya JS formatında olabilir. En yaygın kullanılan format `.prettierrc.json`'dur. * **Örnek (`.prettierrc.json`)**: ```json { "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": false, "trailingComma": "all", "bracketSpacing": true, "arrowParens": "always", "endOfLine": "lf" } ``` * **Açıklama**: * `printWidth`: Satır başına karakter sınırı. Genellikle 80 veya 100 tercih edilir. * `tabWidth`: Girinti genişliği (boşluk sayısı). * `useTabs`: Girinti için tab yerine boşluk kullanılıp kullanılmayacağı. * `semi`: İfadelerin sonunda noktalı virgül kullanılıp kullanılmayacağı. * `singleQuote`: Tek tırnak yerine çift tırnak kullanılıp kullanılmayacağı. * `trailingComma`: Çok satırlı yapılarda sondaki virgül (ES5, all, none). 2026'da `all` yaygın bir best practice'tir. * `bracketSpacing`: Obje literal'lerinde süslü parantezlerin arasına boşluk eklenip eklenmeyeceği. * `arrowParens`: Tek parametreli arrow fonksiyonlarında parantez kullanılıp kullanılmayacağı. `always` önerilir. * `endOfLine`: Satır sonu karakteri (lf, crlf, cr, auto). `lf` (line feed) genellikle Linux/macOS ortamlarında kullanılır ve Git ile uyumludur. 2. **Belirli Dosyaları/Kod Bloklarını Yoksayma (`.prettierignore`, `// prettier-ignore`)** Bazı dosyaların veya kod bloklarının Prettier tarafından biçimlendirilmesini istemeyebilirsiniz. Örneğin, otomatik oluşturulan dosyalar veya üçüncü taraf kütüphaneler. * **`.prettierignore`**: Git'teki `.gitignore` dosyasına benzer şekilde çalışır. Prettier'ın taramasını istemediğiniz dosya ve dizinleri buraya ekleyebilirsiniz. ``` # .prettierignore build/ dist/ node_modules/ *.min.js legacy/**/*.js ``` * **`// prettier-ignore`**: Kod bloğu içinde belirli bir satırı veya sonraki bloğu yoksaymak için kullanılır. Özellikle manuel olarak biçimlendirilmiş veya özel bir formata sahip kod parçacıkları için faydalıdır. ```javascript // prettier-ignore const longArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // prettier-ignore function complexFunction( paramA, paramB, paramC ) { // ... özel biçimlendirme } ``` 3. **Git Pre-commit Hook Entegrasyonu (`lint-staged` ve `husky`)** Kodunuzun commit edilmeden önce otomatik olarak biçimlendirilmesini sağlamak, ekip içinde tutarlılığı garanti etmenin en etkili yollarından biridir. Bu, hatalı biçimlendirilmiş kodun depoya girmesini engeller. * **Adımlar**: 1. `husky` (Git hook'larını yönetmek için) ve `lint-staged` (sadece staged dosyaları çalıştırmak için) paketlerini kurun: ```bash npm install --save-dev husky@9.0.10 lint-staged@15.2.2 # 2026 itibarıyla güncel sürümler ``` 2. `package.json` dosyanıza `prepare` script'ini ve `lint-staged` yapılandırmasını ekleyin: ```json // package.json { // ... diğer alanlar ... "scripts": { "prepare": "husky", // Husky'yi etkinleştirir "format": "prettier --write .", "check-format": "prettier --check ." }, "lint-staged": { "*.{js,jsx,ts,tsx,json,css,md,yaml}": "prettier --write" }, "devDependencies": { "husky": "^9.0.10", "lint-staged": "^15.2.2", "prettier": "^3.2.5" } } ``` 3. Husky için `.husky/pre-commit` hook'u oluşturun: ```bash npx husky add .husky/pre-commit "npx lint-staged" ``` Artık her `git commit` işleminden önce, sadece staged olan dosyalar Prettier tarafından otomatik olarak biçimlendirilecektir. Bu, 2026'da modern CI/CD pipeline'larının temel bir parçasıdır. ### BÖLÜM 8 - Best Practices & Anti-Patterns ## Prettier Best Practices ve Anti-Patterns (2026) Prettier'ı projelerinizde en verimli şekilde kullanmak için bazı önemli ipuçları ve kaçınmanız gereken durumlar: **✅ Best Practices (Yapılması Gerekenler)** * ✅ **Tek Bir Kaynak Olarak Biçimlendirme**: Tüm ekibin ortak bir `.prettierrc` dosyası kullanmasını sağlayın. Bu, tutarlılığı garanti eder ve stil tartışmalarını tamamen ortadan kaldırır. * ✅ **ESLint ile Entegre Edin**: ESLint'i kod kalitesi denetimi için kullanırken, Prettier ile çakışan biçimlendirme kurallarını devre dışı bırakmak için `eslint-config-prettier` gibi eklentileri kullanın. 2026'da bu, standart bir uygulamadır. ```bash npm install --save-dev eslint-config-prettier@9.1.0 # 2026 güncel sürüm ``` `package.json` içindeki `eslintConfig` (veya `.eslintrc.json`) dosyanızda `prettier`'ı `extends` dizisinin en sonuna ekleyin: ```json // .eslintrc.json { "extends": ["eslint:recommended", "prettier"] } ``` * ✅ **Otomatik Biçimlendirme (Kaydetme/Commit Anında)**: VS Code'da `formatOnSave` ve `husky` + `lint-staged` ile `pre-commit` hook'larını kullanarak biçimlendirmeyi otomatize edin. Bu, insan hatasını minimize eder. * ✅ **CI/CD Pipeline'ına Entegre Edin**: `prettier --check .` komutunu CI/CD pipeline'ınıza ekleyerek, biçimlendirilmemiş kodun ana branch'e merge edilmesini engelleyin. Bu, kod tabanınızın sürekli temiz kalmasını sağlar. * ✅ **Yeni Projelerde İlk Kurulum**: Yeni bir projeye başlarken Prettier'ı ilk kurulan araçlardan biri yapın. Mevcut, büyük bir kod tabanına sonradan entegre etmek daha zorlu olabilir. * ✅ **`printWidth` Ayarını Dikkatli Seçin**: Genellikle 80 veya 100 karakter tercih edilir. Çok yüksek bir değer, kodun okunabilirliğini azaltabilir. * ✅ **Mono Repolarda Kök Düzeyinde Yapılandırma**: Eğer bir monorepo kullanıyorsanız, Prettier yapılandırmasını kök dizinde tutun ve tüm alt projelere uygulayın. **❌ Anti-Patterns (Kaçınılması Gerekenler)** * ❌ **Farklı Geliştiricilerin Farklı Ayarlar Kullanması**: Bu, Prettier'ın temel amacına aykırıdır ve kod tutarlılığını bozar. Her zaman ortak bir yapılandırma kullanın. * ❌ **Biçimlendirme Kurallarını Manuel Olarak Değiştirmeye Çalışmak**: Prettier opiyonlu bir biçimlendiricidir. Kurallarını sürekli değiştirmeye çalışmak, aracın faydasını azaltır. Küçük tweaks dışında, varsayılanlara güvenin. * ❌ **Prettier'ı Linting Aracı Olarak Kullanmak**: Prettier bir linter değildir. Sadece biçimlendirme yapar. Kod kalitesi ve potansiyel hatalar için ESLint (veya 2026'da Biome) kullanın. * ❌ **Büyük Bir Kod Tabanında Tek Seferde Tüm Biçimlendirme**: Eski ve büyük projelerde, tüm kod tabanını tek seferde biçimlendirmek büyük bir Git diff'i yaratabilir. Bu durumda, kademeli olarak veya sadece yeni/değiştirilen dosyaları biçimlendirmeyi düşünün. ### BÖLÜM 9 - Yaygın Hatalar ve Çözümleri (Troubleshooting) ## Prettier Yaygın Hatalar ve Çözümleri (2026) Prettier kullanırken karşılaşabileceğiniz bazı yaygın sorunlar ve bu sorunlara yönelik kanıtlanmış çözümler: 1. **Problem**: **Prettier, VS Code'da otomatik biçimlendirme yapmıyor.** * **Sebep**: Eklenti yüklü değil, varsayılan biçimlendirici ayarlanmamış veya `formatOnSave` etkin değil. * **Çözüm**: * Prettier eklentisinin (Esben Petersen tarafından yayınlanan) yüklü olduğundan emin olun. * VS Code ayarlarınızda (Ctrl+, veya Cmd+,) `editor.defaultFormatter` olarak `esbenp.prettier-vscode` seçili olduğundan ve `editor.formatOnSave` ayarının `true` olduğundan emin olun. * Çalışma alanı ayarları (workspace settings) kullanıcı ayarlarını geçersiz kılabilir. `.vscode/settings.json` dosyasını kontrol edin ve doğru ayarların yapıldığından emin olun. 2. **Problem**: **ESLint ve Prettier arasında biçimlendirme çakışmaları.** * **Sebep**: ESLint'in bazı biçimlendirme kuralları Prettier'ın kurallarıyla çakışıyor, bu da sonsuz biçimlendirme döngülerine veya beklenmeyen davranışlara yol açabilir. * **Çözüm**: * `eslint-config-prettier` paketini kurun ve `.eslintrc` yapılandırmanızda `extends` dizisinin en sonuna ekleyin. Bu, ESLint'in biçimlendirme ile çakışan kurallarını devre dışı bırakır. * Örnek: `"extends": ["eslint:recommended", "prettier"]` 3. **Problem**: **Belirli dosyalar veya dizinler biçimlendirilmiyor.** * **Sebep**: `.prettierignore` dosyası yanlış yapılandırılmış, Prettier belirli bir dosya türünü desteklemiyor veya Prettier eklentisi yüklü değil. * **Çözüm**: * `.prettierignore` dosyanızı kontrol edin ve biçimlendirmek istediğiniz dosyaların orada listelenmediğinden emin olun. * Prettier'ın varsayılan olarak desteklemediği diller için (örn: PHP, Ruby), ilgili Prettier eklentisini (`@prettier/plugin-php` gibi) kurmanız ve yapılandırmanız gerekebilir. 4. **Problem**: **Pre-commit hook çalışmıyor veya hatalı biçimlendirme yapıyor.** * **Sebep**: `husky` veya `lint-staged` kurulumu eksik, `package.json` içindeki script'lerde hata var veya `lint-staged` doğru dosyaları hedeflemiyor. * **Çözüm**: * `husky` ve `lint-staged`'in `package.json` dosyanızda `devDependencies` olarak tanımlandığından emin olun. * `npm run prepare` komutunu çalıştırarak `husky`'nin etkinleştirildiğinden emin olun (bu, Git hook'larını yükler). * `lint-staged` yapılandırmanızdaki dosya uzantılarının (`*.{js,ts,jsx,tsx}` vb.) doğru olduğundan ve Prettier komutunun doğru şekilde çalıştığından emin olun. ### BÖLÜM 10 - Performans Optimizasyonu ## Prettier Performans Optimizasyonu (2026) Büyük ölçekli projelerde veya monorepolarda Prettier'ın performansı önemli hale gelebilir. Özellikle CI/CD süreçlerinde veya çok sayıda dosya üzerinde çalışırken biçimlendirme sürelerini optimize etmek, geliştirme akışınızı hızlandırır. İşte 2026'da kullanabileceğiniz bazı optimizasyon teknikleri: 1. **Sadece Değiştirilen Dosyaları Biçimlendirme (`lint-staged`)** En büyük performans kazancı, sadece Git tarafından staged edilmiş (commit edilecek) dosyaları biçimlendirmektir. `lint-staged` aracı bu iş için idealdir ve pre-commit hook'larıyla birlikte kullanılır. Bu sayede, 10.000 dosyalı bir projede tüm dosyaları biçimlendirmek yerine, sadece üzerinde çalıştığınız 5-10 dosyayı saniyeler içinde biçimlendirebilirsiniz. Kendi büyük ölçekli projelerimizde, bu yöntemle biçimlendirme süresini ortalama 30 saniyeden 2-3 saniyeye düşürdük, bu da geliştirici deneyimini önemli ölçüde iyileştirdi. 2. **Doğru `.prettierignore` Yapılandırması** Büyük `node_modules` dizinleri, `build` çıktıları, `dist` klasörleri veya otomatik oluşturulan dosyalar gibi Prettier'ın biçimlendirmesine gerek olmayan dizinleri `.prettierignore` dosyasına ekleyin. Bu, Prettier'ın tarayacağı dosya sayısını önemli ölçüde azaltır ve gereksiz işlem yükünü ortadan kaldırır. Örneğin, `dist/` klasörünüzdeki minified JavaScript dosyalarını biçimlendirmeye çalışmak sadece zaman kaybıdır. 3. **CI/CD Ortamında Önbellekleme** CI/CD pipeline'larında `node_modules` dizinini veya Prettier'ın kendisini önbelleğe almak, `npm install` veya `yarn install` sürelerini kısaltarak Prettier'ın kurulumunu ve çalışma süresini hızlandırır. Modern CI/CD platformları (GitHub Actions, GitLab CI, Jenkins) genellikle bu tür önbellekleme mekanizmalarını destekler. 4. **Prettier CLI'ı Doğru Kullanma** `prettier --write .` komutu tüm projeyi tararken, özellikle büyük bir değişiklik setindeyseniz veya sadece belirli dosyalar üzerinde çalışıyorsanız, `prettier --write ` gibi belirli dosyaları hedeflemek daha hızlı olabilir. Ayrıca, `--cache` bayrağını kullanmak, Prettier'ın daha önce biçimlendirdiği dosyaları tekrar kontrol etmesini engelleyebilir, ancak bu deneysel bir özelliktir ve dikkatli kullanılmalıdır. ### BÖLÜM 11 - Gerçek Dünya Proje Örneği (Mini Project) ## Gerçek Dünya Proje Örneği: Express API ile Prettier Entegrasyonu (2026) Şimdi Prettier'ı küçük bir Express.js API projesine entegre ederek, tüm öğrendiklerimizi pekiştirelim. Bu örnek, bir Node.js projesinde Prettier'ın nasıl çalıştığını ve Git hook'larıyla nasıl entegre edildiğini gösterecektir. **Proje Kurulumu:** 1. **Proje Dizini Oluşturma ve Başlatma**: ```bash mkdir express-prettier-api-2026 cd express-prettier-api-2026 npm init -y ``` 2. **Bağımlılıkları Kurma**: ```bash npm install express@4.19.2 # 2026 itibarıyla güncel npm install --save-dev prettier@3.2.5 husky@9.0.10 lint-staged@15.2.2 ``` 3. **`package.json` Güncelleme**: `package.json` dosyanızı açın ve `scripts` ile `devDependencies` bölümlerini aşağıdaki gibi güncelleyin. Ayrıca `lint-staged` yapılandırmasını da ekleyin. ```json // package.json { "name": "express-prettier-api-2026", "version": "1.0.0", "description": "Prettier entegreli basit Express API.", "main": "src/index.js", "scripts": { "start": "node src/index.js", "format": "prettier --write \"src/**/*.js\"", "check-format": "prettier --check \"src/**/*.js\"", "prepare": "husky" }, "keywords": ["express", "prettier", "api", "node.js", "2026"], "author": "Burak Balkı", "license": "ISC", "dependencies": { "express": "^4.19.2" }, "devDependencies": { "husky": "^9.0.10", "lint-staged": "^15.2.2", "prettier": "^3.2.5" }, "lint-staged": { "*.js": "prettier --write" } } ``` 4. **Prettier Yapılandırma Dosyası Oluşturma (`.prettierrc.json`)**: Projenizin kök dizininde `.prettierrc.json` adında bir dosya oluşturun ve aşağıdaki içeriği ekleyin. Bu, Prettier'ın nasıl biçimlendirme yapacağını tanımlar. ```json // .prettierrc.json { "singleQuote": true, "trailingComma": "all", "printWidth": 80, "tabWidth": 2, "semi": true } ``` 5. **Husky Pre-commit Hook Oluşturma**: Terminalde aşağıdaki komutu çalıştırarak Git'in `pre-commit` hook'unu etkinleştirin. Bu, her commit öncesi `lint-staged`'i çalıştıracak ve staged dosyaları Prettier ile biçimlendirecektir. ```bash npx husky add .husky/pre-commit "npx lint-staged" ``` 6. **API Kodunu Oluşturma (`src/index.js`)**: Projenizin kök dizininde `src` adında bir klasör oluşturun ve içine `index.js` dosyasını aşağıdaki biçimlendirilmemiş içerikle ekleyin: ```javascript // src/index.js (Biçimlendirmeden Önce) const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.json()); app.get('/api/users', (req, res) => { const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; res.json(users); }); app.post('/api/users', (req, res) => { const newUser = req.body; console.log('Yeni kullanıcı oluşturuldu:', newUser); res.status(201).json({ message: 'Kullanıcı başarıyla oluşturuldu', user: newUser }); }); app.listen(PORT, () => { console.log(`Sunucu ${PORT} portunda çalışıyor`); }); ``` 7. **Biçimlendirme ve Test**: Şimdi değişiklikleri Git'e ekleyin ve commit edin. `pre-commit` hook'unun otomatik olarak devreye girdiğini göreceksiniz. ```bash git add . git commit -m "feat: initial api setup with prettier" ``` Commit işlemi sırasında Prettier otomatik olarak `src/index.js` dosyasını `.prettierrc.json` kurallarına göre biçimlendirecektir. Dosyanız aşağıdaki gibi güncellenecektir: ```javascript // src/index.js (Biçimlendirmeden Sonra) const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.json()); app.get('/api/users', (req, res) => { const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ]; res.json(users); }); app.post('/api/users', (req, res) => { const newUser = req.body; console.log('Yeni kullanıcı oluşturuldu:', newUser); res.status(201).json({ message: 'Kullanıcı başarıyla oluşturuldu', user: newUser, }); }); app.listen(PORT, () => { console.log(`Sunucu ${PORT} portunda çalışıyor`); }); ``` API'yi çalıştırmak için: `npm start`. Tarayıcınızdan `http://localhost:3000/api/users` adresine giderek kullanıcıları görebilirsiniz. Bu örnek, Prettier'ın 2026'da modern bir Node.js projesine nasıl sorunsuz bir şekilde entegre edilebileceğ