Pre-commit hook'ları ile JavaScript kod kalitenizi artırın. Daha temiz ve bakımı kolay projeler için kod kalitesi kontrollerini nasıl yapılandıracağınızı ve uygulayacağınızı öğrenin.
JavaScript Kod Kalitesi Kontrolleri: Pre-commit Hook Yapılandırmasında Uzmanlaşma
Sürekli gelişen yazılım geliştirme dünyasında, yüksek kod kalitesini korumak çok önemlidir. Temiz, iyi biçimlendirilmiş ve hatasız kod, yalnızca bakım maliyetlerini düşürmekle kalmaz, aynı zamanda iş birliğini teşvik eder ve geliştirme döngülerini hızlandırır. Kod kalitesini zorunlu kılmak için güçlü bir teknik, pre-commit hook'ları kullanarak kod kalitesi kontrolleri uygulamaktır. Bu makale, JavaScript projeleri için pre-commit hook'larını yapılandırmaya yönelik kapsamlı bir kılavuz sunarak, kodunuz deponuza ulaşmadan önce kod kalitesi kontrollerini otomatikleştirmenizi sağlar.
Pre-commit Hook'ları Nedir?
Git hook'ları, Git'in commit, push ve receive gibi olaylardan önce veya sonra yürüttüğü betiklerdir. Özellikle pre-commit hook'ları, bir commit işlemi kesinleşmeden önce çalışır. Commit edilecek değişiklikleri denetlemek ve önceden tanımlanmış kalite standartlarını karşılamayan commit'leri engellemek için kritik bir fırsat sunarlar. Bunları, düşük kaliteli kodun kod tabanınıza girmesini engelleyen kapı bekçileri olarak düşünebilirsiniz.
JavaScript Kod Kalitesi için Neden Pre-commit Hook'ları Kullanılmalı?
- Erken Hata Tespiti: Pre-commit hook'ları, kod kalitesi sorunlarını geliştirme sürecinin başlarında yakalayarak daha ileriye yayılmalarını önler. Bu, sorunları kod incelemeleri sırasında veya daha da kötüsü üretimde keşfetmekten çok daha verimlidir.
- Otomatik Kod Formatlama: Ekibiniz ve projeniz genelinde tutarlı bir kod stili sağlayın. Otomatik formatlama, stilistik tartışmaları önler ve daha okunabilir bir kod tabanına katkıda bulunur.
- Kod İnceleme Yükünün Azaltılması: Kodlama standartlarını otomatik olarak zorunlu kılarak, pre-commit hook'ları kod inceleyicileri üzerindeki yükü azaltır ve onların mimari kararlara ve karmaşık mantığa odaklanmalarını sağlar.
- Geliştirilmiş Kod Bakım Kolaylığı: Tutarlı ve yüksek kaliteli bir kod tabanının bakımı ve zaman içinde geliştirilmesi daha kolaydır.
- Zorunlu Tutarlılık: Kodu kimin yazdığına bakılmaksızın tüm kodun projenin standartlarına uymasını sağlarlar. Bu, özellikle Londra, Tokyo ve Buenos Aires gibi farklı yerlerden çalışan dağınık ekiplerde bireysel kodlama stillerinin farklılık gösterebileceği durumlarda önemlidir.
JavaScript Kod Kalitesi için Anahtar Araçlar
Pre-commit hook'ları ile birlikte JavaScript kod kalitesi kontrollerini otomatikleştirmek için yaygın olarak birkaç araç kullanılır:
- ESLint: Potansiyel hataları belirleyen, kodlama stillerini zorunlu kılan ve kod okunabilirliğini artırmaya yardımcı olan güçlü bir JavaScript linter aracıdır. Geniş bir kural yelpazesini destekler ve yüksek düzeyde yapılandırılabilir.
- Prettier: Kodu otomatik olarak tutarlı bir stile uygun şekilde biçimlendiren, kendi fikirleri olan bir kod formatlayıcısıdır. JavaScript, TypeScript, JSX ve diğer birçok dili destekler.
- Husky: Git hook'larını yönetmeyi kolaylaştıran bir araçtır. Git iş akışının farklı aşamalarında yürütülecek betikleri tanımlamanıza olanak tanır.
- lint-staged: Linter'ları ve formatlayıcıları yalnızca "staged" (hazırlanmış) dosyalar üzerinde çalıştırarak pre-commit sürecini önemli ölçüde hızlandıran bir araçtır. Bu, değiştirilmemiş dosyalar üzerinde gereksiz kontrolleri önler.
Pre-commit Hook'larını Yapılandırma: Adım Adım Kılavuz
Husky ve lint-staged kullanarak JavaScript projeniz için pre-commit hook'larını nasıl kuracağınıza dair ayrıntılı bir kılavuz aşağıda yer almaktadır:
Adım 1: Bağımlılıkları Yükleyin
Öncelikle, npm veya yarn kullanarak gerekli paketleri geliştirme bağımlılıkları olarak yükleyin:
npm install --save-dev husky lint-staged eslint prettier
Veya, yarn kullanarak:
yarn add --dev husky lint-staged eslint prettier
Adım 2: Husky'yi Başlatın
Husky, Git hook'larını yönetme sürecini basitleştirir. Aşağıdaki komutu kullanarak başlatın:
npx husky install
Bu, projenizde Git hook'larınızı saklayacak bir `.husky` dizini oluşturacaktır.
Adım 3: Pre-commit Hook'unu Yapılandırın
Husky kullanarak bir pre-commit hook'u ekleyin:
npx husky add .husky/pre-commit "npx lint-staged"
Bu komut, `.husky` dizininde bir `pre-commit` dosyası oluşturur ve ona `npx lint-staged` komutunu ekler. Bu, Git'e her commit'ten önce lint-staged'i çalıştırmasını söyler.
Adım 4: lint-staged'i Yapılandırın
lint-staged, linter'ları ve formatlayıcıları yalnızca "staged" (hazırlanmış) dosyalar üzerinde çalıştırmanıza olanak tanır, bu da pre-commit sürecini önemli ölçüde hızlandırır. Projenizin kök dizininde bir `lint-staged.config.js` (veya ES modülleri için `lint-staged.config.mjs`) dosyası oluşturun ve aşağıdaki gibi yapılandırın:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
Bu yapılandırma, lint-staged'e tüm "staged" JavaScript ve TypeScript dosyalarında ESLint ve Prettier'ı çalıştırmasını söyler. ESLint'teki `--fix` bayrağı, otomatik olarak düzeltilebilen linting hatalarını otomatik olarak düzeltir ve Prettier'daki `--write` bayrağı dosyaları biçimlendirir ve biçimlendirilmiş kodla üzerlerine yazar.
Alternatif olarak, yapılandırmayı doğrudan `package.json` dosyanızda tanımlayabilirsiniz:
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
}
Adım 5: ESLint'i Yapılandırın
Henüz yapmadıysanız, projeniz için ESLint'i yapılandırın. Aşağıdaki komutu kullanarak bir ESLint yapılandırma dosyası oluşturabilirsiniz:
npx eslint --init
Bu, projenizin gereksinimlerine göre bir ESLint yapılandırma dosyası (`.eslintrc.js`, `.eslintrc.json` veya `.eslintrc.yml`) oluşturma sürecinde size rehberlik edecektir. Çeşitli önceden tanımlanmış yapılandırmalardan birini seçebilir veya kendi özel kurallarınızı oluşturabilirsiniz.
Örnek `.eslintrc.js`:
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'react',
'@typescript-eslint'
],
rules: {
'no-unused-vars': 'warn',
'react/prop-types': 'off'
}
};
Bu yapılandırma, önerilen ESLint kurallarını, önerilen React kurallarını, önerilen TypeScript kurallarını genişletir ve Prettier ile entegre olur. Ayrıca `react/prop-types` kuralını devre dışı bırakır ve `no-unused-vars` kuralını bir uyarı olarak ayarlar.
Adım 6: Prettier'ı Yapılandırın
Projenizin kök dizininde bir `.prettierrc.js` (veya `.prettierrc.json`, `.prettierrc.yml` ya da `.prettierrc.toml`) dosyası oluşturarak Prettier'ı yapılandırın. Prettier'ın formatlama seçeneklerini projenizin stil kılavuzlarına uyacak şekilde özelleştirebilirsiniz.
Örnek `.prettierrc.js`:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2
};
Bu yapılandırma, Prettier'ı tek tırnak, noktalı virgülsüz, sona eklenen virgül, 120 karakterlik bir yazdırma genişliği ve 2 boşlukluk bir sekme genişliği kullanacak şekilde ayarlar.
Alternatif olarak, Prettier yapılandırmasını `package.json` içinde tanımlayabilirsiniz:
{
"prettier": {
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2
}
}
Adım 7: Yapılandırmanızı Test Edin
Yapılandırmanızı test etmek için bazı değişiklikleri hazırlayın (stage) ve bunları commit etmeye çalışın. Örneğin:
git add .
git commit -m "Test pre-commit hook"
Herhangi bir linting veya formatlama sorunu varsa, ESLint ve Prettier bunları otomatik olarak düzeltecek (mümkünse) veya hataları bildirecektir. Hatalar bildirilirse, commit işlemi iptal edilir, bu da tekrar commit etmeden önce sorunları düzeltmenize olanak tanır.
Gelişmiş Yapılandırma Seçenekleri
Farklı Linter ve Formatlayıcıları Kullanma
Pre-commit hook yapılandırmanıza kolayca başka linter'lar ve formatlayıcılar entegre edebilirsiniz. Örneğin, CSS veya SASS dosyalarını lintlemek için Stylelint kullanabilirsiniz:
npm install --save-dev stylelint stylelint-config-standard
Ardından, `lint-staged.config.js` dosyanızı Stylelint'i içerecek şekilde güncelleyin:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'*.{css,scss}': ['stylelint --fix'],
};
Commit Öncesi Testleri Çalıştırma
Birim testlerinizi de pre-commit hook'unun bir parçası olarak çalıştırabilirsiniz. Bu, kodunuzun commit edilmeden önce doğru çalıştığından emin olmanıza yardımcı olur. Jest kullandığınızı varsayarsak:
npm install --save-dev jest
`lint-staged.config.js` dosyanızı test komutunu içerecek şekilde güncelleyin:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
'*.{css,scss}': ['stylelint --fix'],
};
`--findRelatedTests` bayrağı, Jest'e yalnızca değiştirilen dosyalarla ilgili testleri çalıştırmasını söyler, bu da süreci önemli ölçüde hızlandırır.
Pre-commit Hook'larını Atlama
Bazı durumlarda, pre-commit hook'larını geçici olarak atlamak isteyebilirsiniz. Bunu `git commit` komutuyla `--no-verify` bayrağını kullanarak yapabilirsiniz:
git commit --no-verify -m "Commit message"
Ancak, kod kalitesini korumada önemli bir rol oynadıkları için kesinlikle gerekli olmadıkça hook'ları atlamaktan kaçınmanız genel olarak tavsiye edilir.
Yaygın Sorunları Giderme
- Hook'lar çalışmıyor: Husky'nin doğru bir şekilde kurulup başlatıldığından ve `.husky` dizininin projenizin kök dizininde mevcut olduğundan emin olun. Ayrıca `.husky` dizinindeki `pre-commit` dosyasının çalıştırılabilir olduğunu doğrulayın.
- Linting hataları düzeltilmiyor: ESLint ile `--fix` bayrağının kullanıldığından ve ESLint yapılandırmanızın belirli hata türlerini otomatik olarak düzeltecek şekilde ayarlandığından emin olun.
- Prettier dosyaları formatlamıyor: Prettier ile `--write` bayrağının kullanıldığından ve Prettier yapılandırmanızın doğru şekilde ayarlandığından emin olun.
- Yavaş pre-commit hook'ları: Linter'ları ve formatlayıcıları yalnızca "staged" dosyalar üzerinde çalıştırmak için lint-staged kullanın. Ayrıca, kontrol edilen kural ve ayar sayısını en aza indirmek için ESLint ve Prettier yapılandırmalarınızı optimize etmeyi düşünün.
- Çakışan yapılandırmalar: ESLint ve Prettier yapılandırmalarınızın birbiriyle çakışmadığından emin olun. Eğer çakışıyorlarsa, çakışmaları çözmek için bir veya her iki yapılandırmayı da ayarlamanız gerekebilir. Çakışmaları önlemek için `eslint-config-prettier` ve `eslint-plugin-prettier` gibi paylaşılan bir yapılandırma kullanmayı düşünün.
Pre-commit Hook'ları için En İyi Pratikler
- Hook'ları hızlı tutun: Yavaş hook'lar geliştirici verimliliğini önemli ölçüde etkileyebilir. Yalnızca "staged" dosyaları işlemek için lint-staged kullanın ve linter ile formatlayıcı yapılandırmalarınızı optimize edin.
- Açık hata mesajları sağlayın: Bir hook başarısız olduğunda, geliştiricilere sorunları nasıl düzeltecekleri konusunda rehberlik etmek için açık ve bilgilendirici hata mesajları sağlayın.
- Mümkün olduğunca çok şeyi otomatikleştirin: Manuel çabayı en aza indirmek ve tutarlılığı sağlamak için kod formatlamayı ve linting'i otomatikleştirin.
- Ekibinizi eğitin: Tüm ekip üyelerinin pre-commit hook'larının amacını ve bunları nasıl etkili bir şekilde kullanacaklarını anladığından emin olun.
- Tutarlı bir yapılandırma kullanın: Projeniz genelinde ESLint, Prettier ve diğer araçlar için tutarlı bir yapılandırma sürdürün. Bu, tüm kodun aynı şekilde formatlanmasını ve lintlenmesini sağlamaya yardımcı olacaktır. Birden fazla projede kolayca kurulabilen ve güncellenebilen paylaşılan bir yapılandırma paketi kullanmayı düşünün.
- Hook'larınızı test edin: Doğru çalıştıklarından ve beklenmedik sorunlara neden olmadıklarından emin olmak için pre-commit hook'larınızı düzenli olarak test edin.
Global Hususlar
Küresel olarak dağınık ekiplerde çalışırken, aşağıdakileri göz önünde bulundurun:
- Tutarlı araç sürümleri: Tüm ekip üyelerinin ESLint, Prettier, Husky ve lint-staged'in aynı sürümlerini kullandığından emin olun. Bu, sürümleri `package.json` dosyanızda belirterek ve bağımlılıkları yüklemek için npm veya yarn gibi bir paket yöneticisi kullanarak başarılabilir.
- Çapraz platform uyumluluğu: Tüm platformlarda doğru çalıştıklarından emin olmak için pre-commit hook'larınızı farklı işletim sistemlerinde (Windows, macOS, Linux) test edin. Mümkün olduğunda çapraz platform araçları ve komutları kullanın.
- Zaman dilimi farklılıkları: Pre-commit hook sorunları hakkında ekip üyeleriyle iletişim kurarken zaman dilimi farklılıklarını göz önünde bulundurun. Sorunları hızlı bir şekilde çözmelerine yardımcı olmak için açık talimatlar ve örnekler sağlayın.
- Dil desteği: Projeniz birden çok dille çalışmayı içeriyorsa, pre-commit hook'larınızın projede kullanılan tüm dilleri desteklediğinden emin olun. Her dil için ek linter'lar ve formatlayıcılar yüklemeniz gerekebilir.
Sonuç
Pre-commit hook'larını uygulamak, JavaScript projelerinde kod kalitesini zorunlu kılmak, ekip iş birliğini geliştirmek ve bakım maliyetlerini düşürmek için etkili bir yoldur. ESLint, Prettier, Husky ve lint-staged gibi araçları entegre ederek, kod formatlama, linting ve test işlemlerini otomatikleştirebilir, böylece deponuza yalnızca yüksek kaliteli kodun commit edilmesini sağlayabilirsiniz. Bu kılavuzda özetlenen adımları izleyerek, daha temiz, bakımı daha kolay ve daha güvenilir JavaScript uygulamaları oluşturmanıza yardımcı olacak sağlam bir kod kalitesi kontrolü kurabilirsiniz. Bu pratiği benimseyin ve ekibinizin geliştirme iş akışını bugün bir üst seviyeye taşıyın.