Что такое хуки 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
- Установите prettier как зависимость для разработчиков:
npm install prettier --save-dev
- Создайте
.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
- Установить
lint-staged
:npm install lint-staged --save-dev
- Примените эти изменения к вашему
package.json
файлу. Теперь за выполнение команд будет отвечатьlint-staged
.
"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.js": [ "prettier --config .prettierrc --write", "git add" ] }
lint-staged
использует шаблоны глобусов для сопоставления файлов и применения инструкций.
ДОПОЛНИТЕЛЬНО: Добавьте eslint
в конвейер.
Eslint проверит наш код на наличие ошибок и (при желании) исправит их.
- Установить
eslint
:npm install eslint --save-dev
- Создайте файл
.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" ] }
Теперь ваш код будет проверен перед тем, как попасть в исходное репо.
Спасибо за чтение.