Neden Temiz ve Tutarlı Kod Yazmak Bu Kadar Önemli?

Modern yazılım geliştirme süreçlerinde kod kalitesi ve tutarlılığı, projelerin sürdürülebilirliği ve ekip verimliliği açısından kritik bir öneme sahiptir. Farklı geliştiricilerin farklı kodlama alışkanlıkları olması, bir projenin kod tabanında görsel karmaşaya ve potansiyel hatalara yol açabilir. Bu makalede, Visual Studio Code (VS Code) ortamında popüler bir linting aracı olan ESLint’i kullanarak kodunuzu nasıl otomatik olarak lint’leyeceğinizi ve biçimlendireceğinizi adım adım keşfedeceğiz. Böylece daha temiz, daha anlaşılır ve standartlara uygun kodlar yazarak geliştirme sürecinizi optimize edebilirsiniz.

Neden Temiz ve Tutarlı Kod Yazmak Bu Kadar Önemli?

Yazılım dünyasında, bir projenin başarısı sadece işlevselliğiyle değil, aynı zamanda kod kalitesiyle de yakından ilişkilidir. Kod kalitesi, kodun okunabilirliği, sürdürülebilirliği ve hata oranını doğrudan etkiler. Düşünün ki, bir ekipte birden fazla geliştirici çalışıyor ve her biri kendi kodlama stilini uyguluyor. Kimisi satır sonuna noktalı virgül koyarken, kimisi koymuyor; kimisi çift tırnak kullanırken, kimisi tek tırnak tercih ediyor. Bu durum, kod tabanında kısa sürede büyük bir karmaşaya yol açar. Sonuç olarak, yeni bir geliştiricinin projeye adapte olması zorlaşır, kod incelemeleri (code reviews) uzar ve hata ayıklama süreçleri çetrefilli bir hal alır.

Tutarlı bir kod tabanı, bir projenin adeta ortak bir dil konuşmasını sağlar. Bu sayede, ekip üyeleri birbirlerinin kodlarını daha hızlı anlar, hataları daha kolay tespit eder ve yeni özellikler eklerken mevcut yapıyı bozma riskini minimize eder. Ayrıca, temiz ve düzenli kod, yazılımın uzun ömürlü olmasını, gelecekteki değişikliklere daha esnek yanıt vermesini ve teknik borcun (technical debt) birikmesini engeller. Manuel olarak kod biçimlendirme ve stil kontrolü yapmak ise zaman alıcı, sıkıcı ve insan hatasına açık bir süreçtir. İşte tam da bu noktada, otomatik araçlar devreye girerek geliştiricilerin yükünü hafifletir ve onlara daha değerli işlere odaklanma fırsatı sunar. Bu araçlar, belirlenen kurallar çerçevesinde kodunuzu analiz eder, olası sorunları işaretler ve hatta otomatik olarak düzeltir. Bu sayede, geliştiriciler sadece işlevselliğe odaklanabilirken, kodun estetiği ve tutarlılığı konusunda endişelenmelerine gerek kalmaz. Kısacası, temiz ve tutarlı kod, sadece bir estetik tercih değil, aynı zamanda profesyonel bir yazılım geliştirme sürecinin temel taşıdır.

ESLint Nedir ve Kod Kalitesine Nasıl Katkı Sağlar?

ESLint, JavaScript ve JSX kodunuzdaki desenleri tanımlamak ve raporlamak için kullanılan, takılabilir bir linting aracıdır. Basitçe ifade etmek gerekirse, ESLint, kodunuzu statik olarak analiz ederek, potansiyel hataları, kötü uygulamaları, stil tutarsızlıklarını ve şüpheli yapıları henüz kod çalışmadan önce tespit eder. Bu, geliştirme sürecinin erken aşamalarında sorunları yakalamanıza olanak tanır, bu da hata ayıklama süresini önemli ölçüde azaltır ve daha sağlam bir kod tabanı oluşturmanıza yardımcı olur. ESLint’in “takılabilir” yapısı, onu son derece esnek kılar; yani, projenizin veya ekibinizin ihtiyaçlarına göre özelleştirilebilir kurallar, eklentiler ve ayrıştırıcılar ekleyebilirsiniz. Örneğin, React veya TypeScript gibi belirli teknolojilerle çalışıyorsanız, ilgili eklentileri yükleyerek o teknolojinin kendine özgü en iyi uygulamalarını ve kurallarını uygulayabilirsiniz.

ESLint’in kod kalitesine katkısı oldukça geniştir. Öncelikle, tüm ekip üyelerinin aynı kodlama standartlarına uymasını sağlayarak projenin genel tutarlılığını artırır. Bu, kod incelemelerini kolaylaştırır ve yeni ekip üyelerinin projeye entegrasyonunu hızlandırır. İkinci olarak, yaygın programlama hatalarını (örneğin, kullanılmayan değişkenler, global değişkenlerin yanlışlıkla tanımlanması, eşittir operatörünün yanlış kullanımı) belirleyerek kodunuzdaki potansiyel hataları proaktif bir şekilde ortadan kaldırır. Üçüncü olarak, kodunuzun daha okunabilir ve sürdürülebilir olmasını teşvik eden stil kurallarını (örneğin, girinti, tırnak işaretleri, noktalı virgül kullanımı) uygulayarak, gelecekteki bakımı ve geliştirmeyi kolaylaştırır. Son olarak, ESLint’in otomatik düzeltme özelliği (--fix bayrağı), birçok stil ve biçimlendirme sorununu manuel müdahaleye gerek kalmadan otomatik olarak çözebilir. Bu, geliştiricilerin kodun estetik yönüyle uğraşmak yerine, işlevsel geliştirmelere odaklanmalarına olanak tanır. Kısacası, ESLint sadece bir hata bulucu değil, aynı zamanda bir kod kalitesi güvence aracı ve ekip içi standartların otomasyonu için vazgeçilmez bir yardımcıdır. Bu sayede, daha güvenilir, bakımı kolay ve profesyonel yazılımlar geliştirmek mümkün hale gelir.

Visual Studio Code ile ESLint Entegrasyonu Nasıl Yapılır?

Visual Studio Code (VS Code), geliştiriciler arasında en popüler kod düzenleyicilerinden biridir ve ESLint ile mükemmel bir entegrasyon sunar. Bu entegrasyon sayesinde, kodunuzu yazarken gerçek zamanlı geri bildirim alabilir, hataları anında görebilir ve hatta otomatik düzeltmeler uygulayabilirsiniz. İşte adım adım VS Code ve ESLint entegrasyonunu nasıl kuracağınız:

1. ESLint VS Code Uzantısını Kurmak

İlk adım, VS Code’un kendi uzantı mağazasından ESLint uzantısını kurmaktır. VS Code’u açın, sol taraftaki uzantılar simgesine (kareler) tıklayın ve arama çubuğuna “ESLint” yazın. Microsoft tarafından yayınlanan “ESLint” uzantısını bulun ve “Install” (Yükle) düğmesine tıklayın. Bu uzantı, ESLint’in projenizde tanımlı kurallarını VS Code’a getirerek, hataları ve uyarıları doğrudan düzenleyici içinde göstermesini sağlar.

2. Projenize ESLint’i Yüklemek

ESLint, her projeye özel olarak yüklenmelidir. Bu, farklı projelerinizde farklı ESLint konfigürasyonları kullanabilmenizi sağlar. Projenizin kök dizininde bir terminal açın ve aşağıdaki komutları çalıştırın:

npm init -y
npm install eslint --save-dev
    

npm init -y komutu, projeniz için varsayılan bir package.json dosyası oluşturur. npm install eslint --save-dev ise ESLint’i geliştirme bağımlılığı olarak projenize yükler. Eğer Yarn kullanıyorsanız, yarn add eslint --dev komutunu kullanabilirsiniz.

3. ESLint Konfigürasyon Dosyasını Oluşturmak

ESLint’i yükledikten sonra, projenizin kök dizininde bir konfigürasyon dosyası oluşturmanız gerekir. Bu dosya, ESLint’in hangi kuralları uygulayacağını ve nasıl davranacağını belirler. Bunu yapmanın en kolay yolu, ESLint’in kendi başlatma aracını kullanmaktır:

npx eslint --init
    

Bu komut, size bir dizi soru sorarak projenizin ihtiyaçlarına en uygun .eslintrc.js (veya .json/.yaml) dosyasını oluşturmanıza yardımcı olur. Sorular genellikle şunları içerir:

• ESLint’i nasıl kullanacaksınız? (Sadece sorunları kontrol etmek mi, sorunları kontrol edip düzeltmek mi?)
• Hangi tür modülleri kullanıyorsunuz? (JavaScript modülleri, CommonJS)
• Hangi framework’ü kullanıyorsunuz? (React, Vue.js, None)
• Hangi TypeScript kullanıyor musunuz?
• Kodunuz nerede çalışıyor? (Tarayıcı, Node.js)
• Hangi stil rehberini kullanmak istersiniz? (Airbnb, Standard, Google, veya kendi stilinizi tanımlamak)
• Konfigürasyon dosyanızın formatı ne olsun? (JavaScript, YAML, JSON)

Yanıtlarınıza göre, .eslintrc.js dosyası otomatik olarak oluşturulacaktır. İşte tipik bir .eslintrc.js dosyası örneği:

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-unused-vars': 'warn',
    'react/react-in-jsx-scope': 'off', // React 17+ için gerekli olmayabilir
  },
};
    

Bu dosya, ESLint’in ortamını (env), genişletilmiş kural setlerini (extends), kullanılan ayrıştırıcıyı (parser), ayrıştırıcı seçeneklerini (parserOptions), eklentileri (plugins) ve özel kuralları (rules) tanımlar.

4. VS Code Ayarlarını Yapılandırmak

ESLint’in VS Code içinde otomatik olarak çalışmasını sağlamak için bazı VS Code ayarlarını düzenlemeniz gerekir. VS Code’da Ctrl + , (Windows/Linux) veya Cmd + , (macOS) tuşlarına basarak Ayarlar’ı açın. Arama çubuğuna “editor.formatOnSave” yazın ve bu seçeneği işaretleyin. Ardından “editor.codeActionsOnSave” yazın ve aşağıdaki ayarı ekleyin veya mevcut ayarlarınıza ekleyin:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ]
}
    

Bu ayarlar, dosyayı kaydettiğinizde VS Code’un otomatik olarak biçimlendirme yapmasını (editor.formatOnSave) ve ESLint’in otomatik düzeltme eylemlerini (source.fixAll.eslint) çalıştırmasını sağlar. eslint.validate ise ESLint’in hangi dosya türleri üzerinde çalışacağını belirtir. Bu adımlarla, VS Code ve ESLint artık sorunsuz bir şekilde entegre edilmiş olacak ve kodunuzu yazarken anında geri bildirim alacaksınız.

Popüler ESLint Kuralları ve Konfigürasyon Örnekleri Nelerdir?

ESLint’in gücü, neredeyse her türlü kodlama stilini ve en iyi uygulamayı destekleyebilen zengin kural setlerinden gelir. Kendi kurallarınızı tek tek tanımlamak yerine, genellikle topluluk tarafından kabul görmüş popüler kural setlerini (stil rehberlerini) temel alarak işe başlarsınız. Bu, hem zaman kazandırır hem de projenizin genel kalitesini artırır. İşte en yaygın kullanılan bazı kural setleri ve konfigürasyon örnekleri:

1. Temel Kural Setleri

• eslint:recommended: ESLint’in kendisi tarafından önerilen temel kuralları içerir. Bu kurallar, yaygın programlama hatalarını ve şüpheli yapıları yakalamaya odaklanır. Genellikle her projenin başlangıç noktasıdır.
• Airbnb JavaScript Style Guide: Belki de en popüler ve kapsamlı JavaScript stil rehberidir. Çok sıkı kurallara sahiptir ve modern JavaScript özelliklerini kapsar. Özellikle büyük ekiplerde tutarlılık sağlamak için tercih edilir.
• Standard JavaScript Style: Daha az katı ancak yine de tutarlı bir stil sunar. Özellikle noktalı virgül kullanmama (no-semicolons) kuralıyla bilinir.
• Google JavaScript Style Guide: Google’ın kendi projelerinde kullandığı stil rehberidir. Airbnb kadar popüler olmasa da, belirli bir disiplin seviyesi sunar.

Bu kural setlerini projenize dahil etmek için .eslintrc.js dosyanızdaki extends dizisine eklemeniz yeterlidir. Örneğin, Airbnb stil rehberini kullanmak isterseniz, önce ilgili paketi yüklemeniz gerekir:

npm install eslint-config-airbnb-base eslint-plugin-import --save-dev
    

Ardından .eslintrc.js dosyanızı güncelleyebilirsiniz:

module.exports = {
  // ... diğer ayarlar
  extends: [
    'eslint:recommended',
    'airbnb-base', // Airbnb stil rehberi
    // ... diğer eklentiler (React, TypeScript vb.)
  ],
  // ...
};
    

2. Kuralları Özelleştirme ve Geçersiz Kılma

Bazen, seçtiğiniz stil rehberinin belirli bir kuralını projenizin ihtiyaçlarına göre değiştirmek veya tamamen kapatmak isteyebilirsiniz. Bu durumda, .eslintrc.js dosyanızdaki rules bölümünü kullanırsınız. Her kural için üç seviye belirtebilirsiniz:

• "off" veya 0: Kuralı kapatır.
• "warn" veya 1: Kuralı bir uyarı olarak gösterir (hata olarak derlemeyi durdurmaz).
• "error" veya 2: Kuralı bir hata olarak gösterir (derlemeyi durdurabilir veya CI/CD’de başarısızlığa neden olabilir).

Örneğin, Airbnb stil rehberi genellikle tek tırnak kullanılmasını önerirken, siz çift tırnak kullanmak isteyebilirsiniz. Veya girinti boyutunu 4 boşluktan 2 boşluğa düşürmek isteyebilirsiniz:

module.exports = {
  // ...
  rules: {
    'indent': ['error', 2, { 'SwitchCase': 1 }], // 2 boşluklu girinti, switch case'lerde 1
    'quotes': ['error', 'double'], // Çift tırnak kullan
    'semi': ['error', 'always'], // Her zaman noktalı virgül kullan
    'no-console': ['warn', { allow: ['warn', 'error'] }], // console.log'a uyarı ver, ancak warn ve error'a izin ver
    'import/prefer-default-export': 'off', // Airbnb kuralını kapat
  },
  // ...
};
    

Bu örnekte, indent, quotes ve semi kurallarını kendi tercihlerimize göre ayarladık. Ayrıca, no-console kuralını özelleştirerek console.log için uyarı vermesini sağladık ancak console.warn ve console.error kullanımlarına izin verdik. import/prefer-default-export ise Airbnb’den gelen bir kuralı kapatma örneğidir.

3. Prettier ile Entegrasyon

ESLint hem linting (kod kalitesi) hem de formatting (biçimlendirme) görevlerini yerine getirebilirken, Prettier gibi özel bir biçimlendirme aracı genellikle biçimlendirme konusunda daha iyi bir deneyim sunar. Prettier, kodunuzu belirli bir stil kurallarına göre otomatik olarak yeniden biçimlendirir. ESLint ile Prettier’ı birlikte kullanmak, iki aracın çakışmasını engellemek için özel bir yapılandırma gerektirir. Bunun için eslint-config-prettier ve eslint-plugin-prettier paketlerini kullanırız:

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

Ardından .eslintrc.js dosyanızı güncelleyin:

module.exports = {
  // ...
  extends: [
    // ... diğer extends'ler
    'plugin:prettier/recommended', // Prettier kurallarını ESLint'e entegre eder ve çakışmaları çözer
  ],
  plugins: [
    // ... diğer plugins'ler
    'prettier',
  ],
  rules: {
    // ESLint kurallarınızı burada tanımlayın, Prettier ile çakışanları kapatır
    'prettier/prettier': 'error', // Prettier ihlallerini ESLint hatası olarak gösterir
    // ...
  },
  // ...
};
    

plugin:prettier/recommended, eslint-plugin-prettier ve eslint-config-prettier‘ı birleştirir. Bu ayar, Prettier’ın biçimlendirme kurallarını ESLint’in bir parçası gibi çalıştırır ve Prettier ile çakışan tüm ESLint biçimlendirme kurallarını otomatik olarak devre dışı bırakır. Böylece, biçimlendirme Prettier’a bırakılırken, ESLint sadece kod kalitesi ve potansiyel hatalar üzerinde yoğunlaşır.

Vaka Analizi: Büyük Bir Ekipte Tutarlı Stil Sağlama

Bir e-ticaret platformu geliştiren 15 kişilik bir ekip düşünelim. Projenin başlangıcında hiçbir linting veya biçimlendirme aracı kullanılmadığı için, kod tabanı hızla karmaşıklaşmış ve her geliştiricinin kendi stilini uyguladığı bir “vahşi batı” haline gelmişti. Yeni özellikler eklemek zorlaşıyor, kod incelemeleri stil tartışmalarıyla uzuyor ve sık sık küçük biçimlendirme hataları gözden kaçıyordu. Ekip lideri, bu durumu çözmek için ESLint ve Prettier entegrasyonuna karar verdi. İlk olarak, eslint --init ile temel bir konfigürasyon oluşturuldu ve ardından Airbnb stil rehberi extends bölümüne eklendi. Prettier da entegre edildi. Ortak bir .eslintrc.js ve .prettierrc.js dosyası oluşturularak projenin kök dizinine yerleştirildi. VS Code kullanıcılarının editor.formatOnSave ve editor.codeActionsOnSave ayarlarını yapmaları istendi. Ek olarak, bir package.json script’i tanımlandı:

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\""
  }
}
    

Bu script’ler sayesinde, geliştiriciler kodlarını commit etmeden önce npm run lint:fix veya npm run format komutlarını çalıştırarak tüm projeyi otomatik olarak düzeltebildiler. Sonuç olarak, birkaç hafta içinde kod tabanındaki stil tutarsızlıkları büyük ölçüde azaldı, kod incelemeleri daha verimli hale geldi ve ekip üyeleri arasında kod kalitesi bilinci önemli ölçüde arttı. Bu vaka analizi, ESLint ve Prettier’ın büyük ölçekli projelerde bile kod kalitesini nasıl kolayca yönetebileceğini açıkça göstermektedir.

Otomatik Kod Düzeltme ve Kaydetmede Biçimlendirme Nasıl Etkinleştirilir?

ESLint’in en güçlü özelliklerinden biri, sadece hataları ve stil ihlallerini bildirmekle kalmayıp, aynı zamanda birçoğunu otomatik olarak düzeltebilmesidir. Bu özellik, geliştiricilerin manuel biçimlendirme ve düzeltme işleriyle uğraşmak yerine, işlevselliğe odaklanmalarını sağlar. Visual Studio Code ile bu otomatik düzeltme yeteneğini entegre etmek, geliştirme akışınızı önemli ölçüde hızlandırır ve kod kalitesini sürekli olarak yüksek tutar.

1. VS Code’da Kaydetmede Otomatik Düzeltme

Yukarıda da bahsettiğimiz gibi, VS Code’un settings.json dosyasında yapacağınız birkaç basit ayar ile dosyanızı kaydettiğiniz anda ESLint’in otomatik düzeltme özelliğini tetikleyebilirsiniz. Bu, kodunuzu her kaydettiğinizde, ESLint’in belirlediği ve otomatik olarak düzeltilebilen tüm sorunların anında giderilmesi anlamına gelir. Bu ayarları kullanıcı veya çalışma alanı (workspace) seviyesinde yapabilirsiniz. Çalışma alanı seviyesi ayarları, projenizin kök dizinindeki .vscode/settings.json dosyasında saklanır ve bu, ekip üyeleri arasında tutarlı bir geliştirme ortamı sağlamak için idealdir.

// .vscode/settings.json
{
  "editor.formatOnSave": true, // Dosyayı kaydederken otomatik formatlama yap
  "editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier'ı varsayılan formatlayıcı yap (eğer kullanıyorsanız)
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true // Kaydetme sırasında ESLint'in tüm düzeltilebilir sorunlarını gider
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html", // HTML içindeki script etiketlerini de lintlemek için
    "vue" // Vue.js projeleri için
  ],
  "files.autoSave": "onFocusChange" // Odak değiştiğinde otomatik kaydetme (isteğe bağlı)
}
    

editor.formatOnSave: true, VS Code’un genel formatlama özelliğini etkinleştirir. Eğer Prettier kullanıyorsanız, editor.defaultFormatter ayarını Prettier uzantısının kimliğine (esbenp.prettier-vscode) ayarlayarak, kaydetmede Prettier’ın çalışmasını sağlayabilirsiniz. En kritik ayar ise "source.fixAll.eslint": true‘dur. Bu ayar, bir dosyayı kaydettiğinizde VS Code’un ESLint uzantısını tetikleyerek, ESLint’in --fix komutunun eşdeğerini çalıştırmasını sağlar. Böylece, girinti hataları, tırnak işareti tutarsızlıkları, kullanılmayan değişken uyarıları gibi birçok sorun otomatik olarak düzeltilir.

2. Terminal Üzerinden Otomatik Düzeltme

Bazen, tüm projenizi veya belirli bir dizindeki dosyaları tek seferde düzeltmeniz gerekebilir. Bu durumda, ESLint’in komut satırı arayüzünü kullanabilirsiniz. Projenizin package.json dosyasına aşağıdaki gibi bir script ekleyerek bu işlemi kolaylaştırabilirsiniz:

{
  "name": "my-project",
  "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",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "check-format": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\""
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^8.0.0",
    "prettier": "^2.0.0"
  }
}
    

Yukarıdaki package.json dosyasında tanımlanan lint:fix script’i, projenizin kök dizininden başlayarak .js, .jsx, .ts ve .tsx uzantılı tüm dosyaları ESLint kurallarına göre kontrol eder ve düzeltilebilen tüm sorunları otomatik olarak düzeltir. Bu script’i terminalde npm run lint:fix komutuyla çalıştırabilirsiniz. Benzer şekilde, Prettier ile biçimlendirme yapmak için npm run format komutunu kullanabilirsiniz.

3. Git Hook’ları ile Entegrasyon (Husky ve lint-staged)

Kod kalitesini daha da güvence altına almak için, geliştiricilerin kodlarını versiyon kontrol sistemine (Git) göndermeden önce otomatik linting ve biçimlendirme yapmasını zorunlu kılabilirsiniz. Bu, “Git Hook’ları” adı verilen mekanizmalarla sağlanır. Husky ve lint-staged gibi araçlar, bu süreci otomatikleştirmek için popüler çözümlerdir.

• Husky: Git hook’larını kolayca yönetmenizi sağlayan bir araçtır. Örneğin, pre-commit hook’unu kullanarak bir commit yapılmadan hemen önce belirli script’leri çalıştırabilirsiniz.
• lint-staged: Sadece staged (yani commit’e eklenmiş) dosyalarda linting ve biçimlendirme yapmanızı sağlar. Bu, her commit’te tüm projeyi çalıştırmak yerine sadece değişen dosyaları kontrol ederek performansı artırır.

Bu araçları kurmak için:

npm install husky lint-staged --save-dev
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"
    

Ardından package.json dosyanıza lint-staged konfigürasyonunu ekleyin:

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

Bu yapılandırma ile, bir geliştirici git commit yapmaya çalıştığında, Husky pre-commit hook’unu tetikler. Bu hook, lint-staged‘i çalıştırır ve lint-staged de sadece commit’e eklenmiş JavaScript/TypeScript dosyalarını ESLint ile düzeltir ve tüm belirlenen dosya türlerini Prettier ile biçimlendirir. Eğer ESLint veya Prettier bir hata bulur ve düzeltemezse, commit işlemi iptal edilir, bu da kod tabanına asla kötü kodun girmemesini sağlar. Bu yöntem, ekip içinde yüksek kod kalitesi standartlarını sürekli olarak korumak için vazgeçilmez bir stratejidir.

İleri Düzey Kullanım İpuçları: Özel Kurallar ve Monorepo Desteği

ESLint’in temel özelliklerini ve VS Code entegrasyonunu öğrendikten sonra, daha karmaşık senaryolarda nasıl kullanılabileceğine dair ileri düzey ipuçlarına geçebiliriz. Büyük projeler, monorepo yapıları veya çok özel kodlama standartları gerektiren durumlarda ESLint’i daha da özelleştirmek gerekebilir.

1. Özel ESLint Kuralları Yazmak

ESLint’in sunduğu yüzlerce kural çoğu ihtiyacı karşılasa da, bazen projenizin veya şirketinizin çok spesifik bir kodlama standardı veya anti-pattern’ı olabilir. Bu durumda, kendi özel ESLint kurallarınızı yazabilirsiniz. Özel bir kural, AST (Abstract Syntax Tree) üzerinde çalışır ve belirli düğüm tiplerini veya desenleri arar. Bir kuralın temel yapısı genellikle bir create metodu içerir ve bu metod, AST’deki farklı düğüm tiplerine (örneğin, CallExpression, VariableDeclarator) “ziyaretçi” fonksiyonları tanımlar. Bu fonksiyonlar, düğümlerle karşılaştığında belirli kontrolleri yapar ve ihlalleri raporlamak için context.report() metodunu kullanır.

Örneğin, projenizde belirli bir yardımcı fonksiyonun (utility function) asla doğrudan çağrılmaması, her zaman bir hook veya bir wrapper aracılığıyla kullanılması gerektiğini varsayalım. Bu durumu yakalamak için özel bir kural yazabilirsiniz. Özel kurallar genellikle .eslintrc.js dosyasının yakınındaki bir rules klasöründe tutulur ve plugins bölümünde tanımlanır.

Özel kural yazmak detaylı AST bilgisi gerektirse de, bu yetenek ESLint’i sadece bir standart uygulayıcısından çok daha fazlası haline getirir; onu projenizin benzersiz ihtiyaçlarına göre şekillendirebileceğiniz güçlü bir statik analiz motoruna dönüştürür. Bu, özellikle büyük ölçekli ve uzun soluklu projelerde teknik borcu azaltmak ve kod tabanı kalitesini belirli bir seviyenin üzerinde tutmak için paha biçilmezdir.

2. Monorepo Ortamlarında ESLint Konfigürasyonu

Monorepo’lar (tek bir Git deposunda birden fazla bağımsız projenin barındırıldığı yapılar), modern yazılım geliştirmede giderek daha popüler hale gelmektedir. Monorepo’larda ESLint’i yapılandırmak, farklı paketlerin veya uygulamaların farklı ESLint kurallarına sahip olabilmesi gerektiği için biraz daha karmaşık olabilir. Ancak ESLint, bu tür senaryoları yönetmek için güçlü mekanizmalar sunar:

• Kök Düzeyinde Konfigürasyon: Genellikle, monorepo’nun kök dizininde genel bir .eslintrc.js dosyası bulunur. Bu dosya, tüm projelere uygulanacak ortak kuralları ve ayarları içerir.
• Paket Düzeyinde Konfigürasyonlar: Her bir alt proje (paket), kendi özel .eslintrc.js dosyasını içerebilir. Bu dosyalar, kök düzeyindeki konfigürasyonu extends anahtar kelimesiyle devralır ve ardından o pakete özgü kuralları geçersiz kılabilir veya yeni kurallar ekleyebilir.
• root: true ve overrides: Kök .eslintrc.js dosyasında root: true ayarı, ESLint’in bu dizinden yukarı doğru başka bir konfigürasyon dosyası aramasını engeller. Alt paketlerdeki .eslintrc.js dosyaları ise root: false ile işaretlenerek üst düzey konfigürasyonları devralabilir. overrides anahtar kelimesi ise, belirli dosya veya klasörler için farklı kurallar tanımlamanıza olanak tanır. Örneğin, test dosyaları için farklı bir kural seti uygulayabilirsiniz.

Örnek bir monorepo .eslintrc.js yapısı:

// monorepo kök dizinindeki .eslintrc.js
module.exports = {
  root: true, // Bu dosya kök konfigürasyondur
  env: {
    node: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    // ... monorepo genelinde geçerli olacak diğer extends'ler
  ],
  // ... genel kurallar ve eklentiler
  overrides: [
    {
      files: ['packages//src//*.js', 'packages//src//*.jsx'],
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      env: {
        browser: true,
      },
      rules: {
        // React uygulamalarına özgü kurallar
        'react/react-in-jsx-scope': 'off',
      },
    },
    {
      files: ['packages//tests//*.js'],
      env: {
        jest: true,
      },
      rules: {
        // Test dosyalarına özgü kurallar
        'no-unused-expressions': 'off',
      },
    },
  ],
};
    

Bu yapı, monorepo’daki farklı paketler için ortak bir taban sağlarken, aynı zamanda her paketin veya dosya türünün kendi özel gereksinimlerini karşılamasına olanak tanır. Bu sayede, farklı teknolojilerle yazılmış modüllerin bile tutarlı bir kod kalitesi standardına sahip olması sağlanabilir.

Vaka Analizi: Büyük Ölçekli Bir Monorepo’da ESLint Yönetimi

Büyük bir SaaS şirketinin monorepo’sunda, hem bir React tabanlı ön uç uygulaması, hem bir Node.js tabanlı arka uç API’si, hem de çeşitli yardımcı TypeScript kütüphaneleri bulunuyordu. Başlangıçta her projenin kendi ayrı ESLint konfigürasyonu vardı, bu da bakım ve güncelleme açısından büyük bir karmaşaya yol açıyordu. Ekip, bu durumu düzeltmek için monorepo’nun kök dizinine genel bir .eslintrc.js dosyası yerleştirdi. Bu dosya, tüm projelere uygulanacak temel JavaScript ve TypeScript kurallarını içeriyordu. Ardından, overrides bölümü kullanılarak React uygulaması için plugin:react/recommended ve Node.js API’si için plugin:node/recommended gibi özel kurallar ve ortamlar tanımlandı. TypeScript kütüphaneleri için ise plugin:@typescript-eslint/recommended eklendi. Bu yapı sayesinde, her paketin kendi özel ihtiyaçları karşılanırken, tüm monorepo genelinde tutarlı bir kod kalitesi çerçevesi oluşturuldu. Geliştiriciler, hangi pakette çalışırlarsa çalışsınlar, aynı linting deneyimini yaşadılar ve bu da genel geliştirme verimliliğini artırdı.

Mobil Uyumlu HTML ve Duyarlı Tasarım İlkeleriyle Entegrasyon Nasıl Sağlanır?

ESLint doğrudan HTML veya CSS’i lint’lemese de, modern web geliştirmenin temelini oluşturan JavaScript kodunun kalitesini artırarak mobil uyumlu ve duyarlı tasarım ilkelerinin dolaylı yoldan desteklenmesine büyük katkı sağlar. Temiz, hatasız ve performanslı JavaScript, kullanıcı deneyimini doğrudan etkiler ve duyarlı bir web sitesinin sorunsuz çalışmasını sağlar. Ayrıca, HTML ve CSS kalitesi için de benzer araçlar (örneğin Stylelint for CSS, HTML-validate for HTML) mevcut olup, ESLint ile birlikte kullanıldığında tam bir kod kalitesi güvencesi sunar.

1. ESLint’in JavaScript Üzerinden Dolaylı Katkısı

Mobil uyumlu bir web sitesi oluştururken, JavaScript’in performansı ve hatasızlığı kritik öneme sahiptir. Yavaş veya hatalı çalışan JavaScript kodları, mobil cihazlarda kullanıcı deneyimini olumsuz etkileyebilir, sayfa yükleme sürelerini uzatabilir ve hatta uygulamanın çökmesine neden olabilir. ESLint, bu tür sorunları henüz geliştirme aşamasında tespit ederek:

• Performans İyileştirmeleri: Kullanılmayan değişkenleri, gereksiz kod bloklarını veya performans düşürücü yapıları belirleyerek kodunuzun daha verimli çalışmasına yardımcı olur.
• Hata Azaltma: Potansiyel çalışma zamanı hatalarını (runtime errors) önceden yakalar, bu da uygulamanızın farklı cihazlarda ve tarayıcılarda daha kararlı çalışmasını sağlar.
• Erişilebilirlik (Accessibility): React veya Vue gibi framework’lerle çalışırken, ESLint eklentileri (örneğin eslint-plugin-jsx-a11y) erişilebilirlik kurallarını uygulayarak, mobil cihazlarda ekran okuyucularla daha iyi uyum sağlayan semantik ve erişilebilir HTML çıktıları üretmenize yardımcı olur.

Örneğin, eslint-plugin-jsx-a11y, JSX içinde erişilebilirlik ihlallerini tespit eder:

// .eslintrc.js dosyanızda
module.exports = {
  // ...
  extends: [
    // ...
    'plugin:jsx-a11y/recommended', // Erişilebilirlik kurallarını ekle
  ],
  plugins: [
    // ...
    'jsx-a11y',
  ],
  rules: {
    'jsx-a11y/alt-text': 'error', // img etiketlerinde alt özelliği zorunlu kıl
    'jsx-a11y/anchor-is-valid': ['error', {
      components: ['Link'],
      specialLink: ['hrefLeft', 'hrefRight'],
      aspects: ['noHref', 'invalidHref', 'preferButton'],
    }],
    // ... diğer a11y kuralları
  },
};
    

Bu kurallar, mobil cihazlarda veya yardımcı teknolojilerle web sitenizi kullanan kişiler için daha iyi bir deneyim sunar.

2. Semantik HTML ve Duyarlı Tasarım İlkeleri

Mobil uyumlu ve duyarlı bir web sitesi, öncelikle iyi yapılandırılmış ve semantik HTML ile başlar. ESLint doğrudan HTML’i kontrol etmese de, JavaScript (özellikle JSX/TSX) kodunuzun temiz ve hatasız olmasını sağlayarak bu temeli destekler. Semantik HTML, içeriğin anlamını açıkça belirtir ve tarayıcıların, arama motorlarının ve erişilebilirlik araçlarının sayfayı daha iyi anlamasına yardımcı olur. Bu, özellikle farklı ekran boyutlarına ve cihazlara uyum sağlayan duyarlı tasarımlar için önemlidir.

Duyarlı tasarımın temel taşlarından biri olan medya sorguları (media queries), CSS aracılığıyla farklı ekran boyutlarına ve cihaz özelliklerine göre stil kuralları uygulamanızı sağlar. Bu, içeriğin mobil cihazlarda okunabilir ve kullanılabilir kalmasını garantiler. Temiz ve modüler CSS yazmak için Stylelint gibi araçlar kullanılabilirken, ESLint’in JavaScript kalitesini güvence altına alması, genel projenin sağlığını korur.

İşte temel bir duyarlı tasarım için medya sorgusu örneği:

/* Genel stiller */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 90%;
  margin: 0 auto;
}

/* Küçük ekranlar (mobil) için stiller */
@media (max-width: 768px) {
  .container {
    width: 95%;
    padding: 10px;
  }

  h2 {
    font-size: 1.5em;
  }

  .nav-menu {
    flex-direction: column;
  }

  .nav-item {
    margin-bottom: 10px;
  }
}

/* Orta ekranlar (tablet) için stiller */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    width: 80%;
  }

  .nav-menu {
    justify-content: space-around;
  }
}

/* Büyük ekranlar (masaüstü) için stiller */
@media (min-width: 1025px) {
  .container {
    width: 70%;
    max-width: 1200px;
  }

  .nav-menu {
    justify-content: flex-end;
  }
}
    

Yukarıdaki CSS kodu, farklı ekran genişliklerine göre .container genişliğini ve diğer elementlerin stillerini nasıl ayarlayacağınızı göstermektedir. max-width ve min-width özellikleri kullanılarak belirli aralıklardaki ekran boyutları hedeflenir. ESLint, bu CSS kodunu doğrudan lint’lemese de, bu stilleri dinamik olarak uygulayan veya değiştiren JavaScript kodunuzun hatasız ve performanslı olmasını sağlayarak duyarlı tasarımın sorunsuz çalışmasına zemin hazırlar. Kısacası, ESLint, web projenizin JavaScript tarafındaki sağlamlığını güvence altına alarak, mobil uyumlu ve duyarlı tasarım hedeflerinize ulaşmanızda kritik bir rol oynar.

Sonuç: Kod Kalitesi Yolculuğunuzda ESLint’in Rolü

Bu makale boyunca, ESLint’in Visual Studio Code ile nasıl entegre edileceğini, kod kalitesini ve tutarlılığını artırmak için nasıl yapılandırılacağını ve otomatik düzeltme özelliklerinden nasıl yararlanılacağını ayrıntılı bir şekilde inceledik. Modern yazılım geliştirme pratiklerinde, kod kalitesi sadece bir tercih değil, aynı zamanda projenin sürdürülebilirliği, ekip verimliliği ve teknik borcun yönetimi açısından bir zorunluluktur. ESLint, bu zorunluluğu karşılamanıza yardımcı olan güçlü ve esnek bir araçtır.

ESLint’i geliştirme sürecinize dahil etmek, başlangıçta biraz kurulum ve yapılandırma çabası gerektirse de, uzun vadede size zaman kazandıracak, hata oranını düşürecek ve daha bakımı kolay bir kod tabanı oluşturmanızı sağlayacaktır. Otomatik biçimlendirme ve linting sayesinde, geliştiriciler manuel stil düzeltmeleriyle uğraşmak yerine, daha yaratıcı ve işlevsel çözümler üretmeye odaklanabilirler. Monorepo ortamlarından özel kural ihtiyaçlarına kadar geniş bir yelpazede özelleştirilebilir olması, ESLint’i her ölçekten proje için vazgeçilmez bir araç haline getirmektedir. Unutmayın ki, yüksek kaliteli kod, sadece bugün değil, gelecekte de projenizin başarısının anahtarıdır.

Sıkça Sorulan Sorular (SSS)

ESLint sadece JavaScript için mi kullanılır?

Hayır, ESLint başlangıçta JavaScript için tasarlanmış olsa da, çeşitli eklentiler (plugins) ve ayrıştırıcılar (parsers) aracılığıyla TypeScript, React (JSX), Vue.js ve hatta bazı deneysel durumlarda diğer diller için de kullanılabilir. Geniş eklenti ekosistemi sayesinde farklı ekosistemlerdeki kod kalitesini de güvence altına alabilirsiniz.

Prettier ile ESLint arasındaki fark nedir ve birlikte nasıl kullanılırlar?

ESLint hem kod kalitesi sorunlarını (linting) hem de stil tutarsızlıklarını (formatting) ele alabilirken, Prettier sadece kod biçimlendirmeye odaklanmış, “opinionated” bir araçtır. Prettier, kodunuzu belirlenmiş, katı kurallara göre yeniden biçimlendirir. İkisi birlikte kullanıldığında, Prettier biçimlendirme görevini üstlenirken, ESLint kod kalitesi ve potansiyel hataları kontrol eder. eslint-config-prettier ve eslint-plugin-prettier paketleri, bu iki aracın çakışmadan uyumlu bir şekilde çalışmasını sağlar.

ESLint kuralları bir projeden diğerine kopyalanabilir mi?

Evet, kesinlikle! .eslintrc.js veya .eslintrc.json dosyanızı kopyalayarak veya bir npm paketi olarak yayınlayarak farklı projelerinizde aynı ESLint konfigürasyonunu kullanabilirsiniz. Bu, tüm projelerinizde tutarlı bir kodlama standardı sağlamanın harika bir yoludur. Genellikle büyük şirketler kendi özel ESLint konfigürasyonlarını npm paketleri olarak yayınlar ve tüm dahili projelerinde kullanır.

ESLint’in performansa etkisi var mıdır?

ESLint, kodunuzu statik olarak analiz ettiği için, özellikle büyük projelerde veya ilk çalıştırmada bir miktar zaman alabilir. Ancak, VS Code entegrasyonu ve lint-staged gibi araçlar sayesinde, genellikle sadece değişen dosyalar üzerinde çalıştığı için bu etki minimuma iner. Çoğu durumda, ESLint’in sağladığı faydalar (hata azaltma, kod kalitesi) performans maliyetinden çok daha ağır basar.

Hangi ESLint kural setini kullanmalıyım?

Bu, projenizin ve ekibinizin ihtiyaçlarına bağlıdır. Yeni başlıyorsanız, eslint:recommended iyi bir başlangıç noktasıdır. Daha katı ve kapsamlı bir stil arıyorsanız, Airbnb veya Standard gibi popüler stil rehberlerini deneyebilirsiniz. TypeScript veya React gibi belirli teknolojiler kullanıyorsanız, ilgili eklentileri (örneğin @typescript-eslint/recommended, plugin:react/recommended) eklemeyi unutmayın. En önemlisi, ekip olarak bir karara varıp tüm projenizde bu kuralları tutarlı bir şekilde uygulamaktır.