JavaScript Гейтове за Качество на Кода: Овладяване на Конфигурацията на Pre-commit Hook-ове

В постоянно развиващия се свят на софтуерната разработка поддържането на високо качество на кода е от първостепенно значение. Чистият, добре форматиран и без бъгове код не само намалява разходите за поддръжка, но също така насърчава сътрудничеството и ускорява циклите на разработка. Една мощна техника за налагане на качество на кода е внедряването на гейтове за качество на кода, използващи pre-commit hook-ове. Тази статия предоставя изчерпателно ръководство за конфигуриране на pre-commit hook-ове за JavaScript проекти, което ви позволява да автоматизирате проверките за качество на кода, преди той дори да достигне до вашето хранилище.

Какво представляват Pre-commit Hook-овете?

Git hook-овете са скриптове, които Git изпълнява преди или след събития като commit, push и receive. Pre-commit hook-овете, по-конкретно, се изпълняват преди финализирането на commit-а. Те предлагат решаваща възможност за инспектиране на промените, които се commit-ват, и за предотвратяване на commit-и, които не отговарят на предварително определени стандарти за качество. Мислете за тях като за пазачи, които не позволяват на нискокачествен код да влезе във вашата кодова база.

Защо да използваме Pre-commit Hook-ове за качество на JavaScript кода?

• Ранно откриване на грешки: Pre-commit hook-овете улавят проблеми с качеството на кода в ранен етап от процеса на разработка, предотвратявайки по-нататъшното им разпространение. Това е много по-ефективно от откриването на проблеми по време на преглед на кода или, още по-лошо, в продукционна среда.
• Автоматизирано форматиране на кода: Осигурете последователен стил на кода в целия екип и проект. Автоматизираното форматиране предотвратява стилистични дебати и допринася за по-четима кодова база.
• Намалено натоварване при преглед на кода: Чрез автоматично налагане на стандарти за кодиране, pre-commit hook-овете намаляват натоварването на хората, които преглеждат кода, като им позволяват да се съсредоточат върху архитектурни решения и сложна логика.
• Подобрена поддръжка на кода: Последователната и висококачествена кодова база е по-лесна за поддръжка и развитие с течение на времето.
• Наложена последователност: Те гарантират, че целият код отговаря на стандартите на проекта, независимо от разработчика, който го е написал. Това е особено важно в разпределени екипи, работещи от различни места – да речем Лондон, Токио и Буенос Айрес – където индивидуалните стилове на кодиране могат да варират.

Ключови инструменти за качество на JavaScript кода

Няколко инструмента се използват често в комбинация с pre-commit hook-ове за автоматизиране на проверките за качество на JavaScript кода:

• ESLint: Мощен JavaScript линтер, който идентифицира потенциални грешки, налага стилове на кодиране и помага за подобряване на четимостта на кода. Той поддържа широк набор от правила и е силно конфигурируем.
• Prettier: „Упорит“ (opinionated) форматер на код, който автоматично форматира кода, за да се придържа към последователен стил. Поддържа JavaScript, TypeScript, JSX и много други езици.
• Husky: Инструмент, който улеснява управлението на Git hook-ове. Той ви позволява да дефинирате скриптове, които ще се изпълняват на различни етапи от работния процес на Git.
• lint-staged: Инструмент, който изпълнява линтери и форматери само върху стейджнатите (staged) файлове, като значително ускорява процеса pre-commit. Това предотвратява ненужни проверки на непроменени файлове.

Конфигуриране на Pre-commit Hook-ове: Ръководство стъпка по стъпка

Ето подробно ръководство как да настроите pre-commit hook-ове за вашия JavaScript проект, използвайки Husky и lint-staged:

Стъпка 1: Инсталиране на зависимости

Първо, инсталирайте необходимите пакети като зависимости за разработка (development dependencies) с помощта на npm или yarn:

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

              
                Copy
              
            
          

Или, използвайки yarn:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

Стъпка 2: Инициализиране на Husky

Husky опростява процеса на управление на Git hook-ове. Инициализирайте го, като използвате следната команда:

            npx husky install
            

              
                Copy
              
            
          

Това ще създаде директория `.husky` във вашия проект, която ще съхранява вашите Git hook-ове.

Стъпка 3: Конфигуриране на Pre-commit Hook

Добавете pre-commit hook с помощта на Husky:

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

              
                Copy
              
            
          

Тази команда създава файл `pre-commit` в директорията `.husky` и добавя към него командата `npx lint-staged`. Това казва на Git да изпълнява lint-staged преди всеки commit.

Стъпка 4: Конфигуриране на lint-staged

lint-staged ви позволява да изпълнявате линтери и форматери само върху стейджнатите файлове, което значително ускорява процеса pre-commit. Създайте файл `lint-staged.config.js` (или `lint-staged.config.mjs` за ES модули) в основната директория на проекта си и го конфигурирайте по следния начин:

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

              
                Copy
              
            
          

Тази конфигурация казва на lint-staged да изпълни ESLint и Prettier на всички стейджнати JavaScript и TypeScript файлове. Флагът `--fix` в ESLint автоматично коригира всички грешки при линтинга, които могат да бъдат коригирани автоматично, а флагът `--write` в Prettier форматира файловете и ги презаписва с форматирания код.

Алтернативно, можете да дефинирате конфигурацията директно във вашия `package.json` файл:

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

              
                Copy
              
            
          

Стъпка 5: Конфигуриране на ESLint

Ако все още не сте го направили, конфигурирайте ESLint за вашия проект. Можете да създадете конфигурационен файл на ESLint, като използвате следната команда:

            npx eslint --init
            

              
                Copy
              
            
          

Това ще ви преведе през процеса на създаване на конфигурационен файл на ESLint (`.eslintrc.js`, `.eslintrc.json` или `.eslintrc.yml`) въз основа на изискванията на вашия проект. Можете да избирате от разнообразие от предварително дефинирани конфигурации или да създадете свои собствени правила.

Примерен `.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
              
            
          

Тази конфигурация разширява препоръчителните правила на ESLint, препоръчителните правила на React, препоръчителните правила на TypeScript и се интегрира с Prettier. Тя също така деактивира правилото `react/prop-types` и задава правилото `no-unused-vars` като предупреждение.

Стъпка 6: Конфигуриране на Prettier

Конфигурирайте Prettier, като създадете файл `.prettierrc.js` (или `.prettierrc.json`, `.prettierrc.yml`, или `.prettierrc.toml`) в основната директория на проекта. Можете да персонализирате опциите за форматиране на Prettier, за да съответстват на стиловите насоки на вашия проект.

Примерен `.prettierrc.js`:

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

              
                Copy
              
            
          

Тази конфигурация настройва Prettier да използва единични кавички, без точки и запетаи, висящи запетаи, ширина на печат от 120 символа и ширина на таба от 2 интервала.

Алтернативно, можете да дефинирате конфигурацията на Prettier вътре в `package.json`:

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

              
                Copy
              
            
          

Стъпка 7: Тествайте вашата конфигурация

За да тествате конфигурацията си, стейджнете някои промени и се опитайте да ги commit-нете. Например:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

Ако има някакви проблеми с линтинга или форматирането, ESLint и Prettier автоматично ще ги коригират (ако е възможно) или ще докладват грешки. Ако бъдат докладвани грешки, commit-ът ще бъде прекъснат, което ще ви позволи да отстраните проблемите, преди да commit-нете отново.

Разширени опции за конфигурация

Използване на различни линтери и форматери

Можете лесно да интегрирате други линтери и форматери във вашата конфигурация на pre-commit hook-а. Например, можете да използвате Stylelint за линтинг на CSS или SASS файлове:

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

              
                Copy
              
            
          

След това актуализирайте вашия `lint-staged.config.js` файл, за да включите Stylelint:

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

              
                Copy
              
            
          

Изпълнение на тестове преди Commit

Можете също така да изпълнявате вашите unit тестове като част от pre-commit hook-а. Това помага да се гарантира, че кодът ви работи правилно, преди да бъде commit-нат. Ако приемем, че използвате Jest:

            npm install --save-dev jest
            

              
                Copy
              
            
          

Актуализирайте вашия `lint-staged.config.js` файл, за да включите командата за тест:

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

              
                Copy
              
            
          

Флагът `--findRelatedTests` казва на Jest да изпълнява само тестове, които са свързани с променените файлове, което значително ускорява процеса.

Пропускане на Pre-commit Hook-ове

В някои случаи може да искате временно да пропуснете pre-commit hook-овете. Можете да направите това, като използвате флага `--no-verify` с командата `git commit`:

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

              
                Copy
              
            
          

Въпреки това, обикновено се препоръчва да се избягва пропускането на hook-овете, освен ако не е абсолютно необходимо, тъй като те играят решаваща роля в поддържането на качеството на кода.

Отстраняване на често срещани проблеми

• Hook-овете не се изпълняват: Уверете се, че Husky е правилно инсталиран и инициализиран и че директорията `.husky` съществува в основната директория на вашия проект. Също така проверете дали файлът `pre-commit` в директорията `.husky` е изпълним.
• Грешките от линтинга не се коригират: Уверете се, че флагът `--fix` се използва с ESLint и че вашата конфигурация на ESLint е настроена да коригира автоматично определени видове грешки.
• Prettier не форматира файлове: Уверете се, че флагът `--write` се използва с Prettier и че вашата конфигурация на Prettier е правилно настроена.
• Бавни pre-commit hook-ове: Използвайте lint-staged, за да изпълнявате линтери и форматери само върху стейджнатите файлове. Също така обмислете оптимизиране на конфигурациите на ESLint и Prettier, за да сведете до минимум броя на правилата и настройките, които се проверяват.
• Конфликтни конфигурации: Уверете се, че вашите конфигурации на ESLint и Prettier не си противоречат. Ако го правят, може да се наложи да коригирате едната или и двете конфигурации, за да разрешите конфликтите. Обмислете използването на споделена конфигурация като `eslint-config-prettier` и `eslint-plugin-prettier` за избягване на конфликти.

Добри практики за Pre-commit Hook-ове

• Поддържайте hook-овете бързи: Бавните hook-ове могат значително да повлияят на производителността на разработчиците. Използвайте lint-staged, за да обработвате само стейджнати файлове, и оптимизирайте конфигурациите на линтера и форматера.
• Предоставяйте ясни съобщения за грешки: Когато даден hook се провали, предоставяйте ясни и информативни съобщения за грешки, които да насочват разработчиците как да отстранят проблемите.
• Автоматизирайте колкото е възможно повече: Автоматизирайте форматирането на кода и линтинга, за да сведете до минимум ръчните усилия и да осигурите последователност.
• Обучете екипа си: Уверете се, че всички членове на екипа разбират целта на pre-commit hook-овете и как да ги използват ефективно.
• Използвайте последователна конфигурация: Поддържайте последователна конфигурация за ESLint, Prettier и други инструменти в целия си проект. Това ще помогне да се гарантира, че целият код е форматиран и линтнат по един и същи начин. Обмислете използването на споделен конфигурационен пакет, който може лесно да се инсталира и актуализира в множество проекти.
• Тествайте вашите hook-ове: Редовно тествайте вашите pre-commit hook-ове, за да се уверите, че работят правилно и не причиняват неочаквани проблеми.

Глобални съображения

Когато работите в глобално разпределени екипи, вземете предвид следното:

• Последователни версии на инструментите: Уверете се, че всички членове на екипа използват едни и същи версии на ESLint, Prettier, Husky и lint-staged. Това може да се постигне чрез посочване на версиите във вашия `package.json` файл и използване на мениджър на пакети като npm или yarn за инсталиране на зависимостите.
• Междуплатформена съвместимост: Тествайте вашите pre-commit hook-ове на различни операционни системи (Windows, macOS, Linux), за да се уверите, че работят правилно на всички платформи. Използвайте междуплатформени инструменти и команди, когато е възможно.
• Разлики в часовите зони: Внимавайте за разликите в часовите зони, когато общувате с членовете на екипа относно проблеми с pre-commit hook-овете. Предоставяйте ясни инструкции и примери, за да им помогнете бързо да разрешат проблемите.
• Езикова поддръжка: Ако вашият проект включва работа с множество езици, уверете се, че вашите pre-commit hook-ове поддържат всички езици, използвани в проекта. Може да се наложи да инсталирате допълнителни линтери и форматери за всеки език.

Заключение

Внедряването на pre-commit hook-ове е ефективен начин за налагане на качество на кода, подобряване на екипното сътрудничество и намаляване на разходите за поддръжка в JavaScript проекти. Чрез интегриране на инструменти като ESLint, Prettier, Husky и lint-staged можете да автоматизирате форматирането на кода, линтинга и тестването, като гарантирате, че само висококачествен код се commit-ва във вашето хранилище. Като следвате стъпките, очертани в това ръководство, можете да настроите стабилен гейт за качество на кода, който ще ви помогне да създавате по-чисти, по-лесни за поддръжка и по-надеждни JavaScript приложения. Възприемете тази практика и издигнете работния процес на вашия екип на ново ниво още днес.