Покращуйте якість вашого JavaScript-коду за допомогою pre-commit хуків. Дізнайтеся, як налаштувати та впровадити контроль якості для чистіших та легших у підтримці проєктів.
Контроль якості коду JavaScript: Досконале налаштування Pre-commit хуків
У світі розробки програмного забезпечення, що постійно розвивається, підтримка високої якості коду має першорядне значення. Чистий, добре відформатований та безпомилковий код не лише знижує витрати на обслуговування, але й сприяє співпраці та прискорює цикли розробки. Однією з потужних технік для забезпечення якості коду є впровадження контролю якості за допомогою pre-commit хуків. Ця стаття надає вичерпний посібник з налаштування pre-commit хуків для проєктів на JavaScript, що дозволить вам автоматизувати перевірки якості коду ще до того, як він потрапить до вашого репозиторію.
Що таке Pre-commit хуки?
Git-хуки — це скрипти, які Git виконує до або після таких подій, як commit, push та receive. Pre-commit хуки, зокрема, запускаються перед тим, як коміт буде завершено. Вони надають важливу можливість перевірити зміни, що комітяться, та запобігти комітам, які не відповідають попередньо визначеним стандартам якості. Вважайте їх воротарями, які не дозволяють низькоякісному коду потрапити у вашу кодову базу.
Навіщо використовувати Pre-commit хуки для якості коду JavaScript?
- Раннє виявлення помилок: Pre-commit хуки виявляють проблеми з якістю коду на ранніх етапах процесу розробки, запобігаючи їх подальшому поширенню. Це набагато ефективніше, ніж виявлення проблем під час огляду коду або, що ще гірше, у продакшені.
- Автоматичне форматування коду: Забезпечте послідовний стиль коду у вашій команді та проєкті. Автоматичне форматування запобігає стилістичним суперечкам і сприяє створенню більш читабельної кодової бази.
- Зменшення навантаження на огляд коду: Автоматично застосовуючи стандарти кодування, pre-commit хуки зменшують навантаження на рецензентів коду, дозволяючи їм зосередитися на архітектурних рішеннях та складній логіці.
- Покращена підтримка коду: Послідовну та високоякісну кодову базу легше підтримувати та розвивати з часом.
- Забезпечення послідовності: Вони гарантують, що весь код відповідає стандартам проєкту, незалежно від розробника, який його написав. Це особливо важливо в розподілених командах, що працюють з різних місць — скажімо, з Лондона, Токіо та Буенос-Айреса — де індивідуальні стилі кодування можуть відрізнятися.
Ключові інструменти для якості коду JavaScript
Кілька інструментів зазвичай використовуються разом з pre-commit хуками для автоматизації перевірок якості коду JavaScript:
- ESLint: Потужний лінтер для JavaScript, який виявляє потенційні помилки, забезпечує дотримання стилів кодування та допомагає покращити читабельність коду. Він підтримує широкий спектр правил і є дуже гнучким у налаштуванні.
- Prettier: Категоричний форматувальник коду, який автоматично форматує код відповідно до послідовного стилю. Він підтримує JavaScript, TypeScript, JSX та багато інших мов.
- Husky: Інструмент, який спрощує керування Git-хуками. Він дозволяє вам визначати скрипти, які будуть виконуватися на різних етапах робочого процесу Git.
- lint-staged: Інструмент, який запускає лінтери та форматувальники лише для файлів у staging-області, що значно прискорює процес pre-commit. Це запобігає непотрібним перевіркам незмінених файлів.
Налаштування Pre-commit хуків: Покрокова інструкція
Ось детальний посібник з налаштування pre-commit хуків для вашого JavaScript-проєкту за допомогою Husky та lint-staged:
Крок 1: Встановлення залежностей
Спочатку встановіть необхідні пакети як залежності для розробки, використовуючи npm або yarn:
npm install --save-dev husky lint-staged eslint prettier
Або, використовуючи yarn:
yarn add --dev husky lint-staged eslint prettier
Крок 2: Ініціалізація Husky
Husky спрощує процес керування Git-хуками. Ініціалізуйте його за допомогою наступної команди:
npx husky install
Це створить директорію `.husky` у вашому проєкті, де зберігатимуться ваші Git-хуки.
Крок 3: Налаштування Pre-commit хука
Додайте pre-commit хук за допомогою Husky:
npx husky add .husky/pre-commit "npx lint-staged"
Ця команда створює файл `pre-commit` у директорії `.husky` і додає до нього команду `npx lint-staged`. Це вказує Git запускати lint-staged перед кожним комітом.
Крок 4: Налаштування lint-staged
lint-staged дозволяє запускати лінтери та форматувальники лише для файлів у staging-області, що значно прискорює процес pre-commit. Створіть файл `lint-staged.config.js` (або `lint-staged.config.mjs` для ES модулів) у корені вашого проєкту та налаштуйте його наступним чином:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
Ця конфігурація вказує lint-staged запускати ESLint та Prettier для всіх JavaScript та TypeScript файлів у staging-області. Прапорець `--fix` в ESLint автоматично виправляє будь-які помилки лінтингу, які можна виправити автоматично, а прапорець `--write` в Prettier форматує файли та перезаписує їх відформатованим кодом.
Крім того, ви можете визначити конфігурацію безпосередньо у вашому файлі `package.json`:
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
]
}
}
Крок 5: Налаштування ESLint
Якщо ви ще цього не зробили, налаштуйте ESLint для вашого проєкту. Ви можете створити файл конфігурації ESLint за допомогою наступної команди:
npx eslint --init
Це проведе вас через процес створення файлу конфігурації 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'
}
};
Ця конфігурація розширює рекомендовані правила 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
};
Ця конфігурація налаштовує Prettier на використання одинарних лапок, відсутність крапки з комою, висячі коми, ширину рядка 120 символів та ширину табуляції у 2 пробіли.
Крім того, ви можете визначити конфігурацію Prettier у `package.json`:
{
"prettier": {
"semi": false,
"trailingComma": "all",
"singleQuote": true,
"printWidth": 120,
"tabWidth": 2
}
}
Крок 7: Тестування вашої конфігурації
Щоб протестувати вашу конфігурацію, додайте деякі зміни в staging-область і спробуйте їх закомітити. Наприклад:
git add .
git commit -m "Test pre-commit hook"
Якщо є будь-які проблеми з лінтингом або форматуванням, ESLint та Prettier автоматично виправлять їх (якщо це можливо) або повідомлять про помилки. Якщо повідомляється про помилки, коміт буде скасовано, що дозволить вам виправити проблеми перед повторною спробою коміту.
Розширені опції конфігурації
Використання різних лінтерів та форматерів
Ви можете легко інтегрувати інші лінтери та форматувальники у вашу конфігурацію pre-commit хуків. Наприклад, ви можете використовувати Stylelint для лінтингу файлів CSS або SASS:
npm install --save-dev stylelint stylelint-config-standard
Потім оновіть ваш файл `lint-staged.config.js`, щоб включити Stylelint:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'*.{css,scss}': ['stylelint --fix'],
};
Запуск тестів перед комітом
Ви також можете запускати ваші юніт-тести як частину pre-commit хука. Це допомагає переконатися, що ваш код працює коректно, перш ніж він буде закомічений. Припускаючи, що ви використовуєте Jest:
npm install --save-dev jest
Оновіть ваш файл `lint-staged.config.js`, щоб включити команду тестування:
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
'*.{css,scss}': ['stylelint --fix'],
};
Прапорець `--findRelatedTests` вказує Jest запускати лише тести, пов'язані зі зміненими файлами, що значно прискорює процес.
Пропуск Pre-commit хуків
У деяких випадках вам може знадобитися тимчасово пропустити pre-commit хуки. Ви можете зробити це, використовуючи прапорець `--no-verify` з командою `git commit`:
git commit --no-verify -m "Commit message"
Однак, зазвичай рекомендується уникати пропуску хуків, якщо це не є абсолютно необхідним, оскільки вони відіграють вирішальну роль у підтримці якості коду.
Вирішення поширених проблем
- Хуки не запускаються: Переконайтеся, що Husky правильно встановлено та ініціалізовано, і що директорія `.husky` існує в корені вашого проєкту. Також перевірте, чи файл `pre-commit` у директорії `.husky` є виконуваним.
- Помилки лінтингу не виправляються: Переконайтеся, що з ESLint використовується прапорець `--fix`, і що ваша конфігурація ESLint налаштована на автоматичне виправлення певних типів помилок.
- Prettier не форматує файли: Переконайтеся, що з Prettier використовується прапорець `--write`, і що ваша конфігурація Prettier налаштована правильно.
- Повільні pre-commit хуки: Використовуйте lint-staged, щоб запускати лінтери та форматувальники лише для файлів у staging-області. Також розгляньте можливість оптимізації ваших конфігурацій ESLint та Prettier, щоб мінімізувати кількість правил та налаштувань, що перевіряються.
- Конфліктуючі конфігурації: Переконайтеся, що ваші конфігурації ESLint та Prettier не конфліктують одна з одною. Якщо вони конфліктують, вам може знадобитися налаштувати одну або обидві конфігурації для вирішення конфліктів. Розгляньте використання спільної конфігурації, такої як `eslint-config-prettier` та `eslint-plugin-prettier`, щоб уникнути конфліктів.
Найкращі практики для Pre-commit хуків
- Зберігайте хуки швидкими: Повільні хуки можуть значно вплинути на продуктивність розробників. Використовуйте lint-staged, щоб обробляти лише файли в staging-області, та оптимізуйте конфігурації ваших лінтерів і форматувальників.
- Надавайте чіткі повідомлення про помилки: Коли хук зазнає невдачі, надавайте чіткі та інформативні повідомлення про помилки, щоб направити розробників, як виправити проблеми.
- Автоматизуйте якомога більше: Автоматизуйте форматування коду та лінтинг, щоб мінімізувати ручні зусилля та забезпечити послідовність.
- Навчайте свою команду: Переконайтеся, що всі члени команди розуміють мету pre-commit хуків та як ефективно їх використовувати.
- Використовуйте послідовну конфігурацію: Підтримуйте послідовну конфігурацію для ESLint, Prettier та інших інструментів у всьому вашому проєкті. Це допоможе забезпечити однакове форматування та лінтинг усього коду. Розгляньте можливість використання спільного конфігураційного пакета, який можна легко встановити та оновити в кількох проєктах.
- Тестуйте свої хуки: Регулярно тестуйте ваші pre-commit хуки, щоб переконатися, що вони працюють коректно і не викликають несподіваних проблем.
Глобальні аспекти
При роботі в глобально розподілених командах враховуйте наступне:
- Послідовні версії інструментів: Переконайтеся, що всі члени команди використовують однакові версії ESLint, Prettier, Husky та lint-staged. Цього можна досягти, вказавши версії у вашому файлі `package.json` та використовуючи менеджер пакетів, такий як npm або yarn, для встановлення залежностей.
- Кросплатформна сумісність: Тестуйте ваші pre-commit хуки на різних операційних системах (Windows, macOS, Linux), щоб переконатися, що вони працюють коректно на всіх платформах. Використовуйте кросплатформні інструменти та команди, де це можливо.
- Різниця в часових поясах: Пам'ятайте про різницю в часових поясах при спілкуванні з членами команди щодо проблем з pre-commit хуками. Надавайте чіткі інструкції та приклади, щоб допомогти їм швидко вирішити проблеми.
- Підтримка мов: Якщо ваш проєкт передбачає роботу з кількома мовами, переконайтеся, що ваші pre-commit хуки підтримують усі мови, що використовуються в проєкті. Вам може знадобитися встановити додаткові лінтери та форматувальники для кожної мови.
Висновок
Впровадження pre-commit хуків є ефективним способом забезпечення якості коду, покращення командної співпраці та зниження витрат на обслуговування в проєктах на JavaScript. Інтегруючи такі інструменти, як ESLint, Prettier, Husky та lint-staged, ви можете автоматизувати форматування коду, лінтинг та тестування, гарантуючи, що до вашого репозиторію потрапляє лише високоякісний код. Дотримуючись кроків, викладених у цьому посібнику, ви можете налаштувати надійний контроль якості коду, який допоможе вам створювати чистіші, легші в підтримці та надійніші JavaScript-додатки. Застосовуйте цю практику та вдосконалюйте робочий процес розробки вашої команди вже сьогодні.