كيفية إضافة خطافات الالتزام إلى Git مع Husky لأتمتة مهام التعليمات البرمجية

هناك الكثير من الأدوات لأتمتة مهامنا البرمجية. يمكننا التحقق من وجود مشكلات في بناء الجملة مع ESLint وتنسيق الكود الخاص بنا باستخدام Prettier.

ولكن لن يتذكر كل فرد في الفريق تنفيذ هذه الأوامر في كل مرة يلتزمون فيها. كيف يمكننا استخدام Husky لإضافة Git hooks لتشغيلها لنا؟

  • ما هي جيت هوكس؟
  • ما هو الهاسكي؟
  • ماذا سنبني؟
  • الخطوة 0: إنشاء مشروع جديد
  • الخطوة 1: تثبيت Husky على مشروع
  • الخطوة 2: تكوين Husky لتشغيل Git hooks
  • الخطوة 3: استخدام Husky لتنسيق التعليمات البرمجية باستخدام Prettier

ما هي جيت هوكس؟

Git hooks عبارة عن نصوص يمكنك إعدادها للتشغيل في أحداث معينة في دورة حياة Git. تتضمن هذه الأحداث مراحل مختلفة من الالتزام ، مثل قبل الالتزام (قبل الالتزام) وبعد الالتزام (ما بعد الالتزام).

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

ما هو الهاسكي؟

Husky هي أداة تسمح لنا بسهولة جدال Git hooks وتشغيل البرامج النصية التي نريدها في تلك المراحل.

إنه يعمل عن طريق تضمين كائن داخل package.jsonملفنا مباشرة يقوم بتهيئة Husky لتشغيل البرامج النصية التي نحددها. بعد ذلك ، يتولى Husky إدارة أي نقطة في دورة حياة Git سيتم تشغيل البرامج النصية الخاصة بنا.

ماذا سنبني؟

سنقوم بإعداد مشروع بسيط يمكننا استخدامه لاختبار Git hooks.

بينما يجب أن تكون قادرًا على متابعة أي مشروع تعمل معه ، سأستخدم Next.js كنقطة انطلاق لهذا المشروع ، لمجرد أنه يمكننا تشغيل أمر واحد للحصول على مشروع بدأت.

أحد الاعتبارات المتعلقة بمتابعة هذا المشروع ، على الرغم من ذلك ، هو أننا سنستخدم Prettier كمثال لما يمكنك فعله باستخدام Git hooks.

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

بالنسبة إلى اختبار Git hooks ، سنبدأ بإضافة عبارة سطر أوامر بسيطة لرؤية عمل Husky. لكننا سنختبر أيضًا إضافة Prettier ، والتي ستعمل تلقائيًا على تنسيق الكود الخاص بنا.

أخيرًا ، في وقت كتابة هذا التقرير ، أصدر Husky إصدار v5 Alpha من حل Git hook. نظرًا لأنه لا يزال مجرد إصدار ألفا ، سنمضي قدمًا في الإصدار 4 ، والذي يتيح لنا تثبيت Husky بسهولة باستخدام npm.

الخطوة 0: كيفية إعداد مشروع جديد

كما ذكرت ، يمكنك فعلاً اتباع نفس الخطوات هنا مع أي مشروع يُدار package.jsonبملف.

يعد Next.js مبالغة تمامًا في هذه الإرشادات التفصيلية ، ولكن الهدف هو تقليل خطوات الإعداد للعمل مع Husky بالفعل.

لبدء استخدام Next.js ، انتقل إلى الدليل الذي تريد بدء مشروعك فيه وقم بتشغيل ما يلي:

yarn create next-app my-husky-project # or npx create-next-app my-husky-project 

ملاحظة: لا تتردد في استبدال my-husky-projectما تريد تسميته بالدليل الخاص بك.

سيؤدي هذا إلى إنشاء مجلد جديد وإنشاء مشروع Next.js جديد وتثبيت جميع التبعيات.

بمجرد الانتهاء من ذلك ، انتقل إلى هذا المجلد الجديد ، وسنكون على استعداد للذهاب!

اتبع مع الالتزام.

الخطوة 1: كيفية تثبيت Husky على مشروع

لتثبيت Husky ، يمكننا استخدام الغزل أو npm.

yarn add husky # or npm install husky 

ملاحظة: إذا كان تثبيت Husky في هذه المرحلة يؤدي إلى تثبيت الإصدار 5 ، فهذا يعني أن الإصدار 5 قد تم إصداره رسميًا. يرجى الاطلاع على وثائق Husky المحدثة أو يمكنك تثبيت أحدث إصدار v4 عن طريق تحديد [email protected] (أو أي إصدار آخر) عند التثبيت.

بمجرد الانتهاء من تثبيت الحزمة ، يجب أن نكون مستعدين للعمل مع Husky.

اتبع مع الالتزام.

الخطوة 2: كيفية تكوين Husky لتشغيل Git hooks

بعد ذلك ، سنقوم بإعداد Husky حتى نتمكن من استخدامه لخطافات Git الخاصة بنا.

داخل package.jsonملفنا ، أنشئ خاصية جديدة تسمى huskyبكائن فارغ.

"husky": {},

يمكنك إضافة هذا حقًا في أي مكان تريده في package.jsonالملف ، لكنني سأضيفه مباشرةً أسفل scripts  الخاصية حتى أتمكن من إدارتها معًا بسهولة أكبر.

Inside of that, we want to add another property called hooks that also specifies an empty object:

"husky": { "hooks": {} }, 

This is where we’re going to add our Git hooks. Husky supports pretty much all Git hooks defined by Git, so we can be as flexible we would like within our Git event flow.

To test this out, I created a new branch where I literally added every Git hook from that page including a script that simply writes to the terminal [Husky] event name.

Note: don’t feel like you need to do this unless you’re curious. The goal is to be able to show you with my example how it works.

“husky”: { “hooks”: { “applypatch-msg”: “echo \”[Husky] applypatch-msg\””, “pre-applypatch”: “echo \”[Husky] pre-applypatch\””, “post-applypatch”: “echo \”[Husky] post-applypatch\””, “pre-commit”: “echo \”[Husky] pre-commit\””, 

What this will do is tell Husky that at every single stage where we’re permitted to hook into Git, tell us!

When I commit that change, we can immediately see that Husky fires off some of our scripts.

These are all of the events that Git allows us to hook into that happen during the commit process.

And similarly, if I push those changes out to Github, I can see that the push process runs the pre-push hook!

You may never use most of the hooks that Husky and Git provide (we only saw a few between those two commands).

But it’s awesome to be able to see how powerful this can be, whether it’s running code that formats our code, prevents secret access keys from being committed, or really anything else that can help automate important tasks to your workflow.

We can now see that we can configure Husky by specifying the configuration and the hooks right in our package.json.

Follow along with the commit.

Note: If you want to check out my branch that includes every Git hook to test with, you can find it on Github.

Step 3: How to use Husky to format code with Prettier

Finally, for a real-world use case, we’re going to test out using Prettier to automatically format our code.

Prettier is an opinionated code formatting tool that allows you to easily clean up your code to make it look like a single person wrote it.

Why are tools like Prettier important? When working through code, especially with a team, it’s important to maintain consistency so everyone knows what to expect. It will help prevent arguing over a semi-colon in a code review, but it will also help catch syntax errors and prevent bugs.

Warning: running Prettier will automatically format all of your code. While we’re going to test this out before committing the changes, once you apply this as a Git Hook, it will automate this process.

To get started with Prettier, let’s install it with our package manager:

yarn add prettier -D # or npm install prettier --save-dev 

Note: we’re installing Prettier as a devDependency as our application doesn’t need this to run.

Next, we can add a new script in our package.json that will make it easier to run Prettier to test this out.

Inside the scripts property, add:

"lint": "prettier --check ." 

For this first test, we’re going to run it as a “check” which will allow us to see which files would change.

Run the following:

yarn lint # or npm run lint 

And once we do, we can see that Prettier is telling us that would change the files listed.

At this point, our code will remain unchanged. But if we want to run Prettier for real to make those changes, we can first add an additional script:

"format": "prettier --write ." 

And if we run that script, it will update all of those files to format the code to Prettier’s specification.

Warning: just another note, running Prettier to write the changes will make changes in your files. These are all code-style changes that shouldn’t impact how the code runs, but how the code looks. Before running format, you should save any changes by committing with Git so that you can easily revert the changes if you’re not happy with them.

You can now run the script with:

yarn format 

And we can see that Prettier updated our files!

Now the part that’s relevant to this walkthrough: we can add this as a Git hook. This way, when someone tries to commit code, Prettier is run before the code is saved. This means that we’ll always keep code consistent with Prettier’s formatting style.

Inside our Husky hooks configuration, let’s add:

"husky": { "hooks": { "pre-commit": "prettier --write . && git add -A ." } }, 

If you notice in our pre-commit hook, we’re also adding git add -A ..

When Husky runs, it simply runs the script provided. When running our Prettier command, we’re only formatting the code, but we never save those changes as part of the process. So we use git add to store all of those changes and include them in the commit.

To test this out, I reverted the changes to all of the files that were formatted before. If you’re following along with the same project, you can run:

git checkout pages 

Which will reset all of the changes in pages to the last commit.

Now, let’s try to add all of our files with Git and commit the changes.

And once we run our commit command, we can see that the Husky pre-commit hook kicks in already and formats our code!

Follow along with the commit.

What can I do next?

Use lint-staged to only run formatting on changed files

We’re using Prettier right in our pre-commit hook and specifying . which means it’s going to run on all files every time.

We can use a tool called lint-staged, which allows us to still run our Git hooks with Husky, but it will only run on files that are staged.

For instance, if we wanted to do this with Husky and Prettier, our configuration might look like:

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*": "prettier --write" }, 

As part of how lint-staged runs, it will attach the changed files to the end of our Prettier statement automatically for us.

You’ll also notice we didn't include git add. lint-staged will also add any changes to Git for us automatically.

Set up a Prettier config to customize formatting rules

Prettier is very opinionated. There are some things I personally don’t prefer and you might feel the same.

لحسن الحظ ، يسمح لك Prettier بإعداد ملف تكوين يمكنه تجاوز بعض هذه الملفات لجعل الكود الخاص بك بالطريقة التي تريدها أنت وفريقك.

أخبر Prettier بتجاهل الملفات ذات الامتداد .prettierignore

ربما لا تريد أيضًا تشغيل أجمل على "كل الأشياء" (ربما تفعل ذلك).

يسمح لك برنامج Prettier بإعداد .prettierignore  ملف داخل جذر المشروع مباشرةً بجوار package.json، على غرار .gitignore، يسمح لك بإخبار Prettier بالملفات التي لا يجب تشغيلها عليها.

تابعني لمزيد من Javascript و UX وأشياء أخرى مثيرة للاهتمام!

  • ؟ تابعني على تويتر
  • ؟ اشترك في My Youtube
  • ✉️ اشترك في رسالتي الإخبارية
  • ؟ اكفلني