Настройка Husky на Next.js 15

Вариант 1

Можно настроить работу с помощью Lint-staged: https://habr.com/ru/companies/ruvds/articles/428173/

Вариант 2

Или можно использовать упрощенный (?) вариант настроек: https://typicode.github.io/husky/get-started.html

Прописываем в настройках — файл pre-commit следующее (все что было в нем изначально можно стереть):

#.husky/pre-commit
prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown
git update-index --again
npm run lint

Подробная расшифровка команд дана ниже.

Вариант 3

Также, можно пропустить проверки и сделать следующим образом: В package.json добавить скрипт «fix» с запуском prettier, и прописать его выполнение в настройках Husky.

#package.json
#...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "fix": "prettier . --write",
    "prepare": "husky"
  },
#...

#.husky/pre-commit
npm run fix
git update-index --again
npm run lint

 

Значение строк в файле pre-commit

prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g') --write --ignore-unknown
git update-index --again
npm run lint

Давайте разберем каждую строку в настройках pre-commit для Husky в проекте на Next.js.

1. prettier $(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\ |g') --write --ignore-unknown:

• git diff --cached --name-only --diff-filter=ACMR: Эта команда получает список файлов, которые были изменены (добавлены, изменены или переименованы) и находятся в стадии индексации (то есть, готовы к коммиту). Параметры:
  • --cached: показывает изменения, которые находятся в индексе (т.е. те, которые готовы к коммиту).
  • --name-only: выводит только имена файлов.
  • --diff-filter=ACMR: фильтрует изменения, чтобы показать только добавленные (A), измененные (C), переименованные (R) файлы.
• sed 's| |\ |g': Эта часть команды заменяет пробелы в именах файлов на экранированные пробелы ( ). Это нужно для корректной обработки имен файлов с пробелами в них.

• prettier ... --write --ignore-unknown: Эта команда запускает Prettier для форматирования файлов, перечисленных в предыдущей части. Параметр --write указывает Prettier записать изменения обратно в файлы, а --ignore-unknown позволяет игнорировать файлы, которые не поддерживаются Prettier.

2. git update-index --again:

• Эта команда обновляет индекс Git, что может быть полезно после изменения файлов с помощью Prettier. Она сообщает Git, что индекс нужно обновить, чтобы он отражал последние изменения в файлах.

3. npm run lint:

• Эта команда запускает скрипт линтинга, определенный в вашем проекте. Обычно это означает, что будет выполнен ESLint или другой инструмент для проверки кода на наличие ошибок и несоответствий стилю.

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