Prettier: Adım Adım Kapsamlı Başlangıç [2026 Rehberi]
Yazar: Burak Balkı | Kategori: Database | Okuma Süresi: 44 dk
Bu kapsamlı 2026 rehberinde, Prettier'ı sıfırdan kurmayı, yapılandırmayı ve mevcut iş akışlarınıza entegre etmeyi adım adım öğreneceksiniz. Otomatik kod biçi...
# Prettier: Adım Adım Kapsamlı Başlangıç [2026 Rehberi]
### Giriş Paragrafı
2026'da geliştirme süreçlerinin hızla evrildiği bu çağda, kod kalitesi ve ekip içi tutarlılık her zamankinden daha kritik hale geldi. Geliştiriciler olarak, kodlama standartları üzerindeki bitmek bilmeyen tartışmalarla zaman kaybetmek yerine, yaratıcı çözümlere odaklanmak isteriz. İşte tam bu noktada **Prettier**, otomatik kod biçimlendirme yetenekleriyle devreye girerek bu sorunu kökten çözüyor ve projelerinizi 2026'nın en güncel standartlarına taşıyor. Bu kapsamlı rehberde, Prettier'ı sıfırdan kurmayı, yapılandırmayı ve mevcut iş akışlarınıza entegre etmeyi adım adım öğreneceksiniz.
## Prettier Nedir?
Prettier, 2026 itibarıyla en popüler ve yaygın kullanılan, opinionated bir kod biçimlendiricisidir. JavaScript, TypeScript, CSS, HTML, JSON, GraphQL, Markdown ve daha birçok dil için otomatik kod formatlama sağlayarak geliştiricilerin kod stilini düşünmek yerine mantığa odaklanmasına olanak tanır. Projelerde tutarlı bir kod standardı oluşturur ve ekip içi işbirliğini kolaylaştırır.
Prettier, kodunuzu ayrıştırır ve kendi belirlediği kurallara göre yeniden biçimlendirir. Bu 'opinionated' yaklaşım, geliştiricilerin stil kılavuzları üzerinde zaman harcamasını engeller ve herkesin aynı kod stilini kullanmasını sağlar. Böylece, kod incelemeleri sırasında biçimlendirme hataları yerine, gerçek mantıksal sorunlara odaklanılabilir. Prettier'ın 2026'daki en güncel kararlı sürümü, geniş dil desteği ve esnek entegrasyon seçenekleriyle öne çıkmaktadır.
## Neden Prettier Kullanmalısınız?
2026'da modern yazılım geliştirme pratiklerinin vazgeçilmezi haline gelen Prettier, geliştirici deneyimini ve proje kalitesini artırmak için bir dizi somut fayda sunar:
* **Kod Tutarlılığı:** Ekip içindeki her geliştiricinin aynı kod stilini kullanmasını sağlar. Bu, özellikle büyük ve dağıtık ekiplerde kod okunabilirliğini ve anlaşılabilirliğini dramatik şekilde artırır.
* **Geliştirici Verimliliği:** Manuel kod biçimlendirme ile harcanan zamanı ortadan kaldırır. Geliştiriciler, kodun görünüşü yerine iş mantığına odaklanabilirler. Yapılan araştırmalar, otomatik biçimlendirmenin geliştirme süresini %15'e kadar azaltabileceğini göstermektedir.
* **Daha Hızlı Kod İncelemeleri:** Code review süreçlerinde stil tartışmaları azalır. İncelemeciler, biçimlendirme hataları yerine, kodun işlevselliği, performansı ve güvenlik açıklarına odaklanabilirler. Bu, 2026'da CI/CD döngülerinin hızlanmasına doğrudan katkı sağlar.
* **Daha Kolay Yeni Üye Adaptasyonu:** Yeni ekip üyeleri, projenin kod stilini öğrenmek için zaman harcamak zorunda kalmazlar. Prettier, projeye dahil olan herkesin anında doğru stil ile kod yazmasını sağlar.
* **Geniş Ekosistem ve Entegrasyon:** Prettier, 2026 itibarıyla tüm büyük IDE'ler (VS Code, WebStorm vb.), metin düzenleyiciler, sürüm kontrol sistemleri (Git Hooks) ve CI/CD platformları ile sorunsuz bir şekilde entegre olabilmektedir. Bu geniş destek, Prettier'ı her türlü geliştirme ortamı için ideal kılar.
* **Hata Azaltma:** Tutarlı kod, daha az hata anlamına gelir. Biçimlendirme hatalarının önüne geçmek, özellikle karmaşık veritabanı sorguları veya API entegrasyonlarında oluşabilecek sözdizimi hatalarını minimize eder.
Prettier, bu faydalarıyla 2026'nın en değerli geliştirici araçlarından biri olarak kabul edilmektedir. Hem bireysel geliştiriciler hem de büyük kurumsal projeler için vazgeçilmez bir araçtır.
## Prettier vs Alternatifler
Prettier, kod biçimlendirme alanında benzersiz bir felsefeye sahip olsa da, başka araçlar da benzer veya tamamlayıcı işlevler sunar. İşte 2026 itibarıyla Prettier'ı rakip veya tamamlayıcı araçlarla karşılaştıran bir tablo:
| Özellik | Prettier | ESLint (Formatter Olarak) | Biome (Eski Rome) |
| :------------------ | :------------------------------------------- | :----------------------------------------- | :----------------------------------------------- |
| **Felsefe** | Opinionated biçimlendirme, sıfır yapılandırma | Kural tabanlı linting ve isteğe bağlı biçimlendirme | Hızlı, hepsi bir arada araç (lint, format, test) |
| **Kapsam** | Sadece biçimlendirme | Linting, isteğe bağlı biçimlendirme | Linting, biçimlendirme, test etme, paket yönetimi |
| **Öğrenme Eğrisi** | Çok düşük (çoğu kural önceden belirlenmiş) | Orta (birçok kural ve yapılandırma seçeneği) | Orta (yeni bir ekosistem ve CLI) |
| **Yapılandırma** | Minimal (birkaç seçenek) | Kapsamlı (binlerce kural, eklenti) | Orta (kendi yapılandırma sistemi) |
| **Performans** | Hızlı | Orta (kural sayısına bağlı) | Çok hızlı (Rust ile yazıldığı için) |
| **Topluluk** | Çok büyük, aktif geliştirme | Çok büyük, endüstri standardı | Hızla büyüyen, yeni ve iddialı |
| **Kurumsal Destek** | Yaygın olarak benimsenmiş | Endüstri lideri | Artan benimseme |
| **Kullanım Alanı** | Otomatik kod biçimlendirme | Hata yakalama, stil denetimi | Modern web projeleri için bütünsel çözüm |
**Yorum:** Prettier, saf biçimlendirme konusunda rakipsizdir ve genellikle ESLint gibi linting araçlarıyla birlikte kullanılır. ESLint, kod kalitesini artırırken potansiyel hataları ve anti-pattern'ları yakalamak için daha fazla esneklik sunar. Biome ise, 2026'da ortaya çıkan yeni nesil, Rust tabanlı bir araç olarak hem linting hem de biçimlendirmeyi tek bir çatı altında toplamayı hedefler ve özellikle hız konusunda iddialıdır. Çoğu modern projede, Prettier ve ESLint'in birlikte kullanılması en iyi pratik olarak kabul edilir. Biome ise daha bütünsel bir yaklaşım arayanlar için cazip bir alternatif olabilir.
## Kurulum ve İlk Adımlar
Prettier'ı projenize dahil etmek oldukça basittir. İşte 2026 standartlarına uygun, adım adım kurulum ve ilk kullanım rehberi:
### Ön Gereksinimler
Prettier'ı kullanabilmek için sisteminizde Node.js (v16.x veya üzeri önerilir) ve npm veya Yarn yüklü olmalıdır.
### Adım 1: Proje Oluşturma (veya Mevcut Projeye Ekleme)
Eğer yeni bir projeye başlıyorsanız, öncelikle bir Node.js projesi başlatın:
```bash
mkdir my-prettier-project-2026
cd my-prettier-project-2026
npm init -y
```
Mevcut bir projeniz varsa bu adımı atlayabilirsiniz.
### Adım 2: Prettier'ı Projenize Kurun
Prettier'ı geliştirme bağımlılığı olarak projenize ekleyin:
```bash
npm install --save-dev prettier
# veya Yarn kullanıyorsanız:
yarn add --dev prettier
```
Bu komut, Prettier paketini `node_modules` klasörünüze indirecek ve `package.json` dosyanıza ekleyecektir.
### Adım 3: İlk Biçimlendirme İşlemini Gerçekleştirin
Şimdi projenizdeki dosyaları biçimlendirmek için Prettier'ı çalıştırabilirsiniz. Örnek olarak, bir `index.js` dosyası oluşturalım:
```javascript
// index.js
const myFunction = ( param1, param2 ) => {
console.log(param1,param2 );
if (param1 > 0) {return 'Positive';}else {return 'Negative';}
};
const result = myFunction( 5, 10 ); // Call the function
console.log( result );
// Bir veritabanı bağlantısı örneği (Database kategorisine atıf)
const mysql = require('mysql2');
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
database: 'test_db',
});
connection.connect(err => {
if (err) {console.error('Error connecting: ' + err.stack); return;}
console.log('Connected as id ' + connection.threadId);
});
connection.query('SELECT * FROM users', (err, results, fields) => {
if (err) throw err;
console.log('Users:', results);
});
connection.end();
```
Şimdi bu dosyayı Prettier ile biçimlendirelim:
```bash
npx prettier --write "**/*.js"
```
* `npx prettier`: `node_modules` içindeki Prettier CLI'ı çalıştırır.
* `--write`: Biçimlendirilmiş içeriği doğrudan dosyaya yazar.
* `"**/*.js"`: Geçerli dizindeki tüm `.js` uzantılı dosyaları hedefler. Diğer dosya türlerini de ekleyebilirsiniz (örn: `"**/*.{js,ts,json,css}"`).
`index.js` dosyanız şimdi şöyle görünmeli:
```javascript
// index.js
const myFunction = (param1, param2) => {
console.log(param1, param2);
if (param1 > 0) {
return 'Positive';
} else {
return 'Negative';
}
};
const result = myFunction(5, 10); // Call the function
console.log(result);
// Bir veritabanı bağlantısı örneği (Database kategorisine atıf)
const mysql = require('mysql2');
const connection = mysql.createConnection({
host: 'localhost',
user: 'root',
database: 'test_db',
});
connection.connect((err) => {
if (err) {
console.error('Error connecting: ' + err.stack);
return;
}
console.log('Connected as id ' + connection.threadId);
});
connection.query('SELECT * FROM users', (err, results, fields) => {
if (err) throw err;
console.log('Users:', results);
});
connection.end();
```
### Adım 4: Yapılandırma Dosyası Oluşturma
Prettier'ın varsayılan ayarları çoğu proje için yeterli olsa da, bazı kuralları özelleştirmek isteyebilirsiniz. Bunun için projenizin kök dizininde `.prettierrc.json` (veya `.prettierrc.js`, `.prettierrc.yaml` vb.) bir yapılandırma dosyası oluşturun:
```json
// .prettierrc.json
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}
```
Bu ayarlar, kodunuzu biçimlendirirken Prettier'ın nasıl davranacağını belirler.
### Adım 5: VS Code Entegrasyonu (Önerilen)
Çoğu geliştirici için en verimli yol, Prettier'ı doğrudan IDE'lerine entegre etmektir. VS Code için:
1. **Prettier Uzantısını Kurun:** VS Code Marketplace'ten "Prettier - Code formatter" uzantısını yükleyin.
2. **Varsayılan Biçimlendiriciyi Ayarlayın:** `Ctrl+,` (veya `Cmd+,`) ile Ayarlar'ı açın ve "Default Formatter" araması yapın. Açılır menüden "Prettier - Code formatter"ı seçin.
3. **Kaydederken Otomatik Biçimlendirmeyi Etkinleştirin:** Ayarlarda "Format On Save" araması yapın ve kutucuğu işaretleyin. Bu, her kaydettiğinizde kodunuzun otomatik olarak biçimlendirilmesini sağlayacaktır.
### Adım 6: Git Hooks ile Otomatikleştirme (Opsiyonel ama Çok Önemli)
Ekip projelerinde herkesin Prettier kullanmasını sağlamanın en iyi yolu, Git Hooks kullanmaktır. `lint-staged` ve `husky` paketleri ile bunu kolayca yapabilirsiniz. Bu sayede, sadece `git commit` yapmadan önce sahnelenmiş (staged) dosyalarınız otomatik olarak biçimlendirilir.
```bash
npm install --save-dev husky lint-staged
```
`package.json` dosyanıza aşağıdaki yapılandırmaları ekleyin:
```json
// package.json
{
"name": "my-prettier-project-2026",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
"prepare": "husky install"
},
"keywords": [],
"author": "Burak Balkı",
"license": "ISC",
"devDependencies": {
"husky": "^9.0.11",
"lint-staged": "^15.2.2",
"prettier": "^3.2.5"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx,json,css,md}": ["prettier --write"]
}
}
```
Ardından `husky`'yi etkinleştirin ve `pre-commit` hook'unu ekleyin:
```bash
npm run prepare
npx husky add .husky/pre-commit "npx lint-staged"
```
Artık `git commit` yaptığınızda, sahnelenmiş dosyalarınız otomatik olarak Prettier tarafından biçimlendirilecektir. Bu, 2026'da projelerinizde tutarlı kod kalitesini garanti etmenin en güçlü yollarından biridir.
## Temel Kullanım ve Örnekler
Prettier'ın farklı dosya türlerinde nasıl kullanıldığına dair pratik örneklere göz atalım. Her örnek, yaygın bir senaryoyu ve Prettier'ın buna nasıl çözüm getirdiğini göstermektedir.
### Örnek 1: JavaScript/TypeScript Dosyası Biçimlendirme
**Problem:** Karmaşık bir JavaScript fonksiyonu, okunabilirlik sorunları yaratıyor.
```javascript
// src/utils.js
const calculateTotal = (items, taxRate, discount) => {let total = 0;for (const item of items) {total += item.price * item.quantity;} total *= (1 + taxRate); if (discount > 0) {total -= discount;}return total;};
// TypeScript örneği
interface User { id: number; name: string; email: string; }
const getUserById = (id: number): User | undefined => { /* ... */ return {id: 1, name: 'Alice', email: 'alice@example.com'}; };
```
**Çözüm:** Prettier, bu kodu okunabilir ve standart bir formata dönüştürür.
```bash
npx prettier --write src/utils.js
```
**Çıktı (`src/utils.js`):**
```javascript
// src/utils.js
const calculateTotal = (items, taxRate, discount) => {
let total = 0;
for (const item of items) {
total += item.price * item.quantity;
}
total *= 1 + taxRate;
if (discount > 0) {
total -= discount;
}
return total;
};
// TypeScript örneği
interface User {
id: number;
name: string;
email: string;
}
const getUserById = (id: number): User | undefined => {
/* ... */ return {
id: 1,
name: 'Alice',
email: 'alice@example.com',
};
};
```
### Örnek 2: React Bileşeni Biçimlendirme
**Problem:** Bir React bileşeni, JSX içindeki girintileme ve prop düzeni sorunları içeriyor.
```jsx
// src/components/ProductCard.jsx
import React from 'react';
const ProductCard = ({ product, onAddToCart, isAdmin }) => (
);
export default ProductCard;
```
**Çözüm:** Prettier, JSX yapısını düzenler ve okunabilirliği artırır.
```bash
npx prettier --write src/components/ProductCard.jsx
```
**Çıktı (`src/components/ProductCard.jsx`):**
```jsx
import React from 'react';
const ProductCard = ({ product, onAddToCart, isAdmin }) => (
);
export default ProductCard;
```
### Örnek 3: CSS/SCSS Biçimlendirme
**Problem:** CSS kuralları tutarsız girintileme ve boşluklara sahip.
```css
/* src/styles/main.css */
.container{ margin: 0 auto; padding: 15px; }
.button {
background-color: #007bff;
color: white;
border: none; border-radius: 5px; padding: 10px 20px;
cursor: pointer;
}
```
**Çözüm:** Prettier, CSS kurallarını okunabilir bir düzene sokar.
```bash
npx prettier --write src/styles/main.css
```
**Çıktı (`src/styles/main.css`):**
```css
/* src/styles/main.css */
.container {
margin: 0 auto;
padding: 15px;
}
.button {
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
```
### Örnek 4: JSON Biçimlendirme
**Problem:** Bir yapılandırma dosyası olan `config.json` düzensiz ve okunaksız.
```json
// config.json
{
"appName": "My App",
"version": "1.0.0",
"settings": { "debugMode": true, "logLevel": "info" },
"features": [ "auth", "payments" ]
}
```
**Çözüm:** Prettier, JSON dosyalarını standart ve okunabilir bir formata dönüştürür.
```bash
npx prettier --write config.json
```
**Çıktı (`config.json`):**
```json
// config.json
{
"appName": "My App",
"version": "1.0.0",
"settings": {
"debugMode": true,
"logLevel": "info"
},
"features": ["auth", "payments"]
}
```
### Örnek 5: SQL Sorgusu Biçimlendirme (Veritabanı Bağlantısı)
**Problem:** Uygulama kodundaki gömülü SQL sorguları karmaşık ve okunması zor.
```javascript
// src/db/queries.js
const getUserPosts = (userId) => `SELECT p.id, p.title, p.content, u.name as author FROM posts p JOIN users u ON p.user_id = u.id WHERE u.id = ${userId} ORDER BY p.created_at DESC;`;
const createNewUser = (name, email, passwordHash) => `INSERT INTO users (name, email, password_hash) VALUES ('${name}', '${email}', '${passwordHash}');`;
```
**Çözüm:** Prettier, SQL string literal'larını (eğer bir Prettier eklentisi kullanılıyorsa veya genel string biçimlendirme kuralları uygulanıyorsa) daha okunabilir hale getirebilir. SQL için özel bir Prettier eklentisi (`prettier-plugin-sql`) kullanmak en iyi sonuçları verecektir.
```bash
npm install --save-dev prettier-plugin-sql
```
`.prettierrc.json` dosyanızı güncelleyin:
```json
// .prettierrc.json
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"plugins": ["prettier-plugin-sql"]
}
```
Şimdi tekrar biçimlendirin:
```bash
npx prettier --write src/db/queries.js
```
**Çıktı (`src/db/queries.js`):**
```javascript
// src/db/queries.js
const getUserPosts = (userId) =>
`
SELECT
p.id,
p.title,
p.content,
u.name AS author
FROM
posts p
JOIN
users u ON p.user_id = u.id
WHERE
u.id = ${userId}
ORDER BY
p.created_at DESC;
`;
const createNewUser = (name, email, passwordHash) =>
`
INSERT INTO
users (name, email, password_hash)
VALUES
('${name}', '${email}', '${passwordHash}');
`;
```
> **Pro Tip:** Prettier'ın SQL desteği eklentiler aracılığıyla sağlanır. 2026 itibarıyla `prettier-plugin-sql` gibi eklentiler, uygulamanızdaki gömülü SQL sorgularını bile standartlaştırarak veritabanı etkileşim kodunuzun okunabilirliğini artırır.
## İleri Seviye Teknikler
Prettier'ı sadece temel biçimlendirme için kullanmakla kalmayıp, projelerinizin özel ihtiyaçlarına göre daha ileri düzeyde yapılandırabilirsiniz. İşte 2026'da kurumsal projelerde sıkça kullanılan bazı ileri teknikler:
### 1. Global Kurulum (Dikkatli Kullanım)
Prettier'ı tüm projelerinizde hızlıca kullanmak için global olarak kurabilirsiniz. Ancak, farklı projelerin farklı Prettier sürümleri veya yapılandırmaları olabileceği için bu yöntem dikkatli kullanılmalıdır.
```bash
npm install --global prettier
```
Ardından herhangi bir dosyayı biçimlendirebilirsiniz:
```bash
prettier --write index.js
```
> **Uyarı:** Global kurulum, proje bazlı bağımlılık yönetimini zorlaştırabilir ve farklı Prettier sürümlerinin çakışmasına neden olabilir. Her zaman proje seviyesinde kurulum önerilir.
### 2. Özel Yapılandırma ve Overrides
`.prettierrc.json` dosyanızda sadece genel kuralları değil, belirli dosya türleri veya dizinler için özel kuralları da tanımlayabilirsiniz. Örneğin, `package.json` dosyasını farklı bir `printWidth` ile biçimlendirmek isteyebilirsiniz.
```json
// .prettierrc.json
{
"semi": true,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2,
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 100
}
},
{
"files": "src/legacy/**/*.js",
"options": {
"tabWidth": 4,
"semi": false
}
}
]
}
```
Bu yapılandırma, tüm JSON dosyaları için `printWidth`'i 100'e çıkarırken, `src/legacy` dizinindeki eski JavaScript dosyaları için `tabWidth`'i 4'e ayarlar ve noktalı virgül kullanımını kapatır.
### 3. Prettier Pluginleri
Prettier, varsayılan olarak birçok dili desteklese de, ek dil veya format desteği için eklentiler kullanabilirsiniz. 2026 itibarıyla popüler eklentiler şunlardır:
* `prettier-plugin-tailwindcss`: Tailwind CSS sınıflarını otomatik sıralar.
* `prettier-plugin-prisma`: Prisma schema dosyalarını biçimlendirir.
* `prettier-plugin-sql`: SQL sorgularını daha okunabilir hale getirir.
Bir eklentiyi kurmak ve kullanmak için:
```bash
npm install --save-dev prettier-plugin-tailwindcss
```
`.prettierrc.json` dosyanıza ekleyin:
```json
// .prettierrc.json
{
"plugins": ["prettier-plugin-tailwindcss"]
}
```
### 4. CI/CD Entegrasyonu
Prettier'ı bir CI/CD (Sürekli Entegrasyon/Sürekli Dağıtım) sürecine entegre etmek, kod tabanınızın her zaman biçimlendirilmiş kalmasını sağlar. GitHub Actions ile basit bir örnek:
```yaml
# .github/workflows/prettier.yml
name: Prettier Check
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
prettier:
runs-on: ubuntu-latest
steps:
- name: Checkout Code
uses: actions/checkout@v4
with:
# Fetch all history to ensure proper linting/formatting
fetch-depth: 0
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
- name: Install Dependencies
run: npm ci
- name: Run Prettier Check
run: npx prettier --check "."
- name: Fail if files are not formatted
run: |
if [ -n "$(git status --porcelain)" ]; then
echo "Unformatted files found. Please run 'npm run format' and commit the changes."
git diff
exit 1
fi
```
Bu iş akışı, her `push` veya `pull_request`'te Prettier'ın kodunuzu kontrol etmesini sağlar. Eğer biçimlendirilmemiş dosyalar varsa, CI/CD işlemi başarısız olur ve geliştiriciye geri bildirim verir.
### 5. Monorepo'larda Kullanım
Monorepo yapısında, her paketin kendi `.prettierrc` dosyası olabilir veya kök dizindeki tek bir yapılandırma dosyası tüm monorepo'yu kapsayabilir. Kök dizinde bir `.prettierrc.json` dosyası oluşturup, `overrides` özelliğini kullanarak farklı paketler için özel kurallar tanımlamak yaygın bir 2026 best practice'idir.
```json
// monorepo-root/.prettierrc.json
{
"semi": true,
"singleQuote": true,
"overrides": [
{
"files": "packages/frontend/**/*.js",
"options": {
"tabWidth": 2
}
},
{
"files": "packages/backend/**/*.ts",
"options": {
"tabWidth": 4
}
}
]
}
```
## Best Practices & Anti-Patterns
Prettier'ı projelerinizde en verimli şekilde kullanmak için 2026 itibarıyla kabul görmüş bazı en iyi pratikler ve kaçınılması gereken anti-pattern'lar aşağıda listelenmiştir:
### ✅ Best Practices
* **`formatOnSave` Kullanın:** IDE'nizde (özellikle VS Code) "kaydederken biçimlendir" özelliğini etkinleştirin. Bu, kod yazma akışınızı kesintiye uğratmadan sürekli olarak biçimlendirilmiş kod üretmenizi sağlar.
* **Git Hooks Entegre Edin:** `husky` ve `lint-staged` gibi araçlarla `pre-commit` hook'u kullanarak, commit edilmeden önce sadece sahnelenmiş dosyaların biçimlendirilmesini sağlayın. Bu, ekip üyelerinin biçimlendirilmemiş kod commit etmesini engeller.
* **`.prettierrc` Dosyasını Versiyonlayın:** Prettier yapılandırma dosyanızı (örn. `.prettierrc.json`) sürüm kontrol sisteminize dahil edin. Bu, tüm ekip üyelerinin ve CI/CD ortamlarının aynı biçimlendirme kurallarını kullanmasını garanti eder.
* **Prettier'ı Linting Araçlarıyla (ESLint) Birlikte Kullanın:** Prettier sadece biçimlendirme yaparken, ESLint kod kalitesi, potansiyel hatalar ve anti-pattern'lar için denetim yapar. `eslint-config-prettier` ve `eslint-plugin-prettier` gibi paketleri kullanarak bu iki aracı sorunsuz bir şekilde entegre edin.
* **CI/CD Pipeline'ınıza Dahil Edin:** Her `push` veya `pull request`'te Prettier'ın `--check` bayrağı ile kodunuzu kontrol etmesini sağlayın. Bu, biçimlendirme standartlarının sürekli olarak korunmasını sağlar.
* **Prettier Eklentilerini Değerlendirin:** Özellikle Tailwind CSS, Prisma veya SQL gibi özel diller/framework'ler kullanıyorsanız, ilgili Prettier eklentilerini araştırın ve entegre edin. Bu, genel kod kalitenizi artırır.
* **Minimum Yapılandırma:** Prettier'ın "opinionated" felsefesine sadık kalın. Çok fazla kuralı manuel olarak değiştirmek, aracın temel faydasını (stil tartışmalarını azaltmak) ortadan kaldırabilir.
* **Veritabanı Etkileşim Kodunu Biçimlendirin:** Eğer uygulamanızda SQL sorguları veya ORM konfigürasyonları gibi veritabanı ile ilgili kodlar varsa, bunları da Prettier (veya ilgili eklentiler) ile biçimlendirmeye özen gösterin. Tutarlı biçimlendirme, bu kritik kod parçalarının okunabilirliğini ve bakımını kolaylaştırır.
### ❌ Anti-Patterns
* **Gereksiz Yere Devre Dışı Bırakma:** Prettier'ı `// prettier-ignore` yorumlarıyla sık sık devre dışı bırakmaktan kaçının. Bu, kod tabanında tutarsızlık yaratır ve Prettier'ın faydalarını azaltır. Eğer bir bölüm gerçekten biçimlendirilmemesi gerekiyorsa, bunun nedenini açıkça belgeleyin.
* **Manuel Biçimlendirme:** Prettier varken manuel olarak kod biçimlendirmeye çalışmayın. Bu, hem zaman kaybıdır hem de otomatik araçla çakışmalara yol açabilir.
* **Çok Fazla Kuralı Override Etme:** Prettier'ın varsayılan kurallarını çok fazla değiştirmek, "opinionated" felsefesinden uzaklaşmanıza ve stil tartışmalarının yeniden başlamasına neden olabilir. Mümkün olduğunca varsayılan ayarlara sadık kalın.
* **Sadece Geliştirici Ortamında Bırakma:** Prettier'ı sadece yerel geliştirme ortamında kullanıp CI/CD'ye entegre etmemek, biçimlendirilmemiş kodun ana branch'e girmesine neden olabilir.
* **Farklı Sürümleri Kullanma:** Ekip üyelerinin veya CI/CD ortamının farklı Prettier sürümleri kullanmasına izin vermeyin. Bu, biçimlendirme farklılıklarına yol açabilir. `package-lock.json` veya `yarn.lock` dosyalarını sürüm kontrolüne dahil ederek bu sorunu çözebilirsiniz.
## Yaygın Hatalar ve Çözümleri
Prettier ile çalışırken karşılaşabileceğiniz bazı yaygın sorunlar ve 2026 itibarıyla güncel çözümleri aşağıda listelenmiştir:
### Problem 1: "Prettier not found" veya "Command not found"
**Sebep:** Prettier paketi doğru şekilde kurulmamış veya PATH'e eklenmemiş olabilir.
**Çözüm:** Proje dizininizde Prettier'ın yerel olarak yüklü olduğundan emin olun (`npm install --save-dev prettier` veya `yarn add --dev prettier`). Eğer yerel kurulum yaptıysanız, `npx prettier` (npm ile gelen yürütücü) kullanın. Eğer global olarak kurduysanız (`npm install --global prettier`), doğrudan `prettier` komutunu kullanabilirsiniz. Ancak yerel kurulum her zaman önerilir.
```bash
# Proje içinde
npm install --save-dev prettier
npx prettier --write .
# Global (önerilmez)
npm install --global prettier
prettier --write index.js
```
### Problem 2: Prettier bazı dosyaları biçimlendirmiyor
**Sebep:** Prettier, varsayılan olarak bazı dosya türlerini yoksayar veya `.prettierignore` dosyanızda belirtilen dosyaları atlar.
**Çözüm:**
1. `.prettierignore` dosyanızı kontrol edin. Biçimlendirmek istediğiniz dosyaların orada listelenmediğinden emin olun.
2. Prettier komutunuzun doğru dosya uzantılarını hedeflediğinden emin olun. Örneğin, sadece `js` dosyalarını hedeflemek yerine `"**/*.{js,ts,json,css,md}"` gibi bir glob deseni kullanın.
3. Özel dosya türleri için (`.vue`, `.svelte`, `.graphql` vb.) ilgili Prettier eklentilerinin kurulu ve yapılandırılmış olduğundan emin olun.
```bash
# Tüm yaygın dosya türlerini hedefleme
npx prettier --write "**/*.{js,jsx,ts,tsx,json,css,scss,html,md,yml,yaml,graphql}"
```
### Problem 3: ESLint ile Prettier çakışmaları
**Sebep:** ESLint'in kendi biçimlendirme kuralları, Prettier'ın kurallarıyla çakışarak biçimlendirme döngülerine veya hatalara neden olabilir.
**Çözüm:** `eslint-config-prettier` ve `eslint-plugin-prettier` paketlerini kullanarak bu çakışmaları çözün. `eslint-config-prettier`, Prettier ile çakışan tüm ESLint kurallarını devre dışı bırakır. `eslint-plugin-prettier` ise Prettier'ı bir ESLint kuralı olarak çalıştırır ve biçimlendirme hatalarını linting hataları olarak gösterir.
```bash
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
```
`.eslintrc.json` dosyanızı güncelleyin:
```json
// .eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended" // Bu satır en sonda olmalı
],
"plugins": ["prettier"],
"rules": {
// ... diğer ESLint kurallarınız
"prettier/prettier": "error"
}
}
```
### Problem 4: VS Code'da Format On Save çalışmıyor
**Sebep:** VS Code'da varsayılan biçimlendirici ayarlanmamış veya Prettier uzantısı doğru şekilde yapılandırılmamış olabilir.
**Çözüm:**
1. VS Code'da `Ctrl+,` (veya `Cmd+,`) ile Ayarlar'ı açın.
2. "Default Formatter" araması yapın ve "Prettier - Code formatter"ı seçin.
3. "Format On Save" araması yapın ve kutucuğun işaretli olduğundan emin olun.
4. Çalışma alanı ayarlarınızın (Workspace Settings) genel ayarlara baskın gelmediğinden emin olun. Projenizin `.vscode/settings.json` dosyasını kontrol edin.
5. Bazen VS Code'u yeniden başlatmak sorunu çözebilir.
```json
// .vscode/settings.json (proje bazlı ayarlar)
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
```
## Performans Optimizasyonu
Prettier'ın kendisi oldukça hızlı bir araçtır. Ancak, büyük kod tabanlarında veya CI/CD ortamlarında Prettier'ın çalışma süresini daha da optimize etmek için 2026'da kullanılan bazı stratejiler mevcuttur:
1. **Sadece Değişen Dosyaları Biçimlendirme (Git Hooks ile):** En büyük performans kazancını, sadece üzerinde çalıştığınız veya değiştirdiğiniz dosyaları biçimlendirerek elde edersiniz. `lint-staged` gibi araçlar, `pre-commit` hook'u kullanarak sadece Git'e sahnelenmiş (staged) dosyaları Prettier'dan geçirir. Bu, tüm kod tabanını her commit'te taramaktan çok daha hızlıdır.
```json
// package.json
{
"lint-staged": {
"**/*.{js,jsx,ts,tsx,json,css,md}": ["prettier --write"]
}
}
```
2. **Paralel Çalıştırma:** Büyük kod tabanlarında, Prettier'ı birden fazla çekirdekte paralel olarak çalıştırmak performansı artırabilir. `prettier` CLI, varsayılan olarak bu tür optimizasyonları yapmasa da, kendi script'lerinizde veya CI/CD ortamınızda dosyaları parçalara ayırıp paralel olarak biçimlendirebilirsiniz. Ancak çoğu proje için bu nadiren gereklidir.
3. **Doğru Glob Desenleri Kullanma:** Prettier'ı çalıştırırken, yalnızca biçimlendirmek istediğiniz dosya türlerini ve dizinleri hedefleyen spesifik glob desenleri kullanın. Gereksiz yere tüm proje dizinini taramak, özellikle `node_modules` gibi büyük klasörleri içeren desenlerden kaçının.
```bash
# Kötü (node_modules'i tarayabilir)
npx prettier --write "**/*"
# İyi (sadece kaynak kod dosyalarını hedefler)
npx prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,md}" "config/
{product.name}
{product.description}
${product.price} {isAdmin && }{product.name}
{product.description}
${product.price} {isAdmin && ( )}