JavaScript-kvalitetskontroller: Mestring af konfigurationen af pre-commit hooks

I den konstant udviklende verden af softwareudvikling er det altafgørende at opretholde en høj kodekvalitet. Ren, velformateret og fejlfri kode reducerer ikke kun vedligeholdelsesomkostningerne, men fremmer også samarbejde og accelererer udviklingscyklusser. En effektiv teknik til at håndhæve kodekvalitet er implementeringen af kvalitetskontroller (code quality gates) ved hjælp af pre-commit hooks. Denne artikel giver en omfattende guide til konfiguration af pre-commit hooks for JavaScript-projekter, så du kan automatisere kodekvalitetstjek, før koden overhovedet når dit repository.

Hvad er pre-commit hooks?

Git hooks er scripts, som Git udfører før eller efter hændelser som commit, push og receive. Pre-commit hooks kører specifikt, før et commit færdiggøres. De giver en afgørende mulighed for at inspicere de ændringer, der bliver committet, og forhindre commits, der ikke opfylder foruddefinerede kvalitetsstandarder. Tænk på dem som portvagter, der forhindrer kode af lav kvalitet i at komme ind i din kodebase.

Hvorfor bruge pre-commit hooks til JavaScript-kodekvalitet?

• Tidlig fejlfinding: Pre-commit hooks fanger problemer med kodekvaliteten tidligt i udviklingsprocessen og forhindrer dem i at sprede sig yderligere. Dette er langt mere effektivt end at opdage problemer under kodegennemgang eller, endnu værre, i produktion.
• Automatiseret kodeformatering: Sikrer en konsistent kodestil på tværs af dit team og projekt. Automatiseret formatering forhindrer stilistiske debatter og bidrager til en mere læsbar kodebase.
• Mindre byrde ved kodegennemgang: Ved automatisk at håndhæve kodningsstandarder reducerer pre-commit hooks byrden for kodegennemgåere, hvilket giver dem mulighed for at fokusere på arkitektoniske beslutninger og kompleks logik.
• Forbedret vedligeholdelse af kode: En konsistent kodebase af høj kvalitet er lettere at vedligeholde og udvikle over tid.
• Gennemtunget konsistens: De sikrer, at al kode overholder projektets standarder, uanset hvilken udvikler der har skrevet den. Dette er især vigtigt i distribuerede teams, der arbejder fra forskellige steder – f.eks. London, Tokyo og Buenos Aires – hvor individuelle kodningsstile kan variere.

Vigtige værktøjer til JavaScript-kodekvalitet

Flere værktøjer bruges almindeligvis i forbindelse med pre-commit hooks til at automatisere JavaScript-kodekvalitetstjek:

• ESLint: En kraftfuld JavaScript linter, der identificerer potentielle fejl, håndhæver kodningsstile og hjælper med at forbedre kodens læsbarhed. Den understøtter en bred vifte af regler og er yderst konfigurerbar.
• Prettier: En meningsbaseret kodeformater, der automatisk formaterer kode til at overholde en konsistent stil. Den understøtter JavaScript, TypeScript, JSX og mange andre sprog.
• Husky: Et værktøj, der gør det nemt at administrere Git hooks. Det giver dig mulighed for at definere scripts, der vil blive udført på forskellige stadier af Git-workflowet.
• lint-staged: Et værktøj, der kun kører linters og formatters på staged filer, hvilket markant fremskynder pre-commit-processen. Dette forhindrer unødvendige tjek af uændrede filer.

Konfigurering af pre-commit hooks: En trin-for-trin guide

Her er en detaljeret guide til, hvordan du opsætter pre-commit hooks til dit JavaScript-projekt ved hjælp af Husky og lint-staged:

Trin 1: Installer afhængigheder

Først skal du installere de nødvendige pakker som udviklingsafhængigheder ved hjælp af npm eller yarn:

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

              
                Copy
              
            
          

Eller ved hjælp af yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Trin 2: Initialiser Husky

Husky forenkler processen med at administrere Git hooks. Initialiser det ved hjælp af følgende kommando:

            npx husky install
            

              
                Copy
              
            
          

Dette vil oprette en `.husky`-mappe i dit projekt, som vil gemme dine Git hooks.

Trin 3: Konfigurer pre-commit hook

Tilføj et pre-commit hook ved hjælp af Husky:

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

              
                Copy
              
            
          

Denne kommando opretter en `pre-commit`-fil i `.husky`-mappen og tilføjer kommandoen `npx lint-staged` til den. Dette fortæller Git at køre lint-staged før hvert commit.

Trin 4: Konfigurer lint-staged

lint-staged giver dig mulighed for kun at køre linters og formatters på de staged filer, hvilket markant fremskynder pre-commit-processen. Opret en `lint-staged.config.js` (eller `lint-staged.config.mjs` for ES-moduler) fil i roden af dit projekt og konfigurer den som følger:

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

              
                Copy
              
            
          

Denne konfiguration fortæller lint-staged at køre ESLint og Prettier på alle staged JavaScript- og TypeScript-filer. `--fix`-flaget i ESLint retter automatisk alle linting-fejl, der kan rettes automatisk, og `--write`-flaget i Prettier formaterer filerne og overskriver dem med den formaterede kode.

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

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

              
                Copy
              
            
          

Trin 5: Konfigurer ESLint

Hvis du ikke allerede har gjort det, skal du konfigurere ESLint til dit projekt. Du kan oprette en ESLint-konfigurationsfil ved hjælp af følgende kommando:

            npx eslint --init
            

              
                Copy
              
            
          

Dette vil guide dig gennem processen med at oprette en ESLint-konfigurationsfil (`.eslintrc.js`, `.eslintrc.json`, eller `.eslintrc.yml`) baseret på dit projekts krav. Du kan vælge mellem en række foruddefinerede konfigurationer eller oprette dine egne brugerdefinerede 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 konfiguration udvider de anbefalede ESLint-regler, de anbefalede React-regler, de anbefalede TypeScript-regler og integreres med Prettier. Den deaktiverer også `react/prop-types`-reglen og sætter `no-unused-vars`-reglen til en advarsel.

Trin 6: Konfigurer Prettier

Konfigurer Prettier ved at oprette en `.prettierrc.js` (eller `.prettierrc.json`, `.prettierrc.yml` eller `.prettierrc.toml`) fil i roden af dit projekt. Du kan tilpasse Prettiers formateringsindstillinger, så de passer til dit projekts stilretningslinjer.

Eksempel på `.prettierrc.js`:

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

              
                Copy
              
            
          

Denne konfiguration indstiller Prettier til at bruge enkelte anførselstegn, ingen semikolon, efterfølgende kommaer, en linjebredde på 120 tegn og en tabulatorbredde på 2 mellemrum.

Alternativt kan du definere Prettier-konfigurationen inde i `package.json`:

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

              
                Copy
              
            
          

Trin 7: Test din konfiguration

For at teste din konfiguration skal du stage nogle ændringer og forsøge at committe dem. For eksempel:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Hvis der er nogen linting- eller formateringsproblemer, vil ESLint og Prettier automatisk rette dem (hvis muligt) eller rapportere fejl. Hvis der rapporteres fejl, vil committet blive afbrudt, så du kan rette problemerne, før du committer igen.

Avancerede konfigurationsmuligheder

Brug af forskellige linters og formatters

Du kan nemt integrere andre linters og formatters i din pre-commit hook-konfiguration. For eksempel kan du bruge Stylelint til linting af CSS- eller SASS-filer:

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

              
                Copy
              
            
          

Opdater derefter din `lint-staged.config.js`-fil til at inkludere Stylelint:

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

              
                Copy
              
            
          

Kørsel af tests før commit

Du kan også køre dine enhedstests som en del af pre-commit hooket. Dette hjælper med at sikre, at din kode fungerer korrekt, før den bliver committet. Antaget at du bruger Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Opdater din `lint-staged.config.js`-fil til at inkludere testkommandoen:

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

              
                Copy
              
            
          

`--findRelatedTests`-flaget fortæller Jest kun at køre tests, der er relateret til de ændrede filer, hvilket markant fremskynder processen.

Spring pre-commit hooks over

I nogle tilfælde vil du måske midlertidigt springe pre-commit hooks over. Du kan gøre dette ved at bruge `--no-verify`-flaget med `git commit`-kommandoen:

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

              
                Copy
              
            
          

Det anbefales dog generelt at undgå at springe hooks over, medmindre det er absolut nødvendigt, da de spiller en afgørende rolle i at opretholde kodekvaliteten.

Fejlfinding af almindelige problemer

• Hooks kører ikke: Sørg for, at Husky er korrekt installeret og initialiseret, og at `.husky`-mappen findes i roden af dit projekt. Bekræft også, at `pre-commit`-filen i `.husky`-mappen er eksekverbar.
• Linting-fejl bliver ikke rettet: Sørg for, at `--fix`-flaget bruges med ESLint, og at din ESLint-konfiguration er sat op til automatisk at rette visse typer fejl.
• Prettier formaterer ikke filer: Sørg for, at `--write`-flaget bruges med Prettier, og at din Prettier-konfiguration er korrekt opsat.
• Langsomme pre-commit hooks: Brug lint-staged til kun at køre linters og formatters på staged filer. Overvej også at optimere dine ESLint- og Prettier-konfigurationer for at minimere antallet af regler og indstillinger, der tjekkes.
• Konfliktende konfigurationer: Sørg for, at dine ESLint- og Prettier-konfigurationer ikke er i konflikt med hinanden. Hvis de er, skal du muligvis justere en eller begge konfigurationer for at løse konflikterne. Overvej at bruge en delt konfiguration som `eslint-config-prettier` og `eslint-plugin-prettier` for at undgå konflikter.

Bedste praksis for pre-commit hooks

• Hold hooks hurtige: Langsomme hooks kan påvirke udviklerproduktiviteten markant. Brug lint-staged til kun at behandle staged filer og optimer dine linter- og formatter-konfigurationer.
• Giv klare fejlmeddelelser: Når et hook fejler, skal du give klare og informative fejlmeddelelser for at guide udviklere i, hvordan de løser problemerne.
• Automatiser så meget som muligt: Automatiser kodeformatering og linting for at minimere manuel indsats og sikre konsistens.
• Uddan dit team: Sørg for, at alle teammedlemmer forstår formålet med pre-commit hooks, og hvordan man bruger dem effektivt.
• Brug en konsistent konfiguration: Oprethold en konsistent konfiguration for ESLint, Prettier og andre værktøjer på tværs af dit projekt. Dette vil hjælpe med at sikre, at al kode formateres og linet på samme måde. Overvej at bruge en delt konfigurationspakke, der let kan installeres og opdateres på tværs af flere projekter.
• Test dine hooks: Test jævnligt dine pre-commit hooks for at sikre, at de fungerer korrekt, og at de ikke forårsager uventede problemer.

Globale overvejelser

Når du arbejder i globalt distribuerede teams, skal du overveje følgende:

• Konsistente værktøjsversioner: Sørg for, at alle teammedlemmer bruger de samme versioner af ESLint, Prettier, Husky og lint-staged. Dette kan opnås ved at specificere versionerne i din `package.json`-fil og bruge en pakkehåndtering som npm eller yarn til at installere afhængighederne.
• Kompatibilitet på tværs af platforme: Test dine pre-commit hooks på forskellige operativsystemer (Windows, macOS, Linux) for at sikre, at de fungerer korrekt på alle platforme. Brug værktøjer og kommandoer, der er kompatible på tværs af platforme, når det er muligt.
• Tidszoneforskelle: Vær opmærksom på tidszoneforskelle, når du kommunikerer med teammedlemmer om problemer med pre-commit hooks. Giv klare instruktioner og eksempler for at hjælpe dem med at løse problemerne hurtigt.
• Sprogunderstøttelse: Hvis dit projekt involverer arbejde med flere sprog, skal du sikre, at dine pre-commit hooks understøtter alle de sprog, der bruges i projektet. Du skal muligvis installere yderligere linters og formatters for hvert sprog.

Konklusion

Implementering af pre-commit hooks er en effektiv måde at håndhæve kodekvalitet, forbedre teamsamarbejde og reducere vedligeholdelsesomkostninger i JavaScript-projekter. Ved at integrere værktøjer som ESLint, Prettier, Husky og lint-staged kan du automatisere kodeformatering, linting og test, hvilket sikrer, at kun kode af høj kvalitet bliver committet til dit repository. Ved at følge trinene i denne guide kan du oprette en robust kvalitetskontrol, der vil hjælpe dig med at bygge renere, mere vedligeholdelsesvenlige og mere pålidelige JavaScript-applikationer. Omfavn denne praksis og løft dit teams udviklingsworkflow i dag.