Форматирование и анализ кода с помощью Husky и Git Hooks

Предположим, вы и члены вашей команды работаете над потрясающим проектом JavaScript. У вас уже есть некоторые правила линтинга (возможно, через ESLint и/или Prettier) в этом проекте. Теперь вы хотите убедиться, что все следуют этим правилам. По крайней мере, когда они отправляют свои изменения в репозиторий git.

Это руководство поможет вам настроить перехватчик git pre-commit для автоматического форматирования и анализа кода в жизненном цикле git pre-commit.

Примечание

В этом руководстве предполагается, что в вашем проекте уже установлен форматтер (например, Prettier или EsLint). Мы просто сосредоточимся на добавлении перехватчика предварительной фиксации gitв код автоматического форматирования.

Шаг 1. Установите зависимости

Мы будем использовать Husky для прикрепления действия format/lint в хуке Git pre-commit. Мы будем использовать husky init , это одноразовая команда для быстрой инициализации проекта с хаски.

Сначала перейдите в корневую папку проекта, где присутствует package.json, затем выполните эту команду

npx husky-init && npm install 

Это создаст новую папку .husky и сценарий предварительной фиксации .husky/pre-commit по умолчанию.

Шаг 2. Отредактируйте скрипт .husky/pre-commit

Содержимое .husky/pre-commit по умолчанию:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npm test

Итак, по умолчанию выполняется команда npm test. Мы заменим эту строку нашей командой форматирования.

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo "Applying lint fix..."
# Formatter defined in package.json (check below for detail)
npm run format
# add the edited files after format (if any)
git add .

По сути, вы можете добавить сюда любой bash-скрипт. этот файл будет выполняться в жизненном цикле git pre-commit.

Шаг 3. Запустите git commit и подтвердите

Теперь просто запустите любую команду git commit (например: git commit -m <your message> ) и проверьте, срабатывает ли средство форматирования. Если он работает правильно, вы должны увидеть это сообщение в терминале Applying lint fix...

Мои настройки форматтера

У меня уже есть настройка EsLint в моем проекте. И я добавил эти 2 scripts в свой package.json файл, чтобы упростить форматирование.

"scripts": {
   ...
   "lint": "eslint --ext .js,.ts,.jsx,.tsx .",
   "format": "npm run lint -- --fix"
}

Мы используем указанную выше команду format в git pre-commit. Если вы используете другое средство форматирования (например, более красивое), вам просто нужно изменить команду format.

Вот и все! Теперь вы можете добавить любую команду в хук жизненного цикла Git. Я надеюсь, что это помогло вам.