Angular (20) Projelerinde ESLint, Prettier ve Husky Kurulumu

Angular (20) Projelerinde ESLint, Prettier ve Husky Kurulumu

Angular projelerinde kod kalitesini ve tutarlılığını sağlamak, büyük ekiplerde çalışırken veya büyük ölçekli uygulamalar geliştirirken olmazsa olmazdır. Bu makalede, kod stilini otomatikleştirmek ve kod kalitesini artırmak için ESLint, Prettier ve Husky’nin Angular (20) projelerine nasıl entegre edileceğini adım adım, detaylı bir şekilde açıklayacağız. Bu güçlü araçlar sayesinde kodunuz daha okunabilir, daha tutarlı ve daha hatasız olacaktır. Hazırsanız, Angular geliştirme sürecinizi bir üst seviyeye taşımaya başlayalım!

ESLint, Prettier ve Husky Nedir?

Öncelikle, bu üç aracın ne işe yaradığını ve neden Angular projelerinizde kullanmanız gerektiğini anlamak önemlidir. ESLint, JavaScript kodunu analiz eden ve stil kılavuzunuza uymayan kod parçalarını tespit eden bir statik kod analiz aracıdır. Potansiyel hataları, kod stilindeki tutarsızlıkları ve genel kod kalitesini iyileştirme önerileri sunarak geliştiricilerin daha kaliteli kod yazmasını sağlar. Prettier ise kod formatlama aracıdır. Kodunuzu otomatik olarak belirli bir stile göre biçimlendirir, böylece kod tabanınızdaki stil farklılıklarını ortadan kaldırır. Son olarak, Husky, Git hook’larını yönetmenize yardımcı olan bir araçtır. Bu sayede, commit işlemleri yapmadan önce ESLint ve Prettier’ı çalıştırıp kod kalitesini kontrol edebilir ve hataları önleyebilirsiniz. Üçünün birlikte kullanımı, Angular projelerinizde geliştirme sürecini oldukça kolaylaştırır ve kod kalitesini önemli ölçüde artırır.

Angular Projesine ESLint Kurulumu: Nasıl Yapılır?

Angular CLI, projeye ESLint’i eklemeyi kolaylaştırır. İlk adım olarak, Angular projenizin kök dizininde aşağıdaki komutu çalıştırın:

ng add @angular-eslint/schematics

Bu komut, gerekli ESLint paketlerini yükler ve Angular projenizin yapılandırmasını ESLint ile uyumlu hale getirir. Kurulum tamamlandıktan sonra, .eslintrc.json dosyasını inceleyerek kurallar ve yapılandırma seçeneklerini özelleştirebilirsiniz. Örneğin, belirli kuralları devre dışı bırakabilir veya yeni kurallar ekleyebilirsiniz. Daha fazla özelleştirme için Fatih Soysal'ın bloguna göz atabilirsiniz. ESLint'in sunduğu detaylı konfigürasyon seçenekleri sayesinde, projenizin özel ihtiyaçlarına göre özelleştirilmiş bir kod analizi sistemi oluşturabilirsiniz.

Prettier'ı Angular Projesine Entegre Etme: Adım Adım

Prettier'ı kurmak için, projenizin kök dizininde aşağıdaki komutu çalıştırmanız yeterlidir:

npm install --save-dev prettier

Ardından, Prettier'ın ESLint ile uyumlu çalışması için gerekli ayarları yapmanız gerekir. Bunun için, .eslintrc.json dosyasına aşağıdaki kodu ekleyin:

{
  "extends": ["eslint:recommended", "plugin:@angular-eslint/recommended", "prettier"],
  "plugins": ["@angular-eslint/template"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Bu konfigürasyon, ESLint'in Prettier'ı kullanmasını ve biçimlendirme hatalarını hata olarak bildirmesini sağlar. Bu sayede, hem kod stilinizin tutarlı olması hem de potansiyel hataların tespit edilmesi garanti altına alınır. Ayrıca, kod editörünüzün Prettier eklentisini kurarak kodlarınızı kaydederken otomatik olarak formatlamasını sağlayabilirsiniz. Bu da geliştirme sürecini daha verimli hale getirir.

Prettier ve ESLint'in Birlikte Çalışması

ESLint ve Prettier'ın uyumlu çalışmasını sağlamak için dikkat etmeniz gereken en önemli nokta, kuralların çakışmamasıdır. ESLint’in bazı kod stil kuralları varken, Prettier aynı kod parçaları için farklı bir biçimlendirme uygulayabilir. Bu durum, geliştirme sürecinde karışıklığa yol açabilir. Bu çakışmayı önlemek için, .eslintrc.json dosyanızda Prettier’in önceliğinin yüksek olmasını sağlamalısınız. Yukarıdaki örnekte olduğu gibi "prettier/prettier": "error" kuralı, ESLint'in Prettier tarafından belirlenen formatı tercih etmesini sağlar.

Husky ile Git Hook'larını Yönetme: Kod Kalitesini Garanti Altına Alma

Husky, Git'in commit, push gibi olaylarından önce veya sonra komut çalıştırılmasını sağlar. Bu özellik sayesinde, kod kalitesini kontrol etmek için ESLint ve Prettier'ı her commit öncesinde otomatik olarak çalıştırabilirsiniz. Husky'i kurmak için aşağıdaki komutu kullanın:

npm install --save-dev husky

Kurulumdan sonra, package.json dosyasına aşağıdaki script'i ekleyin:

{
  "scripts": {
    "pre-commit": "lint-staged"
  }
}

Bu script, lint-staged paketini kullanarak sadece değiştirilen dosyaları kontrol eder. Bu da performansı artırır. lint-staged paketini kurmak için:

npm install --save-dev lint-staged

Son olarak, .lintstagedrc.json dosyasını oluşturup aşağıdaki kodu ekleyin:

{
  "*.{js,jsx,ts,tsx,html,css,scss,less}": ["prettier --write", "eslint --fix"]
}

Bu konfigürasyon, commit öncesinde değiştirilen dosyaların Prettier ile formatlanmasını ve ESLint ile kontrol edilmesini sağlar. --fix parametresi, ESLint tarafından tespit edilen bazı hataları otomatik olarak düzeltir. Bu adım, kod kalitesini sürekli olarak yüksek tutmak ve potansiyel hataların erken aşamada yakalanmasını sağlar.

Öğrenme Yol Haritası

Yeni Başlayanlar için:

Yeni başlayanlar için öncelikle ESLint ve Prettier'ın temel kavramlarını öğrenmek önemlidir. Her iki aracın kurulumunu ve basit konfigürasyonlarını anlamak, başlangıç için yeterli olacaktır. Basit bir Angular projesi oluşturarak, bu araçları entegre etmeyi deneyebilirsiniz. Bu aşamada, varsayılan kurallarla çalışmak ve hataları anlamak önemlidir.

Orta Seviye:

Orta seviyede, özelleştirilmiş konfigürasyon dosyaları oluşturarak kuralları özelleştirebilirsiniz. Kendi kod stilinizi yansıtan kurallar belirleyebilir ve eksik kısımları tamamlayabilirsiniz. Ayrıca, lint-staged gibi araçları kullanarak performansı optimize edebilirsiniz. Farklı kod türleri için farklı kurallar oluşturmayı ve karmaşık konfigürasyonları yönetmeyi öğrenmek bu aşamanın temel hedefidir.

İleri Seviye:

İleri seviyede, daha karmaşık ESLint ve Prettier konfigürasyonları ile ilgilenebilirsiniz. Örneğin, özel kurallar yazabilir, karmaşık projeler için performansı optimize etmek için daha gelişmiş teknikler kullanabilir ve kendi özel lint kurallarınızı oluşturabilirsiniz. Ayrıca, farklı araçların entegrasyonunu inceleyebilir ve kod kalitesi analizlerini daha derinlemesine analiz edebilirsiniz. Bu seviye, gelişmiş kod analizi tekniklerini ve optimizasyon stratejilerini kapsar.

Gerçek Dünya Senaryoları: Vaka Analizleri

Bir e-ticaret projesi geliştiriyoruz diyelim. Ürün listesi bileşeninde, ürün isimlerinin belirli bir uzunlukta olması veya fiyatların doğru formatta gösterilmesi gerekiyor. ESLint ve Prettier sayesinde, bu kuralları tanımlayabilir ve kodun sürekli olarak bu kurallara uymasını sağlayabiliriz. Bu, hem kodun tutarlılığını hem de potansiyel hataların önlenmesini sağlar. Büyük bir ekip üzerinde çalışılan projelerde bu yaklaşım hata riskini minimuma indirir ve kod kalitesini üst seviyede tutar. Başka bir örnek olarak, büyük bir mobil uygulama geliştiriyorsanız performans kritiktir. Husky ile kod kalitesini kontrol ederek performans düşüşlerine neden olabilecek hataları önleyebilirsiniz.

Sonuç

ESLint, Prettier ve Husky, Angular projelerinizde kod kalitesini ve tutarlılığını sağlamanın etkili bir yoludur. Bu araçları kullanarak, kodunuzu daha okunabilir, daha bakımı kolay ve daha az hataya sahip hale getirebilirsiniz. Bu makalede anlatılan adımları takip ederek, Angular projelerinize bu araçları kolayca entegre edebilir ve kod geliştirme sürecinizi önemli ölçüde iyileştirebilirsiniz. Daha fazla bilgi için Fatih Soysal'ın blogunu ziyaret edebilirsiniz.

Sıkça Sorulan Sorular

• ESLint ve Prettier arasında ne gibi farklar var? ESLint statik kod analizi yapar ve stil kurallarını denetlerken, Prettier kod formatlamasını otomatikleştirir. İkisi birlikte kullanılarak hem kod kalitesi hem de stil tutarlılığı sağlanır.
• Husky'nin kullanımı zor mu? Hayır, Husky'nin kurulumu ve kullanımı oldukça basittir. package.json dosyasına birkaç satır ekleyerek kolayca entegre edilebilir.
• lint-staged neden önemli? lint-staged sadece değiştirilen dosyaları kontrol ederek performansı artırır. Büyük projelerde, tüm dosyaların kontrol edilmesi zaman alabilir.
• ESLint kuralları nasıl özelleştirilir? .eslintrc.json dosyasını düzenleyerek ESLint kurallarını özelleştirebilirsiniz. Ayrıntılı bilgi için ESLint dokümanlarına bakabilirsiniz.
• Prettier hangi formatlama seçeneklerini sunar? Prettier, tırnak işaretleri, girinti, satır uzunluğu gibi birçok formatlama seçeneğini sunar. Bu seçenekler .prettierrc dosyası ile özelleştirilebilir.

Yazar: Fatih Soysal