Πώς να προσθέσετε άγκιστρα Commit στο Git με Husky για αυτοματοποίηση εργασιών κώδικα

Υπάρχουν πολλά εργαλεία για την αυτοματοποίηση των εργασιών κώδικα. Μπορούμε να ελέγξουμε για προβλήματα σύνταξης με το ESLint και να μορφοποιήσουμε τον κωδικό μας με το Prettier.

Αλλά δεν θα θυμούνται όλοι στην ομάδα να εκτελούν αυτές τις εντολές κάθε φορά που δεσμεύονται. Πώς μπορούμε να χρησιμοποιήσουμε το Husky για να προσθέσουμε άγκιστρα Git για να τα τρέξουμε για εμάς;

  • Τι είναι το Git Hooks;
  • Τι είναι το Husky;
  • Τι πρόκειται να οικοδομήσουμε;
  • Βήμα 0: Δημιουργία νέου έργου
  • Βήμα 1: Εγκατάσταση του Husky σε ένα έργο
  • Βήμα 2: Διαμόρφωση του Husky για λειτουργία Git hooks
  • Βήμα 3: Χρήση του Husky για τη μορφοποίηση κώδικα με Prettier

Τι είναι το Git Hooks;

Τα Git hooks είναι σενάρια που μπορείτε να ρυθμίσετε ώστε να εκτελούνται σε συγκεκριμένες εκδηλώσεις στον κύκλο ζωής του Git. Αυτά τα γεγονότα περιλαμβάνουν διαφορετικά στάδια μιας δέσμευσης, όπως πριν από μια δέσμευση (πριν από τη δέσμευση) και μετά από μια δέσμευση (μετά τη δέσμευση).

Αυτά είναι χρήσιμα στο ότι επιτρέπουν στους προγραμματιστές να εκτελούν εργασίες προσαρμοσμένου κώδικα ή ακόμη και να εφαρμόζουν πρότυπα αυτοματοποιώντας άλλα σενάρια για την εκτέλεση αυτών των εργασιών.

Τι είναι το Husky;

Το Husky είναι ένα εργαλείο που μας επιτρέπει να αντιμετωπίζουμε εύκολα τα άγκιστρα Git και να τρέχουμε τα σενάρια που θέλουμε σε αυτά τα στάδια.

Λειτουργεί συμπεριλαμβάνοντας ένα αντικείμενο μέσα στο package.jsonαρχείο μας που διαμορφώνει το Husky ώστε να εκτελεί τα σενάρια που καθορίζουμε. Μετά από αυτό, ο Husky χειρίζεται τη διαχείριση σε ποιο σημείο του κύκλου ζωής του Git θα εκτελούνται τα σενάριά μας.

Τι πρόκειται να οικοδομήσουμε;

Πρόκειται να δημιουργήσουμε ένα απλό έργο που μπορούμε να χρησιμοποιήσουμε για να δοκιμάσουμε τα Git hooks.

Ενώ θα πρέπει να μπορείτε να ακολουθήσετε οποιοδήποτε έργο με το οποίο εργάζεστε, θα χρησιμοποιήσω το Next.js ως σημείο εκκίνησης για αυτό το έργο, απλώς και μόνο για το γεγονός ότι μπορούμε να εκτελέσουμε μια εντολή για να λάβουμε ένα έργο ξεκίνησε.

Ωστόσο, ένα ζήτημα για την παρακολούθηση αυτού του έργου είναι ότι θα χρησιμοποιήσουμε το Prettier ως παράδειγμα του τι μπορείτε να κάνετε με τα Git hooks.

Το Prettier είναι ένα εργαλείο που θα διαμορφώνει αυτόματα τον κώδικα για εμάς, το οποίο αν δεν περιμένετε να συμβεί αυτό, μπορεί να προκαλέσει πολύ άγχος. Ακολουθώντας μαζί μου τη χρήση του έργου Next.js θα μπορείτε να το δοκιμάσετε χωρίς να κάνετε τυχόν ακούσιες αλλαγές.

Όσον αφορά τη δοκιμή των αγκιστριών Git, θα ξεκινήσουμε προσθέτοντας μια απλή δήλωση γραμμής εντολών για να δούμε το Husky να λειτουργεί. Αλλά θα δοκιμάσουμε επίσης την προσθήκη του Prettier, το οποίο θα διαμορφώσει αυτόματα τον κώδικα μας.

Τέλος, κατά τη στιγμή της σύνταξης αυτού, ο Husky κυκλοφόρησε μια έκδοση v5 Alpha της λύσης Git hook. Δεδομένου ότι εξακολουθεί να είναι μόνο μια έκδοση Alpha, θα προχωρήσουμε μπροστά με το v4, το οποίο μας επιτρέπει να εγκαταστήσουμε εύκολα το 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 σε αυτό το σημείο εγκαθιστά το v5, αυτό σημαίνει ότι το v5 έχει κυκλοφορήσει επίσημα. Ανατρέξτε στην ενημερωμένη τεκμηρίωση Husky ή μπορείτε να εγκαταστήσετε την πιο πρόσφατη έκδοση v4 καθορίζοντας το [email protected] (ή όποια και αν είναι η τελευταία έκδοση) κατά την εγκατάσταση.

Μόλις ολοκληρωθεί η εγκατάσταση του πακέτου, θα πρέπει να είμαστε έτοιμοι να ξεκινήσουμε με τον Husky.

Ακολουθήστε μαζί με τη δέσμευση.

Βήμα 2: Πώς να ρυθμίσετε το Husky ώστε να τρέχει Git hooks

Στη συνέχεια, θα δημιουργήσουμε το Husky, ώστε να μπορούμε να το χρησιμοποιήσουμε για τα Git hooks

Μέσα από το package.jsonαρχείο μας , δημιουργήστε μια νέα ιδιότητα που ονομάζεται huskyμε ένα κενό αντικείμενο.

"husky": {},

Μπορείτε να το προσθέσετε πραγματικά όπου θέλετε στο package.jsonαρχείο, αλλά θα το προσθέσω ακριβώς κάτω από την scripts  ιδιότητα, ώστε να μπορώ να τα διαχειριστώ πιο εύκολα μαζί.

Μέσα από αυτό, θέλουμε να προσθέσουμε μια άλλη ιδιότητα που ονομάζεται hooksκαι καθορίζει επίσης ένα κενό αντικείμενο:

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

Εδώ θα προσθέσουμε τα άγκιστρα Git. Το Husky υποστηρίζει σχεδόν όλα τα άγκιστρα Git που ορίζονται από το Git, ώστε να μπορούμε να είμαστε τόσο ευέλικτοι που θα θέλαμε στη ροή των εκδηλώσεων Git.

Για να το δοκιμάσω αυτό, δημιούργησα ένα νέο υποκατάστημα όπου έβαλα κυριολεκτικά κάθε γάντζο Git από τη σελίδα, συμπεριλαμβανομένου ενός σεναρίου που γράφει απλά στο τερματικό [Husky] event name.

Σημείωση: μην αισθάνεστε ότι πρέπει να το κάνετε αυτό εκτός εάν είστε περίεργοι. Ο στόχος είναι να είμαι σε θέση να σας δείξω με το παράδειγμά μου πώς λειτουργεί.

“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\””, 

Αυτό που θα κάνει είναι να πείτε στον Husky ότι σε κάθε στάδιο όπου επιτρέπεται να συνδεθούμε με το Git, πείτε μας!

Όταν διαπράττω αυτήν την αλλαγή, μπορούμε αμέσως να δούμε ότι ο Husky πυροδοτεί μερικά από τα σενάρια μας.

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 να τρέχει σε "όλα τα πράγματα" (ίσως το κάνετε).

Το Prettier σάς επιτρέπει να δημιουργήσετε ένα .prettierignore  αρχείο ακριβώς μέσα στη ρίζα του έργου δίπλα package.json, παρόμοιο με αυτό .gitignore, που σας επιτρέπει να πείτε στον Prettier σε ποια αρχεία δεν πρέπει να εκτελείται.

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου
  • ; Χορηγός με