Pagerinkite savo JavaScript kodo kokybę su „pre-commit“ hook'ais. Sužinokite, kaip konfigūruoti ir įdiegti kodo kokybės vartus švaresniems, lengviau prižiūrimiems projektams.
JavaScript kodo kokybės vartai: „pre-commit“ hook'ų konfigūravimo įvaldymas
Nuolat besikeičiančiame programinės įrangos kūrimo pasaulyje aukštos kodo kokybės palaikymas yra svarbiausias dalykas. Švarus, gerai suformatuotas ir be klaidų kodas ne tik sumažina priežiūros kaštus, bet ir skatina bendradarbiavimą bei pagreitina kūrimo ciklus. Viena galinga technika, skirta užtikrinti kodo kokybę, yra kodo kokybės vartų įdiegimas naudojant „pre-commit“ hook'us. Šis straipsnis pateikia išsamų vadovą, kaip konfigūruoti „pre-commit“ hook'us JavaScript projektuose, leidžiantį automatizuoti kodo kokybės patikrinimus dar prieš kodui pasiekiant jūsų repozitoriją.
Kas yra „pre-commit“ hook'ai?
Git hook'ai yra scenarijai, kuriuos „Git“ vykdo prieš arba po tokių įvykių kaip `commit`, `push` ir `receive`. „Pre-commit“ hook'ai konkrečiai yra paleidžiami prieš užbaigiant `commit` operaciją. Jie suteikia svarbią galimybę patikrinti įkeliamus pakeitimus ir neleisti atlikti `commit` operacijų, kurios neatitinka iš anksto nustatytų kokybės standartų. Galvokite apie juos kaip apie vartų sargus, kurie neleidžia žemos kokybės kodui patekti į jūsų kodo bazę.
Kodėl verta naudoti „pre-commit“ hook'us JavaScript kodo kokybei?
- Ankstyvas klaidų aptikimas: „Pre-commit“ hook'ai aptinka kodo kokybės problemas ankstyvoje kūrimo stadijoje, neleisdami joms plisti toliau. Tai yra daug efektyviau nei atrasti problemas kodo peržiūrų metu arba, dar blogiau, produkcinėje aplinkoje.
- Automatizuotas kodo formatavimas: Užtikrinkite nuoseklų kodo stilių visoje komandoje ir projekte. Automatizuotas formatavimas apsaugo nuo stilistinių diskusijų ir prisideda prie geriau skaitomos kodo bazės.
- Sumažinta kodo peržiūros našta: Automatiškai užtikrindami kodavimo standartus, „pre-commit“ hook'ai sumažina kodo peržiūrėtojų naštą, leisdami jiems susitelkti į architektūrinius sprendimus ir sudėtingą logiką.
- Pagerintas kodo palaikymas: Nuoseklią ir aukštos kokybės kodo bazę yra lengviau prižiūrėti ir vystyti laikui bėgant.
- Užtikrintas nuoseklumas: Jie užtikrina, kad visas kodas atitiktų projekto standartus, nepriklausomai nuo to, kuris kūrėjas jį parašė. Tai ypač svarbu paskirstytose komandose, dirbančiose iš skirtingų vietovių – tarkime, Londono, Tokijo ir Buenos Airių – kur individualūs kodavimo stiliai gali skirtis.
Pagrindiniai įrankiai JavaScript kodo kokybei
Keletas įrankių dažnai naudojami kartu su „pre-commit“ hook'ais siekiant automatizuoti JavaScript kodo kokybės patikrinimus:
- ESLint: Galingas JavaScript linteris, kuris identifikuoja galimas klaidas, užtikrina kodavimo stilius ir padeda pagerinti kodo skaitomumą. Jis palaiko platų taisyklių spektrą ir yra labai konfigūruojamas.
- Prettier: Nuomonę turintis kodo formatuotojas, kuris automatiškai formatuoja kodą, kad jis atitiktų nuoseklų stilių. Jis palaiko JavaScript, TypeScript, JSX ir daugelį kitų kalbų.
- Husky: Įrankis, kuris palengvina Git hook'ų valdymą. Jis leidžia apibrėžti scenarijus, kurie bus vykdomi skirtingose „Git“ darbo eigos stadijose.
- lint-staged: Įrankis, kuris paleidžia linterius ir formatuotojus tik ant „staged“ failų, žymiai pagreitindamas „pre-commit“ procesą. Tai apsaugo nuo nereikalingų patikrinimų nepakeistuose failuose.
„Pre-commit“ hook'ų konfigūravimas: žingsnis po žingsnio vadovas
Štai išsamus vadovas, kaip nustatyti „pre-commit“ hook'us jūsų JavaScript projektui naudojant „Husky“ ir „lint-staged“:
1 žingsnis: įdiekite priklausomybes
Pirmiausia, įdiekite reikiamus paketus kaip kūrimo priklausomybes naudodami `npm` arba `yarn`:
npm install --save-dev husky lint-staged eslint prettier
Arba, naudojant `yarn`:
yarn add --dev husky lint-staged eslint prettier
2 žingsnis: inicializuokite „Husky“
„Husky“ supaprastina Git hook'ų valdymo procesą. Inicializuokite jį naudodami šią komandą:
npx husky install
Tai sukurs `.husky` katalogą jūsų projekte, kuriame bus saugomi jūsų Git hook'ai.
3 žingsnis: konfigūruokite „pre-commit“ hook'ą
Pridėkite „pre-commit“ hook'ą naudodami „Husky“:
npx husky add .husky/pre-commit "npx lint-staged"
Ši komanda sukuria `pre-commit` failą `.husky` kataloge ir prideda į jį komandą `npx lint-staged`. Tai nurodo „Git“ paleisti `lint-staged` prieš kiekvieną `commit` operaciją.
4 žingsnis: konfigūruokite „lint-staged“
„lint-staged“ leidžia paleisti linterius ir formatuotojus tik ant „staged“ failų, kas žymiai pagreitina „pre-commit“ procesą. Sukurkite `lint-staged.config.js` (arba `lint-staged.config.mjs` ES moduliams) failą savo projekto šakniniame kataloge ir sukonfigūruokite jį taip:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
Ši konfigūracija nurodo „lint-staged“ paleisti „ESLint“ ir „Prettier“ visiems „staged“ JavaScript ir TypeScript failams. `--fix` vėliavėlė „ESLint“ komandoje automatiškai ištaiso visas lintinimo klaidas, kurias galima ištaisyti automatiškai, o `--write` vėliavėlė „Prettier“ komandoje suformatuoja failus ir perrašo juos su suformatuotu kodu.
Arba galite apibrėžti konfigūraciją tiesiogiai savo `package.json` faile:
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
}
5 žingsnis: konfigūruokite „ESLint“
Jei dar to nepadarėte, sukonfigūruokite „ESLint“ savo projektui. Galite sukurti „ESLint“ konfigūracijos failą naudodami šią komandą:
npx eslint --init
Tai padės jums sukurti „ESLint“ konfigūracijos failą (`.eslintrc.js`, `.eslintrc.json` arba `.eslintrc.yml`) atsižvelgiant į jūsų projekto reikalavimus. Galite pasirinkti iš įvairių iš anksto nustatytų konfigūracijų arba sukurti savo pasirinktines taisykles.
`.eslintrc.js` pavyzdys:
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'
}
};
Ši konfigūracija išplečia rekomenduojamas „ESLint“ taisykles, rekomenduojamas „React“ taisykles, rekomenduojamas „TypeScript“ taisykles ir integruojasi su „Prettier“. Ji taip pat išjungia `react/prop-types` taisyklę ir nustato `no-unused-vars` taisyklę kaip įspėjimą.
6 žingsnis: konfigūruokite „Prettier“
Konfigūruokite „Prettier“ sukurdami `.prettierrc.js` (arba `.prettierrc.json`, `.prettierrc.yml` arba `.prettierrc.toml`) failą savo projekto šakniniame kataloge. Galite pritaikyti „Prettier“ formatavimo parinktis, kad jos atitiktų jūsų projekto stiliaus gaires.
`.prettierrc.js` pavyzdys:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2
};
Ši konfigūracija nustato „Prettier“ naudoti viengubas kabutes, jokių kabliataškių, kabančius kablelius, 120 simbolių spausdinimo plotį ir 2 tarpų tabuliacijos plotį.
Arba galite apibrėžti „Prettier“ konfigūraciją `package.json` faile:
{
"prettier": {
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2
}
}
7 žingsnis: išbandykite savo konfigūraciją
Norėdami išbandyti savo konfigūraciją, pažymėkite keletą pakeitimų kaip „staged“ ir pabandykite juos įkelti (`commit`):
git add .
git commit -m "Test pre-commit hook"
Jei yra kokių nors lintinimo ar formatavimo problemų, „ESLint“ ir „Prettier“ automatiškai jas ištaisys (jei įmanoma) arba praneš apie klaidas. Jei pranešama apie klaidas, `commit` operacija bus nutraukta, leidžiant jums ištaisyti problemas prieš bandant dar kartą.
Išplėstinės konfigūracijos parinktys
Kitų linterių ir formatuotojų naudojimas
Galite lengvai integruoti kitus linterius ir formatuotojus į savo „pre-commit“ hook'o konfigūraciją. Pavyzdžiui, galite naudoti „Stylelint“ CSS arba SASS failų lintinimui:
npm install --save-dev stylelint stylelint-config-standard
Tada atnaujinkite savo `lint-staged.config.js` failą, kad įtrauktumėte „Stylelint“:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'*.{css,scss}': ['stylelint --fix'],
};
Testų paleidimas prieš `commit`
Taip pat galite paleisti savo vienetų testus kaip „pre-commit“ hook'o dalį. Tai padeda užtikrinti, kad jūsų kodas veikia teisingai prieš jį įkeliant. Darant prielaidą, kad naudojate „Jest“:
npm install --save-dev jest
Atnaujinkite savo `lint-staged.config.js` failą, kad įtrauktumėte testo komandą:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
'*.{css,scss}': ['stylelint --fix'],
};
`--findRelatedTests` vėliavėlė nurodo „Jest“ paleisti tik tuos testus, kurie yra susiję su pakeistais failais, o tai žymiai pagreitina procesą.
„Pre-commit“ hook'ų praleidimas
Kai kuriais atvejais galbūt norėsite laikinai praleisti „pre-commit“ hook'us. You can do this by using the `--no-verify` flag with the `git commit` command:
git commit --no-verify -m "Commit message"
Tačiau paprastai rekomenduojama vengti praleisti hook'us, nebent tai yra absoliučiai būtina, nes jie atlieka lemiamą vaidmenį palaikant kodo kokybę.
Dažniausiai pasitaikančių problemų sprendimas
- Hook'ai neveikia: Įsitikinkite, kad „Husky“ yra tinkamai įdiegtas ir inicializuotas, ir kad `.husky` katalogas egzistuoja jūsų projekto šakniniame kataloge. Taip pat patikrinkite, ar `pre-commit` failas `.husky` kataloge yra vykdomasis.
- Lintinimo klaidos nėra taisomos: Įsitikinkite, kad su „ESLint“ naudojama `--fix` vėliavėlė ir kad jūsų „ESLint“ konfigūracija yra nustatyta automatiškai taisyti tam tikrų tipų klaidas.
- „Prettier“ neformatuoja failų: Įsitikinkite, kad su „Prettier“ naudojama `--write` vėliavėlė ir kad jūsų „Prettier“ konfigūracija yra tinkamai nustatyta.
- Lėti „pre-commit“ hook'ai: Naudokite „lint-staged“, kad linteriai ir formatuotojai būtų paleidžiami tik ant „staged“ failų. Taip pat apsvarstykite galimybę optimizuoti savo „ESLint“ ir „Prettier“ konfigūracijas, kad sumažintumėte tikrinamų taisyklių ir nustatymų skaičių.
- Konfliktuojančios konfigūracijos: Įsitikinkite, kad jūsų „ESLint“ ir „Prettier“ konfigūracijos neprieštarauja viena kitai. Jei taip nutinka, gali tekti pakoreguoti vieną ar abi konfigūracijas, kad išspręstumėte konfliktus. Apsvarstykite galimybę naudoti bendrą konfigūraciją, pvz., `eslint-config-prettier` ir `eslint-plugin-prettier`, kad išvengtumėte konfliktų.
Geriausios „pre-commit“ hook'ų praktikos
- Išlaikykite hook'us greitus: Lėti hook'ai gali žymiai paveikti kūrėjų produktyvumą. Naudokite „lint-staged“, kad apdorotumėte tik „staged“ failus, ir optimizuokite savo linterių bei formatuotojų konfigūracijas.
- Pateikite aiškius klaidų pranešimus: Kai hook'as nepavyksta, pateikite aiškius ir informatyvius klaidų pranešimus, kurie padėtų kūrėjams ištaisyti problemas.
- Automatizuokite kiek įmanoma daugiau: Automatizuokite kodo formatavimą ir lintinimą, kad sumažintumėte rankinio darbo pastangas ir užtikrintumėte nuoseklumą.
- Švieskite savo komandą: Užtikrinkite, kad visi komandos nariai suprastų „pre-commit“ hook'ų paskirtį ir kaip juos efektyviai naudoti.
- Naudokite nuoseklią konfigūraciją: Palaikykite nuoseklią „ESLint“, „Prettier“ ir kitų įrankių konfigūraciją visame projekte. Tai padės užtikrinti, kad visas kodas būtų formatuojamas ir lintinamas vienodai. Apsvarstykite galimybę naudoti bendrą konfigūracijos paketą, kurį galima lengvai įdiegti ir atnaujinti keliuose projektuose.
- Testuokite savo hook'us: Reguliariai testuokite savo „pre-commit“ hook'us, kad užtikrintumėte, jog jie veikia teisingai ir nesukelia jokių netikėtų problemų.
Globalūs aspektai
Dirbant globaliai paskirstytose komandose, atsižvelkite į šiuos dalykus:
- Nuoseklios įrankių versijos: Užtikrinkite, kad visi komandos nariai naudotų tas pačias „ESLint“, „Prettier“, „Husky“ ir „lint-staged“ versijas. Tai galima pasiekti nurodant versijas savo `package.json` faile ir naudojant paketų tvarkyklę, pvz., `npm` ar `yarn`, priklausomybėms įdiegti.
- Suderinamumas su skirtingomis platformomis: Išbandykite savo „pre-commit“ hook'us skirtingose operacinėse sistemose („Windows“, „macOS“, „Linux“), kad užtikrintumėte, jog jie veikia teisingai visose platformose. Kai tik įmanoma, naudokite įrankius ir komandas, veikiančias įvairiose platformose.
- Laiko juostų skirtumai: Būkite atidūs laiko juostų skirtumams, kai bendraujate su komandos nariais dėl „pre-commit“ hook'ų problemų. Pateikite aiškias instrukcijas ir pavyzdžius, kad padėtumėte jiems greitai išspręsti problemas.
- Kalbų palaikymas: Jei jūsų projektas apima darbą su keliomis kalbomis, užtikrinkite, kad jūsų „pre-commit“ hook'ai palaikytų visas projekte naudojamas kalbas. Gali tekti įdiegti papildomus linterius ir formatuotojus kiekvienai kalbai.
Išvada
„Pre-commit“ hook'ų įdiegimas yra veiksmingas būdas užtikrinti kodo kokybę, pagerinti komandos bendradarbiavimą ir sumažinti priežiūros kaštus JavaScript projektuose. Integruodami tokius įrankius kaip „ESLint“, „Prettier“, „Husky“ ir „lint-staged“, galite automatizuoti kodo formatavimą, lintinimą ir testavimą, užtikrindami, kad į jūsų repozitoriją būtų įkeliamas tik aukštos kokybės kodas. Vadovaudamiesi šiame vadove aprašytais žingsniais, galite sukurti tvirtą kodo kokybės vartų sistemą, kuri padės jums kurti švaresnes, lengviau prižiūrimas ir patikimesnes JavaScript programas. Pritaikykite šią praktiką ir pakelkite savo komandos kūrimo eigą į aukštesnį lygį jau šiandien.