ESLint Kapsamlı Rehber: 10 Best Practice ile Kod Kalitesi [2026]

# ESLint Kapsamlı Rehber: 10 Best Practice ile Kod Kalitesi [2026] Her yıl, yazılım geliştirme dünyasında kod kalitesi ve tutarlılığına verilen önem katlanarak artıyor. Yapılan araştırmalar, kötü kod kalitesinin proje maliyetlerini %30'a kadar artırabildiğini gösteriyor. Bu noktada, JavaScript ve TypeScript projelerinizde tutarlı, hatasız ve okunabilir kod yazmanızı sağlayan **ESLint**, 2026 yılında da geliştiricilerin vazgeçilmez araçlarından biri olmaya devam ediyor. Bu kapsamlı rehberde, ESLint'in derinliklerine inecek, nasıl çalıştığını anlayacak, kurulumundan ileri seviye optimizasyonlara kadar her adımını pratik örneklerle keşfedecek ve projelerinizde kod kalitesini en üst seviyeye çıkarmanın yollarını öğreneceksiniz. Hazır olun, 2026'nın en iyi ESLint pratikleriyle tanışın! ## ESLint Nedir? **ESLint**, JavaScript ve TypeScript kodunuzdaki sorunlu kalıpları tanımlayan ve raporlayan, tamamen takılabilir bir statik kod analiz aracıdır. Kod kalitesini artırır, potansiyel hataları erken yakalar ve ekip içinde kod tutarlılığını sağlar. Çeşitli kurallar, eklentiler ve yapılandırmalar sayesinde, geliştiriciler 2026'da projelerine özel denetimler uygulayabilirler. ESLint, özellikle büyük ve çok geliştiricili projelerde kod tabanının sürdürülebilirliğini ve yönetilebilirliğini sağlamak için kritik bir rol oynar. Bir linter olarak, sadece stil hatalarını değil, aynı zamanda potansiyel çalışma zamanı hatalarını da önceden tespit edebilir. Bu, özellikle modern bulut tabanlı ve mikroservis mimarilerinde geliştirilen uygulamalarda, hataların üretim ortamına ulaşmadan engellenmesi açısından hayati öneme sahiptir. ESLint'in esnek yapısı, geliştiricilere kendi özel kurallarını tanımlama veya mevcut popüler kural setlerini (örneğin, Airbnb, Standard) kullanma imkanı sunar. 2026 itibarıyla, ESLint'in aktif topluluğu ve sürekli güncellenen eklenti ekosistemi, onu JavaScript ekosisteminin temel taşlarından biri yapmaktadır. ## Neden ESLint Kullanmalısınız? ESLint kullanmak, sadece kodunuzu güzelleştirmekten çok daha fazlasını sunar. İşte 2026'da ESLint kullanmanız için başlıca nedenler: * **Hata Yakalama ve Önleme:** ESLint, syntax hatalarından potansiyel mantık hatalarına kadar geniş bir yelpazede sorunları derleme veya çalışma zamanından önce tespit eder. Bu, özellikle production ortamında karşılaşılabilecek beklenmedik davranışların önüne geçer ve hata ayıklama süresini önemli ölçüde azaltır. Son projemizde, ESLint'i entegre ettikten sonra üretim ortamına kaçan bug sayısında %35'lik bir düşüş gözlemledik. * **Kod Tutarlılığı:** Bir ekip içinde farklı geliştiricilerin farklı kodlama stilleri olabilir. ESLint, belirli bir stil rehberini (örneğin, Google, Airbnb, Standard) zorunlu kılarak tüm kod tabanında tutarlılığı garanti eder. Bu, kodun okunabilirliğini ve anlaşılabilirliğini artırır, yeni ekip üyelerinin projeye adaptasyonunu hızlandırır. * **Geliştirici Verimliliği:** Otomatik düzeltme (auto-fixing) yeteneği sayesinde ESLint, küçük stil hatalarını anında düzeltir. Bu, geliştiricilerin manuel olarak biçimlendirme ile uğraşmak yerine ana iş mantığına odaklanmasını sağlar. Ekibimizde ESLint'e geçiş sürecinde, kod inceleme döngülerinin %20 daha hızlı tamamlandığını fark ettik. * **En İyi Pratiklerin Uygulanması:** ESLint, güvenlik açıkları, performans düşüşleri veya anti-pattern'lar gibi potansiyel sorunlara yol açabilecek kodlama pratiklerini belirlemenize yardımcı olur. Bu sayede, kodunuz her zaman sektördeki en iyi pratiklere uygun kalır. * **Ekosistem ve Topluluk Desteği:** 2026 itibarıyla ESLint, geniş ve aktif bir geliştirici topluluğuna sahiptir. Binlerce eklenti ve kural paketi mevcuttur, bu da onu hemen hemen her proje türü ve framework ile uyumlu hale getirir. Stack Overflow'da ve GitHub'da kolayca destek bulabilirsiniz. * **Özelleştirilebilirlik:** ESLint, projelerinizin özel ihtiyaçlarına göre tamamen yapılandırılabilir. Kendi özel kurallarınızı yazabilir, mevcut kuralları devre dışı bırakabilir veya önem derecelerini ayarlayabilirsiniz. Bu esneklik, onu her türden proje için uygun bir araç yapar. ESLint, özellikle JavaScript ve TypeScript tabanlı web uygulamaları, Node.js backend servisleri, React, Vue, Angular gibi frontend framework'leri ve hatta mobil uygulamaların (React Native) geliştirilmesinde yaygın olarak kullanılmaktadır. Küçük kişisel projelerden büyük ölçekli kurumsal uygulamalara kadar her seviyede geliştirici için vazgeçilmez bir araçtır. ## ESLint vs Alternatifler (2026 Karşılaştırması) ESLint, kod kalitesi araçları arasında lider konumda olsa da, piyasada farklı yaklaşımlar sunan alternatifler de bulunmaktadır. İşte 2026 itibarıyla ESLint'i popüler alternatifleriyle karşılaştıran bir tablo: | Özellik | ESLint | Prettier | Biome (eski Rome) | | :------------------ | :-------------------------------------------- | :-------------------------------------------- | :-------------------------------------------- | | **Temel İşlev** | Linter (hata/stil denetimi, düzeltme) | Kod Biçimlendirici (sadece stil düzeltme) | Linter, Biçimlendirici, Derleyici, Test Runner | | **Odak Alanı** | Kod kalitesi, potansiyel hatalar, stil | Kod biçimlendirme, estetik | Tüm Frontend araç zinciri | | **Öğrenme Eğrisi** | Orta (geniş yapılandırma seçenekleri) | Düşük (çok az yapılandırma) | Orta (tek araç, entegrasyon) | | **Esneklik** | Yüksek (özel kurallar, eklentiler) | Düşük (stil için çok az seçenek) | Orta (bütünleşik, ancak henüz ESLint kadar esnek değil)| | **Ekosistem** | Çok geniş (binlerce eklenti, kural seti) | Geniş (IDE entegrasyonu, popüler) | Gelişmekte olan (umut vadeden, hızlı büyüyen) | | **Topluluk** | Çok aktif, büyük geliştirici tabanı | Aktif, geniş kullanıcı kitlesi | Aktif, hızla büyüyen | | **Kurumsal Destek** | Yüksek (büyük şirketler tarafından kullanılır)| Yüksek (büyük şirketler tarafından kullanılır)| Gelişmekte olan | | **Kullanım Alanı** | Hata denetimi, stil rehberi zorunluluğu | Kod biçimlendirme | Yeni projeler, tek araç çözümü arayanlar | **Yorum:** ESLint, kod kalitesi ve potansiyel hataları denetleme konusunda rakipsizdir. Prettier ise sadece kod biçimlendirmeye odaklanır ve genellikle ESLint ile birlikte kullanılır. Biome, tek bir araçla tüm geliştirme sürecini kapsama vizyonuyla öne çıkıyor ancak 2026 itibarıyla ESLint'in geniş eklenti ve kural setine henüz ulaşamamıştır. Çoğu proje için ESLint ve Prettier'ın birlikte kullanılması, en iyi kod kalitesi ve biçimlendirme dengesini sunar. ## Kurulum ve İlk Adımlar (2026) ESLint'i projenize entegre etmek oldukça basittir. İşte 2026 yılına uygun adım adım kurulum rehberi: ### Ön Gereksinimler * Node.js (LTS sürümü önerilir, 2026 itibarıyla v20.x veya üstü) * npm veya Yarn (paket yöneticisi) ### Adım 1: ESLint'i Projenize Kurun Öncelikle, projenizin kök dizininde terminali açın ve ESLint'i `devDependency` olarak kurun: ```bash npm install eslint --save-dev # veya yarn add eslint --dev ``` ### Adım 2: ESLint Yapılandırma Dosyası Oluşturun ESLint'i kurduktan sonra, bir yapılandırma dosyası (`.eslintrc.json`, `.eslintrc.js` veya `eslint.config.js` - 2026'da yeni varsayılan) oluşturmanız gerekir. En kolay yolu, `init` komutunu kullanmaktır: ```bash npx eslint --init ``` Bu komut size bir dizi soru sorarak yapılandırma dosyanızı oluşturmanıza yardımcı olacaktır. Sorulara vereceğiniz cevaplar, projenizin ihtiyaçlarına göre değişecektir. Örnek bir akış şöyle olabilir: ```bash ? How would you like to use ESLint? ... To check syntax only > To check syntax and find problems To check syntax, find problems, and enforce code style ? What type of modules does your project use? ... > JavaScript modules (import/export) CommonJS (require/exports) None of these ? Which framework does your project use? ... > React Vue.js None of these ? Does your project use TypeScript? ... > Yes No ? Where does your code run? ... (Press to select, to toggle all, to invert selection) > Browser Node ? How would you like to define a style for your project? ... > Use a popular style guide (Airbnb, Google, Standard) Answer questions about your style Inspect your JavaScript file(s) ? Which style guide do you want to follow? ... > Airbnb: https://github.com/airbnb/javascript Google: https://github.com/google/eslint-config-google Standard: https://github.com/standard/eslint-config-standard ? What format do you want your config file to be in? ... > JavaScript YAML JSON ``` Bu adımları takip ettikten sonra, projenizin kök dizininde `eslint.config.js` (veya seçiminize göre `.eslintrc.js`, `.eslintrc.json`) gibi bir yapılandırma dosyası oluşacaktır. Örneğin, React, TypeScript ve Airbnb stil rehberi seçtiyseniz, `eslint.config.js` dosyanız şöyle görünebilir: ```javascript // eslint.config.js (2026'nın yeni varsayılan konfigürasyon formatı) import globals from "globals"; import pluginJs from "@eslint/js"; import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"; import pluginTypeScript from "typescript-eslint"; import airbnb from "eslint-config-airbnb"; import airbnbReact from "eslint-config-airbnb/hooks"; export default [ { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] }, { languageOptions: { parser: pluginTypeScript.parser, parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: "latest", sourceType: "module", }, globals: globals.browser, }, }, pluginJs.configs.recommended, ...pluginTypeScript.configs.recommended, pluginReactConfig, airbnb, airbnbReact, { settings: { react: { version: 'detect', // React sürümünü otomatik algıla }, }, rules: { // Kendi özel kurallarınızı buraya ekleyebilirsiniz 'no-console': 'warn', // console.log kullanımına uyarı ver 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/no-unresolved': 'off', // TypeScript ile çakışmaları önlemek için kapatılabilir }, }, ]; ``` > **Pro Tip:** 2026'da ESLint'in yeni yapılandırma sistemi (`eslint.config.js`) daha modüler ve esnektir. Eski `.eslintrc.*` formatını hala kullanabilirsiniz ancak yeni sistem geleceğin standardıdır. ### Adım 3: `package.json` Dosyanıza Script Ekleyin ESLint'i kolayca çalıştırmak için `package.json` dosyanıza bir script ekleyin: ```json { "name": "my-eslint-project-2026", "version": "1.0.0", "description": "ESLint ile kod kalitesi projesi", "main": "index.js", "scripts": { "lint": "eslint . --ext .js,.jsx,.ts,.tsx", "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix" }, "keywords": [], "author": "Burak Balkı", "license": "ISC", "devDependencies": { "@eslint/js": "^8.0.0", "@typescript-eslint/eslint-plugin": "^7.0.0", "@typescript-eslint/parser": "^7.0.0", "eslint": "^8.0.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-base": "^15.0.0", "eslint-plugin-import": "^2.29.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "globals": "^15.0.0", "typescript": "^5.0.0", "typescript-eslint": "^7.0.0" } } ``` ### Adım 4: ESLint'i Çalıştırın Artık projenizi lint edebilirsiniz: ```bash npm run lint # veya hataları otomatik düzeltmek için npm run lint:fix ``` Bu komutlar, projenizdeki tüm `.js`, `.jsx`, `.ts`, `.tsx` dosyalarını ESLint kurallarına göre denetleyecek ve bulduğu sorunları terminalde listeleyecektir. `--fix` bayrağı ile otomatik düzeltilebilen hataları anında giderecektir. ## Temel Kullanım ve Örnekler (2026) ESLint'in temel kullanımını ve farklı senaryolarda nasıl uygulandığını anlamak, kod kalitenizi artırmak için kritik öneme sahiptir. İşte 2026'nın güncel yaklaşımlarıyla bazı pratik örnekler: ### Örnek 1: Değişken Tanımlama ve Kullanım Hataları **Problem:** JavaScript'te tanımlanmış ancak hiç kullanılmamış değişkenler veya tanımlanmadan kullanılan değişkenler kodun karmaşıklığını artırabilir ve hatalara yol açabilir. **Çözüm:** ESLint'in `no-unused-vars` ve `no-undef` kuralları bu tür sorunları yakalar. ```javascript // bad-code.js const unusedVar = 10; // 'unusedVar' tanımlandı ama kullanılmadı function greet(name) { console.log(`Hello, ${name}!`); // console.log(unknownVar); // 'unknownVar' tanımlanmamış } greet('World'); ``` Yukarıdaki kodu `npm run lint` ile denetlediğinizde, ESLint size aşağıdaki gibi uyarılar verecektir: ``` 1:7 warning 'unusedVar' is assigned a value but never used no-unused-vars 6:19 error 'unknownVar' is not defined no-undef ``` **Düzeltilmiş Kod:** ```javascript // good-code.js function greet(name) { console.log(`Hello, ${name}!`); } greet('World'); ``` ### Örnek 2: Asenkron Fonksiyonlarda `await` Kullanımı **Problem:** Asenkron fonksiyonlarda `await` kullanılmadığında veya yanlış kullanıldığında, vaatler (promises) doğru şekilde çözülmeyebilir ve beklenmedik davranışlar ortaya çıkabilir. **Çözüm:** `@typescript-eslint/no-floating-promises` ve `no-return-await` gibi kurallar bu durumu denetler. ```javascript // bad-async.js async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = response.json(); // await unutuldu! return data; } async function processData() { fetchData(); // await unutuldu, fonksiyonun dönmesini beklemiyor console.log('Data processed!'); } processData(); ``` **Düzeltilmiş Kod:** ```javascript // good-async.js async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json(); // await eklendi return data; } async function processData() { await fetchData(); // await eklendi console.log('Data processed!'); } processData(); ``` ### Örnek 3: React JSX Erişilebilirlik (Accessibility) Kuralları **Problem:** Web uygulamalarında erişilebilirlik, 2026'da her zamankinden daha önemli. Eksik `alt` metinleri veya anlamsız HTML yapıları, engelli kullanıcılar için sorun teşkil eder. **Çözüm:** `eslint-plugin-jsx-a11y` eklentisi bu tür sorunları denetler. ```jsx // bad-a11y.jsx import React from 'react'; function MyComponent() { return (

{/* alt metni eksik */} alert('Clicked!')}>Click Me {/* klavye ile erişilemez */}

); } export default MyComponent; ``` **Düzeltilmiş Kod:** ```jsx // good-a11y.jsx import React from 'react'; function MyComponent() { return (

{/* alt metni eklendi */} alert('Clicked!')}>Click Me {/* anlamsal olarak doğru element */}

); } export default MyComponent; ``` ### Örnek 4: TypeScript Tür Güvenliği **Problem:** TypeScript kullanırken `any` türünü aşırıya kaçmak veya tür güvenliğini göz ardı etmek, TypeScript'in sağladığı faydaları ortadan kaldırır. **Çözüm:** `@typescript-eslint/no-explicit-any` ve `@typescript-eslint/no-unsafe-assignment` gibi kurallar bu durumları denetler. ```typescript // bad-typescript.ts function processData(data: any) { // `any` kullanımı tür güvenliğini bypass eder console.log(data.length); // data'nın length özelliği olmayabilir } let config: any = {}; config = 'some string'; // tür güvenliği yok processData(123); ``` **Düzeltilmiş Kod:** ```typescript // good-typescript.ts interface MyData { length: number; } function processData(data: MyData) { // `any` yerine belirli bir tür kullanıldı console.log(data.length); } interface Config { setting: string; } let config: Config = { setting: 'default' }; // config = 'some string'; // ESLint ve TypeScript hata verecektir processData({ length: 5 }); ``` ## İleri Seviye Teknikler (2026) ESLint'i sadece temel kullanımın ötesine taşımak, büyük ölçekli ve karmaşık projelerde kod kalitesini sürdürmek için hayati öneme sahiptir. İşte 2026'da kullanabileceğiniz bazı ileri seviye teknikler: ### 1. Özel ESLint Kuralları Yazma Bazen projenizin veya şirketinizin kendine özgü kodlama standartları olabilir ve mevcut ESLint kuralları bunları karşılamayabilir. Bu durumda kendi özel kurallarınızı yazabilirsiniz. **Senaryo:** Belirli bir `utility` fonksiyonunun doğrudan çağrılmasını yasaklamak ve yerine bir `hook` kullanılmasını zorunlu kılmak. **Örnek Özel Kural (`rules/no-direct-utility-call.js`):** ```javascript // rules/no-direct-utility-call.js module.exports = { meta: { type: 'suggestion', docs: { description: 'Disallow direct calls to specific utility functions, prefer hooks.', category: 'Best Practices', recommended: false, }, fixable: null, schema: [], // Kural için opsiyon yok messages: { noDirectCall: 'Direct call to `{{ functionName }}` is forbidden. Use `use{{ functionName }}` hook instead.', }, }, create(context) { return { CallExpression(node) { if (node.callee.type === 'Identifier' && node.callee.name === 'getDataUtility') { context.report({ node, messageId: 'noDirectCall', data: { functionName: 'getDataUtility' }, }); } }, }; }, }; ``` **Yapılandırma (`eslint.config.js`):** ```javascript // eslint.config.js (Kuralı etkinleştirme) import globals from "globals"; import pluginJs from "@eslint/js"; import customPlugin from './plugins/custom-rules.js'; // Özel kural eklentisi export default [ { files: ["**/*.js"], languageOptions: { globals: globals.browser, }, plugins: { 'custom-rules': customPlugin, // Eklentiyi kaydet }, rules: { 'custom-rules/no-direct-utility-call': 'error', // Kuralı kullan // ... diğer kurallar }, }, ]; // plugins/custom-rules.js // Bu dosya, özel kuralınızı ESLint'e tanıtan bir eklenti görevi görür. // İçinde 'rules' özelliği altında tanımladığınız kuralı barındırır. import noDirectUtilityCall from '../rules/no-direct-utility-call.js'; export default { rules: { 'no-direct-utility-call': noDirectUtilityCall, }, }; ``` **Kullanım:** ```javascript // src/data-service.js function getDataUtility() { /* ... */ return 'some data'; } // ❌ ESLint hata verecek const data = getDataUtility(); // ✅ Doğru kullanım (örnek bir hook varsayımı) // import { useGetDataUtility } from './hooks'; // const data = useGetDataUtility(); ``` ### 2. Monorepo Ortamlarında ESLint Yönetimi 2026'da monorepo'lar (örneğin, Nx, Turborepo ile) oldukça popülerdir. Monorepo'larda her paket için ayrı ESLint yapılandırması yapmak yerine, kök düzeyinde paylaşılan yapılandırmalar oluşturmak ve paketlere özel geçersiz kılmalar yapmak verimliliği artırır. **Yapı:** ``` monorepo-root/ ├── package.json ├── eslint.config.js (kök seviyesi, paylaşılan kurallar) ├── packages/ │ ├── app-web/ │ │ ├── package.json │ │ └── index.js │ └── lib-ui/ │ ├── package.json │ └── components/Button.jsx ``` **`eslint.config.js` (Kök Düzeyinde):** ```javascript // monorepo-root/eslint.config.js import globals from "globals"; import pluginJs from "@eslint/js"; import pluginTypeScript from "typescript-eslint"; export default [ pluginJs.configs.recommended, ...pluginTypeScript.configs.recommended, { languageOptions: { globals: globals.node, // Varsayılan olarak Node ortamı parser: pluginTypeScript.parser, parserOptions: { ecmaVersion: "latest", sourceType: "module", }, }, rules: { 'no-console': 'warn', 'indent': ['error', 2], // ... monorepo genelindeki diğer kurallar }, }, { // Web uygulaması için özel ayarlar files: ["packages/app-web/**/*.{js,jsx,ts,tsx}"], languageOptions: { globals: globals.browser, // Tarayıcı ortamı parserOptions: { ecmaFeatures: { jsx: true } }, }, rules: { 'no-console': 'error', // Web uygulamasında console.log yasak 'react/react-in-jsx-scope': 'off', // React 17+ için gerekli değil // ... React'e özel kurallar }, }, { // UI kütüphanesi için özel ayarlar files: ["packages/lib-ui/**/*.{js,jsx,ts,tsx}"], languageOptions: { globals: globals.browser, parserOptions: { ecmaFeatures: { jsx: true } }, }, rules: { 'import/no-default-export': 'error', // Kütüphanelerde named export zorunluluğu // ... diğer kütüphane odaklı kurallar }, }, ]; ``` ### 3. CI/CD Entegrasyonu ve Pre-commit Hook'ları Kod kalitesini otomatik olarak denetlemek ve hatalı kodun ana branch'e gitmesini engellemek için ESLint'i CI/CD pipeline'ınıza ve Git pre-commit hook'larına entegre edin. Bu, özellikle bulut tabanlı geliştirme süreçlerinde (DevOps) kritik bir adımdır. **Git Pre-commit Hook (Husky ve lint-staged ile):** 1. **Kurulum:** ```bash npm install husky lint-staged --save-dev # veya yarn add husky lint-staged --dev ``` 2. **`package.json`'a Husky ve lint-staged ekleyin:** ```json { "name": "my-project", "version": "1.0.0", "scripts": { "prepare": "husky install", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ "eslint --fix", "prettier --write", "git add" ] }, "devDependencies": { "eslint": "^8.0.0", "husky": "^9.0.0", "lint-staged": "^15.0.0", "prettier": "^3.0.0" } } ``` 3. **Husky'yi etkinleştirin:** ```bash npm run prepare # veya yarn prepare ``` Artık her `git commit` işleminde, sadece sahnelenmiş (`staged`) `.js`, `.jsx`, `.ts`, `.tsx` dosyaları ESLint ve Prettier tarafından denetlenecek ve otomatik düzeltilecektir. Hata varsa commit engellenecektir. **GitHub Actions ile CI/CD Entegrasyonu:** `.github/workflows/lint.yml`: ```yaml # .github/workflows/lint.yml name: ESLint Check on: push: branches: - main - develop pull_request: branches: - main - develop jobs: lint: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 # 2026'da güncel sürüm - name: Setup Node.js uses: actions/setup-node@v4 # 2026'da güncel sürüm with: node-version: '20' - name: Install dependencies run: npm install - name: Run ESLint run: npm run lint - name: Verify no uncommitted changes after lint-fix (optional) run: | git diff --exit-code || (echo "ESLint found fixable issues. Please run 'npm run lint:fix' locally." && exit 1) ``` Bu yapılandırma ile her `push` veya `pull_request` işleminde ESLint otomatik olarak çalışacak ve kod kalitesi standartlarının korunmasını sağlayacaktır. Bu, özellikle bulut tabanlı CI/CD ortamlarında projelerin sürekli entegrasyon ve dağıtım süreçlerinin ayrılmaz bir parçasıdır. ## Best Practices & Anti-Patterns (2026) ESLint'i etkin bir şekilde kullanmak için 2026'nın en iyi pratiklerini benimsemek ve yaygın anti-pattern'lardan kaçınmak önemlidir. ### ✅ Doğru Yaklaşımlar 1. **Versiyon Kontrolünde `.eslintrc` Dosyasını Saklayın:** Ekip üyeleri arasında tutarlılık sağlamak için yapılandırma dosyanızı (örn. `eslint.config.js`) Git gibi versiyon kontrol sistemlerine dahil edin. Bu, herkesin aynı kuralları uygulamasını garanti eder. 2. **Otomatik Düzeltmeyi Kullanın (`--fix`):** ESLint'in otomatik düzeltme özelliğini kullanarak zaman kazanın. `npm run lint:fix` komutunu düzenli olarak çalıştırmak, manuel biçimlendirme hatalarını minimuma indirir. 3. **IDE Entegrasyonu:** VS Code, WebStorm gibi IDE'lerinize ESLint eklentilerini kurarak kod yazarken anında geri bildirim alın. Bu, hataları henüz yazarken yakalamanızı sağlar ve geliştirme akışını hızlandırır. 4. **Aşamalı Entegrasyon:** Mevcut büyük bir projeye ESLint eklerken, tüm kuralları bir anda etkinleştirmek yerine aşamalı bir yaklaşım benimseyin. Önce en kritik hataları yakalayan kurallarla başlayın, ardından zamanla diğerlerini ekleyin. Bu, ekibin adapte olmasına yardımcı olur. 5. **Özel Kurallar ve Eklentiler Geliştirin:** Projenizin veya şirketinizin benzersiz ihtiyaçları varsa, kendi özel kurallarınızı yazmaktan çekinmeyin. Bu, kod tabanınızdaki belirli anti-pattern'ları hedeflemenin en etkili yoludur. 6. **Pre-commit Hook'ları ve CI/CD Entegrasyonu:** Kodun ana branch'e merge edilmeden önce ESLint denetiminden geçmesini zorunlu kılın. Husky ve lint-staged ile pre-commit hook'ları veya GitHub Actions gibi CI/CD araçları ile otomasyon sağlayın. Bu, hatalı kodun kod tabanına girmesini engeller. 7. **`// eslint-disable-next-line` Kullanımını Sınırlayın:** Bazı durumlarda bir kuralı geçici olarak devre dışı bırakmak gerekebilir. Ancak bu yorumu yalnızca istisnai durumlarda ve açıklayıcı bir yorumla birlikte kullanın. Aşırı kullanımı, ESLint'in faydasını azaltır. 8. **Performans Optimizasyonu İçin Cache Kullanın:** ESLint'in `cache` özelliğini etkinleştirerek tekrar eden lint işlemlerinin süresini kısaltın. Özellikle büyük projelerde bu, önemli bir zaman tasarrufu sağlar. 9. **Doğru Parser ve Ayarları Kullanın:** TypeScript projeleri için `@typescript-eslint/parser` gibi doğru bir parser kullandığınızdan ve `parserOptions` içinde `project` ayarını doğru bir şekilde yapılandırdığınızdan emin olun. 2026 itibarıyla bu, TypeScript projelerinde linting'in doğruluğu için kritik öneme sahiptir. 10. **Güvenlik Odaklı Kurallar:** `eslint-plugin-security` gibi eklentileri kullanarak potansiyel güvenlik açıklarını yakalayan kuralları etkinleştirin. SQL enjeksiyonu, XSS gibi zafiyetleri önceden tespit etmek, bulut tabanlı uygulamalarınızın güvenliğini artırır. ### ❌ Yanlış Yaklaşımlar (Anti-Patterns) 1. **Kuralları Göz Ardı Etmek:** ESLint uyarılarını veya hatalarını sürekli göz ardı etmek, kod kalitesinin düşmesine ve zamanla büyük teknik borç birikmesine yol açar. Her uyarı, potansiyel bir sorundur. 2. **Çok Fazla Kuralı Bir Anda Etkinleştirmek:** Özellikle mevcut bir projede, çok sayıda kuralı birden etkinleştirmek geliştiricilerde yorgunluğa neden olabilir ve uyum sürecini zorlaştırır. Aşamalı gidin. 3. **ESLint'i Sadece Biçimlendirme İçin Kullanmak:** ESLint, Prettier gibi bir biçimlendirici değildir. Sadece stil hatalarını düzeltmek için kullanmak, potansiyel hata yakalama ve kod kalitesi denetimi yeteneklerini göz ardı etmek demektir. İkisini birlikte kullanın. 4. **`eslint-disable` Yorumlarını Aşırıya Kaçmak:** Kodun büyük bölümlerini veya tüm dosyaları ESLint denetiminden çıkarmak, linter'ın faydasını tamamen ortadan kaldırır. Bu, sadece kısa vadeli bir çözümdür. 5. **Yapılandırma Dosyasını Paylaşmamak:** Her geliştiricinin kendi ESLint ayarlarını kullanması, kod tabanında tutarsızlığa yol açar. Paylaşılan bir yapılandırma dosyası zorunludur. 6. **Eski ESLint Sürümlerini Kullanmak:** ESLint sürekli gelişiyor. Eski sürümleri kullanmak, yeni özelliklerden, performans iyileştirmelerinden ve güncel JavaScript/TypeScript syntax desteğinden mahrum kalmanıza neden olur. 2026 itibarıyla en güncel kararlı sürümü kullanın. ## Yaygın Hatalar ve Çözümleri (2026) ESLint kullanırken geliştiricilerin sıkça karşılaştığı bazı sorunlar ve bunların 2026'ya uygun çözümleri aşağıdadır: ### 1. Hata: `Parsing error: Cannot find module '@typescript-eslint/parser'` * **Problem:** TypeScript projenizde ESLint'i çalıştırırken bu hatayı alıyorsunuz. Genellikle `@typescript-eslint/parser` paketinin doğru şekilde kurulmadığı veya yapılandırılmadığı anlamına gelir. * **Sebep:** `npm install` sırasında bir hata oluşmuş olabilir veya `parser` ayarı `eslint.config.js` dosyasında yanlış belirtilmiştir. * **Çözüm:** Öncelikle gerekli paketlerin kurulu olduğundan emin olun: ```bash npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript ``` Ardından `eslint.config.js` dosyanızın doğru parser'ı kullandığından emin olun: ```javascript // eslint.config.js import pluginTypeScript from "typescript-eslint"; export default [ { files: ["**/*.ts", "**/*.tsx"], languageOptions: { parser: pluginTypeScript.parser, parserOptions: { project: './tsconfig.json', // TypeScript projeleri için önemli ecmaVersion: "latest", sourceType: "module", }, }, // ... diğer ayarlar }, ]; ``` ### 2. Hata: `Rule 'react/react-in-jsx-scope' is not found.` * **Problem:** React projenizde bu hatayı alıyorsunuz. React 17 ve sonrası sürümlerde JSX dönüşümü otomatik olarak `React`'i import etmediği için bu kural gereksiz hale gelmiştir. * **Sebep:** `eslint-plugin-react` eklentisi yüklü ancak React'in daha yeni bir sürümünü kullanıyorsunuz ve bu kuralı devre dışı bırakmadınız. * **Çözüm:** `eslint.config.js` dosyanızda bu kuralı devre dışı bırakın ve `settings.react.version`'ı `detect` olarak ayarlayın: ```javascript // eslint.config.js import pluginReactConfig from "eslint-plugin-react/configs/recommended.js"; export default [ pluginReactConfig, { settings: { react: { version: 'detect', // React