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

Для этого необходимо проверять правильность функционирования и правильность проекта перед каждым коммитом.

К счастью, уже есть инструменты, облегчающие автоматизацию этих различных проверок. Примеры включают Prettier для форматирования кода, ESlint для проведения синтаксических тестов кода и Jest для модульных и функциональных тестов, обеспечивающих правильную функциональность приложения.

Git Hooks перед фиксацией

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

Для этого мы будем использовать Git Hook. Hook Git позволяет выполнять действия до или после операций Git, такие как коммиты, пуши, перебазирования, слияния и многое другое. В нашем сценарии интересующим вас будет хук pre-commit; Как следует из названия, этот хук облегчает выполнение действий перед фиксацией.

Установка пакетов

Как уже упоминалось, вам нужно будет установить пакеты управления, упомянутые ранее, если они еще не присутствуют в вашем проекте.

Установите Prettier и ESLint с помощью следующей команды, в зависимости от вашего менеджера пакетов:

#npm
npm install --save-dev prettier eslint

#yarn
yarn add prettier eslint --dev

#pnpm
pnpm add -D prettier eslint

После добавления инструментов проверки необходимо дать им указание выполнять проверку синтаксиса и форматирования только для измененных файлов. Это избавляет от необходимости проверять все файлы в проекте, что может занимать много времени при каждой фиксации. Для этого установим пакет lint-staged.

#npm
npm install --save-dev lint-staged

#yarn
yarn add lint-staged --dev

#pnpm
pnpm add -D lint-staged

Остался последний пакет для установки. Действительно, настройку Git Hooks можно выполнить непосредственно в самих файлах git /my-git-repo/.git/hooksВ оболочке или на других настраиваемых языках, здесь для отправки конфигурации, чтобы сделать ее доступной для любой клон и упростить эту задачу мы будем использовать библиотеку. Если вы хотите узнать больше о нативной конфигурации Git Hooks, вы можете прочитать эту статью Fei. Затем мы будем использовать библиотеку husky-init для установки и инициализации Husky, чтобы упростить настройку нашего Git Hook.

#npm
npx husky-init

#yarn
yarn dlx husky-init

#pnpm
pnpm dlx husky-init

Настройка действий перед фиксацией

Теперь давайте настроим действие lint-staged, которое будет выполняться во время предварительной фиксации, добавив это свойство в наш файл package.json.

{
  "lint-staged": {
      "*.{js,jsx,ts,tsx}": [
        "eslint",
        "prettier --write"
      ],
      "*.{html,css,scss,less,ejs}": [
        "prettier --write"
      ]
    }
}

Приведенный выше фрагмент кода позволяет выполнять команды prettier --write, eslint и git add в измененном .js, файлы .jsx, .ts, .tsx. и он выполняет prettier --write и git add для .html, .css, .scss, .less, и . ejs файлы, когда мы запускаем команду

npx lint-staged

Далее в файле /my-git-repo/.husky/pre-commit добавьте эту команду, чтобы ее можно было выполнять перед каждым коммитом.

Добавьте модульные тесты перед фиксацией

Если вы собираетесь запускать модульные тесты перед каждой фиксацией, вы также можете добавить команду, используемую для выполнения модульных тестов, в файл /my-git-repo/.husky/pre-commit. Например, если у вас есть команда npm run test в файле package.json, как показано ниже:

{
  ...
  "scripts": {
    ...
    "test": "jest src"
  }
  ...
}

Вам просто нужно добавить эту команду в файл /my-git-repo/.husky/pre-commit.

...

npm run test