Git hooks настройка

Git hooks — это скрипты, которые автоматически выполняются при определённых событиях в Git, таких как коммиты, пуши или изменения веток. Они позволяют автоматизировать проверки кода, линтинг, тестирование и другие процессы, повышая качество разработки и стабильность проекта. В контексте проектов на Vue.js Git hooks широко применяются для интеграции с инструментами вроде ESLint, Prettier, Jest и Cypress.

Типы Git Hooks

Git разделяет хуки на две категории: клиентские и серверные.

  • Клиентские хуки выполняются на локальной машине разработчика:

    • pre-commit — запускается перед фиксацией коммита. Идеально подходит для линтинга и проверки тестов.
    • prepare-commit-msg — модифицирует сообщение коммита перед его созданием.
    • commit-msg — проверяет формат сообщения коммита (например, соблюдение Conventional Commits).
    • post-commit — выполняется сразу после коммита, может использоваться для уведомлений или синхронизации данных.

  • Серверные хуки запускаются на удалённом репозитории:

    • pre-receive и update — проверяют входящие изменения до их принятия на сервере.
    • post-receive — выполняется после успешного пуша, используется для деплоя или CI/CD.

Подключение хуков через Husky

Husky — популярная библиотека для управления Git hooks в проектах на Node.js и Vue.js. Она позволяет хранить хуки в виде npm-скриптов, что упрощает их настройку и версионирование.

Установка Husky
npm install husky --save-dev
Инициализация Husky
npx husky install

После этого в проекте создаётся папка .husky, где будут храниться скрипты хуков. Для автоматической установки хуков при установке зависимостей можно добавить в package.json:

{
  "scripts": {
    "prepare": "husky install"
  }
}
Создание хуков

Для создания pre-commit хука выполняется команда:

npx husky add .husky/pre-commit "npm run lint"

Здесь npm run lint запускает линтер (например, ESLint) для проверки всех изменённых файлов перед коммитом. Можно добавлять несколько команд через &&:

npx husky add .husky/pre-commit "npm run lint && npm test"

Настройка линтинга и форматирования

В проектах Vue.js часто используются ESLint и Prettier. Их интеграция с Git hooks позволяет предотвращать попадание некорректного кода в репозиторий.

Пример скрипта в package.json:

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write 'src/**/*.{js,vue,css,scss}'"
  }
}

С этим скриптом можно настроить pre-commit так, чтобы выполнялся линтинг и автоформатирование:

npx husky add .husky/pre-commit "npm run lint && npm run format"

Проверка сообщений коммита

Для поддержания единого стиля сообщений коммитов используют commit-msg hook. Он проверяет соблюдение правил Conventional Commits:

npx husky add .husky/commit-msg 'npx commitlint --edit "$1"'

В package.json добавляется конфигурация commitlint:

{
  "devDependencies": {
    "@commitlint/cli": "^17.0.0",
    "@commitlint/config-conventional": "^17.0.0"
  },
  "commitlint": {
    "extends": ["@commitlint/config-conventional"]
  }
}

Интеграция с тестированием

Для проектов на Vue.js важно запускать тесты перед коммитом. Используется pre-commit hook с Jest или Vue Test Utils:

npx husky add .husky/pre-commit "npm run test:unit"

Скрипт в package.json:

{
  "scripts": {
    "test:unit": "jest --coverage"
  }
}

Таким образом, Git hooks обеспечивают контроль качества кода на всех этапах разработки, предотвращают ошибки и помогают соблюдать стандарты кодирования. Для Vue.js проектов они становятся критически важными при командной разработке, интеграции CI/CD и поддержании стабильности продукта.

Оглавление