Kvalitetsgrindar för JavaScript-kod: Bemästra konfigurationen av pre-commit-hooks

I den ständigt föränderliga världen av mjukvaruutveckling är det av yttersta vikt att upprätthålla hög kodkvalitet. Ren, välformaterad och felfri kod minskar inte bara underhållskostnaderna utan främjar också samarbete och påskyndar utvecklingscykler. En kraftfull teknik för att upprätthålla kodkvalitet är implementeringen av kvalitetsgrindar med hjälp av pre-commit-hooks. Denna artikel ger en omfattande guide till att konfigurera pre-commit-hooks för JavaScript-projekt, vilket gör att du kan automatisera kodkvalitetskontroller innan koden ens når ditt repository.

Vad är pre-commit-hooks?

Git-hooks är skript som Git kör före eller efter händelser som commit, push och receive. Specifikt körs pre-commit-hooks innan en commit slutförs. De erbjuder en avgörande möjlighet att inspektera de ändringar som ska committas och förhindra commits som inte uppfyller fördefinierade kvalitetsstandarder. Se dem som grindvakter som förhindrar lågkvalitativ kod från att komma in i din kodbas.

Varför använda pre-commit-hooks för JavaScript-kodkvalitet?

• Tidig felupptäckt: Pre-commit-hooks fångar upp problem med kodkvaliteten tidigt i utvecklingsprocessen och förhindrar att de sprids vidare. Detta är mycket effektivare än att upptäcka problem under kodgranskningar eller, ännu värre, i produktion.
• Automatiserad kodformatering: Säkerställ en konsekvent kodstil i hela teamet och projektet. Automatisk formatering förhindrar stilistiska debatter och bidrar till en mer läsbar kodbas.
• Minskad börda vid kodgranskning: Genom att automatiskt upprätthålla kodningsstandarder minskar pre-commit-hooks bördan för kodgranskare, vilket gör att de kan fokusera på arkitekturbeslut och komplex logik.
• Förbättrad underhållbarhet av kod: En konsekvent och högkvalitativ kodbas är lättare att underhålla och utveckla över tid.
• Påtvingad enhetlighet: De säkerställer att all kod följer projektets standarder, oavsett vilken utvecklare som skrev den. Detta är särskilt viktigt i distribuerade team som arbetar från olika platser – säg, London, Tokyo och Buenos Aires – där individuella kodstilar kan variera.

Viktiga verktyg för JavaScript-kodkvalitet

Flera verktyg används ofta i samband med pre-commit-hooks för att automatisera kvalitetskontroller av JavaScript-kod:

• ESLint: En kraftfull JavaScript-linter som identifierar potentiella fel, upprätthåller kodstilar och hjälper till att förbättra kodens läsbarhet. Den stöder ett brett utbud av regler och är mycket konfigurerbar.
• Prettier: En åsiktsdriven kodformaterare som automatiskt formaterar kod för att följa en konsekvent stil. Den stöder JavaScript, TypeScript, JSX och många andra språk.
• Husky: Ett verktyg som gör det enkelt att hantera Git-hooks. Det låter dig definiera skript som kommer att köras i olika skeden av Git-arbetsflödet.
• lint-staged: Ett verktyg som kör linters och formaterare endast på 'staged' filer, vilket avsevärt påskyndar pre-commit-processen. Detta förhindrar onödiga kontroller av oförändrade filer.

Konfigurera pre-commit-hooks: En steg-för-steg-guide

Här är en detaljerad guide om hur du ställer in pre-commit-hooks för ditt JavaScript-projekt med Husky och lint-staged:

Steg 1: Installera beroenden

Installera först de nödvändiga paketen som utvecklingsberoenden med 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
              
            
          

Steg 2: Initiera Husky

Husky förenklar processen att hantera Git-hooks. Initiera det med följande kommando:

            npx husky install
            

              
                Copy
              
            
          

Detta kommer att skapa en `.husky`-katalog i ditt projekt, som kommer att lagra dina Git-hooks.

Steg 3: Konfigurera pre-commit-hook

Lägg till en pre-commit-hook med Husky:

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

              
                Copy
              
            
          

Detta kommando skapar en `pre-commit`-fil i `.husky`-katalogen och lägger till kommandot `npx lint-staged` i den. Detta talar om för Git att köra lint-staged före varje commit.

Steg 4: Konfigurera lint-staged

lint-staged låter dig köra linters och formaterare endast på de 'staged' filerna, vilket avsevärt påskyndar pre-commit-processen. Skapa en `lint-staged.config.js` (eller `lint-staged.config.mjs` för ES-moduler) fil i din projekt-rot och konfigurera den enligt följande:

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

              
                Copy
              
            
          

Denna konfiguration talar om för lint-staged att köra ESLint och Prettier på alla 'staged' JavaScript- och TypeScript-filer. `--fix`-flaggan i ESLint korrigerar automatiskt alla lintingfel som kan korrigeras automatiskt, och `--write`-flaggan i Prettier formaterar filerna och skriver över dem med den formaterade koden.

Alternativt kan du definiera konfigurationen direkt i din `package.json`-fil:

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

              
                Copy
              
            
          

Steg 5: Konfigurera ESLint

Om du inte redan har gjort det, konfigurera ESLint för ditt projekt. Du kan skapa en ESLint-konfigurationsfil med följande kommando:

            npx eslint --init
            

              
                Copy
              
            
          

Detta guidar dig genom processen att skapa en ESLint-konfigurationsfil (`.eslintrc.js`, `.eslintrc.json`, eller `.eslintrc.yml`) baserat på ditt projekts krav. Du kan välja mellan en mängd fördefinierade konfigurationer eller skapa dina egna anpassade regler.

Exempel 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
              
            
          

Denna konfiguration utökar de rekommenderade ESLint-reglerna, de rekommenderade React-reglerna, de rekommenderade TypeScript-reglerna och integreras med Prettier. Den inaktiverar också `react/prop-types`-regeln och sätter `no-unused-vars`-regeln till en varning.

Steg 6: Konfigurera Prettier

Konfigurera Prettier genom att skapa en `.prettierrc.js` (eller `.prettierrc.json`, `.prettierrc.yml`, eller `.prettierrc.toml`) fil i din projekt-rot. Du kan anpassa Prettiers formateringsalternativ för att matcha ditt projekts stilriktlinjer.

Exempel på `.prettierrc.js`:

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

              
                Copy
              
            
          

Denna konfiguration ställer in Prettier att använda enkla citattecken, inga semikolon, avslutande kommatecken, en utskriftsbredd på 120 tecken och en tabbredd på 2 blanksteg.

Alternativt kan du definiera Prettier-konfigurationen inuti `package.json`:

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

              
                Copy
              
            
          

Steg 7: Testa din konfiguration

För att testa din konfiguration, 'stage'a några ändringar och försök att committa dem. Till exempel:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Testa pre-commit-hook"
            

              
                Copy
              
            
          

Om det finns några linting- eller formateringsproblem kommer ESLint och Prettier automatiskt att åtgärda dem (om möjligt) eller rapportera fel. Om fel rapporteras kommer committen att avbrytas, vilket gör att du kan åtgärda problemen innan du committar igen.

Avancerade konfigurationsalternativ

Använda olika linters och formaterare

Du kan enkelt integrera andra linters och formaterare i din konfiguration för pre-commit-hooks. Du kan till exempel använda Stylelint för att linta CSS- eller SASS-filer:

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

              
                Copy
              
            
          

Uppdatera sedan din `lint-staged.config.js`-fil för att inkludera Stylelint:

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

              
                Copy
              
            
          

Köra tester före commit

Du kan också köra dina enhetstester som en del av pre-commit-hooken. Detta hjälper till att säkerställa att din kod fungerar korrekt innan den committas. Om vi antar att du använder Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Uppdatera din `lint-staged.config.js`-fil för att inkludera testkommandot:

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

              
                Copy
              
            
          

`--findRelatedTests`-flaggan talar om för Jest att endast köra tester som är relaterade till de ändrade filerna, vilket avsevärt påskyndar processen.

Hoppa över pre-commit-hooks

I vissa fall kanske du vill hoppa över pre-commit-hooks tillfälligt. Du kan göra detta genom att använda `--no-verify`-flaggan med `git commit`-kommandot:

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

              
                Copy
              
            
          

Det rekommenderas dock generellt att undvika att hoppa över hooks om det inte är absolut nödvändigt, eftersom de spelar en avgörande roll för att upprätthålla kodkvaliteten.

Felsökning av vanliga problem

• Hooks körs inte: Se till att Husky är korrekt installerat och initierat, och att `.husky`-katalogen finns i din projekt-rot. Verifiera också att `pre-commit`-filen i `.husky`-katalogen är körbar.
• Lintingfel korrigeras inte: Se till att `--fix`-flaggan används med ESLint, och att din ESLint-konfiguration är inställd för att automatiskt korrigera vissa typer av fel.
• Prettier formaterar inte filer: Se till att `--write`-flaggan används med Prettier, och att din Prettier-konfiguration är korrekt inställd.
• Långsamma pre-commit-hooks: Använd lint-staged för att endast köra linters och formaterare på 'staged' filer. Överväg också att optimera dina ESLint- och Prettier-konfigurationer för att minimera antalet regler och inställningar som kontrolleras.
• Konflikterande konfigurationer: Se till att dina ESLint- och Prettier-konfigurationer inte står i konflikt med varandra. Om de gör det kan du behöva justera en eller båda konfigurationerna för att lösa konflikterna. Överväg att använda en delad konfiguration som `eslint-config-prettier` och `eslint-plugin-prettier` för att undvika konflikter.

Bästa praxis för pre-commit-hooks

• Håll hooks snabba: Långsamma hooks kan avsevärt påverka utvecklarnas produktivitet. Använd lint-staged för att endast bearbeta 'staged' filer och optimera dina linter- och formaterarkonfigurationer.
• Ge tydliga felmeddelanden: När en hook misslyckas, ge tydliga och informativa felmeddelanden för att vägleda utvecklare om hur de ska åtgärda problemen.
• Automatisera så mycket som möjligt: Automatisera kodformatering och linting för att minimera manuellt arbete och säkerställa enhetlighet.
• Utbilda ditt team: Se till att alla teammedlemmar förstår syftet med pre-commit-hooks och hur man använder dem effektivt.
• Använd en enhetlig konfiguration: Upprätthåll en konsekvent konfiguration för ESLint, Prettier och andra verktyg i hela ditt projekt. Detta hjälper till att säkerställa att all kod formateras och lintas på samma sätt. Överväg att använda ett delat konfigurationspaket som enkelt kan installeras och uppdateras över flera projekt.
• Testa dina hooks: Testa regelbundet dina pre-commit-hooks för att säkerställa att de fungerar korrekt och att de inte orsakar några oväntade problem.

Globala överväganden

När du arbetar i globalt distribuerade team, överväg följande:

• Enhetliga verktygsversioner: Se till att alla teammedlemmar använder samma versioner av ESLint, Prettier, Husky och lint-staged. Detta kan uppnås genom att specificera versionerna i din `package.json`-fil och använda en pakethanterare som npm eller yarn för att installera beroendena.
• Plattformsoberoende kompatibilitet: Testa dina pre-commit-hooks på olika operativsystem (Windows, macOS, Linux) för att säkerställa att de fungerar korrekt på alla plattformar. Använd plattformsoberoende verktyg och kommandon när det är möjligt.
• Tidsskillnader: Var medveten om tidsskillnader när du kommunicerar med teammedlemmar om problem med pre-commit-hooks. Ge tydliga instruktioner och exempel för att hjälpa dem att lösa problemen snabbt.
• Språkstöd: Om ditt projekt innebär arbete med flera språk, se till att dina pre-commit-hooks stöder alla språk som används i projektet. Du kan behöva installera ytterligare linters och formaterare för varje språk.

Slutsats

Att implementera pre-commit-hooks är ett effektivt sätt att upprätthålla kodkvalitet, förbättra teamsamarbete och minska underhållskostnader i JavaScript-projekt. Genom att integrera verktyg som ESLint, Prettier, Husky och lint-staged kan du automatisera kodformatering, linting och testning, vilket säkerställer att endast högkvalitativ kod committas till ditt repository. Genom att följa stegen i denna guide kan du sätta upp en robust kvalitetsgrind som hjälper dig att bygga renare, mer underhållbara och mer tillförlitliga JavaScript-applikationer. Omfamna denna praxis och lyft ditt teams utvecklingsflöde idag.