Frontend Academy · Ders

Prettier ve ESLint Kurulumu

Otomatik biçimlendirme için Prettier'ı, hataları yakalamak için ESLint'i ekleyin; iki aracı da yapılandırıp kaydetme sırasında biçimlendirme iş akışına entegre edin.

Prettier ve ESLint Kurulumu, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Kod Biçemini Neden Otomatikleştirmeli?

Elle kod biçimlendirme tartışmaları ekip zamanını boşa harcar. Prettier kodu tutarlı bir biçime otomatik olarak dönüştürür. ESLint hataları yakalar ve en iyi uygulamaları zorunlu kılar. Birlikte, kod incelemelerinde yapılan yorumların bütün kategorilerini ortadan kaldırırlar.

Prettier'ı Kurma

Prettier'ı bir geliştirme bağımlılığı olarak yükleyin, bir config dosyası oluşturun ve package.json dosyasına bir biçimlendirme betiği ekleyin. Prettier'ın çalışması için config gerekmez; varsayılanlar makuldür, ancak bunları özelleştirebilirsiniz.

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

VSCode ile Prettier Entegrasyonu

Prettier - Code Formatter uzantısını yükleyin. Ardından bunu varsayılan biçimlendirici olarak ayarlayın ve ayarlarda formatOnSave özelliğini etkinleştirin. Artık bir dosyayı her kaydettiğinizde Prettier çalışır.

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

ESLint'i Kurma

ESLint'i yükleyin ve npm init @eslint/config ile başlatın. Bu sihirbaz; ortamınızı (tarayıcı/Node), modül sistemini ve TypeScript desteğini seçmenize yardımcı olur. Bir eslint.config.js dosyası oluşturur.

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

ESLint Yapılandırma Örneği

Tarayıcıda çalışan bir JavaScript projesi için basit bir ESLint düz config örneği. Kurallar 'error', 'warn' veya 'off' olabilir. Güçlü bir başlangıç temeli için @eslint/js recommended gibi paylaşılan config'leri genişletin.

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

TypeScript ESLint

TypeScript projelerinde TypeScript'e özgü sorunları yakalamak için typescript-eslint ekleyin: güvenli olmayan any kullanımı, eksik dönüş türleri ve yanlış kullanılan Promise'ler.

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Prettier ve ESLint'i Birlikte Kullanma

ESLint'in Prettier ile çakışan bazı biçimlendirme kuralları vardır. Bu kuralları devre dışı bırakmak için eslint-config-prettier kullanın; böylece tüm biçimlendirmeyi Prettier, yalnızca kod kalitesini de ESLint üstlensin.

npm install --save-dev eslint-config-prettier

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore ve .prettierignore

Araçlara hangi dosyaları atlayacaklarını bildirin. .eslintignore dosyası gitignore söz dizimini kullanır. Genellikle node_modules, dist ve oluşturulmuş dosyaları yok saymak istersiniz.

# .eslintignore
node_modules
dist
.next
coverage

Lintleme için npm Betikleri

CI'ın ve ekip arkadaşlarının bunları tutarlı bir şekilde çalıştırabilmesi için package.json dosyasına lint ve biçimlendirme betikleri ekleyin.

{
  "scripts": {
    "lint": "eslint src --ext .js,.ts,.tsx",
    "lint:fix": "eslint src --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src"
  }
}

İşleme Öncesi Kancalar için lint-staged ve husky

Her Git işlemesinden önce yalnızca hazırlama alanındaki dosyaları otomatik olarak lint denetiminden geçirmek ve biçimlendirmek için husky + lint-staged kullanın. Bu, biçimlendirilmemiş veya bozuk kodun depoya ulaşmasını engeller.

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

Temel Tutarlılık için EditorConfig

Bir .editorconfig dosyası, eklentilerden bağımsız olarak tüm düzenleyiciler ve IDE'ler arasında temel düzenleyici ayarlarını (girinti biçimi, satır sonları) zorunlu kılar. Bu dosyayı Prettier'ın yanına ekleyin.

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Hızlı Kontrol

Prettier kullanan bir ESLint config'ine eslint-config-prettier neden eklenmelidir?

Özet: Prettier ve ESLint

Prettier, VSCode uzantısı aracılığıyla kaydetme sırasında kodu otomatik olarak biçimlendirir. ESLint hataları ve biçem ihlallerini yakalar. Çakışmaları önlemek için eslint-config-prettier kullanın. İşleme öncesi zorunluluk için lint-staged + husky ekleyin. Tutarlı araçlar biçimlendirme tartışmalarını ortadan kaldırır ve hataları dağıtıma çıkmadan önce yakalar.

Sıkça Sorulan Sorular

“Prettier ve ESLint Kurulumu” dersi ücretsiz mi?

Evet — “Prettier ve ESLint Kurulumu” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Prettier ve ESLint Kurulumu” dersinde ne öğreneceğim?

Otomatik biçimlendirme için Prettier'ı, hataları yakalamak için ESLint'i ekleyin; iki aracı da yapılandırıp kaydetme sırasında biçimlendirme iş akışına entegre edin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Prettier ve ESLint Kurulumu” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Chrome DevTools: Elements Console Network
VSCode: Eklentiler, Emmet Kısayolları
Prettier ve ESLint Kurulumu
Tarayıcı Uyumluluğu ve caniuse.com

← Frontend Academy Sayfasına Dön