Există o mulțime de instrumente pentru automatizarea sarcinilor noastre de cod. Putem verifica problemele de sintaxă cu ESLint și ne putem formata codul cu Prettier.

Dar nu toată lumea din echipă își va aminti să execute aceste comenzi de fiecare dată când se angajează. Cum putem folosi Husky pentru a adăuga cârlige Git pentru a le rula pentru noi?

  • Ce sunt Git Hooks?
  • Ce este Husky?
  • Ce vom construi?
  • Pasul 0: Configurarea unui nou proiect
  • Pasul 1: Instalarea Husky într-un proiect
  • Pasul 2: Configurarea Husky pentru a rula cârlige Git
  • Pasul 3: Folosirea Husky pentru formatarea codului cu Prettier

Ce sunt Git Hooks?

Cârlige Git sunt scripturi pe care le puteți configura alerga la anumite evenimente în ciclul de viață Git. Aceste evenimente includ diferite etape ale unui commit, cum ar fi înainte de commit (pre-commit) și după un commit (post-commit).

Acestea sunt utile în sensul că permit dezvoltatorilor să ruleze sarcini de cod personalizate sau chiar să impună standarde prin automatizarea altor scripturi pentru a rula acele sarcini.

Ce este Husky?

Husky este un instrument care ne permite să luptăm cu ușurință cu cârligele Git și să rulăm scripturile dorite în aceste etape.

Funcționează prin includerea unui obiect chiar în interiorul nostru package.json fișier care configurează Husky pentru a rula scripturile pe care le specificăm. După aceea, Husky se ocupă de gestionarea în ce moment al ciclului de viață Git vor rula scripturile noastre.

Ce vom construi?

Vom înființa un proiect simplu pe care îl putem folosi pentru a testa cârligele Git.

Deși ar trebui să puteți urmări împreună cu orice proiect cu care lucrați, voi folosi Next.js ca punct de plecare pentru acest proiect, pur și simplu pentru faptul că putem rula o singură comandă pentru a începe un proiect.

Totuși, o considerație despre urmărirea împreună cu acest proiect este că o vom folosi Mai frumoasă ca exemplu de ceea ce puteți face cu cârlige Git.

Prettier este un instrument care ne va forma automat codul, care, dacă nu vă așteptați să se întâmple, poate provoca mult stres. Urmărind împreună cu mine folosind proiectul Next.js vă va permite să testați acest lucru fără a face modificări neintenționate.

În ceea ce privește testarea cârligelor Git, vom începe prin adăugarea unei declarații simple de linie de comandă pentru a vedea cum funcționează Husky. Dar vom testa și adăugarea de Prettier, care va forma automat codul nostru pentru noi.

În cele din urmă, la momentul scrierii acestui lucru, Husky a lansat un v5 Alfa versiunea soluției lor de cârlig Git. Având în vedere că este încă doar o versiune Alpha, vom continua v4, care ne permite să instalăm cu ușurință Husky cu npm.

Pasul 0: Cum să configurați un proiect nou

După cum am menționat, puteți urma aceiași pași aici cu orice proiect gestionat cu un package.json fişier.

Next.js este absolut excesiv pentru această prezentare, dar obiectivul este de a minimiza pașii pentru configurare pentru a lucra efectiv cu Husky.

Pentru a începe cu Next.js, navigați la directorul în care doriți să începeți proiectul și rulați următoarele:

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

Notă: nu ezitați să înlocuiți my-husky-project la orice doriți să vă denumiți directorul.

Aceasta va crea un folder nou, va crea un nou proiect Next.js și va instala toate dependențele.

Cum sa adaugati Hooks de comitere la Git cu Husky

Odată ce ați terminat, navigați la acel nou folder și ar trebui să fim gata să plecăm!

Urmați împreună cu comiterea.

Pasul 1: Cum se instalează Husky într-un proiect

Pentru a instala Husky, putem folosi fire sau npm.

yarn add husky
# or
npm install husky

Notă: dacă instalarea Husky în acest moment instalează v5, înseamnă că v5 a fost lansat oficial. Vă rugăm să consultați documentație actualizată Husky sau puteți instala cea mai recentă versiune v4 specificând husky@4.3.0 (sau oricare ar fi cea mai recentă versiune) la instalare.

Odată ce pachetul a fost instalat, ar trebui să fim gata să mergem cu Husky.

Urmați împreună cu comiterea.

Pasul 2: Cum se configurează Husky pentru a rula cârlige Git

Apoi, vom configura Husky, astfel încât să-l putem folosi pentru cârligele noastre Git.

În interiorul nostru package.json fișier, creați o nouă proprietate numită husky cu un obiect gol.

"husky": {},

Puteți adăuga acest lucru într-adevăr oriunde doriți în package.json fișier, dar îl voi adăuga chiar sub scripts proprietate, astfel încât să le pot gestiona mai ușor împreună.

În interiorul acestuia, dorim să adăugăm o altă proprietate numită hooks care specifică și un obiect gol:

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

Aici vom adăuga cârligele noastre Git. Husky acceptă destul de mult toate cârligele Git definite de Git, astfel încât să putem fi cât de flexibili ne-am dori în fluxul nostru de evenimente Git.

Pentru a testa acest lucru, am creat o ramură nouă unde am adăugat literalmente fiecare cârlig Git din acea pagină, inclusiv un script care scrie pur și simplu pe terminal [Husky] event name.

Notă: nu simțiți că trebuie să faceți acest lucru decât dacă sunteți curioși. Scopul este să vă pot arăta cu exemplul meu cum funcționează.

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

Ceea ce va face este să-i spunem lui Husky că, în fiecare etapă în care ni se permite să ne conectăm la Git, spune-ne!

Când comit această schimbare, putem vedea imediat că Husky declanșează unele dintre scenariile noastre.

1611972429 110 Cum sa adaugati Hooks de comitere la Git cu Husky

Acestea sunt toate evenimentele pe care Git ne permite să le conectăm la acel eveniment care se întâmplă în timpul procesului de comitere.

Și în mod similar, dacă împing aceste modificări în Github, pot vedea că procesul de împingere rulează pre-push cârlig!

1611972429 398 Cum sa adaugati Hooks de comitere la Git cu Husky

Este posibil să nu folosiți niciodată majoritatea cârligelor pe care Husky și Git le oferă (am văzut doar câteva dintre aceste două comenzi).

Dar este minunat să poți vedea cât de puternic poate fi acest lucru, fie că rulează un cod care ne formează codul, împiedică angajarea cheilor de acces secret sau orice altceva care poate ajuta la automatizarea sarcinilor importante în fluxul tău de lucru.

Acum putem vedea că putem configura Husky specificând configurația și cârligele chiar în package.json.

Urmați împreună cu comiterea.

Notă: Dacă doriți să verificați filiala mea care include fiecare cârlig Git cu care să testați, îl puteți găsi pe Github.

Pasul 3: Cum să utilizați Husky pentru a formata codul cu Prettier

În cele din urmă, pentru un caz de utilizare real, vom testa cu Prettier pentru a ne formata automat codul.

Prettier este un instrument de formatare a codului opinionat, care vă permite să vă curățați cu ușurință codul pentru a face să pară că o singură persoană l-a scris.

De ce sunt importante instrumentele precum Prettier? Când lucrați prin cod, mai ales cu o echipă, este important să mențineți coerența, astfel încât toată lumea să știe la ce să se aștepte. Acesta va ajuta la prevenirea certurilor asupra unui punct și virgulă într-o revizuire a codului, dar va ajuta, de asemenea, la surprinderea erorilor de sintaxă și la prevenirea erorilor.

Atenție: rularea Prettier va format automat tot codul dvs. În timp ce vom testa acest lucru înainte de a comite modificările, odată ce îl aplicați ca Git Hook, acesta va automatiza acest proces.

Pentru a începe cu Prettier, să îl instalăm cu managerul nostru de pachete:

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

Notă: instalăm Prettier ca fișier devDependency deoarece aplicația noastră nu are nevoie de aceasta pentru a rula.

Apoi, putem adăuga un nou script în package.json care va face mai ușor să rulați Prettier pentru a testa acest lucru.

În interiorul scripts proprietate, adăugați:

"lint": "prettier --check ."

Pentru acest prim test, îl vom executa ca o „verificare” care ne va permite să vedem ce fișiere s-ar schimba.

Rulați următoarele:

yarn lint
# or 
npm run lint

Și odată ce o facem, putem vedea că Prettier ne spune că ar schimba fișierele listate.

1611972429 152 Cum sa adaugati Hooks de comitere la Git cu Husky

În acest moment, codul nostru va rămâne neschimbat. Dar dacă vrem să rulăm Prettier pe bune pentru a face aceste modificări, putem adăuga mai întâi un script suplimentar:

"format": "prettier --write ."

Și dacă rulăm acel script, acesta va actualiza toate aceste fișiere pentru a formata codul conform specificațiilor Prettier.

Atenție: doar o altă notă, rularea Prettier pentru a scrie modificările va face modificări în fișierele dvs. Acestea sunt toate modificările stilului de cod care nu ar trebui să aibă impact asupra modului în care rulează codul, ci asupra aspectului acestuia. Înainte de a rula formatul, ar trebui să salvați toate modificările prin angajarea cu Git, astfel încât să puteți reveni cu ușurință modificările dacă nu sunteți mulțumit de ele.

Acum puteți rula scriptul cu:

yarn format

Și putem vedea că Prettier ne-a actualizat fișierele!

1611972429 206 Cum sa adaugati Hooks de comitere la Git cu Husky

Acum partea care este relevantă pentru această prezentare generală: o putem adăuga ca un cârlig Git. În acest fel, când cineva încearcă să comită cod, Prettier este rulat înainte ca codul să fie salvat. Aceasta înseamnă că vom păstra întotdeauna codul în concordanță cu stilul de formatare al lui Prettier.

În configurația noastră Husky hooks, să adăugăm:

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

Dacă observați în cârligul nostru de pre-comitere, adăugăm și noi git add -A ..

Când Husky rulează, pur și simplu rulează scriptul furnizat. Când rulăm comanda Prettier, formatăm doar codul, dar nu salvăm niciodată aceste modificări ca parte a procesului. Așa că folosim git add pentru a stoca toate aceste modificări și a le include în commit.

Pentru a testa acest lucru, am revenit la modificările tuturor fișierelor care au fost formatate anterior. Dacă urmăriți împreună cu același proiect, puteți rula:

git checkout pages

Care va reseta toate modificările din pages până la ultima comitere.

Acum, să încercăm să adăugăm toate fișierele noastre cu Git și să comitem modificările.

1611972429 184 Cum sa adaugati Hooks de comitere la Git cu Husky

Și odată ce executăm comanda de comitere, putem vedea că cârligul de pre-comitere Husky începe deja și ne formatează codul!

Urmați împreună cu comiterea.

Ce pot face în continuare?

Utilizați scaunele pentru a rula formatarea numai pe fișierele modificate

Folosim Prettier chiar în cârligul nostru de precomitere și specificând . ceea ce înseamnă că va rula de fiecare dată pe toate fișierele.

Putem folosi un instrument numit cu scame, care ne permite să rulăm în continuare cârligele noastre Git cu Husky, dar va rula doar pe fișierele care sunt puse în scenă.

De exemplu, dacă am dori să facem acest lucru cu Husky și Prettier, configurația noastră ar putea arăta astfel:

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

Ca parte a modului în care rulează etapele de scame, va atașa automat fișierele modificate la sfârșitul declarației noastre Prettier.

De asemenea, veți observa că nu am inclus git add. lint-staged va adăuga automat orice modificări la Git pentru noi.

Configurați o configurație Prettier pentru a personaliza regulile de formatare

Mai frumoasă este foarte avizată. Sunt unele lucruri pe care eu personal nu le prefer și s-ar putea să simțiți la fel.

Din fericire, Prettier vă permite să configurați un fișier de configurare care poate suprascrie unele dintre aceste fișiere pentru a vă face codul exact așa cum doriți dvs. și echipa dvs.

Spune-i lui Prettier să ignore fișierele cu .prettierignore

De asemenea, probabil că nu vrei ca Prettier să ruleze pe „toate lucrurile” (poate chiar tu).

Prettier vă permite să configurați un .prettierignore fișier chiar în rădăcina proiectului de lângă package.json, similar cu .gitignore, care vă permite să spuneți Prettier pe ce fișiere nu ar trebui să ruleze.