В этом видео я покажу как настроить автопроверку кода через ES lint при совершении коммита. Таким образом легче проверять и поддерживать чистоту и порядок внутри кодовой базы, особенно на проектах с командной разработкой.
Смотреть видео на Дзене (dzen.ru)
1. Создание проекта
Создадим проект с помощью Vite на React без TypeScript.
npx create-vite@latest react-husky
- React
- JavaScript
- rolldown-vite (experimental) — No
Установим зависимости npm i и запустим npm run dev
В проекте уже установлен и базово настроен ESlint.
Файл с конфигом eslint.config.js
Пакеты в package.json
"@eslint/js": "^9.36.0", "eslint": "^9.36.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20",
Также в package.json уже есть скрипт запуска ESlint
"lint": "eslint ."
Опционально. Добавим сюда еще один полезный скрипт, запуск ESlint с флагом --fix чтобы он проверял код и по возможности фиксит те ошибки которые может.
"lint:fix": "eslint . --fix",
Мы уже можем запустить линтер командой npm run lint
2. Установка lint-staged
Установим в проект пакет lint-staged и настроим его:
npm i lint-staged -D
Добавим в packge.json раздел с "lint-staged”, сразу после “scripts”:
"lint-staged": {
"*.{js,jsx}": [
"eslint . --fix --no-cache --max-warnings=0"
]
},
3. Создать git репозиторий в проекте
Создадим репозиторий в проекте и сделаем первый коммит:
git init git add . git commit -m "first commit"
4. Установим Husky в проект:
https://typicode.github.io/husky/get-started.html
npm install --save-dev husky npx husky init
В проекте появится папка .husky
⚠️ Важно! Внутри папки
.huskyбудет папка_и файлpre-commit
Также в package.json отобразится установленный пакет husky, а также добавится скрипт:
"prepare": "husky" ... "husky": "^9.1.7",
Отредактируем файл .husky/pre-commit, заменим его содержимое на:
npx lint-staged
⚠️ Важен порядок настройки
На момент инициализации
huskyв проекте уже должен бытьGITрепозиторий и установлен и прописанlint-staged.Сначала устанавливаем и прописываем
lint-staged. И только после этого устанавливаем и инициализируемhusky. При инициализацииhuskylint-stagedуже должен быть установлен и настроен (прописан вpackage-json).
5. Тестируем 👨🏻💻
Теперь можно допустить “ошибку” в JS коде. Например создать переменную и нигде её не использовать. В конфиге eslint.config.js у нас есть правило которое запрещает размещать в проекте неиспользуемые переменные:
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
Создадим неиспользуемую переменную в App.jsx
const name = 'React Developer';
Запустим npm run lint и увидеим что ошибка есть.
npm run lint react-husky-article/src/App.jsx 8:9 error 'name' is assigned a value but never used. Allowed unused vars must match /^[A-Z_]/u no-unused-vars ✖ 1 problem (1 error, 0 warnings)
Теперь при попытке коммита такого кода husky запустит eslint и выведет эту ошибку, не дав сделать коммит пока она не будет устранена:
git add .
git commit -m "test"
✔ Backed up original state in git stash (fde3b4c)
⚠ Running tasks for staged files...
❯ package.json — 1 file
❯ *.{js,jsx} — 1 file
✖ eslint --fix --max-warnings=0 [FAILED]
↓ Skipped because of errors from tasks.
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...
✖ eslint --fix --max-warnings=0:
/react-husky-article/src/App.jsx
8:9 error 'name' is assigned a value but never used. Allowed unused vars must match /^[A-Z_]/u no-unused-vars
✖ 1 problem (1 error, 0 warnings)
Исправим ошибку, удалив неиспользуемую переменную, добавим изменения в staged командой git add . и повторно сделаем коммит:
// удалить const name = 'React Developer'; из App.jsx git add . git commit -m "test" // Коммит пройдет успешно: ✔ Backed up original state in git stash (8bb2e93) ✔ Running tasks for staged files... ✔ Applying modifications from tasks... ✔ Cleaning up temporary files... [master 83b29f9] test 1 file changed, 1 deletion(-)
⚠️ Важно! После исправлений, необходимо добавить их в staged area командой git add . потому что Husky в связке с lint-staged проверяет только стейдженные изменения, а не файлы в общем.
