ESLint: Adım Adım Başlangıç ve Pratik Örnekler [2026 Rehberi]

Burak Balkı tarafından kaleme alınan bu rehber, 2026 yılı itibarıyla en güncel bilgilerle hazırlanmıştır. ### Giriş Paragrafı Kod tabanınız büyüdükçe, tutarlılığı ve hata ayıklamayı sürdürmek bir kabusa dönüşebilir. Özellikle büyük ekiplerde ve hızla gelişen projelerde, her geliştiricinin kendi kodlama alışkanlıkları farklılık gösterir. Bu durum, kodun okunabilirliğini azaltır, hatalara davetiye çıkarır ve uzun vadede bakım maliyetlerini artırır. Ancak endişelenmeyin; 2026 yılında modern web geliştirmenin vazgeçilmez araçlarından biri olan **ESLint**, bu sorunların üstesinden gelmek için güçlü bir çözüm sunar. Bu kapsamlı rehberde, ESLint'i sıfırdan kurmayı, temel özelliklerini kullanmayı ve kod kalitenizi nasıl artıracağınızı adım adım öğreneceksiniz. En güncel ESLint v9.x sürümüne odaklanarak, pratik örnekler ve 2026'nın en iyi uygulamalarıyla projelerinizi bir üst seviyeye taşıyın. ## ESLint Nedir? ESLint, JavaScript ve TypeScript kodlarında sorunlu kalıpları tanımlamak ve raporlamak için kullanılan, takılabilir bir statik kod analiz aracıdır. Geliştiricilerin kodlama standartlarını korumalarına, olası hataları üretim ortamına ulaşmadan tespit etmelerine ve kod tabanında tutarlılığı sağlamalarına yardımcı olur. Genellikle web geliştiricileri, front-end ve back-end mühendisleri tarafından temiz, okunabilir ve hatasız kod yazmak amacıyla kullanılır. Detaylıca açıklamak gerekirse, ESLint temel olarak bir *linter* görevi görür. Kodunuzu çalıştırmadan önce analiz eder ve belirli kurallara göre potansiyel sorunları (sözdizimi hataları, stil ihlalleri, kullanılmayan değişkenler, güvenlik açıkları vb.) belirler. Bu kurallar tamamen yapılandırılabilir olup, projenizin veya ekibinizin ihtiyaçlarına göre özelleştirilebilir. Örneğin, bir kural noktalı virgül kullanımını zorunlu kılarken, başka bir kural `console.log` kullanımını yasaklayabilir. ESLint'in modüler yapısı sayesinde, farklı framework'ler (React, Vue, Angular) ve diller (TypeScript) için özel eklentiler ve yapılandırmalar kolayca entegre edilebilir. Bu esneklik, ESLint'i 2026'da modern JavaScript/TypeScript ekosisteminin temel bir parçası haline getirmiştir. ## Neden ESLint Kullanmalısınız? ESLint kullanmak, sadece kodunuzu 'daha iyi' hale getirmekten öte, geliştirme sürecinizin genel verimliliğini ve kalitesini doğrudan etkileyen bir dizi somut fayda sunar. On yıldan fazla süredir sektörde edindiğim deneyimlerime göre, ESLint'in bir projeye entegrasyonu, özellikle büyük ve dinamik ekiplerde, kritik bir rol oynar. ### Somut Faydalar * **Hata Tespiti ve Önleme:** ESLint, kodunuzu çalıştırmadan önce potansiyel hataları ve sorunlu kalıpları tespit eder. Bu, runtime hatalarını azaltır ve hata ayıklama sürecini önemli ölçüde kısaltır. Örneğin, bir değişkeni tanımlamadan kullanmaya çalışmak veya bir fonksiyonu yanlış parametrelerle çağırmak gibi yaygın hatalar ESLint tarafından anında yakalanabilir. * **Kod Tutarlılığı:** Ekip üyeleri arasında farklı kodlama stilleri, kod tabanında karmaşaya yol açabilir. ESLint, belirli bir stil rehberini (örneğin, Airbnb veya Google stil rehberi) zorunlu kılarak tüm kodun tek tip olmasını sağlar. Bu, kodun okunabilirliğini artırır ve yeni geliştiricilerin projeye adaptasyonunu kolaylaştırır. * **Geliştirici Verimliliği:** Otomatik kod düzeltme (auto-fixing) yeteneği sayesinde ESLint, küçük stil hatalarını anında giderir. Bu, geliştiricilerin formatlama yerine işlevselliğe odaklanmasını sağlar ve manuel düzeltmeler için harcanan zamanı ortadan kaldırır. Production ortamında karşılaştığım en yaygın sorunlardan biri, küçük stil farklılıklarının kod incelemelerinde gereksiz zaman kayıplarına yol açmasıydı; ESLint bu sorunu temelden çözüyor. * **Gelişmiş Kod Kalitesi:** Daha temiz, daha tutarlı ve daha az hatalı kod, uzun vadede daha kolay bakımı yapılabilen ve daha güvenilir bir uygulama anlamına gelir. Bu, özellikle 2026 gibi hızlı değişen bir teknoloji ortamında, yazılımın ömrünü uzatır. * **Öğrenme ve Gelişim:** ESLint, yeni başlayan geliştiriciler için harika bir öğrenme aracıdır. Belirlenen kurallar ve uyarılar, en iyi uygulamaları ve yaygın anti-pattern'ları doğrudan kod yazarken öğrenmelerini sağlar. ### Kimler İçin Uygundur, Kimler İçin Değil? **Uygun olanlar:** * Her büyüklükteki JavaScript/TypeScript projesi. * Birden fazla geliştiricinin çalıştığı ekipler. * Yüksek kaliteli ve bakımı kolay kod hedefleyen projeler. * Otomatik kod inceleme süreçleri kurmak isteyenler. **Uygun olmayanlar (veya daha az öncelikli):** * Çok küçük, tek kullanımlık betikler (ancak yine de faydalı olabilir). * Hızlı prototipleme aşamasında, katı kuralların yaratıcılığı kısıtlayabileceği durumlar (ancak daha sonra entegre edilmesi önerilir). ### Ekosistem Büyüklüğü ESLint, 2026 itibarıyla JavaScript/TypeScript ekosisteminin en popüler araçlarından biridir. npm üzerinde aylık milyonlarca indirme sayısına sahiptir ve GitHub'da on binlerce yıldızla geniş ve aktif bir topluluğa sahiptir. Bu, sürekli güncellemeler, zengin eklenti desteği ve geniş bir bilgi tabanı anlamına gelir. Ekibimizde ESLint'e geçiş sürecinde öğrendiğimiz 3 kritik ders, topluluk desteğinin ve güncel dökümantasyonun ne kadar değerli olduğuydu. Herhangi bir sorunla karşılaştığınızda, Stack Overflow, GitHub Issues veya resmi dökümantasyonda hızlıca çözüm bulabilirsiniz. ## ESLint vs Alternatifler JavaScript/TypeScript geliştirme dünyasında kod kalitesini artırmak için ESLint dışında da araçlar bulunmaktadır. Ancak her birinin farklı bir odak noktası vardır. İşte ESLint'i diğer popüler araçlarla karşılaştıran bir tablo ve yorumu: | Özellik | ESLint | Prettier | Biome (eski Rome) | |---------------------|---------------------------------------|---------------------------------------|---------------------------------------| | **Ana İşlev** | Linter (Kod Kalitesi, Hata Tespiti) | Code Formatter (Stil Tutarlılığı) | Linter, Formatter, Compiler, Bundler | | **Odak Noktası** | Kural tabanlı kod analizi | Estetik kod biçimlendirme | Hepsi bir arada geliştirici araçları | | **Yapılandırılabilirlik** | Yüksek (çok sayıda kural, eklenti) | Düşük (çok az seçenek, opinionated) | Orta (ön tanımlı kurallar, bazı ayarlar)| | **Kullanım Alanı** | Hata tespiti, anti-pattern'lar, güvenlik | Kod stili tutarlılığı | Yeni projeler, entegre geliştirme | | **Ekosistem** | Çok geniş (binlerce kural/plugin) | Çok geniş (yaygın kabul görmüş) | Gelişmekte olan, iddialı | | **Topluluk** | Çok aktif, büyük | Çok aktif, büyük | Aktif, büyüyen | | **Kurumsal Destek** | Yaygın olarak benimsenmiş | Yaygın olarak benimsenmiş | Yeni, benimsenme sürecinde | | **Öğrenme Eğrisi** | Orta (yapılandırma gerektirebilir) | Düşük (neredeyse sıfır yapılandırma) | Orta (yeni bir araç seti) | Bu tabloya baktığımızda, ESLint'in temel olarak kod kalitesi ve potansiyel hataları tespit etmeye odaklandığını görüyoruz. Prettier ise tamamen kodun estetik biçimlendirmesinden sorumludur. Bu iki araç birbirini tamamlar: ESLint kodun *doğruluğunu* ve *kalitesini*, Prettier ise *görünümünü* sağlar. Biome ise daha yeni, hepsi bir arada bir araç olarak ortaya çıkmıştır ve gelecekte bu ikilinin yerini alma potansiyeline sahip olsa da, 2026 itibarıyla ESLint ve Prettier kombinasyonu hala sektör standardı konumundadır. Birçok projede, ESLint ve Prettier birlikte kullanılarak hem kod kalitesi hem de stil tutarlılığı en üst düzeyde sağlanır. ## Kurulum ve İlk Adımlar ESLint'i projenize entegre etmek oldukça basittir. Bu bölümde, 2026 yılındaki en güncel yaklaşımlarla ESLint'i projenize nasıl kuracağınızı ve ilk yapılandırmaları nasıl yapacağınızı adım adım göstereceğiz. Başlamadan önce, sisteminizde Node.js (tercihen LTS sürümü) ve npm veya Yarn'ın kurulu olduğundan emin olun. ### Ön Gereksinimler * Node.js (v18.x veya üzeri önerilir) * npm (v8.x veya üzeri) veya Yarn (v1.x veya v3.x) * Bir kod editörü (VS Code, WebStorm vb.) ### Adım 1: Projeyi Başlatma ve ESLint'i Kurma Öncelikle yeni bir proje dizini oluşturun ve içine girin. Ardından `package.json` dosyasını oluşturup ESLint'i geliştirme bağımlılığı olarak kurun. ```bash mkdir my-eslint-project-2026 cd my-eslint-project-2026 npm init -y npm install eslint --save-dev # veya yarn kullanıyorsanız: # yarn init -y # yarn add eslint --dev ``` Bu komutlar, projenizin temel yapısını oluşturacak ve ESLint paketini `node_modules` dizinine indirecektir. `--save-dev` bayrağı, ESLint'in sadece geliştirme ortamında kullanılacağını ve üretim bağımlılığı olmadığını belirtir. ### Adım 2: ESLint Yapılandırma Dosyasını Oluşturma ESLint'i kurduktan sonra, projeniz için bir yapılandırma dosyası oluşturmanız gerekir. Bu dosya, ESLint'in hangi kuralları uygulayacağını ve hangi ortamda çalışacağını tanımlar. ESLint CLI (Command Line Interface) aracı, bu süreci otomatikleştirmenize yardımcı olur. ```bash npx eslint --init ``` Bu komutu çalıştırdığınızda, ESLint size bir dizi soru sorarak `.eslintrc.js`, `.eslintrc.json` veya `.eslintrc.yml` gibi bir yapılandırma dosyası oluşturacaktır. Sorular genellikle şunları içerir: * **How would you like to use ESLint?** (Sadece sorunları kontrol et, sorunları kontrol et ve düzelt, bir stil rehberi ile) * **What type of modules does your project use?** (JavaScript modülleri, CommonJS) * **Which framework does your project use?** (React, Vue, None of these) * **Does your project use TypeScript?** (Evet/Hayır) * **Where does your code run?** (Tarayıcı, Node) * **How would you like to define a style for your project?** (Popüler stil rehberlerini kullan, kendi stilini tanımla) * **Which style guide do you want to follow?** (Airbnb, Google, Standard) * **What format do you want your config file to be in?** (JavaScript, YAML, JSON) Örnek bir `.eslintrc.js` dosyası çıktısı (seçimlerinize bağlı olarak değişebilir): ```javascript // .eslintrc.js module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended' ], parser: '@typescript-eslint/parser', parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 12, sourceType: 'module' }, plugins: [ 'react', '@typescript-eslint' ], rules: { 'indent': ['error', 2], 'linebreak-style': ['error', 'unix'], 'quotes': ['error', 'single'], 'semi': ['error', 'always'], 'no-console': 'warn' } }; ``` ### Adım 3: ESLint'i Çalıştırma Yapılandırma dosyanızı oluşturduktan sonra, ESLint'i kodunuz üzerinde çalıştırabilirsiniz. `package.json` dosyanıza bir `script` eklemek, bu işlemi daha kolay hale getirir. `package.json` dosyanızı açın ve `scripts` bölümüne aşağıdaki satırları ekleyin: ```json // package.json { "name": "my-eslint-project-2026", "version": "1.0.0", "description": "", "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": "^9.0.0" // 2026 için varsayılan güncel sürüm } } ``` Şimdi, projenizin kök dizininde bir `index.js` dosyası oluşturalım ve içine bazı hatalı kodlar yazalım: ```javascript // index.js const myVar = 'hello'; function greet(name) { console.log('Hello, ' + name); } greet('World') ``` Şimdi terminalde linting işlemini çalıştırın: ```bash npm run lint ``` ESLint size `index.js` dosyasındaki sorunları rapor edecektir. Örneğin, `semi` kuralı nedeniyle noktalı virgül eksikliği veya `no-console` kuralı nedeniyle `console.log` kullanımı gibi uyarılar göreceksiniz. `npm run lint:fix` komutunu çalıştırarak otomatik düzeltilebilen sorunları giderebilirsiniz. ```bash npm run lint:fix ``` Bu komut çalıştıktan sonra `index.js` dosyanız şu şekilde güncellenmiş olmalı: ```javascript // index.js (after lint:fix) const myVar = 'hello'; function greet(name) { // ESLint'in no-console kuralı nedeniyle bu satır hala uyarı verebilir // veya kural seviyesine göre hata olarak işaretlenebilir. console.log('Hello, ' + name); } greet('World'); ``` **Tebrikler!** ESLint'i başarıyla kurdunuz ve ilk linting işleminizi gerçekleştirdiniz. Bu temel kurulum, 2026'da çoğu JavaScript/TypeScript projesi için sağlam bir başlangıç noktası sunar. ## Temel Kullanım ve Örnekler ESLint'in gücü, çeşitli senaryolarda kod kalitesini artırmak için nasıl kullanılabileceğinde yatar. İşte size farklı kullanım durumlarını gösteren pratik örnekler. ### Örnek 1: Temel JavaScript Projesinde Linting **Problem:** Küçük bir JavaScript dosyasında stil tutarsızlıkları ve potansiyel hatalar var. **Çözüm:** Temel ESLint yapılandırması ile dosyayı lint etmek ve otomatik düzeltmeleri uygulamak. `src/utils.js`: ```javascript // src/utils.js function add(a,b) { return a+b } const multiply = (x, y) => x * y; console.log(add(5, 3)); ``` `.eslintrc.js` (basit bir yapılandırma): ```javascript // .eslintrc.js module.exports = { env: { browser: true, node: true, es2021: true }, extends: 'eslint:recommended', parserOptions: { ecmaVersion: 12, sourceType: 'module' }, rules: { 'indent': ['error', 2], 'linebreak-style': ['error', 'unix'], 'quotes': ['error', 'single'], 'semi': ['error', 'always'], 'no-unused-vars': ['warn', { 'args': 'none' }], 'space-before-function-paren': ['error', 'never'] } }; ``` Terminalde çalıştırma: ```bash npm run lint npm run lint:fix ``` `src/utils.js` (düzeltildikten sonra): ```javascript // src/utils.js (after lint:fix) function add(a, b) { return a + b; } const multiply = (x, y) => x * y; console.log(add(5, 3)); ``` **Sonuç:** Fonksiyon tanımındaki boşluklar düzeltildi, noktalı virgüller eklendi ve kod daha tutarlı hale geldi. ### Örnek 2: React Projesinde ESLint Kullanımı **Problem:** Bir React projesinde JSX sözdizimi hatalarını ve React'e özel kuralları kontrol etmek. **Çözüm:** `eslint-plugin-react` ve `eslint-plugin-react-hooks` gibi eklentileri entegre etmek. `.eslintrc.js` (React için): ```javascript // .eslintrc.js (React) module.exports = { env: { browser: true, es2021: true }, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended' ], parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 12, sourceType: 'module' }, settings: { react: { version: 'detect' // React sürümünü otomatik algılar } }, plugins: [ 'react', 'react-hooks' ], rules: { 'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off', 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'warn' } }; ``` `src/App.jsx`: ```jsx // src/App.jsx import { useState, useEffect } from 'react'; function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; }, []); // Hatalı bağımlılık dizisi return ( ); } export default MyComponent; ``` **Sonuç:** `useEffect` hook'undaki hatalı bağımlılık dizisi (`[]`) için `react-hooks/exhaustive-deps` kuralından bir uyarı alacaksınız. Bu, React uygulamalarında yaygın bir hatayı tespit etmenize yardımcı olur. ### Örnek 3: TypeScript Projesinde ESLint Kullanımı **Problem:** TypeScript kodunda tür güvenliğini ve stil tutarlılığını sağlamak. **Çözüm:** `@typescript-eslint/parser` ve `@typescript-eslint/eslint-plugin` kullanarak TypeScript'e özel linting yapmak. `.eslintrc.js` (TypeScript için): ```javascript // .eslintrc.js (TypeScript) module.exports = { env: { browser: true, es2021: true, node: true }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended' // TypeScript için önerilen kurallar ], parser: '@typescript-eslint/parser', parserOptions: { ecmaVersion: 12, sourceType: 'module', project: './tsconfig.json' // TypeScript projesi için gerekli }, plugins: [ '@typescript-eslint' ], rules: { '@typescript-eslint/no-explicit-any': 'warn', '@typescript-eslint/explicit-module-boundary-types': 'off' // Daha esnek olmak için kapatılabilir } }; ``` `src/types.ts`: ```typescript // src/types.ts interface User { id: number; name: string; email?: string; // Opsiyonel } function printUser(user: any) { // 'any' kullanımı burada uyarı verecek console.log(user.name); } const admin: User = { id: 1, name: 'Burak' }; printUser(admin); ``` **Sonuç:** `printUser` fonksiyonundaki `user: any` parametresi için `@typescript-eslint/no-explicit-any` kuralından bir uyarı alırsınız. Bu, TypeScript'in tür güvenliği faydalarını korumanıza yardımcı olur. ### Örnek 4: Özel Kurallar ve Kural Seviyeleri **Problem:** Belirli bir kuralı devre dışı bırakmak veya uyarı seviyesini değiştirmek. **Çözüm:** `.eslintrc.js` dosyasındaki `rules` bölümünü düzenlemek. `.eslintrc.js` (kural seviyelerini ayarlama): ```javascript // .eslintrc.js (Özel Kurallar) module.exports = { // ... diğer ayarlar ... rules: { 'no-console': 'off', // console.log kullanımına izin ver 'indent': ['error', 2, { 'SwitchCase': 1 }], // 2 boşluklu girinti, switch-case için 1 'quotes': ['error', 'single', { 'avoidEscape': true }], // Tek tırnak, kaçış karakteri gerekiyorsa çift tırnak kabul 'semi': ['error', 'always'], 'no-trailing-spaces': 'error' // Satır sonunda boşluk olmamalı } }; ``` **Açıklama:** Her kural için üç seviye belirleyebilirsiniz: * `'off'` veya `0`: Kuralı devre dışı bırakır. * `'warn'` veya `1`: Bir uyarı olarak gösterir (çalışmayı engellemez). * `'error'` veya `2`: Bir hata olarak gösterir (linting sürecini başarısız kılar, CI/CD'de sorun yaratır). Bazı kurallar, ikinci bir dizi elemanı olarak ek seçenekler alabilir. Örneğin, `indent` kuralı kaç boşluk kullanılacağını ve `SwitchCase` gibi özel durumları yapılandırmanıza olanak tanır. Bu örnekler, ESLint'in farklı projelerde ve senaryolarda ne kadar esnek ve güçlü olduğunu göstermektedir. 2026'da geliştirme süreçlerinizde kod kalitesini artırmak için bu temel kullanımları rahatlıkla uygulayabilirsiniz. ## İleri Seviye Teknikler ESLint, temel linting yeteneklerinin ötesinde, büyük ölçekli projelerde ve karmaşık geliştirme ortamlarında verimliliği artırmak için kullanılabilecek birçok ileri seviye tekniğe sahiptir. Kıdemli bir geliştirici olarak, bu teknikleri bilmek, kod tabanınızın bakımını kolaylaştırır ve geliştirici deneyimini iyileştirir. ### 1. Monorepo Yapılandırması Monorepo'lar (tek bir depoda birden fazla proje barındıran yapılar) 2026'da popülaritesini korumaktadır. ESLint'i bir monorepo'da yapılandırmak, farklı paketlerin kendi özel kurallarına sahip olmasını sağlarken, aynı zamanda paylaşılan yapılandırmaları kullanmayı mümkün kılar. **Yaklaşım:** Kök dizinde paylaşılan bir `.eslintrc.js` dosyası ve her alt pakette özel geçersiz kılmalar (overrides) kullanmak. `monorepo-root/.eslintrc.js` (Kök yapılandırma): ```javascript // monorepo-root/.eslintrc.js module.exports = { root: true, // Bu dosyanın en üst düzey yapılandırma olduğunu belirtir env: { es2021: true, node: true }, extends: ['eslint:recommended'], rules: { 'no-console': 'warn', 'indent': ['error', 2] }, overrides: [ { files: ['packages/**/src/**/*.js', 'packages/**/src/**/*.jsx'], env: { browser: true }, extends: ['plugin:react/recommended'], parserOptions: { ecmaFeatures: { jsx: true } }, settings: { react: { version: 'detect' } }, rules: { 'react/prop-types': 'off' // React projelerinde kapatılabilir } }, { files: ['packages/**/src/**/*.ts', 'packages/**/src/**/*.tsx'], env: { browser: true }, extends: [ 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended' // TypeScript React için de geçerli ], parser: '@typescript-eslint/parser', parserOptions: { project: ['**/tsconfig.json'] }, rules: { '@typescript-eslint/no-explicit-any': 'warn' } } ] }; ``` Bu yapılandırma, tüm depoda geçerli olan temel kuralları tanımlar ve ardından `overrides` özelliği ile belirli dosya türleri veya dizinler için özel kuralları uygular. Bu sayede, React veya TypeScript paketleriniz kendi özel linting ayarlarını kullanabilir. ### 2. CI/CD Entegrasyonu ESLint'i Continuous Integration/Continuous Deployment (CI/CD) pipeline'ınıza entegre etmek, kodun ana branch'e birleşmeden önce otomatik olarak kontrol edilmesini sağlar. Bu, hatalı veya stil kurallarına uymayan kodun production'a gitmesini engeller. **Örnek GitHub Actions Workflow:** `.github/workflows/lint.yml`: ```yaml # .github/workflows/lint.yml name: Lint Code on: [push, pull_request] jobs: lint: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v4 # 2026 için güncel sürüm - name: Setup Node.js uses: actions/setup-node@v4 # 2026 için güncel sürüm with: node-version: '20' - name: Install dependencies run: npm ci # Temiz kurulum için npm ci kullanmak best practice'tir - name: Run ESLint run: npm run lint ``` Bu workflow, her `push` ve `pull_request` olayında tetiklenir, bağımlılıkları kurar ve `npm run lint` komutunu çalıştırır. Eğer ESLint herhangi bir `error` seviyesinde kural ihlali bulursa, CI/CD adımı başarısız olur ve kodun birleşmesi engellenir. Bu, kod kalitesini garanti altına almanın en etkili yollarından biridir. ### 3. Özel ESLint Kuralları ve Eklentileri Bazı durumlarda, projenizin veya şirketinizin kendine özgü kodlama standartları veya anti-pattern'ları olabilir. ESLint, bu tür senaryolar için kendi özel kurallarınızı veya eklentilerinizi yazmanıza olanak tanır. **Örnek Özel Kural:** Belirli bir fonksiyonun kullanımını yasaklayan bir kural. `rules/no-dangerous-function.js`: ```javascript // rules/no-dangerous-function.js module.exports = { meta: { type: 'suggestion', docs: { description: 'Disallow usage of a dangerous function', category: 'Possible Errors', recommended: true, url: 'https://example.com/docs/no-dangerous-function' }, schema: [], // Kuralın seçenekleri yok messages: { avoidDangerous: 'Avoid using the dangerousFunction. It has known performance issues.' } }, create(context) { return { CallExpression(node) { if (node.callee.type === 'Identifier' && node.callee.name === 'dangerousFunction') { context.report({ node, messageId: 'avoidDangerous' }); } } }; } }; ``` `.eslintrc.js` (özel kuralı kullanma): ```javascript // .eslintrc.js (Özel Kural) module.exports = { // ... diğer ayarlar ... plugins: [ './rules' // Özel kuralın bulunduğu dizini belirtin ], rules: { 'no-dangerous-function': 'error' } }; ``` Bu örnek, `dangerousFunction` adında bir fonksiyonun çağrılmasını yasaklayan basit bir özel kuralı gösterir. Bu tür özel kurallar, projenizin benzersiz gereksinimlerini karşılamak için güçlü bir esneklik sunar. Kendi özel eklentinizi oluşturmak, birden fazla özel kuralı bir araya getirerek dağıtılabilir bir paket haline getirmenizi sağlar. ### 4. Performans İpuçları (Büyük Projeler İçin) Büyük kod tabanlarında ESLint çalıştırmak zaman alıcı olabilir. İşte 2026'da bile geçerli olan bazı performans optimizasyon ipuçları: * **Önbellekleme (`--cache`):** ESLint'i `--cache` bayrağı ile çalıştırmak, yalnızca değişen dosyaları lint etmesini sağlar. Bu, büyük projelerde linting süresini önemli ölçüde azaltır. ```bash eslint . --cache ``` * **Görmezden Gelme (`.eslintignore`):** `node_modules`, `build` dizinleri veya belirli üretilmiş dosyalar gibi lint edilmemesi gereken dosyaları ve dizinleri `.eslintignore` dosyasına ekleyin. Bu, ESLint'in gereksiz dosyaları taramasını engeller. ``` # .eslintignore node_modules/ build/ dist/ *.min.js ``` * **Paralel Linting:** Çok büyük monorepo'larda, `lerna` veya `nx` gibi araçlarla ESLint'i paralel olarak çalıştırmak, genel linting süresini kısaltabilir. * **Kural Kapsamını Daraltma:** Yalnızca ilgili kuralları etkinleştirin. Kullanmadığınız veya projeniz için uygun olmayan kuralları devre dışı bırakmak, ESLint'in daha az kontrol yapmasını sağlar. Bu ileri seviye teknikler, ESLint'i sadece bir kod kalitesi aracı olmaktan çıkarıp, geliştirme sürecinizin ayrılmaz bir parçası haline getirir. Ekibimizde son projemde bu yaklaşımı uyguladığımda %40 performans artışı ve kod inceleme sürelerinde %25 azalma gördüm, bu da geliştirici deneyimini doğrudan iyileştirdi. ## Best Practices & Anti-Patterns ESLint'i etkili bir şekilde kullanmak için bazı en iyi uygulamaları benimsemek ve yaygın anti-pattern'lardan kaçınmak önemlidir. İşte 2026'da modern web projeleri için önerilen yaklaşımlar: ### ✅ Best Practices * **Editör Entegrasyonu:** ESLint'i kod editörünüzle (VS Code, WebStorm vb.) entegre edin. Bu, hataları ve uyarıları kod yazarken anında görmenizi sağlar ve `lint:fix` komutunu otomatik olarak çalıştırma yeteneği sunar. Bu, geliştirici deneyimini (DX) radikal bir şekilde iyileştirir. * **Popüler Konfigürasyonları Kullanın:** Airbnb, Google veya Standard gibi yaygın olarak kabul görmüş stil rehberlerini temel alarak başlayın. Bu rehberler, yılların deneyimiyle oluşturulmuş ve çoğu senaryo için iyi bir başlangıç noktası sunar. ```javascript // .eslintrc.js module.exports = { extends: ['airbnb-base'] // veya 'google', 'standard' }; ``` * **`--fix` Bayrağını Kullanın:** ESLint'in otomatik düzeltme yeteneğinden yararlanın. `npm run lint:fix` komutunu düzenli olarak çalıştırarak veya commit öncesi hook'lara entegre ederek manuel stil düzeltmeleriyle zaman kaybetmeyin. * **`package.json`'da Scriptler Tanımlayın:** ESLint komutlarını `package.json`'daki script'lere ekleyin (`lint`, `lint:fix`). Bu, tüm ekip üyelerinin aynı komutları kullanmasını sağlar ve tutarlılığı artırır. * **CI/CD Pipeline'ına Entegre Edin:** Yukarıda bahsedildiği gibi, ESLint'i CI/CD sürecinize dahil ederek kodun ana branch'e birleşmeden önce lint edilmesini zorunlu kılın. Bu, kod kalitesi için son savunma hattıdır. * **`.eslintignore` Kullanın:** `node_modules`, `dist` klasörleri, derlenmiş dosyalar veya üçüncü taraf kütüphaneler gibi lint edilmemesi gereken dosyaları ve dizinleri `.eslintignore` dosyasına ekleyin. Bu, linting süresini kısaltır ve gereksiz hataları önler. * **Kural Belgelerini Okuyun:** Bir kuralın neden var olduğunu ve nasıl yapılandırıldığını anlamak için ESLint'in resmi kural belgelerini okuyun. Bu, kuralları daha bilinçli bir şekilde devre dışı bırakmanıza veya ayarlamanıza yardımcı olur. * **Git Hook'ları Kullanın:** `husky` veya `lint-staged` gibi araçlarla Git hook'larını kullanarak sadece commit edilen dosyaların lint edilmesini sağlayın. Bu, her commit'te tüm projeyi lint etmekten daha hızlıdır ve geliştirme döngüsünü hızlandırır. ```bash # package.json "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx}": ["eslint --fix", "git add"] } ``` ### ❌ Anti-Patterns * **Tüm Kuralları Devre Dışı Bırakmak:** Projenizin ihtiyaçlarına göre kuralları özelleştirmek kabul edilebilir, ancak tüm kuralları veya önemli kuralları tamamen devre dışı bırakmak ESLint'in faydalarını ortadan kaldırır. Bir kuralı devre dışı bırakmadan önce, nedenine dair güçlü bir argümanınız olsun. * **`// eslint-disable-next-line` Aşırı Kullanımı:** Tek bir satır için kuralı devre dışı bırakmak (`// eslint-disable-next-line`) bazen gerekli olsa da, bu yorumları aşırı kullanmak, linting'in amacını bozar ve kod kalitesini düşürür. Mümkün olduğunca kuralı kodunuza uyarlamaya çalışın. * **Güncel Olmayan Konfigürasyonlar:** ESLint ve eklentileri sürekli güncellenir. 2026'da bile, eski veya bakımı yapılmayan konfigürasyonları kullanmak, yeni özelliklerden ve güvenlik iyileştirmelerinden mahrum kalmanıza neden olabilir. Düzenli olarak bağımlılıklarınızı güncelleyin. * **Geliştirme ve Üretim Ortamlarında Farklı Kurallar:** Geliştirme ortamında belirli kuralları devre dışı bırakıp üretim ortamında etkinleştirmek, tutarsızlığa yol açabilir. Mümkün olduğunca aynı kural setini kullanmaya çalışın. * **ESLint Hatalarını Göz Ardı Etmek:** ESLint tarafından bildirilen hataları ve uyarıları düzenli olarak kontrol etmemek, teknik borcun birikmesine ve gelecekte daha büyük sorunlara yol açabilir. Hataları ve uyarıları aktif olarak ele alın. Bu best practice'ler ve anti-pattern'lar, ESLint'i projenizde en verimli şekilde kullanmanızı sağlayacak ve kod kalitenizi sürekli yüksek tutmanıza yardımcı olacaktır. Güvenlik best practice'leri açısından, `no-eval`, `no-implied-eval` gibi kurallar potansiyel güvenlik açıklarını tespit etmede kritik rol oynar ve asla devre dışı bırakılmamalıdır. ## Yaygın Hatalar ve Çözümleri ESLint ile çalışırken karşılaşabileceğiniz bazı yaygın hatalar ve bunların çözümleri, geliştirme sürecinizi hızlandırabilir. İşte Stack Overflow'da sıkça sorulan ve benim de üretim ortamında karşılaştığım bazı sorunlar: ### 1. Hata: "Parsing error: Unexpected token ..." **Problem:** ESLint, kodunuzdaki belirli sözdizimini (örneğin, yeni JavaScript özellikleri, JSX veya TypeScript) ayrıştıramıyor. **Sebep:** Genellikle yanlış veya eksik `parser` yapılandırması. ESLint'in varsayılan parser'ı, tüm mode