Kvalitetskontroll for JavaScript-kode: Mestre konfigurasjon av Pre-commit Hooks

I den stadig utviklende verdenen av programvareutvikling er det avgjørende å opprettholde høy kodekvalitet. Ren, velformatert og feilfri kode reduserer ikke bare vedlikeholdskostnadene, men fremmer også samarbeid og fremskynder utviklingssykluser. En kraftig teknikk for å håndheve kodekvalitet er implementering av kvalitetskontroller (code quality gates) ved hjelp av pre-commit hooks. Denne artikkelen gir en omfattende guide til konfigurering av pre-commit hooks for JavaScript-prosjekter, slik at du kan automatisere kvalitetskontroller av koden før den i det hele tatt når ditt repository.

Hva er Pre-commit Hooks?

Git hooks er skript som Git utfører før eller etter hendelser som commit, push og receive. Pre-commit hooks kjøres spesifikt før en commit fullføres. De gir en avgjørende mulighet til å inspisere endringene som blir committet og forhindre commits som ikke oppfyller forhåndsdefinerte kvalitetsstandarder. Tenk på dem som portvakter som hindrer kode av lav kvalitet i å komme inn i kodebasen din.

Hvorfor bruke Pre-commit Hooks for JavaScript-kodekvalitet?

• Tidlig feiloppdagelse: Pre-commit hooks fanger opp problemer med kodekvalitet tidlig i utviklingsprosessen, og forhindrer dem i å spre seg videre. Dette er langt mer effektivt enn å oppdage problemer under kodevurderinger eller, enda verre, i produksjon.
• Automatisert kodeformatering: Sikre en konsekvent kodestil på tvers av teamet og prosjektet. Automatisert formatering forhindrer stilistiske debatter og bidrar til en mer lesbar kodebase.
• Redusert byrde ved kodevurdering: Ved å automatisk håndheve kodestandarder reduserer pre-commit hooks byrden på kodevurderere, slik at de kan fokusere på arkitektoniske beslutninger og kompleks logikk.
• Forbedret vedlikeholdbarhet av kode: En konsekvent kodebase av høy kvalitet er enklere å vedlikeholde og utvikle over tid.
• Håndhevet konsistens: De sikrer at all kode samsvarer med prosjektets standarder, uavhengig av hvilken utvikler som skrev den. Dette er spesielt viktig i distribuerte team som jobber fra forskjellige steder – for eksempel i London, Tokyo og Buenos Aires – der individuelle kodestiler kan variere.

Nøkkelverktøy for JavaScript-kodekvalitet

Flere verktøy brukes ofte i kombinasjon med pre-commit hooks for å automatisere kvalitetskontroller av JavaScript-kode:

• ESLint: En kraftig JavaScript-linter som identifiserer potensielle feil, håndhever kodestiler og bidrar til å forbedre lesbarheten i koden. Den støtter et bredt spekter av regler og er svært konfigurerbar.
• Prettier: En bestemt (opinionated) kodeformaterer som automatisk formaterer kode for å følge en konsekvent stil. Den støtter JavaScript, TypeScript, JSX og mange andre språk.
• Husky: Et verktøy som gjør det enkelt å administrere Git hooks. Det lar deg definere skript som skal kjøres på forskjellige stadier i Git-arbeidsflyten.
• lint-staged: Et verktøy som kun kjører lintere og formaterere på staged-filer, noe som betydelig fremskynder pre-commit-prosessen. Dette forhindrer unødvendige sjekker på uendrede filer.

Konfigurere Pre-commit Hooks: En trinn-for-trinn guide

Her er en detaljert guide til hvordan du setter opp pre-commit hooks for ditt JavaScript-prosjekt ved hjelp av Husky og lint-staged:

Trinn 1: Installer avhengigheter

Først, installer de nødvendige pakkene som utviklingsavhengigheter ved hjelp av npm eller yarn:

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

              
                Copy
              
            
          

Eller, med yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Trinn 2: Initialiser Husky

Husky forenkler prosessen med å administrere Git hooks. Initialiser det med følgende kommando:

            npx husky install
            

              
                Copy
              
            
          

Dette vil opprette en `.husky`-katalog i prosjektet ditt, som vil lagre dine Git hooks.

Trinn 3: Konfigurer Pre-commit Hook

Legg til en pre-commit hook med Husky:

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

              
                Copy
              
            
          

Denne kommandoen oppretter en `pre-commit`-fil i `.husky`-katalogen og legger til kommandoen `npx lint-staged` i den. Dette forteller Git at den skal kjøre lint-staged før hver commit.

Trinn 4: Konfigurer lint-staged

lint-staged lar deg kjøre lintere og formaterere kun på de stagede filene, noe som betydelig fremskynder pre-commit-prosessen. Opprett en `lint-staged.config.js` (eller `lint-staged.config.mjs` for ES-moduler) fil i prosjektets rotmappe og konfigurer den som følger:

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

              
                Copy
              
            
          

Denne konfigurasjonen forteller lint-staged at den skal kjøre ESLint og Prettier på alle stagede JavaScript- og TypeScript-filer. `--fix`-flagget i ESLint retter automatisk opp alle linting-feil som kan korrigeres automatisk, og `--write`-flagget i Prettier formaterer filene og overskriver dem med den formaterte koden.

Alternativt kan du definere konfigurasjonen direkte i din `package.json`-fil:

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

              
                Copy
              
            
          

Trinn 5: Konfigurer ESLint

Hvis du ikke allerede har gjort det, konfigurer ESLint for prosjektet ditt. Du kan opprette en ESLint-konfigurasjonsfil ved hjelp av følgende kommando:

            npx eslint --init
            

              
                Copy
              
            
          

Dette vil guide deg gjennom prosessen med å lage en ESLint-konfigurasjonsfil (`.eslintrc.js`, `.eslintrc.json` eller `.eslintrc.yml`) basert på prosjektets krav. Du kan velge mellom en rekke forhåndsdefinerte konfigurasjoner eller lage dine egne tilpassede regler.

Eksempel på `.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
              
            
          

Denne konfigurasjonen utvider de anbefalte ESLint-reglene, de anbefalte React-reglene, de anbefalte TypeScript-reglene, og integreres med Prettier. Den deaktiverer også `react/prop-types`-regelen og setter `no-unused-vars`-regelen til en advarsel.

Trinn 6: Konfigurer Prettier

Konfigurer Prettier ved å opprette en `.prettierrc.js` (eller `.prettierrc.json`, `.prettierrc.yml` eller `.prettierrc.toml`) fil i prosjektets rotmappe. Du kan tilpasse Prettiers formateringsalternativer for å matche prosjektets stilretningslinjer.

Eksempel på `.prettierrc.js`:

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

              
                Copy
              
            
          

Denne konfigurasjonen setter Prettier til å bruke enkle anførselstegn, ingen semikolon, etterfølgende kommaer, en linjebredde på 120 tegn og en tabulatorbredde på 2 mellomrom.

Alternativt kan du definere Prettier-konfigurasjonen inne i `package.json`:

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

              
                Copy
              
            
          

Trinn 7: Test konfigurasjonen din

For å teste konfigurasjonen, stage noen endringer og prøv å committe dem. For eksempel:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Hvis det er noen linting- eller formateringsproblemer, vil ESLint og Prettier automatisk rette dem (hvis mulig) eller rapportere feil. Hvis det rapporteres feil, vil committen bli avbrutt, slik at du kan rette problemene før du committer på nytt.

Avanserte konfigurasjonsalternativer

Bruke andre lintere og formaterere

Du kan enkelt integrere andre lintere og formaterere i din pre-commit hook-konfigurasjon. For eksempel kan du bruke Stylelint for å linte CSS- eller SASS-filer:

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

              
                Copy
              
            
          

Deretter oppdaterer du din `lint-staged.config.js`-fil for å inkludere Stylelint:

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

              
                Copy
              
            
          

Kjøre tester før commit

Du kan også kjøre enhetstestene dine som en del av pre-commit hooken. Dette bidrar til å sikre at koden din fungerer som den skal før den blir committet. Forutsatt at du bruker Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Oppdater din `lint-staged.config.js`-fil for å inkludere testkommandoen:

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

              
                Copy
              
            
          

Flagget `--findRelatedTests` forteller Jest at den kun skal kjøre tester som er relatert til de endrede filene, noe som betydelig fremskynder prosessen.

Hoppe over Pre-commit Hooks

I noen tilfeller kan det være du ønsker å midlertidig hoppe over pre-commit hooks. Du kan gjøre dette ved å bruke `--no-verify`-flagget med `git commit`-kommandoen:

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

              
                Copy
              
            
          

Det anbefales imidlertid generelt å unngå å hoppe over hooks med mindre det er absolutt nødvendig, da de spiller en avgjørende rolle i å opprettholde kodekvaliteten.

Feilsøking av vanlige problemer

• Hooks kjører ikke: Sørg for at Husky er riktig installert og initialisert, og at `.husky`-katalogen eksisterer i prosjektets rotmappe. Verifiser også at `pre-commit`-filen i `.husky`-katalogen er kjørbar.
• Linting-feil blir ikke rettet: Pass på at `--fix`-flagget brukes med ESLint, og at din ESLint-konfigurasjon er satt opp til å automatisk rette visse typer feil.
• Prettier formaterer ikke filer: Sørg for at `--write`-flagget brukes med Prettier, og at din Prettier-konfigurasjon er riktig satt opp.
• Treg pre-commit hooks: Bruk lint-staged for å kun kjøre lintere og formaterere på stagede filer. Vurder også å optimalisere ESLint- og Prettier-konfigurasjonene dine for å minimere antall regler og innstillinger som sjekkes.
• Konflikterende konfigurasjoner: Sørg for at ESLint- og Prettier-konfigurasjonene dine ikke er i konflikt med hverandre. Hvis de er det, må du kanskje justere en eller begge konfigurasjonene for å løse konfliktene. Vurder å bruke en delt konfigurasjon som `eslint-config-prettier` og `eslint-plugin-prettier` for å unngå konflikter.

Beste praksis for Pre-commit Hooks

• Hold hooks raske: Treg hooks kan påvirke utviklerproduktiviteten betydelig. Bruk lint-staged for å kun behandle stagede filer og optimaliser linter- og formateringskonfigurasjonene dine.
• Gi klare feilmeldinger: Når en hook feiler, gi klare og informative feilmeldinger for å veilede utviklere om hvordan de kan løse problemene.
• Automatiser så mye som mulig: Automatiser kodeformatering og linting for å minimere manuell innsats og sikre konsistens.
• Lær opp teamet ditt: Sørg for at alle teammedlemmer forstår formålet med pre-commit hooks og hvordan de brukes effektivt.
• Bruk en konsekvent konfigurasjon: Oppretthold en konsekvent konfigurasjon for ESLint, Prettier og andre verktøy på tvers av prosjektet. Dette vil bidra til å sikre at all kode blir formatert og lintet på samme måte. Vurder å bruke en delt konfigurasjonspakke som enkelt kan installeres og oppdateres på tvers av flere prosjekter.
• Test dine hooks: Test dine pre-commit hooks jevnlig for å sikre at de fungerer som de skal og at de ikke forårsaker uventede problemer.

Globale hensyn

Når du jobber i globalt distribuerte team, bør du vurdere følgende:

• Konsistente verktøyversjoner: Sørg for at alle teammedlemmer bruker de samme versjonene av ESLint, Prettier, Husky og lint-staged. Dette kan oppnås ved å spesifisere versjonene i `package.json`-filen og bruke en pakkebehandler som npm eller yarn for å installere avhengighetene.
• Kryssplattform-kompatibilitet: Test dine pre-commit hooks på forskjellige operativsystemer (Windows, macOS, Linux) for å sikre at de fungerer korrekt på alle plattformer. Bruk kryssplattform-verktøy og -kommandoer når det er mulig.
• Tidssoneforskjeller: Vær oppmerksom på tidssoneforskjeller når du kommuniserer med teammedlemmer om problemer med pre-commit hooks. Gi klare instruksjoner og eksempler for å hjelpe dem med å løse problemene raskt.
• Språkstøtte: Hvis prosjektet ditt involverer arbeid med flere språk, sørg for at dine pre-commit hooks støtter alle språkene som brukes i prosjektet. Det kan være nødvendig å installere ekstra lintere og formaterere for hvert språk.

Konklusjon

Implementering av pre-commit hooks er en effektiv måte å håndheve kodekvalitet, forbedre teamsamarbeid og redusere vedlikeholdskostnader i JavaScript-prosjekter. Ved å integrere verktøy som ESLint, Prettier, Husky og lint-staged, kan du automatisere kodeformatering, linting og testing, og dermed sikre at kun kode av høy kvalitet blir committet til ditt repository. Ved å følge trinnene i denne guiden, kan du sette opp en robust kvalitetskontroll som vil hjelpe deg med å bygge renere, mer vedlikeholdbare og mer pålitelige JavaScript-applikasjoner. Omfavn denne praksisen og løft teamets utviklingsflyt i dag.