11 Eylül 2025Türkçe

Linting, formatlama, test etme, statik analiz ve sürekli entegrasyonu kapsayan, küresel ekipler için sağlam bir JavaScript kalite altyapısı kurmaya yönelik kapsamlı bir rehber.

JavaScript Kalite Altyapısı: Kapsamlı Bir Uygulama Rehberi

Sürekli gelişen web geliştirme dünyasında JavaScript temel bir teknoloji olmaya devam ediyor. Projeler karmaşıklaştıkça ve ekipler küresel olarak daha dağınık hale geldikçe, kod kalitesini sağlamak her şeyden önemli hale geliyor. İyi tanımlanmış ve uygulanmış bir JavaScript kalite altyapısı artık bir lüks değil, güvenilir, sürdürülebilir ve ölçeklenebilir uygulamalar oluşturmak için bir zorunluluktur. Bu kapsamlı rehber, uluslararası ekiplere ve çeşitli geliştirme ortamlarına hitap ederek JavaScript projeleriniz için sağlam bir kalite altyapısı kurmaya yönelik adım adım bir yaklaşım sunmaktadır.

Neden JavaScript Kalite Altyapısına Yatırım Yapmalısınız?

Sağlam bir kalite altyapısına yatırım yapmak sayısız fayda sağlar:

Geliştirilmiş Kod Tutarlılığı: Tüm kod tabanında tutarlı bir kodlama stilini zorunlu kılarak geliştiricilerin anlamasını ve bakımını kolaylaştırır. Bunu, ekipteki herkesin akıcı bir şekilde konuştuğu evrensel bir dil oluşturmak gibi düşünebilirsiniz.
Azaltılmış Hatalar ve Bug'lar: Geliştirme döngüsünün başlarında potansiyel hataları belirleyerek üretime ulaşmalarını engeller. Bu, bir belgenin yayınlanmasından önce bir editörün hataları yakalaması gibidir.
Artırılmış Verimlilik: Formatlama ve linting gibi tekrarlayan görevleri otomatikleştirerek geliştiricilerin daha karmaşık problem çözmeye odaklanmalarını sağlar. Üretimi kolaylaştıran otomatik bir montaj hattı hayal edin.
Geliştirilmiş İşbirliği: Özellikle dağınık ekiplerde sürtünmeyi azaltan ve ekip işbirliğini geliştiren kod incelemeleri ve tartışmaları için ortak bir zemin sağlar.
Basitleştirilmiş Bakım: Kodu yeniden düzenlemeyi ve güncellemeyi kolaylaştırarak yeni hatalar ortaya çıkarma riskini azaltır. İyi organize edilmiş bir kütüphanede gezinmek ve bakım yapmak daha kolaydır.
Azaltılmış Teknik Borç: Potansiyel sorunları proaktif olarak ele alarak zamanla teknik borcun birikmesini önler. Erken bakım, daha sonraki maliyetli onarımları önler.

Küresel ekipler için faydalar daha da artar. Standartlaştırılmış kodlama pratikleri, kültürel ve dilsel farklılıkları ortadan kaldırarak daha sorunsuz işbirliğini ve bilgi paylaşımını teşvik eder. Kuzey Amerika, Avrupa ve Asya'ya yayılmış bir ekip düşünün; ortak bir kalite altyapısı, konumları veya geçmişleri ne olursa olsun herkesin aynı sayfada olmasını sağlar.

JavaScript Kalite Altyapısının Temel Bileşenleri

A comprehensive JavaScript quality infrastructure encompasses several key components, each playing a crucial role in ensuring code quality:

Linting: Kodun stilistik hatalar, potansiyel bug'lar ve kodlama standartlarına uygunluk açısından analiz edilmesi.
Formatlama: Tutarlılık ve okunabilirlik sağlamak için kodun otomatik olarak biçimlendirilmesi.
Test Etme: Kodun işlevselliğini doğrulamak için testlerin yazılması ve yürütülmesi.
Statik Analiz: Kodu çalıştırmadan potansiyel güvenlik açıkları ve performans sorunları açısından analiz etme.
Sürekli Entegrasyon (CI): Derleme, test etme ve dağıtım sürecini otomatikleştirme.

1. ESLint ile Linting

ESLint, güçlü ve yüksek düzeyde yapılandırılabilir bir JavaScript linter'ıdır. Kodu stilistik hatalar, potansiyel bug'lar ve kodlama standartlarına uygunluk açısından analiz eder. ESLint, geniş bir kural ve eklenti yelpazesini destekleyerek özel ihtiyaçlarınıza göre özelleştirmenize olanak tanır.

Kurulum ve Yapılandırma

ESLint'i kurmak için aşağıdaki komutu çalıştırın:

            npm install eslint --save-dev

Ardından, projenizin kök dizininde bir ESLint yapılandırma dosyası (.eslintrc.js, .eslintrc.yml veya .eslintrc.json) oluşturun. Temel bir yapılandırma dosyası oluşturmak için eslint --init komutunu kullanabilirsiniz.

            eslint --init

Yapılandırma dosyası, ESLint'in uygulayacağı kuralları belirtir. Çeşitli yerleşik kurallar arasından seçim yapabilir veya ESLint'in işlevselliğini genişletmek için üçüncü taraf eklentileri kullanabilirsiniz. Örneğin, React'e özgü kodlama standartlarını uygulamak için eslint-plugin-react eklentisini kullanabilirsiniz. Birçok kuruluş ayrıca projeler arasında tutarlı stiller için paylaşılabilir ESLint yapılandırmaları oluşturur. AirBnB, Google ve StandardJS, popüler yapılandırmalara örnektir. Karar verirken, ekibinizin mevcut stilini ve potansiyel uzlaşmaları göz önünde bulundurun.

İşte basit bir .eslintrc.js yapılandırma dosyası örneği:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn',
    'react/prop-types': 'off',
  },
};

Bu yapılandırma, önerilen ESLint kurallarını genişletir, React desteğini etkinleştirir ve birkaç özel kural tanımlar. no-unused-vars kuralı kullanılmayan değişkenler hakkında uyarır ve no-console kuralı console.log ifadeleri hakkında uyarır. react/prop-types kuralı, genellikle tür denetimini farklı şekilde ele alan TypeScript ile kullanıldığı için devre dışı bırakılmıştır.

ESLint'i İş Akışınıza Entegre Etme

ESLint'i iş akışınıza birkaç şekilde entegre edebilirsiniz:

Komut Satırı: eslint komutunu kullanarak ESLint'i komut satırından çalıştırın.
Editör Entegrasyonu: Kod editörünüz için bir ESLint eklentisi kurun (örn. VS Code, Sublime Text, Atom).
Sürekli Entegrasyon: Her commit'te kodu otomatik olarak denetlemek için ESLint'i CI ardışık düzeninize entegre edin.

ESLint'i komut satırından çalıştırmak için aşağıdaki komutu kullanın:

            eslint .

Bu komut, mevcut dizindeki ve alt dizinlerindeki tüm JavaScript dosyalarını denetleyecektir.

2. Prettier ile Formatlama

Prettier, tutarlılık ve okunabilirlik sağlamak için kodu otomatik olarak biçimlendiren, kendi kararlarını veren (opinionated) bir kod formatlayıcısıdır. Potansiyel hataları belirlemeye odaklanan linter'ların aksine, Prettier yalnızca kod biçimlendirmeye odaklanır.

Kurulum ve Yapılandırma

Prettier'ı kurmak için aşağıdaki komutu çalıştırın:

            npm install prettier --save-dev

Ardından, projenizin kök dizininde bir Prettier yapılandırma dosyası (.prettierrc.js, .prettierrc.yml veya .prettierrc.json) oluşturun. Varsayılan yapılandırmayı kullanabilir veya özel ihtiyaçlarınıza göre özelleştirebilirsiniz.

İşte basit bir .prettierrc.js yapılandırma dosyası örneği:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
};

Bu yapılandırma, Prettier'ın tek tırnak kullanmasını, tüm çok satırlı yapılara sondaki virgülleri eklemesini, noktalı virgüllerden kaçınmasını ve maksimum satır uzunluğunu 120 karakter olarak ayarlamasını belirtir.

Prettier'ı İş Akışınıza Entegre Etme

Prettier'ı iş akışınıza birkaç şekilde entegre edebilirsiniz:

Komut Satırı: prettier komutunu kullanarak Prettier'ı komut satırından çalıştırın.
Editör Entegrasyonu: Kod editörünüz için bir Prettier eklentisi kurun.
Git Hook'ları: Commit yapmadan önce kodu otomatik olarak biçimlendirmek için Git hook'larını kullanın.
Sürekli Entegrasyon: Her commit'te kodu otomatik olarak biçimlendirmek için Prettier'ı CI ardışık düzeninize entegre edin.

Prettier'ı komut satırından çalıştırmak için aşağıdaki komutu kullanın:

            prettier --write .

Bu komut, mevcut dizindeki ve alt dizinlerindeki tüm dosyaları biçimlendirecektir.

ESLint ve Prettier'ı Entegre Etme

ESLint ve Prettier, kapsamlı bir kod kalitesi çözümü sağlamak için birlikte kullanılabilir. Ancak, çakışmaları önlemek için bunları doğru şekilde yapılandırmak önemlidir. ESLint ve Prettier çakışabilir çünkü ESLint biçimlendirmeyi kontrol etmek için de yapılandırılabilir.

ESLint ve Prettier'ı entegre etmek için aşağıdaki paketleri kurmanız gerekir:

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

eslint-config-prettier paketi, Prettier ile çakışan tüm ESLint kurallarını devre dışı bırakır. eslint-plugin-prettier paketi, Prettier'ı bir ESLint kuralı olarak çalıştırmanıza olanak tanır.

Bu paketleri dahil etmek için .eslintrc.js yapılandırma dosyanızı güncelleyin:

            module.exports = {
  // ...
  extends: [
    // ...
    'prettier',
    'plugin:prettier/recommended',
  ],
  plugins: [
    // ...
    'prettier',
  ],
  rules: {
    // ...
    'prettier/prettier': 'error',
  },
};

Bu yapılandırma, prettier yapılandırmasını genişletir, eslint-plugin-prettier eklentisini etkinleştirir ve prettier/prettier kuralını herhangi bir biçimlendirme sorununu hata olarak bildirecek şekilde yapılandırır.

3. Jest, Mocha ve Chai ile Test Etme

Test etme, kod kalitesini sağlamanın kritik bir yönüdür. JavaScript, her birinin kendi güçlü ve zayıf yönleri olan çeşitli test çerçeveleri sunar. En popüler test çerçevelerinden bazıları şunlardır:

Jest: Facebook tarafından geliştirilen sıfır yapılandırmalı bir test çerçevesi. Jest, kullanım kolaylığı, yerleşik mocking yetenekleri ve mükemmel performansı ile bilinir.
Mocha: Geniş bir iddia (assertion) kütüphanesi ve raporlayıcı yelpazesini destekleyen esnek ve genişletilebilir bir test çerçevesi.
Chai: Mocha veya diğer test çerçeveleriyle kullanılabilen bir iddia kütüphanesi. Chai, BDD (Davranış Odaklı Geliştirme) ve TDD (Test Odaklı Geliştirme) dahil olmak üzere çeşitli iddia stilleri sunar.

Doğru test çerçevesini seçmek, özel ihtiyaçlarınıza ve tercihlerinize bağlıdır. Jest, sıfır yapılandırmalı bir kurulum ve yerleşik mocking yetenekleri gerektiren projeler için iyi bir seçimdir. Mocha ve Chai, daha fazla esneklik ve özelleştirme gerektiren projeler için iyi bir seçimdir.

Jest ile Örnek

Jest'in test için nasıl kullanılacağını gösterelim. Öncelikle Jest'i kurun:

            npm install jest --save-dev

Ardından, test etmek istediğiniz kodla (örn. sum.js) aynı dizinde bir test dosyası (örn. sum.test.js) oluşturun.

İşte bir sum.js dosyası örneği:

            function sum(a, b) {
  return a + b;
}

module.exports = sum;

Ve işte bir sum.test.js dosyası örneği:

            const sum = require('./sum');

describe('sum', () => {
  it('should add two numbers correctly', () => {
    expect(sum(1, 2)).toBe(3);
  });

  it('should handle negative numbers correctly', () => {
    expect(sum(-1, 2)).toBe(1);
  });
});

Bu test dosyası, sum fonksiyonu için iki test senaryosu tanımlar. İlk test senaryosu, fonksiyonun iki pozitif sayıyı doğru bir şekilde topladığını doğrular. İkinci test senaryosu, fonksiyonun negatif sayıları doğru bir şekilde işlediğini doğrular.

Testleri çalıştırmak için package.json dosyanıza bir test betiği ekleyin:

            {
  // ...
  "scripts": {
    "test": "jest"
  }
  // ...
}

Ardından, aşağıdaki komutu çalıştırın:

            npm test

Bu komut, projenizdeki tüm test dosyalarını çalıştıracaktır.

4. TypeScript ve Flow ile Statik Analiz

Statik analiz, kodu çalıştırmadan potansiyel hatalar ve güvenlik açıkları açısından analiz etmeyi içerir. Bu, geleneksel test yöntemleriyle tespit edilmesi zor olan sorunları belirlemeye yardımcı olabilir. JavaScript'te statik analiz için iki popüler araç TypeScript ve Flow'dur.

TypeScript

TypeScript, dile statik tipleme ekleyen bir JavaScript üst kümesidir. TypeScript, değişkenler, fonksiyonlar ve nesneler için türler tanımlamanıza olanak tanır, bu da çalışma zamanında türle ilgili hataları önlemeye yardımcı olabilir. TypeScript, düz JavaScript'e derlenir, bu nedenle herhangi bir JavaScript çalışma zamanı ortamıyla kullanılabilir.

Flow

Flow, Facebook tarafından geliştirilen bir JavaScript statik tür denetleyicisidir. Flow, kodu türle ilgili hatalar açısından analiz eder ve geliştiricilere gerçek zamanlı olarak geri bildirim sağlar. Flow, mevcut JavaScript koduyla kullanılabilir, bu nedenle kullanmak için tüm kod tabanınızı yeniden yazmanız gerekmez.

TypeScript ve Flow arasında seçim yapmak, özel ihtiyaçlarınıza ve tercihlerinize bağlıdır. TypeScript, güçlü statik tipleme ve daha yapılandırılmış bir geliştirme süreci gerektiren projeler için iyi bir seçimdir. Flow, zaman ve çaba açısından önemli bir yatırım yapmadan mevcut JavaScript koduna statik tipleme eklemek isteyen projeler için iyi bir seçimdir.

TypeScript ile Örnek

TypeScript'in statik analiz için nasıl kullanılacağını gösterelim. Öncelikle TypeScript'i kurun:

            npm install typescript --save-dev

Ardından, projenizin kök dizininde bir TypeScript yapılandırma dosyası (tsconfig.json) oluşturun.

İşte basit bir tsconfig.json yapılandırma dosyası örneği:

            {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

Bu yapılandırma, TypeScript'in ES5'e derlenmesi, CommonJS modül sistemini kullanması, katı tür denetimini etkinleştirmesi ve dosya adlarında tutarlı büyük/küçük harf kullanımını zorunlu kılması gerektiğini belirtir.

Şimdi TypeScript kodu yazmaya başlayabilirsiniz. Örneğin, işte basit bir TypeScript dosyası (greeting.ts):

            function greeting(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greeting("World"));

Bu dosya, bir string argümanı (name) alan ve bir string döndüren greeting adlı bir fonksiyon tanımlar. : string ek açıklaması, fonksiyonun bir string döndürmesi gerektiğini belirtir. Farklı bir tür döndürmeye çalışırsanız, TypeScript bir hata bildirecektir.

TypeScript kodunu derlemek için aşağıdaki komutu çalıştırın:

            npx tsc

Bu komut, projenizdeki tüm TypeScript dosyalarını derleyecek ve karşılık gelen JavaScript dosyalarını oluşturacaktır.

5. GitHub Actions, GitLab CI ve Jenkins ile Sürekli Entegrasyon (CI)

Sürekli Entegrasyon (CI), derleme, test etme ve dağıtım sürecini otomatikleştirmeyi içeren bir geliştirme pratiğidir. CI, geliştirme döngüsünün başlarında sorunları belirlemeye ve çözmeye yardımcı olarak üretime bug'ların girmesi riskini azaltır. Aşağıdakiler de dahil olmak üzere çeşitli CI platformları mevcuttur:

GitHub Actions: Doğrudan GitHub'a entegre edilmiş bir CI/CD platformu. GitHub Actions, iş akışınızı doğrudan GitHub deponuzda otomatikleştirmenize olanak tanır.
GitLab CI: GitLab'a entegre edilmiş bir CI/CD platformu. GitLab CI, iş akışınızı doğrudan GitLab deponuzda otomatikleştirmenize olanak tanır.
Jenkins: Çeşitli sürüm kontrol sistemleri ve dağıtım platformlarıyla kullanılabilen açık kaynaklı bir CI/CD sunucusu. Jenkins, yüksek derecede esneklik ve özelleştirme sağlar.

Doğru CI platformunu seçmek, özel ihtiyaçlarınıza ve tercihlerinize bağlıdır. GitHub Actions ve GitLab CI, sırasıyla GitHub veya GitLab'de barındırılan projeler için iyi seçimlerdir. Jenkins, daha fazla esneklik ve özelleştirme gerektiren projeler için iyi bir seçimdir.

GitHub Actions ile Örnek

GitHub Actions'ın CI için nasıl kullanılacağını gösterelim. Öncelikle, GitHub deponuzda bir iş akışı dosyası (örn. .github/workflows/ci.yml) oluşturun.

İşte basit bir .github/workflows/ci.yml iş akışı dosyası örneği:

            name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js 16
      uses: actions/setup-node@v2
      with:
        node-version: '16.x'
    - name: Install dependencies
      run: npm install
    - name: Run ESLint
      run: npm run lint
    - name: Run Prettier
      run: npm run format
    - name: Run tests
      run: npm test

Bu iş akışı dosyası, main dalına yapılan her push'ta ve main dalını hedefleyen her pull request'te çalışacak bir CI ardışık düzeni tanımlar. Ardışık düzen aşağıdaki adımlardan oluşur:

Kodu checkout et.
Node.js'i kur.
Bağımlılıkları kur.
ESLint'i çalıştır.
Prettier'ı çalıştır.
Testleri çalıştır.

CI ardışık düzenini etkinleştirmek için, iş akışı dosyasını GitHub deponuza commit'lemeniz yeterlidir. GitHub Actions, iş akışı dosyasını otomatik olarak algılayacak ve her push ve pull request'te ardışık düzeni çalıştıracaktır.

Kod İncelemesi ve İşbirliği

Otomasyon bir temel sağlarken, insan incelemesi ve işbirliği bir kalite altyapısının kritik parçaları olmaya devam eder. Kod incelemeleri, otomatik araçların kaçırabileceği mantık hatalarını, tasarım kusurlarını ve potansiyel güvenlik açıklarını yakalar. Ekip üyeleri arasında açık iletişimi ve yapıcı geri bildirimi teşvik edin. GitHub pull request'leri veya GitLab merge request'leri gibi araçlar bu süreci kolaylaştırır. Suçlama atfetmek yerine kodu iyileştirmeye odaklanan saygılı ve nesnel eleştirileri vurguladığınızdan emin olun.

Küresel Ekipler için Dikkat Edilmesi Gerekenler

Küresel ekipler için bir JavaScript kalite altyapısı uygularken şu faktörleri göz önünde bulundurun:

Zaman Dilimleri: Performans darboğazlarını önlemek için farklı zaman dilimlerinde yoğun olmayan saatlerde çalışacak şekilde otomatik görevleri (CI derlemeleri gibi) zamanlayın.
İletişim: Kod kalitesi sorunlarını ve en iyi uygulamaları tartışmak için net iletişim kanalları oluşturun. Video konferans ve paylaşılan belgeler coğrafi boşlukları kapatabilir.
Kültürel Farklılıklar: İletişim tarzlarındaki ve geri bildirim tercihlerindeki kültürel farklılıklara dikkat edin. Tüm etkileşimlerde kapsayıcılığı ve saygıyı teşvik edin.
Araç Erişilebilirliği: Tüm ekip üyelerinin, konumlarından veya internet bağlantılarından bağımsız olarak gerekli araçlara ve kaynaklara erişebildiğinden emin olun. Yerel bağımlılıkları en aza indirmek için bulut tabanlı çözümler kullanmayı düşünün.
Dokümantasyon: Ekip üyelerinin organizasyonun en iyi uygulamalarını takip edebilmesi için kodlama standartları ve kalite altyapısı hakkında kolayca çevrilebilir formatlarda kapsamlı dokümantasyon sağlayın.

Sonuç

Sağlam bir JavaScript kalite altyapısı kurmak, sürekli iyileştirme ve adaptasyon gerektiren devam eden bir süreçtir. Bu rehberde açıklanan teknikleri ve araçları uygulayarak, JavaScript projelerinizin kalitesini, sürdürülebilirliğini ve ölçeklenebilirliğini önemli ölçüde artırabilir, küresel ekibiniz için daha üretken ve işbirlikçi bir ortamı teşvik edebilirsiniz. Unutmayın ki belirli araçlar ve yapılandırmalar projenizin ihtiyaçlarına ve ekibinizin tercihlerine bağlı olarak değişecektir. Önemli olan, sizin için işe yarayan bir çözüm bulmak ve zamanla sürekli olarak iyileştirmektir.