دروازه‌های کیفیت کد جاوا اسکریپت: تسلط بر پیکربندی هوک‌های Pre-commit

در دنیای همیشه در حال تحول توسعه نرم‌افزار، حفظ کیفیت بالای کد از اهمیت فوق‌العاده‌ای برخوردار است. کد تمیز، با فرمت مناسب و بدون باگ نه تنها هزینه‌های نگهداری را کاهش می‌دهد، بلکه همکاری را تقویت کرده و چرخه‌های توسعه را سرعت می‌بخشد. یکی از تکنیک‌های قدرتمند برای اعمال کیفیت کد، پیاده‌سازی دروازه‌های کیفیت کد با استفاده از هوک‌های pre-commit است. این مقاله راهنمای جامعی برای پیکربندی هوک‌های pre-commit برای پروژه‌های جاوا اسکریپت ارائه می‌دهد و شما را قادر می‌سازد تا بررسی‌های کیفیت کد را قبل از اینکه کد حتی به مخزن شما برسد، خودکار کنید.

هوک‌های Pre-commit چه هستند؟

هوک‌های گیت اسکریپت‌هایی هستند که گیت قبل یا بعد از رویدادهایی مانند commit، push و receive اجرا می‌کند. هوک‌های Pre-commit به طور خاص، قبل از نهایی شدن یک کامیت اجرا می‌شوند. آن‌ها فرصت مهمی برای بازرسی تغییرات در حال کامیت شدن فراهم می‌کنند و از کامیت‌هایی که استانداردهای کیفیت از پیش تعریف شده را برآورده نمی‌کنند، جلوگیری می‌کنند. آن‌ها را به عنوان دروازه‌بان‌هایی در نظر بگیرید که از ورود کد بی‌کیفیت به کدبیس شما جلوگیری می‌کنند.

چرا از هوک‌های Pre-commit برای کیفیت کد جاوا اسکریپت استفاده کنیم؟

• تشخیص زودهنگام خطا: هوک‌های Pre-commit مشکلات کیفیت کد را در مراحل اولیه فرآیند توسعه شناسایی می‌کنند و از گسترش آن‌ها جلوگیری می‌کنند. این روش بسیار کارآمدتر از کشف مشکلات در حین بازبینی کد یا بدتر از آن، در محیط پروداکشن است.
• فرمت‌بندی خودکار کد: از سبک کدنویسی یکپارچه در تیم و پروژه خود اطمینان حاصل کنید. فرمت‌بندی خودکار از بحث‌های سبکی جلوگیری کرده و به خوانایی بیشتر کدبیس کمک می‌کند.
• کاهش بار بازبینی کد: با اعمال خودکار استانداردهای کدنویسی، هوک‌های pre-commit بار کاری بازبین‌های کد را کاهش می‌دهند و به آن‌ها اجازه می‌دهند تا بر روی تصمیمات معماری و منطق پیچیده تمرکز کنند.
• بهبود قابلیت نگهداری کد: یک کدبیس یکپارچه و باکیفیت، نگهداری و توسعه آن در طول زمان آسان‌تر است.
• اعمال یکپارچگی: آن‌ها اطمینان می‌دهند که تمام کدها با استانداردهای پروژه مطابقت دارند، صرف نظر از اینکه کدام توسعه‌دهنده آن را نوشته است. این امر به ویژه در تیم‌های توزیع‌شده که از مکان‌های مختلفی - مثلاً لندن، توکیو و بوینس آیرس - کار می‌کنند و ممکن است سبک‌های کدنویسی فردی متفاوت باشد، اهمیت دارد.

ابزارهای کلیدی برای کیفیت کد جاوا اسکریپت

چندین ابزار معمولاً در کنار هوک‌های pre-commit برای خودکارسازی بررسی‌های کیفیت کد جاوا اسکریپت استفاده می‌شوند:

• ESLint: یک لینتر قدرتمند جاوا اسکریپت که خطاهای بالقوه را شناسایی می‌کند، سبک‌های کدنویسی را اعمال می‌کند و به بهبود خوانایی کد کمک می‌کند. این ابزار از طیف گسترده‌ای از قوانین پشتیبانی می‌کند و بسیار قابل پیکربندی است.
• Prettier: یک فرمت‌کننده کد با نظرات مشخص (opinionated) که به طور خودکار کد را برای پیروی از یک سبک یکپارچه فرمت می‌کند. این ابزار از جاوا اسکریپت، تایپ اسکریپت، JSX و بسیاری از زبان‌های دیگر پشتیبانی می‌کند.
• Husky: ابزاری که مدیریت هوک‌های گیت را آسان می‌کند. این ابزار به شما اجازه می‌دهد اسکریپت‌هایی را تعریف کنید که در مراحل مختلف گردش کار گیت اجرا شوند.
• lint-staged: ابزاری که لینترها و فرمت‌کننده‌ها را فقط روی فایل‌های استیج شده (staged) اجرا می‌کند و سرعت فرآیند pre-commit را به طور قابل توجهی افزایش می‌دهد. این کار از بررسی‌های غیرضروری روی فایل‌های بدون تغییر جلوگیری می‌کند.

پیکربندی هوک‌های Pre-commit: راهنمای گام به گام

در اینجا راهنمای دقیقی در مورد نحوه راه‌اندازی هوک‌های pre-commit برای پروژه جاوا اسکریپت شما با استفاده از Husky و lint-staged ارائه شده است:

مرحله ۱: نصب وابستگی‌ها

ابتدا، پکیج‌های لازم را به عنوان وابستگی‌های توسعه (development dependencies) با استفاده از npm یا yarn نصب کنید:

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

              
                Copy
              
            
          

یا با استفاده از yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

مرحله ۲: مقداردهی اولیه Husky

Husky فرآیند مدیریت هوک‌های گیت را ساده می‌کند. آن را با استفاده از دستور زیر مقداردهی اولیه کنید:

            npx husky install
            

              
                Copy
              
            
          

این کار یک دایرکتوری `.husky` در پروژه شما ایجاد می‌کند که هوک‌های گیت شما را ذخیره خواهد کرد.

مرحله ۳: پیکربندی هوک Pre-commit

یک هوک pre-commit با استفاده از Husky اضافه کنید:

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

              
                Copy
              
            
          

این دستور یک فایل `pre-commit` در دایرکتوری `.husky` ایجاد می‌کند و دستور `npx lint-staged` را به آن اضافه می‌کند. این به گیت می‌گوید که قبل از هر کامیت، lint-staged را اجرا کند.

مرحله ۴: پیکربندی lint-staged

lint-staged به شما اجازه می‌دهد تا لینترها و فرمت‌کننده‌ها را فقط روی فایل‌های استیج شده اجرا کنید، که به طور قابل توجهی سرعت فرآیند pre-commit را افزایش می‌دهد. یک فایل `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
              
            
          

مرحله ۵: پیکربندی 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` را به عنوان یک هشدار تنظیم می‌کند.

مرحله ۶: پیکربندی 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 را طوری تنظیم می‌کند که از تک کوتیشن، بدون سمی‌کالن، کامای انتهایی، عرض چاپ ۱۲۰ کاراکتر و عرض تب ۲ فاصله استفاده کند.

به طور جایگزین، می‌توانید پیکربندی Prettier را داخل `package.json` تعریف کنید:

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

              
                Copy
              
            
          

مرحله ۷: تست پیکربندی

برای تست پیکربندی خود، برخی تغییرات را استیج کرده و سعی کنید آن‌ها را کامیت کنید. برای مثال:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

اگر هرگونه مشکل لینتینگ یا فرمت‌بندی وجود داشته باشد، ESLint و Prettier به طور خودکار آن‌ها را (در صورت امکان) برطرف کرده یا خطاها را گزارش می‌دهند. اگر خطاها گزارش شوند، کامیت لغو خواهد شد و به شما اجازه می‌دهد قبل از کامیت مجدد، مشکلات را برطرف کنید.

گزینه‌های پیکربندی پیشرفته

استفاده از لینترها و فرمت‌کننده‌های مختلف

شما می‌توانید به راحتی لینترها و فرمت‌کننده‌های دیگر را در پیکربندی هوک pre-commit خود ادغام کنید. برای مثال، می‌توانید از 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
              
            
          

اجرای تست‌ها قبل از کامیت

شما همچنین می‌توانید تست‌های واحد خود را به عنوان بخشی از هوک pre-commit اجرا کنید. این کار کمک می‌کند تا اطمینان حاصل شود که کد شما قبل از کامیت شدن به درستی کار می‌کند. با فرض اینکه از 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 می‌گوید که فقط تست‌های مرتبط با فایل‌های تغییر یافته را اجرا کند، که به طور قابل توجهی سرعت فرآیند را افزایش می‌دهد.

رد کردن هوک‌های Pre-commit

در برخی موارد، ممکن است بخواهید به طور موقت هوک‌های pre-commit را رد کنید. می‌توانید این کار را با استفاده از فلگ `--no-verify` با دستور `git commit` انجام دهید:

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

              
                Copy
              
            
          

با این حال، به طور کلی توصیه می‌شود از رد کردن هوک‌ها خودداری کنید مگر اینکه کاملاً ضروری باشد، زیرا آن‌ها نقش مهمی در حفظ کیفیت کد دارند.

عیب‌یابی مشکلات رایج

• هوک‌ها اجرا نمی‌شوند: اطمینان حاصل کنید که Husky به درستی نصب و مقداردهی اولیه شده است و دایرکتوری `.husky` در ریشه پروژه شما وجود دارد. همچنین بررسی کنید که فایل `pre-commit` در دایرکتوری `.husky` قابل اجرا باشد.
• خطاهای لینتینگ برطرف نمی‌شوند: مطمئن شوید که فلگ `--fix` با ESLint استفاده می‌شود و پیکربندی ESLint شما برای رفع خودکار انواع خاصی از خطاها تنظیم شده است.
• Prettier فایل‌ها را فرمت نمی‌کند: اطمینان حاصل کنید که فلگ `--write` با Prettier استفاده می‌شود و پیکربندی Prettier شما به درستی تنظیم شده است.
• کندی هوک‌های pre-commit: از lint-staged برای اجرای لینترها و فرمت‌کننده‌ها فقط روی فایل‌های استیج شده استفاده کنید. همچنین بهینه‌سازی پیکربندی‌های ESLint و Prettier خود را برای به حداقل رساندن تعداد قوانین و تنظیماتی که بررسی می‌شوند، در نظر بگیرید.
• پیکربندی‌های متناقض: اطمینان حاصل کنید که پیکربندی‌های ESLint و Prettier شما با یکدیگر تداخل ندارند. اگر اینطور باشد، ممکن است نیاز به تنظیم یک یا هر دو پیکربندی برای حل تداخلات داشته باشید. استفاده از یک پیکربندی مشترک مانند `eslint-config-prettier` و `eslint-plugin-prettier` را برای جلوگیری از تداخل در نظر بگیرید.

بهترین شیوه‌ها برای هوک‌های Pre-commit

• هوک‌ها را سریع نگه دارید: هوک‌های کند می‌توانند به طور قابل توجهی بر بهره‌وری توسعه‌دهندگان تأثیر بگذارند. از lint-staged برای پردازش فقط فایل‌های استیج شده استفاده کنید و پیکربندی‌های لینتر و فرمت‌کننده خود را بهینه‌سازی کنید.
• پیام‌های خطای واضح ارائه دهید: هنگامی که یک هوک با شکست مواجه می‌شود، پیام‌های خطای واضح و آموزنده ارائه دهید تا توسعه‌دهندگان را در مورد چگونگی رفع مشکلات راهنمایی کنید.
• تا حد امکان خودکارسازی کنید: فرمت‌بندی کد و لینتینگ را خودکار کنید تا تلاش دستی را به حداقل برسانید و از یکپارچگی اطمینان حاصل کنید.
• تیم خود را آموزش دهید: اطمینان حاصل کنید که همه اعضای تیم هدف هوک‌های pre-commit و نحوه استفاده مؤثر از آن‌ها را درک می‌کنند.
• از یک پیکربندی یکپارچه استفاده کنید: یک پیکربندی یکپارچه برای ESLint، Prettier و سایر ابزارها در سراسر پروژه خود حفظ کنید. این به اطمینان از فرمت و لینت شدن همه کدها به یک روش کمک می‌کند. استفاده از یک پکیج پیکربندی مشترک را که به راحتی در چندین پروژه قابل نصب و به‌روزرسانی است، در نظر بگیرید.
• هوک‌های خود را تست کنید: به طور منظم هوک‌های pre-commit خود را تست کنید تا اطمینان حاصل کنید که به درستی کار می‌کنند و هیچ مشکل غیرمنتظره‌ای ایجاد نمی‌کنند.

ملاحظات جهانی

هنگام کار در تیم‌های توزیع‌شده جهانی، موارد زیر را در نظر بگیرید:

• نسخه‌های یکپارچه ابزار: اطمینان حاصل کنید که همه اعضای تیم از نسخه‌های یکسانی از ESLint، Prettier، Husky و lint-staged استفاده می‌کنند. این امر با مشخص کردن نسخه‌ها در فایل `package.json` و استفاده از یک مدیر پکیج مانند npm یا yarn برای نصب وابستگی‌ها قابل دستیابی است.
• سازگاری بین پلتفرمی: هوک‌های pre-commit خود را روی سیستم‌عامل‌های مختلف (ویندوز، macOS، لینوکس) تست کنید تا اطمینان حاصل کنید که روی همه پلتفرم‌ها به درستی کار می‌کنند. هر زمان که ممکن بود از ابزارها و دستورات بین پلتفرمی استفاده کنید.
• تفاوت‌های منطقه زمانی: هنگام ارتباط با اعضای تیم در مورد مشکلات هوک pre-commit، به تفاوت‌های منطقه زمانی توجه داشته باشید. دستورالعمل‌ها و مثال‌های واضح ارائه دهید تا به آن‌ها در حل سریع مشکلات کمک کنید.
• پشتیبانی از زبان‌ها: اگر پروژه شما شامل کار با چندین زبان است، اطمینان حاصل کنید که هوک‌های pre-commit شما از تمام زبان‌های مورد استفاده در پروژه پشتیبانی می‌کنند. ممکن است نیاز به نصب لینترها و فرمت‌کننده‌های اضافی برای هر زبان داشته باشید.

نتیجه‌گیری

پیاده‌سازی هوک‌های pre-commit یک روش مؤثر برای اعمال کیفیت کد، بهبود همکاری تیمی و کاهش هزینه‌های نگهداری در پروژه‌های جاوا اسکریپت است. با ادغام ابزارهایی مانند ESLint، Prettier، Husky و lint-staged، می‌توانید فرمت‌بندی کد، لینتینگ و تست را خودکار کنید و اطمینان حاصل کنید که فقط کد باکیفیت به مخزن شما کامیت می‌شود. با دنبال کردن مراحل ذکر شده در این راهنما، می‌توانید یک دروازه کیفیت کد قوی راه‌اندازی کنید که به شما در ساخت برنامه‌های جاوا اسکریپت تمیزتر، قابل نگهداری‌تر و قابل اعتمادتر کمک می‌کند. این روش را بپذیرید و گردش کار توسعه تیم خود را امروز ارتقا دهید.