JavaScript Kod Kalitesi: ESLint Kuralları ve Statik Analiz

Günümüzün hızlı tempolu yazılım geliştirme ortamında, temiz, sürdürülebilir ve sağlam kod yazmak çok önemlidir. JavaScript geliştiricileri için, özellikle çeşitli ekipler ve saat dilimleri arasında işbirliğinin yaygın olduğu küresel projelerde, güvenilir uygulamalar oluşturmak için yüksek kod kalitesini sağlamak çok önemlidir. Bunu başarmanın en etkili araçlarından biri, ESLint ve statik analiz uygulamasıdır.

ESLint Nedir?

ESLint, potansiyel sorunları belirlemek, kodlama stili kurallarını uygulamak ve hataları oluşmadan önlemek için kodunuzu analiz eden güçlü bir JavaScript linting aracıdır. Kod tabanınızda tutarlılığı korumanıza yardımcı olarak ekiplerin işbirliği yapmasını ve gelecekteki geliştiricilerin kodu anlamasını ve değiştirmesini kolaylaştırır.

ESLint Kullanmanın Temel Faydaları:

• Erken Hata Tespiti: Çalışma zamanı sorunları riskini azaltarak, geliştirme sırasında potansiyel hataları ve sorunları tanımlar.
• Kod Stili Uygulaması: Tutarlı kodlama stilini uygulayarak, kod tabanını daha okunabilir ve sürdürülebilir hale getirir.
• Geliştirilmiş İşbirliği: Geliştirme ekibi genelinde tutarlılığı teşvik eden ortak bir kural kümesi sağlar.
• Otomatik Kod İncelemesi: Kod inceleme sürecini otomatikleştirerek, geliştiricilerin daha karmaşık görevlere odaklanmasını sağlar.
• Özelleştirilebilir Kurallar: Kuralları, projenizin özel gereksinimlerine ve kodlama tercihlerine uyacak şekilde yapılandırmanıza olanak tanır.

Statik Analizi Anlamak

Statik analiz, kaynak kodunu bir program çalıştırılmadan önce inceleyerek hata ayıklama yöntemidir. Sorunları belirlemek için kodun yürütülmesini gerektiren dinamik analizden farklı olarak, statik analiz kod yapısını ve sözdizimini analiz etmeye dayanır. ESLint bir statik analiz aracı biçimidir, ancak daha geniş kavram, güvenlik açıklarını, performans darboğazlarını ve diğer potansiyel sorunları tespit edebilen diğer araçları içerir.

Statik Analiz Nasıl Çalışır

Statik analiz araçları, kodu analiz etmek için tipik olarak bir teknik kombinasyonu kullanır, bunlar şunları içerir:

• Sözcüksel Analiz: Kodu belirteçlere (örneğin, anahtar kelimeler, operatörler, tanımlayıcılar) ayırma.
• Sözdizimi Analizi: Kodun yapısını temsil etmek için bir ayrıştırma ağacı oluşturma.
• Semantik Analiz: Kodun anlamını ve tutarlılığını kontrol etme.
• Veri Akışı Analizi: Potansiyel sorunları belirlemek için kod içindeki veri akışını izleme.

Projenizde ESLint'i Kurulumu

ESLint'i kurmak basittir. İşte adım adım bir kılavuz:

1. ESLint'i Yükleyin:

   ESLint'i genel olarak veya projenizde yerel olarak yükleyebilirsiniz. Proje başına bağımlılıkları yönetmek için genellikle yerel olarak yüklemeniz önerilir.

               npm install eslint --save-dev
   # or
   yarn add eslint --dev
               
   
                 
                   Copy
                 
               
             

2. ESLint Yapılandırmasını Başlatın:

   Bir ESLint yapılandırma dosyası oluşturmak için projenizin kök dizininde aşağıdaki komutu çalıştırın.

               npx eslint --init
               
   
                 
                   Copy
                 
               
             

   Bu, projenizin ihtiyaçlarına göre ESLint'i yapılandırmak için bir dizi soruda size yol gösterecektir. Mevcut bir yapılandırmayı (örneğin, Airbnb, Google, Standard) genişletmeyi veya kendi yapılandırmanızı oluşturmayı seçebilirsiniz.

3. ESLint Kurallarını Yapılandırın:

   ESLint yapılandırma dosyası (.eslintrc.js, .eslintrc.yaml veya .eslintrc.json), ESLint'in uygulayacağı kuralları tanımlar. Bu kuralları, projenizin kodlama stiline ve gereksinimlerine uyacak şekilde özelleştirebilirsiniz.

   Örnek .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: {
       'no-unused-vars': 'warn',
       'no-console': 'warn',
       'react/prop-types': 'off',
       '@typescript-eslint/explicit-function-return-type': 'off'
     }
   };
               
   
                 
                   Copy
                 
               
             

4. ESLint'i Düzenleyicinizle Entegre Edin:

   Çoğu popüler kod düzenleyicisinin, kod yazarken gerçek zamanlı geri bildirim sağlayan ESLint eklentileri vardır. Bu, hataları anında yakalamanızı ve düzeltmenizi sağlar.

   • VS Code: VS Code Marketplace'ten ESLint uzantısını yükleyin.
   • Sublime Text: SublimeLinter-eslint eklentisiyle SublimeLinter paketini kullanın.
   • Atom: linter-eslint paketini yükleyin.
5. ESLint'i Çalıştırın:

   Kodunuzu analiz etmek için ESLint'i komut satırından çalıştırabilirsiniz.

               npx eslint .
               
   
                 
                   Copy
                 
               
             

   Bu komut, geçerli dizindeki tüm JavaScript dosyalarını analiz edecek ve yapılandırılan kuralların herhangi bir ihlalini bildirecektir.

Ortak ESLint Kuralları ve En İyi Uygulamalar

ESLint, kodlama stili kurallarını uygulamak ve hataları önlemek için kullanılabilecek çok çeşitli kurallar sağlar. İşte en yaygın ve kullanışlı kurallardan bazıları:

• no-unused-vars: Bildirilen ancak hiç kullanılmayan değişkenler hakkında uyarır. Bu, ölü kodu önlemeye ve karmaşayı azaltmaya yardımcı olur.
• no-console: Üretim kodunda console.log deyimlerinin kullanımına izin vermez. Dağıtımdan önce hata ayıklama deyimlerini temizlemek için kullanışlıdır.
• no-unused-expressions: Herhangi bir yan etkisi olmayan ifadeler gibi kullanılmayan ifadelere izin vermez.
• eqeqeq: Soyut eşitlik (== ve !=) yerine katı eşitlik (=== ve !==) kullanımını zorlar. Bu, beklenmedik tür zorlama sorunlarını önlemeye yardımcı olur.
• no-shadow: Dış kapsamlarda bildirilen değişkenleri gölgeleyen değişken bildirimlerine izin vermez.
• no-undef: Bildirilmemiş değişkenlerin kullanımına izin vermez.
• no-use-before-define: Değişkenlerin tanımlanmadan önce kullanılmasına izin vermez.
• indent: Tutarlı girinti stilini (örneğin, 2 boşluk, 4 boşluk veya sekme) uygular.
• quotes: Tırnak işaretlerinin tutarlı kullanımını zorlar (örneğin, tek tırnak veya çift tırnak).
• semi: Deyimlerin sonunda noktalı virgül kullanımını zorlar.

Örnek: Tutarlı Tırnak İşaretlerini Uygulama

JavaScript kodunuzda tek tırnak işaretlerinin kullanımını zorlamak için, ESLint yapılandırmanıza aşağıdaki kuralı ekleyin:

            rules: {
  'quotes': ['error', 'single']
}
            

              
                Copy
              
            
          

Bu kural etkinleştirildiğinde, ESLint tek tırnak yerine çift tırnak kullanırsanız bir hata bildirecektir.

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

ESLint'in faydalarını en üst düzeye çıkarmak için, onu geliştirme iş akışınıza entegre etmek önemlidir. İşte bazı en iyi uygulamalar:

• Ön Taahhüt Kancası Kullanın:

  Kod taahhüt etmeden önce ESLint'i çalıştırmak için bir ön taahhüt kancası yapılandırın. Bu, ESLint kurallarını ihlal eden kodun depoya taahhüt edilmesini önler.

  Ön taahhüt kancaları ayarlamak için Husky ve lint-staged gibi araçları kullanabilirsiniz.

              npm install husky --save-dev
  npm install lint-staged --save-dev
              
  
                
                  Copy
                
              
            

  package.json dosyanıza aşağıdaki yapılandırmayı ekleyin:

              {
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
      }
    },
    "lint-staged": {
      "*.js": [
        "eslint --fix",
        "git add"
      ]
    }
  }
              
  
                
                  Copy
                
              
            

• Sürekli Entegrasyon (CI) ile Entegre Edin:

  Dağıtılmadan önce tüm kodun kalite standartlarınızı karşıladığından emin olmak için ESLint'i CI hattınızın bir parçası olarak çalıştırın. Bu, hataları erken yakalamaya yardımcı olur ve bunların üretime girmesini önler.

  Jenkins, Travis CI, CircleCI ve GitHub Actions gibi popüler CI araçları, ESLint'i çalıştırmak için entegrasyonlar sağlar.

• Kod Biçimlendirmesini Otomatikleştirin:

  Yapılandırılmış stil kurallarınıza göre kodunuzu otomatik olarak biçimlendirmek için Prettier gibi bir kod biçimlendirici kullanın. Bu, kodu manuel olarak biçimlendirme ihtiyacını ortadan kaldırır ve kod tabanı genelinde tutarlılık sağlar.

  Biçimlendirme sorunlarını otomatik olarak düzeltmek için Prettier'ı ESLint ile entegre edebilirsiniz.

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

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

              module.exports = {
    extends: [
      'eslint:recommended',
      'plugin:react/recommended',
      'plugin:@typescript-eslint/recommended',
      'prettier'
    ],
    plugins: [
      'react',
      '@typescript-eslint',
      'prettier'
    ],
    rules: {
      'prettier/prettier': 'error'
    }
  };
              
  
                
                  Copy
                
              
            

ESLint'in Ötesinde: Diğer Statik Analiz Araçlarını Keşfetme

ESLint, linting ve stil uygulaması için harika bir araç olsa da, diğer çeşitli statik analiz araçları kodunuz hakkında daha derin bilgiler sağlayabilir ve daha karmaşık sorunları belirleyebilir.

• SonarQube: Kod kalitesinin sürekli denetimi için kapsamlı bir platform. JavaScript dahil çeşitli dillerde hataları, güvenlik açıklarını ve kod kokularını algılar. SonarQube, zaman içinde kod kalitesini izlemenize ve iyileştirmenize yardımcı olacak ayrıntılı raporlar ve ölçümler sağlar.
• JSHint: Daha eski, ancak hala kullanışlı bir JavaScript linting aracı. Bazı alanlarda ESLint'ten daha yapılandırılabilir.
• TSLint: (Kullanımdan kaldırıldı, artık TypeScript eklentisine sahip ESLint tercih ediliyor) Özellikle TypeScript için bir linter. Artık TypeScript projeleri giderek daha fazla @typescript-eslint/eslint-plugin ve @typescript-eslint/parser ile ESLint kullanıyor.
• FindBugs: Java için bir statik analiz aracıdır ve JavaScript kodunu analiz etmek için de kullanılabilir. Potansiyel hataları ve performans sorunlarını tanımlar. Esas olarak Java için olsa da, bazı kurallar JavaScript'e uygulanabilir.
• PMD: JavaScript dahil olmak üzere birden çok dili destekleyen bir kaynak kodu analiz aracı. Ölü kod, yinelenen kod ve aşırı karmaşık kod gibi potansiyel sorunları tanımlar.

Küresel Projelerde ESLint: Uluslararası Ekipler İçin Dikkat Edilmesi Gerekenler

Dağıtılmış ekiplerle küresel JavaScript projelerinde çalışırken, ESLint daha da kritik hale gelir. İşte bazı dikkat edilmesi gerekenler:

• Paylaşılan Yapılandırma: Tüm ekip üyelerinin aynı ESLint yapılandırma dosyasını kullandığından emin olun. Bu, kod tabanı genelinde tutarlılığı teşvik eder ve stil çakışması riskini azaltır. Yapılandırma dosyasını yönetmek ve güncel tutmak için sürüm kontrolü kullanın.
• Açık İletişim: Seçilen ESLint kurallarının arkasındaki mantığı ekibe iletin. Bu, herkesin belirli kuralların neden yürürlükte olduğunu anlamasına yardımcı olur ve bunları izlemeye teşvik eder. Gerektiğinde eğitim ve dokümantasyon sağlayın.
• Otomatik Uygulama: ESLint kurallarını otomatik olarak uygulamak için ön taahhüt kancalarını ve CI entegrasyonunu kullanın. Bu, kimin yazdığına bakılmaksızın tüm kodun kalite standartlarını karşılamasını sağlar.
• Yerelleştirme Hususları: Projeniz yerelleştirme içeriyorsa, ESLint kurallarınızın yerelleştirilmiş dizelerin kullanımını engellemediğinden emin olun. Örneğin, belirli karakterlerin veya kodlama şemalarının kullanımını kısıtlayan kurallardan kaçının.
• Saat Dilimi Farklılıkları: Farklı saat dilimlerindeki ekiplerle işbirliği yaparken, ESLint ihlallerinin derhal ele alındığından emin olun. Bu, kod kalitesi sorunlarının birikmesini ve düzeltilmesinin daha zor hale gelmesini önler. Mümkün olan yerlerde otomatik düzeltmeler oldukça faydalıdır.

Örnek: Yerelleştirme Dizeleriyle Başa Çıkma

Uygulamanızın birden çok dili desteklediği ve yerelleştirilmiş dizeleri yönetmek için i18next gibi uluslararasılaştırma (i18n) kitaplıklarını kullandığınız bir senaryo düşünün. Bazı ESLint kuralları, bu dizeleri özellikle özel karakterler veya biçimlendirme içeriyorsa kullanılmayan değişkenler veya geçersiz sözdizimi olarak işaretleyebilir. Bu durumları yoksaymak için ESLint'i yapılandırmanız gerekir.

Örneğin, yerelleştirilmiş dizelerinizi ayrı bir dosyada (örneğin, locales/en.json) saklarsanız, bu dosyaları linting'den hariç tutmak için ESLint'in .eslintignore dosyasını kullanabilirsiniz:

            locales/*.json
            

              
                Copy
              
            
          

Alternatif olarak, yerelleştirilmiş dizeler için kullanılan değişkenleri bildirmek için ESLint'in globals yapılandırmasını kullanabilirsiniz:

            module.exports = {
  globals: {
    'i18n': 'readonly',
    't': 'readonly'
  }
};
            

              
                Copy
              
            
          

Sonuç

Özellikle küresel bir bağlamda, sürdürülebilir, sağlam ve işbirlikçi projeler oluşturmak için ESLint ve statik analiz kullanarak JavaScript kod kalitesine yatırım yapmak önemlidir. Tutarlı kodlama stilleri uygulayarak, hataları erken tespit ederek ve kod incelemesini otomatikleştirerek, kod tabanınızın genel kalitesini artırabilir ve geliştirme sürecini kolaylaştırabilirsiniz. Bu güçlü aracın tüm faydalarından yararlanmak için ESLint yapılandırmanızı projenizin özel ihtiyaçlarına göre uyarlamayı ve iş akışınıza sorunsuz bir şekilde entegre etmeyi unutmayın. Geliştirme ekibinize güç vermek ve küresel bir kitlenin taleplerini karşılayan yüksek kaliteli JavaScript uygulamaları sunmak için bu uygulamaları benimseyin.