JavaScript Kod Sifatini Nazorat Qilish: Pre-commit Hook Konfiguratsiyasini Mukammal O'zlashtirish

Dasturiy ta'minot ishlab chiqishning doimiy rivojlanayotgan dunyosida yuqori kod sifatini saqlash juda muhim. Toza, yaxshi formatlangan va xatolarsiz kod nafaqat texnik xizmat ko'rsatish xarajatlarini kamaytiradi, balki hamkorlikni rivojlantiradi va ishlab chiqish sikllarini tezlashtiradi. Kod sifatini ta'minlashning kuchli usullaridan biri bu kod sifati nazoratini joriy etishdir. Ushbu maqola JavaScript loyihalari uchun pre-commit hook'larni sozlash bo'yicha keng qamrovli qo'llanma bo'lib, kod omboringizga yetib bormasdan oldin kod sifati tekshiruvlarini avtomatlashtirishga imkon beradi.

Pre-commit Hook'lar nima?

Git hook'lar — bu Git `commit`, `push` va `receive` kabi hodisalardan oldin yoki keyin bajaradigan skriptlardir. Aynan pre-commit hook'lar commit yakunlanishidan oldin ishga tushadi. Ular commit qilinayotgan o'zgarishlarni tekshirish va oldindan belgilangan sifat standartlariga javob bermaydigan commit'larning oldini olish uchun muhim imkoniyatni taqdim etadi. Ularni kodingiz bazasiga past sifatli kodning kirishiga to'sqinlik qiluvchi "darvozabonlar" deb o'ylang.

Nima uchun JavaScript Kod Sifati uchun Pre-commit Hook'lardan foydalanish kerak?

• Xatolarni Erta Aniqlash: Pre-commit hook'lar kod sifati muammolarini ishlab chiqish jarayonining boshida aniqlaydi va ularning yanada tarqalishining oldini oladi. Bu muammolarni kodni ko'rib chiqish paytida yoki undan ham yomoni, production'da aniqlashdan ancha samaraliroq.
• Avtomatlashtirilgan Kod Formatlash: Jamoangiz va loyihangiz bo'ylab bir xil kod uslubini ta'minlang. Avtomatlashtirilgan formatlash uslubiy bahslarning oldini oladi va o'qilishi oson bo'lgan kod bazasiga hissa qo'shadi.
• Kodni Ko'rib Chiqish Yukini Kamaytirish: Kodlash standartlarini avtomatik ravishda tatbiq etish orqali, pre-commit hook'lar kodni ko'rib chiquvchilarning yukini kamaytiradi, bu esa ularga arxitektura qarorlari va murakkab mantiqqa e'tibor qaratish imkonini beradi.
• Kodning Qo'llab-quvvatlanishini Yaxshilash: Bir xil va yuqori sifatli kod bazasini vaqt o'tishi bilan qo'llab-quvvatlash va rivojlantirish osonroq.
• Bir xillikni ta'minlash: Ular, kim tomonidan yozilganidan qat'i nazar, barcha kod loyiha standartlariga mos kelishini ta'minlaydi. Bu, ayniqsa, turli joylardan – masalan, London, Tokio va Buenos-Ayresdan ishlayotgan taqsimlangan jamoalarda muhim ahamiyatga ega, chunki ularning individual kodlash uslublari turlicha bo'lishi mumkin.

JavaScript Kod Sifati uchun Asosiy Vositalar

JavaScript kod sifati tekshiruvlarini avtomatlashtirish uchun pre-commit hook'lar bilan birgalikda bir nechta vositalar keng qo'llaniladi:

• ESLint: Potentsial xatolarni aniqlaydigan, kodlash uslublarini joriy etadigan va kodning o'qilishini yaxshilashga yordam beradigan kuchli JavaScript linteri. U keng ko'lamli qoidalarni qo'llab-quvvatlaydi va yuqori darajada sozlanishi mumkin.
• Prettier: Kodni avtomatik ravishda bir xil uslubga rioya qilish uchun formatlaydigan qat'iy fikrli kod formatlovchi. U JavaScript, TypeScript, JSX va boshqa ko'plab tillarni qo'llab-quvvatlaydi.
• Husky: Git hook'larini boshqarishni osonlashtiradigan vosita. U Git ish jarayonining turli bosqichlarida bajariladigan skriptlarni aniqlash imkonini beradi.
• lint-staged: Linter va formatlovchilarni faqat sahnalangan (staged) fayllarda ishga tushiradigan vosita, bu pre-commit jarayonini sezilarli darajada tezlashtiradi. Bu o'zgartirilmagan fayllarda keraksiz tekshiruvlarning oldini oladi.

Pre-commit Hook'larni Sozlash: Qadamma-qadam Qo'llanma

Quyida Husky va lint-staged yordamida JavaScript loyihangiz uchun pre-commit hook'larni sozlash bo'yicha batafsil qo'llanma keltirilgan:

1-qadam: Bog'liqliklarni O'rnatish

Birinchi navbatda, kerakli paketlarni npm yoki yarn yordamida ishlab chiqish bog'liqliklari (development dependencies) sifatida o'rnating:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Yoki, yarn yordamida:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

2-qadam: Husky'ni Ishga Tushirish

Husky Git hook'larini boshqarish jarayonini soddalashtiradi. Uni quyidagi buyruq yordamida ishga tushiring:

            npx husky install
            

              
                Copy
              
            
          

Bu loyihangizda `.husky` katalogini yaratadi, u yerda sizning Git hook'laringiz saqlanadi.

3-qadam: Pre-commit Hook'ni Sozlash

Husky yordamida pre-commit hook qo'shing:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Bu buyruq `.husky` katalogida `pre-commit` faylini yaratadi va unga `npx lint-staged` buyrug'ini qo'shadi. Bu Git'ga har bir commit'dan oldin lint-staged'ni ishga tushirishni bildiradi.

4-qadam: lint-staged'ni Sozlash

lint-staged sizga linterlar va formatlovchilarni faqat sahnalangan (staged) fayllarda ishga tushirishga imkon beradi, bu esa pre-commit jarayonini sezilarli darajada tezlashtiradi. Loyihangizning ildiz katalogida `lint-staged.config.js` (yoki ES modullari uchun `lint-staged.config.mjs`) faylini yarating va uni quyidagicha sozlang:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Ushbu konfiguratsiya lint-staged'ga barcha sahnalangan JavaScript va TypeScript fayllarida ESLint va Prettier'ni ishga tushirishni buyuradi. ESLint'dagi `--fix` bayrog'i avtomatik tuzatilishi mumkin bo'lgan har qanday linting xatolarini avtomatik ravishda tuzatadi va Prettier'dagi `--write` bayrog'i fayllarni formatlaydi va ularni formatlangan kod bilan qayta yozadi.

Shu bilan bir qatorda, siz konfiguratsiyani to'g'ridan-to'g'ri `package.json` faylingizda belgilashingiz mumkin:

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

              
                Copy
              
            
          

5-qadam: ESLint'ni Sozlash

Agar hali qilmagan bo'lsangiz, loyihangiz uchun ESLint'ni sozlang. Siz quyidagi buyruq yordamida ESLint konfiguratsiya faylini yaratishingiz mumkin:

            npx eslint --init
            

              
                Copy
              
            
          

Bu sizni loyihangiz talablariga asoslangan ESLint konfiguratsiya faylini (`.eslintrc.js`, `.eslintrc.json`, yoki `.eslintrc.yml`) yaratish jarayonida yo'naltiradi. Siz turli xil oldindan belgilangan konfiguratsiyalardan tanlashingiz yoki o'zingizning maxsus qoidalaringizni yaratishingiz mumkin.

Misol `.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'
  }
};
            

              
                Copy
              
            
          

Ushbu konfiguratsiya tavsiya etilgan ESLint qoidalarini, tavsiya etilgan React qoidalarini, tavsiya etilgan TypeScript qoidalarini kengaytiradi va Prettier bilan integratsiya qiladi. Shuningdek, u `react/prop-types` qoidasini o'chirib qo'yadi va `no-unused-vars` qoidasini ogohlantirish darajasiga o'rnatadi.

6-qadam: Prettier'ni Sozlash

Prettier'ni loyihangizning ildiz katalogida `.prettierrc.js` (yoki `.prettierrc.json`, `.prettierrc.yml`, yoki `.prettierrc.toml`) faylini yaratish orqali sozlang. Siz Prettier'ning formatlash parametrlarini loyihangizning uslubiy ko'rsatmalariga moslashtirishingiz mumkin.

Misol `.prettierrc.js`:

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

              
                Copy
              
            
          

Ushbu konfiguratsiya Prettier'ni yakka tirnoqlardan foydalanish, nuqta-vergul ishlatmaslik, oxirgi vergullar, 120 belgidan iborat bosma kengligi va 2 bo'shliqdan iborat tab kengligini sozlaydi.

Shu bilan bir qatorda, siz Prettier konfiguratsiyasini `package.json` ichida belgilashingiz mumkin:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

7-qadam: Konfiguratsiyangizni Sinab Ko'ring

Konfiguratsiyangizni sinab ko'rish uchun, ba'zi o'zgarishlarni sahnalang va ularni commit qilishga harakat qiling. Masalan:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Agar biron bir linting yoki formatlash muammolari bo'lsa, ESLint va Prettier ularni avtomatik ravishda tuzatadi (agar iloji bo'lsa) yoki xatoliklar haqida xabar beradi. Agar xatoliklar xabar qilinsa, commit bekor qilinadi, bu sizga qayta commit qilishdan oldin muammolarni tuzatish imkonini beradi.

Kengaytirilgan Konfiguratsiya Variantlari

Turli Linter va Formatlovchilardan Foydalanish

Siz osongina boshqa linterlar va formatlovchilarni pre-commit hook konfiguratsiyangizga integratsiya qilishingiz mumkin. Masalan, siz CSS yoki SASS fayllarini linting qilish uchun Stylelint'dan foydalanishingiz mumkin:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Keyin, Stylelint'ni qo'shish uchun `lint-staged.config.js` faylingizni yangilang:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Commit'dan Oldin Testlarni Ishga Tushirish

Shuningdek, siz o'zingizning birlik testlaringizni pre-commit hook'ning bir qismi sifatida ishga tushirishingiz mumkin. Bu kodingiz commit qilinishidan oldin to'g'ri ishlayotganiga ishonch hosil qilishga yordam beradi. Siz Jest'dan foydalanayotganingizni faraz qilsak:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Test buyrug'ini qo'shish uchun `lint-staged.config.js` faylingizni yangilang:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

`--findRelatedTests` bayrog'i Jest'ga faqat o'zgartirilgan fayllar bilan bog'liq bo'lgan testlarni ishga tushirishni buyuradi, bu esa jarayonni sezilarli darajada tezlashtiradi.

Pre-commit Hook'larni O'tkazib Yuborish

Ba'zi hollarda, siz vaqtincha pre-commit hook'larni o'tkazib yuborishni xohlashingiz mumkin. Siz buni `git commit` buyrug'i bilan `--no-verify` bayrog'ini ishlatish orqali qilishingiz mumkin:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

Biroq, odatda, mutlaqo zarur bo'lmasa, hook'larni o'tkazib yuborishdan qochish tavsiya etiladi, chunki ular kod sifatini saqlashda muhim rol o'ynaydi.

Umumiy Muammolarni Bartaraf Etish

• Hook'lar ishlamayapti: Husky to'g'ri o'rnatilgani va ishga tushirilganiga hamda `.husky` katalogi loyihangizning ildizida mavjudligiga ishonch hosil qiling. Shuningdek, `.husky` katalogidagi `pre-commit` faylining bajarilishi mumkinligini tekshiring.
• Linting xatolari tuzatilmayapti: ESLint bilan `--fix` bayrog'i ishlatilganiga va ESLint konfiguratsiyangiz ma'lum turdagi xatolarni avtomatik tuzatish uchun sozlanganiga ishonch hosil qiling.
• Prettier fayllarni formatlamayapti: Prettier bilan `--write` bayrog'i ishlatilganiga va Prettier konfiguratsiyangiz to'g'ri sozlanganiga ishonch hosil qiling.
• Sekin pre-commit hook'lar: Linter va formatlovchilarni faqat sahnalangan fayllarda ishga tushirish uchun lint-staged'dan foydalaning. Shuningdek, tekshiriladigan qoidalar va sozlamalar sonini minimallashtirish uchun ESLint va Prettier konfiguratsiyalaringizni optimallashtirishni ko'rib chiqing.
• Ziddiyatli konfiguratsiyalar: ESLint va Prettier konfiguratsiyalaringiz bir-biriga zid emasligiga ishonch hosil qiling. Agar shunday bo'lsa, ziddiyatlarni hal qilish uchun bir yoki ikkala konfiguratsiyani sozlash kerak bo'lishi mumkin. Ziddiyatlarni oldini olish uchun `eslint-config-prettier` va `eslint-plugin-prettier` kabi umumiy konfiguratsiyadan foydalanishni ko'rib chiqing.

Pre-commit Hook'lar uchun Eng Yaxshi Amaliyotlar

• Hook'larni tez saqlang: Sekin hook'lar dasturchi unumdorligiga sezilarli ta'sir qilishi mumkin. Faqat sahnalangan fayllarni qayta ishlash uchun lint-staged'dan foydalaning va linter va formatlovchi konfiguratsiyalaringizni optimallashtiring.
• Aniq xato xabarlarini taqdim eting: Hook ishlamay qolganda, dasturchilarga muammolarni qanday tuzatish bo'yicha yo'l-yo'riq ko'rsatish uchun aniq va ma'lumotli xato xabarlarini taqdim eting.
• Imkon qadar ko'proq avtomatlashtiring: Qo'l mehnatini minimallashtirish va bir xillikni ta'minlash uchun kod formatlash va lintingni avtomatlashtiring.
• Jamoangizni o'rgating: Barcha jamoa a'zolari pre-commit hook'larning maqsadi va ulardan samarali foydalanishni tushunishiga ishonch hosil qiling.
• Bir xil konfiguratsiyadan foydalaning: Loyihangiz bo'ylab ESLint, Prettier va boshqa vositalar uchun bir xil konfiguratsiyani saqlang. Bu barcha kodning bir xil tarzda formatlanishi va linting qilinishini ta'minlashga yordam beradi. Bir nechta loyihalarda osongina o'rnatilishi va yangilanishi mumkin bo'lgan umumiy konfiguratsiya paketidan foydalanishni ko'rib chiqing.
• Hook'laringizni sinab ko'ring: Pre-commit hook'laringizning to'g'ri ishlayotganiga va ular kutilmagan muammolarni keltirib chiqarmayotganiga ishonch hosil qilish uchun ularni muntazam ravishda sinab ko'ring.

Global Masalalar

Global miqyosda taqsimlangan jamoalarda ishlaganda quyidagilarni hisobga oling:

• Bir xil vosita versiyalari: Barcha jamoa a'zolari ESLint, Prettier, Husky va lint-staged'ning bir xil versiyalaridan foydalanayotganiga ishonch hosil qiling. Bunga `package.json` faylida versiyalarni belgilash va bog'liqliklarni o'rnatish uchun npm yoki yarn kabi paket menejeridan foydalanish orqali erishish mumkin.
• Platformalararo muvofiqlik: Pre-commit hook'laringizning barcha platformalarda to'g'ri ishlashini ta'minlash uchun ularni turli operatsion tizimlarda (Windows, macOS, Linux) sinab ko'ring. Iloji boricha platformalararo vositalar va buyruqlardan foydalaning.
• Vaqt mintaqalari farqlari: Jamoa a'zolari bilan pre-commit hook muammolari haqida muloqot qilganda vaqt mintaqalari farqlarini yodda tuting. Muammolarni tezda hal qilishlariga yordam berish uchun aniq ko'rsatmalar va misollar keltiring.
• Tilni qo'llab-quvvatlash: Agar loyihangiz bir nechta til bilan ishlashni o'z ichiga olsa, pre-commit hook'laringiz loyihada ishlatiladigan barcha tillarni qo'llab-quvvatlashiga ishonch hosil qiling. Har bir til uchun qo'shimcha linter va formatlovchilarni o'rnatishingiz kerak bo'lishi mumkin.

Xulosa

Pre-commit hook'larni joriy etish JavaScript loyihalarida kod sifatini ta'minlash, jamoaviy hamkorlikni yaxshilash va texnik xizmat ko'rsatish xarajatlarini kamaytirishning samarali usulidir. ESLint, Prettier, Husky va lint-staged kabi vositalarni integratsiya qilish orqali siz kod formatlash, linting va testlashni avtomatlashtirishingiz mumkin, bu esa faqat yuqori sifatli kodning omboringizga commit qilinishini ta'minlaydi. Ushbu qo'llanmada keltirilgan amallarni bajarib, siz toza, qo'llab-quvvatlash oson va ishonchli JavaScript ilovalarini yaratishga yordam beradigan mustahkam kod sifati nazoratini o'rnatishingiz mumkin. Ushbu amaliyotni qabul qiling va jamoangizning ishlab chiqish jarayonini bugunoq yangi bosqichga ko'taring.