Poboljšajte kvalitetu svog JavaScript koda s pre-commit hookovima. Naučite kako konfigurirati i implementirati vrata kvalitete koda za čišće i lakše održive projekte.
Vrata kvalitete JavaScript koda: Ovladavanje konfiguracijom Pre-commit Hookova
U svijetu razvoja softvera koji se neprestano razvija, održavanje visoke kvalitete koda je od presudne važnosti. Čist, dobro formatiran kod bez grešaka ne samo da smanjuje troškove održavanja, već i potiče suradnju i ubrzava razvojne cikluse. Jedna moćna tehnika za nametanje kvalitete koda je implementacija vrata kvalitete koda pomoću pre-commit hookova. Ovaj članak pruža sveobuhvatan vodič za konfiguriranje pre-commit hookova za JavaScript projekte, omogućujući vam automatizaciju provjera kvalitete koda prije nego što kod uopće stigne u vaš repozitorij.
Što su Pre-commit Hookovi?
Git hookovi su skripte koje Git izvršava prije ili nakon događaja kao što su commit, push i receive. Pre-commit hookovi se, konkretno, izvršavaju prije nego što je commit finaliziran. Oni pružaju ključnu priliku za pregled promjena koje se committaju i sprječavanje commita koji ne zadovoljavaju unaprijed definirane standarde kvalitete. Zamislite ih kao vratare koji sprječavaju ulazak koda niske kvalitete u vašu kodnu bazu.
Zašto koristiti Pre-commit Hookove za kvalitetu JavaScript koda?
- Rano otkrivanje grešaka: Pre-commit hookovi hvataju probleme s kvalitetom koda rano u razvojnom procesu, sprječavajući njihovo daljnje širenje. To je daleko učinkovitije od otkrivanja problema tijekom pregleda koda ili, još gore, u produkciji.
- Automatizirano formatiranje koda: Osigurajte dosljedan stil koda u cijelom timu i projektu. Automatizirano formatiranje sprječava stilske rasprave i doprinosi čitljivijoj kodnoj bazi.
- Smanjeno opterećenje pri pregledu koda: Automatskim nametanjem standarda kodiranja, pre-commit hookovi smanjuju opterećenje onih koji pregledavaju kod, omogućujući im da se usredotoče na arhitektonske odluke i složenu logiku.
- Poboljšana održivost koda: Dosljednu i visokokvalitetnu kodnu bazu lakše je održavati i razvijati tijekom vremena.
- Nametnuta dosljednost: Osiguravaju da je sav kod u skladu sa standardima projekta, bez obzira na to koji ga je programer napisao. Ovo je posebno važno u distribuiranim timovima koji rade s različitih lokacija – recimo, iz Londona, Tokija i Buenos Airesa – gdje se pojedinačni stilovi kodiranja mogu razlikovati.
Ključni alati za kvalitetu JavaScript koda
Nekoliko alata se obično koristi u kombinaciji s pre-commit hookovima za automatizaciju provjera kvalitete JavaScript koda:
- ESLint: Moćan JavaScript linter koji identificira potencijalne greške, nameće stilove kodiranja i pomaže poboljšati čitljivost koda. Podržava širok raspon pravila i vrlo je konfigurabilan.
- Prettier: Formater koda s definiranim stilom koji automatski formatira kod kako bi se pridržavao dosljednog stila. Podržava JavaScript, TypeScript, JSX i mnoge druge jezike.
- Husky: Alat koji olakšava upravljanje Git hookovima. Omogućuje vam definiranje skripti koje će se izvršavati u različitim fazama Git procesa.
- lint-staged: Alat koji pokreće lintere i formatere samo na 'staged' datotekama, što značajno ubrzava pre-commit proces. To sprječava nepotrebne provjere na nepromijenjenim datotekama.
Konfiguriranje Pre-commit Hookova: Vodič korak po korak
Evo detaljnog vodiča o tome kako postaviti pre-commit hookove za vaš JavaScript projekt koristeći Husky i lint-staged:
Korak 1: Instalirajte ovisnosti
Prvo, instalirajte potrebne pakete kao razvojne ovisnosti koristeći npm ili yarn:
npm install --save-dev husky lint-staged eslint prettier
Ili, koristeći yarn:
yarn add --dev husky lint-staged eslint prettier
Korak 2: Inicijalizirajte Husky
Husky pojednostavljuje proces upravljanja Git hookovima. Inicijalizirajte ga sljedećom naredbom:
npx husky install
Ovo će stvoriti `.husky` direktorij u vašem projektu, koji će pohranjivati vaše Git hookove.
Korak 3: Konfigurirajte Pre-commit Hook
Dodajte pre-commit hook koristeći Husky:
npx husky add .husky/pre-commit "npx lint-staged"
Ova naredba stvara `pre-commit` datoteku u `.husky` direktoriju i dodaje joj naredbu `npx lint-staged`. To govori Gitu da pokrene lint-staged prije svakog commita.
Korak 4: Konfigurirajte lint-staged
lint-staged vam omogućuje pokretanje lintera i formatera samo na 'staged' datotekama, što značajno ubrzava pre-commit proces. Stvorite `lint-staged.config.js` (ili `lint-staged.config.mjs` za ES module) datoteku u korijenskom direktoriju vašeg projekta i konfigurirajte je na sljedeći način:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
Ova konfiguracija govori lint-stagedu da pokrene ESLint i Prettier na svim 'staged' JavaScript i TypeScript datotekama. Parametar `--fix` u ESLintu automatski popravlja sve greške lintanja koje se mogu automatski ispraviti, a parametar `--write` u Prettieru formatira datoteke i prepisuje ih formatiranim kodom.
Alternativno, možete definirati konfiguraciju izravno u vašoj `package.json` datoteci:
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
}
Korak 5: Konfigurirajte ESLint
Ako već niste, konfigurirajte ESLint za svoj projekt. Možete stvoriti ESLint konfiguracijsku datoteku pomoću sljedeće naredbe:
npx eslint --init
Ovo će vas voditi kroz proces stvaranja ESLint konfiguracijske datoteke (`.eslintrc.js`, `.eslintrc.json`, ili `.eslintrc.yml`) na temelju zahtjeva vašeg projekta. Možete birati između raznih unaprijed definiranih konfiguracija ili stvoriti vlastita prilagođena pravila.
Primjer `.eslintrc.js`:
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'react',
'@typescript-eslint'
],
rules: {
'no-unused-vars': 'warn',
'react/prop-types': 'off'
}
};
Ova konfiguracija proširuje preporučena ESLint pravila, preporučena React pravila, preporučena TypeScript pravila i integrira se s Prettierom. Također onemogućuje pravilo `react/prop-types` i postavlja pravilo `no-unused-vars` na upozorenje.
Korak 6: Konfigurirajte Prettier
Konfigurirajte Prettier stvaranjem `.prettierrc.js` (ili `.prettierrc.json`, `.prettierrc.yml`, ili `.prettierrc.toml`) datoteke u korijenskom direktoriju vašeg projekta. Možete prilagoditi opcije formatiranja Prettiera kako bi odgovarale stilskim smjernicama vašeg projekta.
Primjer `.prettierrc.js`:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2
};
Ova konfiguracija postavlja Prettier da koristi jednostruke navodnike, bez točke-zareza, viseće zareze, širinu ispisa od 120 znakova i širinu tabulatora od 2 razmaka.
Alternativno, možete definirati Prettier konfiguraciju unutar `package.json`:
{
"prettier": {
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2
}
}
Korak 7: Testirajte svoju konfiguraciju
Da biste testirali svoju konfiguraciju, pripremite neke promjene za commit ('stage') i pokušajte ih commitati. Na primjer:
git add .
git commit -m "Test pre-commit hook"
Ako postoje problemi s lintanjem ili formatiranjem, ESLint i Prettier će ih automatski popraviti (ako je moguće) ili prijaviti greške. Ako se prijave greške, commit će biti prekinut, što vam omogućuje da ispravite probleme prije ponovnog commita.
Napredne opcije konfiguracije
Korištenje različitih lintera i formatera
Možete jednostavno integrirati druge lintere i formatere u svoju konfiguraciju pre-commit hooka. Na primjer, možete koristiti Stylelint za lintanje CSS ili SASS datoteka:
npm install --save-dev stylelint stylelint-config-standard
Zatim, ažurirajte svoju `lint-staged.config.js` datoteku kako biste uključili Stylelint:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'*.{css,scss}': ['stylelint --fix'],
};
Pokretanje testova prije commita
Također možete pokrenuti svoje jedinične testove kao dio pre-commit hooka. To pomaže osigurati da vaš kod radi ispravno prije nego što se commita. Pretpostavimo da koristite Jest:
npm install --save-dev jest
Ažurirajte svoju `lint-staged.config.js` datoteku kako biste uključili naredbu za testiranje:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
'*.{css,scss}': ['stylelint --fix'],
};
Parametar `--findRelatedTests` govori Jestu da pokrene samo testove koji su povezani s promijenjenim datotekama, što značajno ubrzava proces.
Preskakanje Pre-commit Hookova
U nekim slučajevima, možda ćete htjeti privremeno preskočiti pre-commit hookove. To možete učiniti korištenjem parametra `--no-verify` s naredbom `git commit`:
git commit --no-verify -m "Commit message"
Međutim, općenito se preporučuje izbjegavanje preskakanja hookova osim ako je to apsolutno nužno, jer oni igraju ključnu ulogu u održavanju kvalitete koda.
Rješavanje uobičajenih problema
- Hookovi se ne pokreću: Provjerite je li Husky ispravno instaliran i inicijaliziran te da `.husky` direktorij postoji u korijenskom direktoriju vašeg projekta. Također provjerite je li `pre-commit` datoteka u `.husky` direktoriju izvršna.
- Greške lintanja se ne popravljaju: Provjerite koristite li parametar `--fix` s ESLintom i je li vaša ESLint konfiguracija postavljena da automatski popravlja određene vrste grešaka.
- Prettier ne formatira datoteke: Provjerite koristite li parametar `--write` s Prettierom i je li vaša Prettier konfiguracija ispravno postavljena.
- Spori pre-commit hookovi: Koristite lint-staged da biste pokretali lintere i formatere samo na 'staged' datotekama. Također razmislite o optimizaciji svojih ESLint i Prettier konfiguracija kako biste smanjili broj pravila i postavki koje se provjeravaju.
- Konfliktne konfiguracije: Provjerite da se vaše ESLint i Prettier konfiguracije ne sukobljavaju. Ako se sukobljavaju, možda ćete morati prilagoditi jednu ili obje konfiguracije kako biste riješili sukobe. Razmislite o korištenju dijeljene konfiguracije poput `eslint-config-prettier` i `eslint-plugin-prettier` kako biste izbjegli sukobe.
Najbolje prakse za Pre-commit Hookove
- Neka hookovi budu brzi: Spori hookovi mogu značajno utjecati na produktivnost programera. Koristite lint-staged za obradu samo 'staged' datoteka i optimizirajte konfiguracije svojih lintera i formatera.
- Pružite jasne poruke o greškama: Kada hook ne uspije, pružite jasne i informativne poruke o greškama kako biste usmjerili programere kako da riješe probleme.
- Automatizirajte što je više moguće: Automatizirajte formatiranje koda i lintanje kako biste smanjili ručni napor i osigurali dosljednost.
- Educirajte svoj tim: Osigurajte da svi članovi tima razumiju svrhu pre-commit hookova i kako ih učinkovito koristiti.
- Koristite dosljednu konfiguraciju: Održavajte dosljednu konfiguraciju za ESLint, Prettier i druge alate u cijelom projektu. To će pomoći osigurati da se sav kod formatira i linta na isti način. Razmislite o korištenju dijeljenog konfiguracijskog paketa koji se može lako instalirati i ažurirati na više projekata.
- Testirajte svoje hookove: Redovito testirajte svoje pre-commit hookove kako biste bili sigurni da rade ispravno i da ne uzrokuju neočekivane probleme.
Globalna razmatranja
Kada radite u globalno distribuiranim timovima, uzmite u obzir sljedeće:
- Dosljedne verzije alata: Osigurajte da svi članovi tima koriste iste verzije ESLint-a, Prettier-a, Husky-ja i lint-staged-a. To se može postići navođenjem verzija u vašoj `package.json` datoteci i korištenjem upravitelja paketima poput npm-a ili yarn-a za instalaciju ovisnosti.
- Kompatibilnost s različitim platformama: Testirajte svoje pre-commit hookove na različitim operativnim sustavima (Windows, macOS, Linux) kako biste osigurali da rade ispravno na svim platformama. Koristite alate i naredbe kompatibilne s različitim platformama kad god je to moguće.
- Razlike u vremenskim zonama: Budite svjesni razlika u vremenskim zonama prilikom komuniciranja s članovima tima o problemima s pre-commit hookovima. Pružite jasne upute i primjere kako biste im pomogli da brzo riješe probleme.
- Jezična podrška: Ako vaš projekt uključuje rad s više jezika, osigurajte da vaši pre-commit hookovi podržavaju sve jezike koji se koriste u projektu. Možda ćete trebati instalirati dodatne lintere i formatere za svaki jezik.
Zaključak
Implementacija pre-commit hookova učinkovit je način za nametanje kvalitete koda, poboljšanje timske suradnje i smanjenje troškova održavanja u JavaScript projektima. Integracijom alata kao što su ESLint, Prettier, Husky i lint-staged, možete automatizirati formatiranje koda, lintanje i testiranje, osiguravajući da se samo visokokvalitetan kod commita u vaš repozitorij. Slijedeći korake navedene u ovom vodiču, možete postaviti robusna vrata kvalitete koda koja će vam pomoći u izgradnji čišćih, lakše održivih i pouzdanijih JavaScript aplikacija. Prihvatite ovu praksu i podignite razvojni proces svog tima na višu razinu već danas.