Что такое хуки git?

Перехватчики Git - это задачи, на выполнение которых мы можем положиться git на определенной фазе потока git.

Допустим, вы хотите как-то проверить код и отформатировать его для себя (пример впереди)

Если вы хотите больше опираться, отметьте здесь и здесь.

Использование хуков git в проектах на основе npm

Есть библиотека под названием Husky, которая позволяет нам легко внедрять githooks. Давай сделаем это.

Установите хаски в качестве зависимости разработчика: npm install husky --save-dev. Husky установит git-хуки в папку .git/hooks (вы можете проверить сгенерированные файлы).

Самая простая реализация хаски (согласно версии 1.3.1) - это поместить раздел в ваш package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "some cmd",
      "pre-push": "some cmd && another cmd",
      "...": "..."
    }
  }
}

В этом примере some cmd будет выполняться перед каждой фиксацией, а some cmd && another cmd будет выполняться перед нажатием.

Пример использования

Давайте посмотрим, как githooks и хаски могут помочь нам улучшить наш код на реальных примерах.

Код форматирования с использованием prettier

  1. Установите prettier как зависимость для разработчиков: npm install prettier --save-dev
  2. Создайте .prettierrc файл в корне вашего проекта с помощью:
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

3. Добавьте сценарий в свой package.json: "format": "prettier --config .prettierrc --write '**/*.js'" (вы можете использовать шаблон глобуса, чтобы воздействовать только на интересующий вас файл).

4. Теперь давайте настроим хаски, чтобы форматировать файлы для нас перед каждой фиксацией.

"husky": {
  "hooks": {
    "pre-commit": "npm run format && git add ."
  }
}

Мы даем указание запустить npm run format и добавить все неустановленные файлы. После этого он зафиксирует все файлы.

Улучшение предыдущего варианта использования

Предыдущий вариант использования распространяется на весь проект, форматирует и обрабатывает измененные файлы.

Мы можем улучшить, запустив скрипт форматирования над измененными поэтапными файлами: Введение lint-staged

  1. Установить lint-staged: npm install lint-staged --save-dev
  2. Примените эти изменения к вашему package.json файлу. Теперь за выполнение команд будет отвечать lint-staged.
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": [
    "prettier --config .prettierrc --write",
    "git add"
  ]
}

lint-staged использует шаблоны глобусов для сопоставления файлов и применения инструкций.

ДОПОЛНИТЕЛЬНО: Добавьте eslint в конвейер.

Eslint проверит наш код на наличие ошибок и (при желании) исправит их.

  1. Установить eslint: npm install eslint --save-dev
  2. Создайте файл .eslintrc в корне вашего проекта с помощью:
{
  "env": {
    "node": true
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "never"],
    "no-console": ["warn", { "allow": ["info", "error"] }],
    "arrow-parens": ["error", "as-needed"]
  }
}

3. Необязательно: добавьте сценарий в свой package.json: "lint": eslint --config .eslintrc --fix '**/*.js'" (вы можете использовать шаблон глобуса, чтобы воздействовать только на интересующий вас файл).

Важное примечание: исправьте все ошибки линтинга перед тем, как начать коммит файлов, потому что eslint фактически предотвратит фиксацию, если обнаружит ошибки: npm run lint и исправит все оставшиеся ошибки.

4. Добавьте в игру eslint:

"lint-staged": {
  "*.js": [
    "eslint --config .eslintrc --fix",
    "prettier --config .prettierrc --write",
    "git add"
  ]
}

Теперь ваш код будет проверен перед тем, как попасть в исходное репо.

Спасибо за чтение.