Како додати удице за урезивање у Гит са Хуски-ом за аутоматизацију задатака кода

Постоји пуно алата за аутоматизацију наших задатака кода. Можемо да проверимо проблеме са синтаксом са ЕСЛинт-ом и форматирамо наш код са Преттиер-ом.

Али неће се сви у тиму сетити да извршавају те команде сваки пут када изврше. Како можемо да користимо Хуски да додамо Гит удице да би их покренули за нас?

  • Шта су Гит Хоокс?
  • Шта је Хуски?
  • Шта ћемо градити?
  • Корак 0: Постављање новог пројекта
  • Корак 1: Инсталирање Хуски-а на пројекат
  • Корак 2: Конфигурисање Хуски-а за покретање Гит удица
  • Корак 3: Коришћење Хуски-а за форматирање кода са Преттиер-ом

Шта су Гит Хоокс?

Гит куке су скрипте које можете да подесите за покретање на одређеним догађајима у Гит животном циклусу. Ови догађаји укључују различите фазе урезивања, попут пре урезивања (пре-урезивање) и након урезивања (после урезивања).

Они су корисни јер омогућавају програмерима да извршавају задатке прилагођеног кода или чак намећу стандарде аутоматизацијом других скрипти за покретање тих задатака.

Шта је Хуски?

Хуски је алат који нам омогућава да лако премештамо Гит удице и покрећемо скрипте које желимо у тим фазама.

Функционише тако што укључује објект директно у нашу package.jsonдатотеку који конфигурише Хуски за покретање скрипти које одредимо. Након тога, Хуски управља управљањем у ком тренутку у Гит животном циклусу ће се покретати наше скрипте.

Шта ћемо градити?

Поставићемо једноставан пројекат који можемо користити за тестирање Гит кука.

Иако бисте требали бити у могућности да пратите било који пројекат са којим радите, користићу Нект.јс као почетну тачку за овај пројекат, једноставно због чињенице да можемо покренути једну команду да бисмо добили пројекат започео.

Ипак, један од разлога за праћење овог пројекта је да ћемо користити Преттиер као пример онога што можете учинити са Гит удицама.

Преттиер је алат који ће аутоматски форматирати наш код за нас, што ако не очекујете да ће се то догодити, може изазвати велики стрес. Пратећи заједно са мном коришћење пројекта Нект.јс омогућиће вам да ово тестирате без икаквих ненамерних промена.

Што се тиче тестирања Гит удица, почећемо додавањем једноставне изјаве командне линије да бисмо видели како Хуски ради. Али такође ћемо тестирати додавање Преттиер-а, који ће аутоматски форматирати наш код уместо нас.

Коначно, у време писања овог текста, Хуски је објавио в5 Алпха верзију њиховог решења Гит хоок. С обзиром да је то још увек само Алфа верзија, идемо напред са в4, који нам омогућава да лако инсталирамо Хуски са нпм.

Корак 0: Како поставити нови пројекат

Као што сам напоменуо, овде заиста можете следити исте кораке са било којим пројектом којим се управља помоћу package.jsonдатотеке.

Нект.јс је апсолутно претеран за ово упутство, али циљ је минимизирати кораке за подешавање да стварно радите са Хускијем.

Да бисте започели са Нект.јс, дођите до директоријума у ​​којем желите да започнете пројекат и покрените следеће:

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

Напомена: слободно замените my-husky-projectоно што желите да именујете.

Ово ће створити нову фасциклу, креирати нови пројекат Нект.јс и инсталирати све зависности.

Након што завршите, дођите до те нове мапе и требали бисмо бити спремни!

Следите заједно са урезивањем.

Корак 1: Како инсталирати Хуски на пројекат

Да бисмо инсталирали Хуски, можемо користити предиво или нпм.

yarn add husky # or npm install husky 

Напомена: ако инсталирање Хуски-а у овом тренутку инсталира в5, то значи да је в5 званично објављен. Погледајте ажурирану Хуски документацију или можете инсталирати најновију верзију в4 тако што ћете приликом инсталирања навести хуски@4.3.0 (или било коју најновију верзију).

Када пакет заврши са инсталирањем, требало би да будемо спремни да кренемо са Хуски-јем.

Следите заједно са урезивањем.

Корак 2: Како конфигурисати Хуски да покреће Гит удице

Даље, поставићемо Хуски како бисмо га могли користити за наше Гит удице.

У нашој package.jsonдатотеци креирајте ново својство које се зове huskyпразан објекат.

"husky": {},

Можете ово додати заиста где год желите у package.jsonдатотеци, али додаћу је одмах испод scripts  својства како бих могао лакше да управљам њима заједно.

Унутар тога желимо да додамо још једно својство hooksкоје такође назива празан објекат:

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

Овде ћемо додати наше Гит удице. Хуски подржава готово све Гит удице које је дефинисао Гит, тако да можемо бити флексибилни колико бисмо желели у оквиру нашег Гит тока догађаја.

Да бих то тестирао, створио сам нову грану где сам дословно додао сваку Гит куку са те странице, укључујући скрипту која једноставно пише на терминал [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\””, 

Шта ће ово учинити је рећи Хуски-у да нам у свакој фази у којој нам је дозвољено да се прикључимо на Гит!

Када извршим ту промену, одмах можемо видети да Хуски отпушта неке наше скрипте.

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.

Срећом, Преттиер вам омогућава да поставите конфигурациону датотеку која може заменити неке од тих датотека како би ваш код био онакав какав ви и ваш тим желите.

Реците Преттиеру да игнорише датотеке помоћу .преттиеригноре

Такође вероватно не желите да Преттиер ради на „свим стварима“ (можда и желите).

Преттиер вам омогућава да поставите .prettierignore  датотеку директно унутар корена пројекта поред package.json, слично као .gitignoreшто вам омогућава да кажете Преттиеру на којим датотекама не би требало да се покреће.

Пратите ме за још Јавасцрипта, УКС-а и других занимљивих ствари!

  • ? Запрати ме на твитеру
  • ? Претплатите се на мој Иоутубе
  • Уп Пријавите се за мој билтен
  • ? Спонсор Ме