Hogyan adjunk hozzá Commit Hook-ot a Git-hez a Husky-val a kódfeladatok automatizálásához

Nagyon sok eszköz létezik a kódfeladatok automatizálására. Ellenőrizhetjük az ESLint szintaktikai problémáit, és a Prettier segítségével formázhatjuk kódunkat.

De a csapat tagjai közül nem mindenki emlékszik arra, hogy minden alkalommal végrehajtja ezeket a parancsokat. Hogyan használhatjuk a Husky-t Git-kampók hozzáadásához, hogy nekünk futtassuk őket?

  • Mik azok a Git Hook-ok?
  • Mi az a Husky?
  • Mit fogunk építeni?
  • 0. lépés: Új projekt beállítása
  • 1. lépés: A Husky telepítése egy projektbe
  • 2. lépés: Husky beállítása a Git kampók futtatásához
  • 3. lépés: A Husky segítségével formázhatja a kódot a Prettier alkalmazással

Mik azok a Git Hook-ok?

A Git horgok olyan szkriptek, amelyeket beállíthat futtatásra a Git életciklusának bizonyos eseményein. Ezek az események az elkötelezettség különböző szakaszait tartalmazzák, például egy elkötelezettség (előzetes elkötelezettség) előtt és egy elkötelezettség után (utólagos elkötelezettség) után.

Ezek abban az esetben hasznosak, mert lehetővé teszik a fejlesztők számára, hogy egyéni kódfeladatokat futtassanak, vagy akár betartassák a szabványokat azáltal, hogy más parancsfájlokat automatizálnak a feladatok futtatásához.

Mi az a Husky?

A Husky egy olyan eszköz, amely lehetővé teszi számunkra, hogy könnyedén megküzdjünk a Git horgokkal és futtassuk a kívánt szkripteket ezekben a szakaszokban.

Úgy működik, hogy egy objektumot közvetlenül a package.jsonfájlunkba foglal, amely beállítja a Huskyt az általunk megadott szkriptek futtatására. Ezt követően Husky kezeli annak kezelését, hogy a Git életciklusának melyik pontján futnak szkriptjeink.

Mit fogunk építeni?

Felállítunk egy egyszerű projektet, amellyel kipróbálhatjuk a Git kampókat.

Bár képesnek kell lennie arra, hogy kövesse minden olyan projektet, amellyel dolgozik, a Next.js-t fogom használni a projekt kiindulópontjaként, egyszerűen azért, hogy egyetlen parancsot futtathassunk egy projekt megszerzéséhez. megkezdődött.

A projekt követésének egyik szempontja azonban az, hogy a Prettier-t használjuk példaként arra, hogy mit tehet a Git horgokkal.

A Prettier egy olyan eszköz, amely automatikusan formázza számunkra a kódunkat, amely, ha nem számít arra, hogy ez megtörténik, sok stresszt okozhat. A Next.js projekt használatával velem együtt kipróbálhatja ezt anélkül, hogy bármilyen akaratlan módosítást végezne.

Ami a Git horgok tesztelését illeti, egy egyszerű parancssori utasítás hozzáadásával kezdjük, hogy lássuk a Husky munkáját. De kipróbáljuk a Prettier hozzáadását is, amely automatikusan formázza nekünk a kódunkat.

Végül ennek megírásakor Husky kiadta a Git hook megoldásuk v5 Alpha változatát. Tekintettel arra, hogy ez még mindig csak egy Alpha verzió, haladunk előre a v4-tel, amely lehetővé teszi számunkra, hogy egyszerűen telepítsük a Husky-t npm-mel.

0. lépés: Új projekt beállítása

Mint említettem, itt valóban ugyanazokat a lépéseket követheti minden olyan package.jsonfájllal kezelt projekttel .

A Next.js abszolút felülmúlja ezt az áttekintést, de a cél az, hogy minimalizálja a Huskyval való együttműködéshez szükséges lépéseket.

A Next.js használatának megkezdéséhez keresse meg azt a könyvtárat, amelyben meg akarja indítani a projektet, és futtassa a következőket:

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

Megjegyzés: nyugodtan cserélje my-husky-projectle bármit, amire szeretné megnevezni a könyvtárat.

Ezzel létrehoz egy új mappát, új Next.js projektet és telepíti az összes függőséget.

Miután elkészült, keresse meg azt az új mappát, és készen állunk az indulásra!

Kövesse az elkötelezettséggel együtt.

1. lépés: Hogyan telepítsük a Husky-t egy projektbe

A Husky telepítéséhez használhatunk fonalat vagy npm-et.

yarn add husky # or npm install husky 

Megjegyzés: Ha a Husky telepítése ezen a ponton telepíti a v5 verziót, az azt jelenti, hogy a v5 hivatalosan megjelent. Kérjük, olvassa el a frissített Husky dokumentációt, vagy telepítheti a legújabb v4 verziót a [email protected] (vagy bármelyik legújabb verzió) megadásával.

Amint a csomag telepítése befejeződött, készen kell állnunk a Husky-val való együttműködésre.

Kövesse az elkötelezettséggel együtt.

2. lépés: Hogyan konfigurálhatjuk Huskyt a Git kampók futtatására

Ezután fel fogjuk állítani a Huskyt, hogy felhasználhassuk a Git kampóinkhoz.

A fájlunkon belül package.jsonhozzon létre egy új tulajdonságot husky, amelyet üres objektummal hívnak meg.

"husky": {},

Ezt a package.jsonfájlba bárhová felveheti, ahová csak akarja , de közvetlenül az scripts  ingatlan alatt fogom hozzáadni, hogy könnyebben kezelhessem őket együtt.

Ezen belül egy másik tulajdonságot szeretnénk hozzáadni, hooksamely egy üres objektumot is megad:

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

Itt adjuk hozzá a Git horgokat. Husky nagyjából támogatja az összes Git által meghatározott Git kampót, így olyan rugalmasak lehetünk, mint szeretnénk a Git eseményfolyamunkon belül.

Ennek tesztelésére létrehoztam egy új ágat, ahol szó szerint hozzáadtam az oldal minden Git-kampóját, beleértve egy szkriptet is, amely egyszerűen ír a terminálnak [Husky] event name.

Megjegyzés: ne érezze úgy, hogy ezt meg kell tennie, csak ha kíváncsi vagy. A cél az, hogy példámmal megmutathassam, hogyan működik.

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

Ez azt fogja mondani Huskynak, hogy minden egyes szakaszban, ahol megengedett a Git-be való bekapcsolódás, mondja el nekünk!

Amikor elkövetem ezt a változást, azonnal láthatjuk, hogy Husky lő ki néhány forgatókönyvünket.

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.

Luckily, Prettier allows you to set up a configuration file that can override some of those files to make your code just the way you and your team want it.

Tell Prettier to ignore files with .prettierignore

You also probably don’t want Prettier running on “all the things” (maybe you do).

Prettier allows you to set up a .prettierignore  file right inside of the root of the project next to package.json, similar to .gitignore, that allows you to tell Prettier what files it should not run on.

Follow me for more Javascript, UX, and other interesting things!

  • ? Follow Me On Twitter
  • ? Subscribe To My Youtube
  • ✉️ Sign Up For My Newsletter
  • ? Sponsor Me