Brány kvality kódu v JavaScripte: Zvládnutie konfigurácie pre-commit hookov

V neustále sa vyvíjajúcom svete softvérového vývoja je udržiavanie vysokej kvality kódu prvoradé. Čistý, dobre naformátovaný a bezchybný kód nielenže znižuje náklady na údržbu, ale tiež podporuje spoluprácu a zrýchľuje vývojové cykly. Jednou z účinných techník na presadzovanie kvality kódu je implementácia brán kvality kódu pomocou pre-commit hookov. Tento článok poskytuje komplexný návod na konfiguráciu pre-commit hookov pre JavaScript projekty, čo vám umožní automatizovať kontroly kvality kódu ešte predtým, ako sa kód dostane do vášho repozitára.

Čo sú pre-commit hooky?

Git hooky sú skripty, ktoré Git spúšťa pred alebo po udalostiach ako commit, push a receive. Pre-commit hooky sa spúšťajú konkrétne pred dokončením commitu. Ponúkajú kľúčovú príležitosť na kontrolu zmien, ktoré sa commitujú, a zabraňujú commitom, ktoré nespĺňajú preddefinované štandardy kvality. Predstavte si ich ako strážcov brány, ktorí bránia nekvalitnému kódu vo vstupe do vašej kódovej základne.

Prečo používať pre-commit hooky pre kvalitu kódu v JavaScripte?

• Včasná detekcia chýb: Pre-commit hooky zachytávajú problémy s kvalitou kódu v počiatočnej fáze vývojového procesu, čím zabraňujú ich ďalšiemu šíreniu. Je to oveľa efektívnejšie ako objavovanie problémov počas revízií kódu alebo, čo je ešte horšie, v produkcii.
• Automatické formátovanie kódu: Zabezpečte konzistentný štýl kódu v celom tíme a projekte. Automatické formátovanie predchádza debatám o štýle a prispieva k čitateľnejšej kódovej základni.
• Zníženie záťaže pri revízii kódu: Automatickým presadzovaním štandardov kódovania znižujú pre-commit hooky záťaž recenzentov kódu, čo im umožňuje zamerať sa na architektonické rozhodnutia a komplexnú logiku.
• Zlepšená udržiavateľnosť kódu: Konzistentná a vysokokvalitná kódová základňa sa ľahšie udržiava a vyvíja v čase.
• Vynútená konzistentnosť: Zabezpečujú, že všetok kód zodpovedá štandardom projektu, bez ohľadu na to, ktorý vývojár ho napísal. Toto je obzvlášť dôležité v distribuovaných tímoch pracujúcich z rôznych miest – povedzme z Londýna, Tokia a Buenos Aires – kde sa individuálne štýly kódovania môžu líšiť.

Kľúčové nástroje pre kvalitu kódu v JavaScripte

V spojení s pre-commit hookmi sa na automatizáciu kontrol kvality JavaScript kódu bežne používa niekoľko nástrojov:

• ESLint: Výkonný JavaScript linter, ktorý identifikuje potenciálne chyby, vynucuje štýly kódovania a pomáha zlepšovať čitateľnosť kódu. Podporuje širokú škálu pravidiel a je vysoko konfigurovateľný.
• Prettier: Dogmatický formátovač kódu, ktorý automaticky formátuje kód tak, aby dodržiaval konzistentný štýl. Podporuje JavaScript, TypeScript, JSX a mnoho ďalších jazykov.
• Husky: Nástroj, ktorý uľahčuje správu Git hookov. Umožňuje vám definovať skripty, ktoré sa budú vykonávať v rôznych fázach Git workflow.
• lint-staged: Nástroj, ktorý spúšťa lintery a formátovače iba na "staged" súboroch, čo výrazne zrýchľuje proces pre-commit. Tým sa predchádza zbytočným kontrolám na nezmenených súboroch.

Konfigurácia pre-commit hookov: Podrobný sprievodca

Tu je podrobný návod, ako nastaviť pre-commit hooky pre váš JavaScript projekt pomocou Husky a lint-staged:

Krok 1: Inštalácia závislostí

Najprv nainštalujte potrebné balíčky ako vývojové závislosti pomocou npm alebo yarn:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Alebo pomocou yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Krok 2: Inicializácia Husky

Husky zjednodušuje proces správy Git hookov. Inicializujte ho pomocou nasledujúceho príkazu:

            npx husky install
            

              
                Copy
              
            
          

Týmto sa vo vašom projekte vytvorí adresár `.husky`, v ktorom budú uložené vaše Git hooky.

Krok 3: Konfigurácia pre-commit hooku

Pridajte pre-commit hook pomocou Husky:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

Tento príkaz vytvorí súbor `pre-commit` v adresári `.husky` a pridá doň príkaz `npx lint-staged`. Tým sa Gitu povie, aby pred každým commitom spustil lint-staged.

Krok 4: Konfigurácia lint-staged

lint-staged vám umožňuje spúšťať lintery a formátovače iba na "staged" súboroch, čo výrazne zrýchľuje proces pre-commit. Vytvorte súbor `lint-staged.config.js` (alebo `lint-staged.config.mjs` pre ES moduly) v koreňovom adresári vášho projektu a nakonfigurujte ho nasledovne:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

Táto konfigurácia hovorí lint-staged, aby spustil ESLint a Prettier na všetkých "staged" JavaScript a TypeScript súboroch. Flag `--fix` v ESLint automaticky opraví všetky chyby lintovania, ktoré je možné automaticky opraviť, a flag `--write` v Prettier naformátuje súbory a prepíše ich naformátovaným kódom.

Alternatívne môžete definovať konfiguráciu priamo vo vašom súbore `package.json`:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

Krok 5: Konfigurácia ESLint

Ak ste tak ešte neurobili, nakonfigurujte ESLint pre svoj projekt. Konfiguračný súbor ESLint môžete vytvoriť pomocou nasledujúceho príkazu:

            npx eslint --init
            

              
                Copy
              
            
          

Tento príkaz vás prevedie procesom vytvorenia konfiguračného súboru ESLint (`.eslintrc.js`, `.eslintrc.json` alebo `.eslintrc.yml`) na základe požiadaviek vášho projektu. Môžete si vybrať z rôznych preddefinovaných konfigurácií alebo si vytvoriť vlastné pravidlá.

Príklad `.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'
  }
};
            

              
                Copy
              
            
          

Táto konfigurácia rozširuje odporúčané pravidlá ESLint, odporúčané pravidlá React, odporúčané pravidlá TypeScript a integruje sa s Prettier. Taktiež vypína pravidlo `react/prop-types` a nastavuje pravidlo `no-unused-vars` na varovanie.

Krok 6: Konfigurácia Prettier

Nakonfigurujte Prettier vytvorením súboru `.prettierrc.js` (alebo `.prettierrc.json`, `.prettierrc.yml`, alebo `.prettierrc.toml`) v koreňovom adresári vášho projektu. Možnosti formátovania Prettier si môžete prispôsobiť tak, aby zodpovedali štýlovým usmerneniam vášho projektu.

Príklad `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

Táto konfigurácia nastaví Prettier na používanie jednoduchých úvodzoviek, žiadne bodkočiarky, koncové čiarky, šírku riadku 120 znakov a šírku tabulátora na 2 medzery.

Alternatívne môžete definovať konfiguráciu Prettier priamo v súbore `package.json`:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

Krok 7: Otestujte svoju konfiguráciu

Na otestovanie konfigurácie pridajte nejaké zmeny do "staging" oblasti a pokúste sa ich commitnúť. Napríklad:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Ak sa vyskytnú nejaké problémy s lintovaním alebo formátovaním, ESLint a Prettier ich automaticky opravia (ak je to možné) alebo nahlásia chyby. Ak sú nahlásené chyby, commit bude prerušený, čo vám umožní opraviť problémy pred opätovným commitom.

Pokročilé možnosti konfigurácie

Použitie rôznych linterov a formátovačov

Do svojej konfigurácie pre-commit hooku môžete ľahko integrovať aj iné lintery a formátovače. Napríklad môžete použiť Stylelint na lintovanie CSS alebo SASS súborov:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

Potom aktualizujte svoj súbor `lint-staged.config.js` tak, aby zahŕňal Stylelint:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Spúšťanie testov pred commitom

Môžete tiež spustiť svoje jednotkové testy ako súčasť pre-commit hooku. To pomáha zabezpečiť, že váš kód funguje správne predtým, ako je commitnutý. Za predpokladu, že používate Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Aktualizujte svoj súbor `lint-staged.config.js` tak, aby zahŕňal príkaz na testovanie:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

Flag `--findRelatedTests` hovorí Jestu, aby spustil iba testy, ktoré súvisia so zmenenými súbormi, čo výrazne zrýchľuje proces.

Preskočenie pre-commit hookov

V niektorých prípadoch možno budete chcieť dočasne preskočiť pre-commit hooky. Môžete to urobiť pomocou flagu `--no-verify` s príkazom `git commit`:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

Všeobecne sa však odporúča vyhýbať sa preskakovaniu hookov, pokiaľ to nie je absolútne nevyhnutné, pretože zohrávajú kľúčovú úlohu pri udržiavaní kvality kódu.

Riešenie bežných problémov

• Hooky sa nespúšťajú: Uistite sa, že Husky je správne nainštalovaný a inicializovaný a že v koreňovom adresári vášho projektu existuje adresár `.husky`. Taktiež overte, že súbor `pre-commit` v adresári `.husky` je spustiteľný.
• Chyby lintovania sa neopravujú: Uistite sa, že s ESLintom používate flag `--fix` a že vaša konfigurácia ESLint je nastavená na automatickú opravu určitých typov chýb.
• Prettier neformátuje súbory: Uistite sa, že s Prettierom používate flag `--write` a že vaša konfigurácia Prettier je správne nastavená.
• Pomalé pre-commit hooky: Použite lint-staged na spúšťanie linterov a formátovačov iba na "staged" súboroch. Zvážte tiež optimalizáciu svojich konfigurácií ESLint a Prettier, aby ste minimalizovali počet kontrolovaných pravidiel a nastavení.
• Konfliktné konfigurácie: Uistite sa, že vaše konfigurácie ESLint a Prettier nie sú v konflikte. Ak áno, možno budete musieť upraviť jednu alebo obe konfigurácie, aby ste konflikty vyriešili. Zvážte použitie zdieľanej konfigurácie ako `eslint-config-prettier` a `eslint-plugin-prettier`, aby ste sa vyhli konfliktom.

Osvedčené postupy pre pre-commit hooky

• Udržujte hooky rýchle: Pomalé hooky môžu výrazne ovplyvniť produktivitu vývojárov. Použite lint-staged na spracovanie iba "staged" súborov a optimalizujte konfigurácie linterov a formátovačov.
• Poskytujte jasné chybové hlásenia: Keď hook zlyhá, poskytnite jasné a informatívne chybové hlásenia, ktoré vývojárom pomôžu pri riešení problémov.
• Automatizujte čo najviac: Automatizujte formátovanie kódu a lintovanie, aby ste minimalizovali manuálnu prácu a zabezpečili konzistentnosť.
• Vzdelávajte svoj tím: Uistite sa, že všetci členovia tímu rozumejú účelu pre-commit hookov a vedia, ako ich efektívne používať.
• Používajte konzistentnú konfiguráciu: Udržujte konzistentnú konfiguráciu pre ESLint, Prettier a ďalšie nástroje v celom projekte. Pomôže to zabezpečiť, že všetok kód je formátovaný a lintovaný rovnakým spôsobom. Zvážte použitie zdieľaného konfiguračného balíčka, ktorý sa dá ľahko inštalovať a aktualizovať vo viacerých projektoch.
• Testujte svoje hooky: Pravidelne testujte svoje pre-commit hooky, aby ste sa uistili, že fungujú správne a nespôsobujú žiadne neočakávané problémy.

Globálne aspekty

Pri práci v globálne distribuovaných tímoch zvážte nasledujúce:

• Konzistentné verzie nástrojov: Uistite sa, že všetci členovia tímu používajú rovnaké verzie ESLint, Prettier, Husky a lint-staged. To sa dá dosiahnuť špecifikovaním verzií vo vašom súbore `package.json` a použitím správcu balíčkov ako npm alebo yarn na inštaláciu závislostí.
• Kompatibilita medzi platformami: Otestujte svoje pre-commit hooky na rôznych operačných systémoch (Windows, macOS, Linux), aby ste sa uistili, že fungujú správne na všetkých platformách. Vždy, keď je to možné, používajte nástroje a príkazy kompatibilné s rôznymi platformami.
• Rozdiely v časových pásmach: Pri komunikácii s členmi tímu o problémoch s pre-commit hookmi majte na pamäti rozdiely v časových pásmach. Poskytnite jasné inštrukcie a príklady, ktoré im pomôžu rýchlo vyriešiť problémy.
• Jazyková podpora: Ak váš projekt zahŕňa prácu s viacerými jazykmi, uistite sa, že vaše pre-commit hooky podporujú všetky jazyky používané v projekte. Možno budete musieť nainštalovať ďalšie lintery a formátovače pre každý jazyk.

Záver

Implementácia pre-commit hookov je efektívny spôsob, ako presadzovať kvalitu kódu, zlepšovať tímovú spoluprácu a znižovať náklady na údržbu v JavaScript projektoch. Integráciou nástrojov ako ESLint, Prettier, Husky a lint-staged môžete automatizovať formátovanie kódu, lintovanie a testovanie, čím zabezpečíte, že do vášho repozitára bude commitnutý iba vysokokvalitný kód. Postupovaním podľa krokov uvedených v tomto návode môžete nastaviť robustnú bránu kvality kódu, ktorá vám pomôže vytvárať čistejšie, udržateľnejšie a spoľahlivejšie JavaScript aplikácie. Osvojte si túto prax a pozdvihnite vývojový proces vášho tímu ešte dnes.