Как настроить автоматическое форматирование кода с помощью Git hooks

Git hooks — это скрипты, которые запускаются при выполнении определенных команд Git, таких как коммиты, слияния, получение обновлений и так далее. Эти скрипты могут использоваться для выполнения самых разных задач, включая проверку синтаксиса, тестирование или, как в нашем случае, автоматическое форматирование кода.

Настройка автоматического форматирования с использованием pre-commit hook

Pre-commit hook — это один из типов Git hooks, который срабатывает перед тем, как изменения будут зафиксированы (сделан коммит). Это отличный способ убедиться, что код правильно отформатирован перед тем, как его сохранить в репозиторий. Мы рассмотрим, как настроить этот hook для форматирования кода с помощью популярных инструментов, таких как Prettier и ESLint.

Шаг 1: Установка необходимых инструментов

Для начала нужно установить инструменты для форматирования. В зависимости от вашего проекта это могут быть разные пакеты. Для JavaScript и TypeScript проектов часто используют Prettier и ESLint.

1. Установите Prettier:npm install --save-dev prettier

2. Установите ESLint (если требуется проверка стиля и потенциальных ошибок):npm install --save-dev eslint

3. Создайте или обновите файл конфигурации .prettierrc, чтобы указать правила форматирования кода:{
 "singleQuote": true,
 "semi": false
}

Шаг 2: Настройка Git hook

Теперь, когда инструменты установлены, нужно настроить Git hook, который будет запускать форматирование перед коммитом.

1. Перейдите в папку вашего репозитория и откройте каталог .git/hooks.
2. Найдите файл pre-commit.sample, переименуйте его в pre-commit (без расширения).
3. Откройте файл и добавьте следующую строку для запуска Prettier перед коммитом:#!/bin/sh
npx prettier --write .

Этот простой скрипт запускает Prettier для форматирования всех файлов в вашем проекте перед каждым коммитом.

Шаг 3: Добавление прав на выполнение

После того как вы добавили скрипт, необходимо убедиться, что Git hook имеет права на выполнение. Для этого выполните следующую команду в терминале:

chmod +x .git/hooks/pre-commit

Теперь при каждом коммите Git будет автоматически форматировать код с помощью Prettier.

Использование Husky для более удобной работы с Git hooks

Настраивать Git hooks вручную не всегда удобно, особенно когда проект включает много разработчиков. Здесь на помощь приходит инструмент Husky, который позволяет легко управлять Git hooks через npm-скрипты.

Шаг 1: Установка Husky

Чтобы использовать Husky, нужно установить его в проект:

npm install husky --save-dev

Затем выполните команду для инициализации Husky:

npx husky install

Шаг 2: Добавление hook в Husky

Теперь давайте добавим hook, который будет запускать Prettier перед каждым коммитом.

Создайте hook для pre-commit:

npx husky add .husky/pre-commit "npx prettier --write ."

Husky создаст файл .husky/pre-commit, в котором уже будет необходимый скрипт для форматирования кода. Теперь каждый раз при коммите Husky будет автоматически запускать Prettier.

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

Иногда одного форматирования недостаточно, и хочется также проверять код на ошибки или несоответствия стилю. В этом случае можно использовать ESLint совместно с Prettier.

Шаг 1: Настройка ESLint и Prettier вместе

Установите необходимые пакеты:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Обновите ваш файл конфигурации ESLint, добавив поддержку Prettier:

{
 "extends": [
   "eslint:recommended",
   "plugin:prettier/recommended"
 ]
}


Шаг 2: Настройка Git hook для ESLint

Теперь, когда ESLint и Prettier настроены, давайте добавим проверку ESLint перед коммитом.

Откройте файл .husky/pre-commit и добавьте команду для запуска ESLint:

#!/bin/sh
npx eslint . --fix
npx prettier --write .


Этот скрипт сначала выполнит проверку ESLint и автоматически исправит ошибки, если это возможно, а затем отформатирует код с помощью Prettier.

Альтернативный подход: использование lint-staged

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

Шаг 1: Установка lint-staged

Установите lint-staged вместе с Husky:

npm install lint-staged --save-dev

Шаг 2: Настройка lint-staged

Добавьте конфигурацию для lint-staged в файл package.json:

"lint-staged": {

  "*.{js,jsx,ts,tsx}": [

    "eslint --fix",

    "prettier --write"

  ]

}

Шаг 3: Добавление lint-staged в Husky hook

Теперь обновите Husky hook, чтобы использовать lint-staged:

#!/bin/sh

npx lint-staged

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