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
            

              
                Copy
              
            
          

Ili, koristeći yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Korak 2: Inicijalizirajte Husky

Husky pojednostavljuje proces upravljanja Git hookovima. Inicijalizirajte ga sljedećom naredbom:

            npx husky install
            

              
                Copy
              
            
          

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"
            

              
                Copy
              
            
          

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'],
};
            

              
                Copy
              
            
          

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"
    ]
  }
}
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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'
  }
};
            

              
                Copy
              
            
          

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
};
            

              
                Copy
              
            
          

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
  }
}
            

              
                Copy
              
            
          

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 .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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'],
};
            

              
                Copy
              
            
          

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
            

              
                Copy
              
            
          

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'],
};
            

              
                Copy
              
            
          

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"
            

              
                Copy
              
            
          

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.