بوابات جودة كود جافاسكريبت: إتقان إعداد خطافات ما قبل التثبيت (Pre-commit Hooks)

في عالم تطوير البرمجيات دائم التطور، يعد الحفاظ على جودة عالية للكود أمرًا بالغ الأهمية. الكود النظيف والمنسق جيدًا والخالي من الأخطاء لا يقلل من تكاليف الصيانة فحسب، بل يعزز أيضًا التعاون ويسرع دورات التطوير. إحدى التقنيات القوية لفرض جودة الكود هي تطبيق بوابات جودة الكود باستخدام خطافات ما قبل التثبيت (pre-commit hooks). يقدم هذا المقال دليلاً شاملاً لإعداد خطافات ما قبل التثبيت لمشاريع جافاسكريبت، مما يتيح لك أتمتة فحوصات جودة الكود حتى قبل أن يصل الكود إلى مستودعك.

ما هي خطافات ما قبل التثبيت (Pre-commit Hooks)؟

خطافات Git هي نصوص برمجية (scripts) ينفذها Git قبل أو بعد أحداث مثل التثبيت (commit)، والدفع (push)، والاستلام (receive). تعمل خطافات ما قبل التثبيت، على وجه التحديد، قبل إنهاء عملية التثبيت. إنها توفر فرصة حاسمة لفحص التغييرات التي يتم تثبيتها ومنع عمليات التثبيت التي لا تفي بمعايير الجودة المحددة مسبقًا. فكر فيها كحراس بوابات يمنعون الكود منخفض الجودة من دخول قاعدة الكود الخاصة بك.

لماذا نستخدم خطافات ما قبل التثبيت لجودة كود جافاسكريبت؟

• الكشف المبكر عن الأخطاء: تلتقط خطافات ما قبل التثبيت مشكلات جودة الكود في وقت مبكر من عملية التطوير، مما يمنعها من الانتشار أكثر. هذا أكثر كفاءة بكثير من اكتشاف المشكلات أثناء مراجعات الكود أو، ما هو أسوأ، في بيئة الإنتاج.
• تنسيق الكود الآلي: تضمن أسلوب كود متسقًا عبر فريقك ومشروعك. يمنع التنسيق الآلي النقاشات الأسلوبية ويساهم في قاعدة كود أكثر قابلية للقراءة.
• تقليل عبء مراجعة الكود: من خلال فرض معايير الترميز تلقائيًا، تقلل خطافات ما قبل التثبيت من العبء على مراجعي الكود، مما يسمح لهم بالتركيز على القرارات المعمارية والمنطق المعقد.
• تحسين قابلية صيانة الكود: قاعدة الكود المتسقة وعالية الجودة أسهل في الصيانة والتطوير بمرور الوقت.
• فرض الاتساق: تضمن أن جميع الأكواد تتوافق مع معايير المشروع، بغض النظر عن المطور الذي كتبها. هذا مهم بشكل خاص في الفرق الموزعة التي تعمل من مواقع مختلفة – لنقل، لندن وطوكيو وبوينس آيرس – حيث قد تختلف أساليب الترميز الفردية.

الأدوات الرئيسية لجودة كود جافاسكريبت

تُستخدم العديد من الأدوات بشكل شائع جنبًا إلى جنب مع خطافات ما قبل التثبيت لأتمتة فحوصات جودة كود جافاسكريبت:

• ESLint: مدقق كود (linter) قوي لجافاسكريبت يحدد الأخطاء المحتملة، ويفرض أساليب الترميز، ويساعد على تحسين قابلية قراءة الكود. يدعم مجموعة واسعة من القواعد وهو قابل للتخصيص بدرجة عالية.
• Prettier: منسق كود صارم (opinionated) يقوم تلقائيًا بتنسيق الكود للالتزام بأسلوب متسق. يدعم جافاسكريبت، تايب سكريبت، JSX، والعديد من اللغات الأخرى.
• Husky: أداة تسهل إدارة خطافات Git. تتيح لك تحديد نصوص برمجية سيتم تنفيذها في مراحل مختلفة من سير عمل Git.
• lint-staged: أداة تقوم بتشغيل المدققات والمنسقات فقط على الملفات المضافة إلى منطقة التجهيز (staged files)، مما يسرع بشكل كبير عملية ما قبل التثبيت. هذا يمنع عمليات الفحص غير الضرورية على الملفات التي لم تتغير.

إعداد خطافات ما قبل التثبيت: دليل خطوة بخطوة

إليك دليل مفصل حول كيفية إعداد خطافات ما قبل التثبيت لمشروع جافاسكريبت الخاص بك باستخدام Husky و lint-staged:

الخطوة 1: تثبيت التبعيات

أولاً، قم بتثبيت الحزم الضرورية كـ development dependencies باستخدام npm أو yarn:

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

              
                Copy
              
            
          

أو، باستخدام yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

الخطوة 2: تهيئة Husky

يبسط Husky عملية إدارة خطافات Git. قم بتهيئته باستخدام الأمر التالي:

            npx husky install
            

              
                Copy
              
            
          

سيؤدي هذا إلى إنشاء مجلد `.husky` في مشروعك، والذي سيخزن خطافات Git الخاصة بك.

الخطوة 3: إعداد خطاف ما قبل التثبيت

أضف خطاف ما قبل التثبيت باستخدام Husky:

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

              
                Copy
              
            
          

ينشئ هذا الأمر ملف `pre-commit` في مجلد `.husky` ويضيف الأمر `npx lint-staged` إليه. هذا يخبر Git بتشغيل lint-staged قبل كل عملية تثبيت.

الخطوة 4: إعداد lint-staged

يسمح لك lint-staged بتشغيل المدققات والمنسقات فقط على الملفات المجهزة، مما يسرع بشكل كبير عملية ما قبل التثبيت. قم بإنشاء ملف `lint-staged.config.js` (أو `lint-staged.config.mjs` لوحدات ES) في جذر مشروعك وقم بإعداده على النحو التالي:

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

              
                Copy
              
            
          

يخبر هذا الإعداد lint-staged بتشغيل ESLint و Prettier على جميع ملفات جافاسكريبت وتايب سكريبت المجهزة. يقوم العلم `--fix` في ESLint بإصلاح أي أخطاء تدقيق يمكن تصحيحها تلقائيًا، ويقوم العلم `--write` في Prettier بتنسيق الملفات والكتابة فوقها بالكود المنسق.

بدلاً من ذلك، يمكنك تحديد الإعداد مباشرة في ملف `package.json` الخاص بك:

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

              
                Copy
              
            
          

الخطوة 5: إعداد ESLint

إذا لم تكن قد فعلت ذلك بالفعل، فقم بإعداد ESLint لمشروعك. يمكنك إنشاء ملف إعداد ESLint باستخدام الأمر التالي:

            npx eslint --init
            

              
                Copy
              
            
          

سيرشدك هذا خلال عملية إنشاء ملف إعداد ESLint (`.eslintrc.js` أو `.eslintrc.json` أو `.eslintrc.yml`) بناءً على متطلبات مشروعك. يمكنك الاختيار من بين مجموعة متنوعة من الإعدادات المحددة مسبقًا أو إنشاء قواعد مخصصة خاصة بك.

مثال على `.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
              
            
          

يمدد هذا الإعداد قواعد ESLint الموصى بها، وقواعد React الموصى بها، وقواعد TypeScript الموصى بها، ويتكامل مع Prettier. كما أنه يعطل قاعدة `react/prop-types` ويضبط قاعدة `no-unused-vars` على تحذير.

الخطوة 6: إعداد Prettier

قم بإعداد Prettier عن طريق إنشاء ملف `.prettierrc.js` (أو `.prettierrc.json` أو `.prettierrc.yml` أو `.prettierrc.toml`) في جذر مشروعك. يمكنك تخصيص خيارات تنسيق Prettier لتتناسب مع إرشادات أسلوب مشروعك.

مثال على `.prettierrc.js`:

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

              
                Copy
              
            
          

يضبط هذا الإعداد Prettier لاستخدام علامات الاقتباس المفردة، وعدم استخدام الفواصل المنقوطة، واستخدام الفواصل اللاحقة، وعرض طباعة يبلغ 120 حرفًا، وعرض علامة جدولة بمقدار مسافتين.

بدلاً من ذلك، يمكنك تحديد إعداد Prettier داخل `package.json`:

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

              
                Copy
              
            
          

الخطوة 7: اختبار الإعداد الخاص بك

لاختبار الإعداد الخاص بك، قم بتجهيز بعض التغييرات وحاول تثبيتها. على سبيل المثال:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

إذا كانت هناك أي مشكلات في التدقيق أو التنسيق، فسيقوم ESLint و Prettier بإصلاحها تلقائيًا (إن أمكن) أو الإبلاغ عن الأخطاء. إذا تم الإبلاغ عن أخطاء، فسيتم إحباط عملية التثبيت، مما يتيح لك إصلاح المشكلات قبل التثبيت مرة أخرى.

خيارات الإعداد المتقدمة

استخدام مدققات ومنسقات مختلفة

يمكنك بسهولة دمج مدققات ومنسقات أخرى في إعداد خطاف ما قبل التثبيت. على سبيل المثال، يمكنك استخدام Stylelint لتدقيق ملفات CSS أو SASS:

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

              
                Copy
              
            
          

ثم، قم بتحديث ملف `lint-staged.config.js` الخاص بك لتضمين Stylelint:

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

              
                Copy
              
            
          

تشغيل الاختبارات قبل التثبيت

يمكنك أيضًا تشغيل اختبارات الوحدة الخاصة بك كجزء من خطاف ما قبل التثبيت. هذا يساعد على ضمان أن الكود الخاص بك يعمل بشكل صحيح قبل تثبيته. بافتراض أنك تستخدم Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

قم بتحديث ملف `lint-staged.config.js` الخاص بك لتضمين أمر الاختبار:

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

              
                Copy
              
            
          

يخبر العلم `--findRelatedTests` Jest بتشغيل الاختبارات المتعلقة بالملفات المتغيرة فقط، مما يسرع العملية بشكل كبير.

تخطي خطافات ما قبل التثبيت

في بعض الحالات، قد ترغب في تخطي خطافات ما قبل التثبيت مؤقتًا. يمكنك القيام بذلك باستخدام العلم `--no-verify` مع أمر `git commit`:

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

              
                Copy
              
            
          

ومع ذلك، يوصى عمومًا بتجنب تخطي الخطافات ما لم يكن ذلك ضروريًا للغاية، لأنها تلعب دورًا حاسمًا في الحفاظ على جودة الكود.

استكشاف المشكلات الشائعة وإصلاحها

• الخطافات لا تعمل: تأكد من أن Husky مثبت ومهيأ بشكل صحيح، وأن مجلد `.husky` موجود في جذر مشروعك. تحقق أيضًا من أن ملف `pre-commit` في مجلد `.husky` قابل للتنفيذ.
• أخطاء التدقيق لا يتم إصلاحها: تأكد من استخدام العلم `--fix` مع ESLint، وأن إعداد ESLint الخاص بك معد لإصلاح أنواع معينة من الأخطاء تلقائيًا.
• Prettier لا ينسق الملفات: تأكد من استخدام العلم `--write` مع Prettier، وأن إعداد Prettier الخاص بك معد بشكل صحيح.
• بطء خطافات ما قبل التثبيت: استخدم lint-staged لتشغيل المدققات والمنسقات فقط على الملفات المجهزة. فكر أيضًا في تحسين إعدادات ESLint و Prettier لتقليل عدد القواعد والإعدادات التي يتم فحصها.
• إعدادات متعارضة: تأكد من عدم تعارض إعدادات ESLint و Prettier مع بعضها البعض. إذا حدث ذلك، فقد تحتاج إلى تعديل أحد الإعدادات أو كليهما لحل التعارضات. فكر في استخدام إعداد مشترك مثل `eslint-config-prettier` و `eslint-plugin-prettier` لتجنب التعارضات.

أفضل الممارسات لخطافات ما قبل التثبيت

• حافظ على سرعة الخطافات: يمكن أن تؤثر الخطافات البطيئة بشكل كبير على إنتاجية المطورين. استخدم lint-staged لمعالجة الملفات المجهزة فقط وتحسين إعدادات المدقق والمنسق.
• قدم رسائل خطأ واضحة: عندما يفشل خطاف، قدم رسائل خطأ واضحة وغنية بالمعلومات لتوجيه المطورين حول كيفية إصلاح المشكلات.
• أتمتة قدر الإمكان: قم بأتمتة تنسيق الكود وتدقيقه لتقليل الجهد اليدوي وضمان الاتساق.
• ثقف فريقك: تأكد من أن جميع أعضاء الفريق يفهمون الغرض من خطافات ما قبل التثبيت وكيفية استخدامها بفعالية.
• استخدم إعدادًا متسقًا: حافظ على إعداد متسق لـ ESLint و Prettier والأدوات الأخرى عبر مشروعك. سيساعد هذا على ضمان تنسيق وتدقيق جميع الأكواد بنفس الطريقة. فكر في استخدام حزمة إعدادات مشتركة يمكن تثبيتها وتحديثها بسهولة عبر مشاريع متعددة.
• اختبر خطافاتك: اختبر خطافات ما قبل التثبيت بانتظام للتأكد من أنها تعمل بشكل صحيح وأنها لا تسبب أي مشكلات غير متوقعة.

اعتبارات عالمية

عند العمل في فرق موزعة عالميًا، ضع في اعتبارك ما يلي:

• إصدارات أدوات متسقة: تأكد من أن جميع أعضاء الفريق يستخدمون نفس إصدارات ESLint و Prettier و Husky و lint-staged. يمكن تحقيق ذلك عن طريق تحديد الإصدارات في ملف `package.json` الخاص بك واستخدام مدير حزم مثل npm أو yarn لتثبيت التبعيات.
• التوافق عبر المنصات: اختبر خطافات ما قبل التثبيت على أنظمة تشغيل مختلفة (Windows ، macOS ، Linux) للتأكد من أنها تعمل بشكل صحيح على جميع المنصات. استخدم أدوات وأوامر متوافقة مع جميع المنصات كلما أمكن ذلك.
• فروق التوقيت: كن على دراية بفروق التوقيت عند التواصل مع أعضاء الفريق حول مشكلات خطاف ما قبل التثبيت. قدم تعليمات وأمثلة واضحة لمساعدتهم على حل المشكلات بسرعة.
• دعم اللغات: إذا كان مشروعك يتضمن العمل بلغات متعددة، فتأكد من أن خطافات ما قبل التثبيت تدعم جميع اللغات المستخدمة في المشروع. قد تحتاج إلى تثبيت مدققات ومنسقات إضافية لكل لغة.

الخاتمة

يعد تطبيق خطافات ما قبل التثبيت طريقة فعالة لفرض جودة الكود، وتحسين التعاون بين الفرق، وتقليل تكاليف الصيانة في مشاريع جافاسكريبت. من خلال دمج أدوات مثل ESLint و Prettier و Husky و lint-staged، يمكنك أتمتة تنسيق الكود وتدقيقه واختباره، مما يضمن أن الكود عالي الجودة فقط هو الذي يتم تثبيته في مستودعك. باتباع الخطوات الموضحة في هذا الدليل، يمكنك إعداد بوابة جودة كود قوية ستساعدك على بناء تطبيقات جافاسكريبت أنظف وأكثر قابلية للصيانة وأكثر موثوقية. تبنى هذه الممارسة وارتقِ بسير عمل التطوير لفريقك اليوم.