Чому lint-staged працює швидше?
Налаштування lint-staged швидких pre-commit перевірок коду — типовий запит від команд на React 18 з TypeScript, де кожен коміт запускає ESLint на всіх 500+ файлах і займає 30 секунд очікування. Розробники починають використовувати git commit --no-verify, щоб не чекати. Якість коду падає, баги прослизають у продакшен. Рішення — lint-staged. Він запускає лінтери та форматери лише на файли, які потрапили до staging area. Git hooks (зокрема pre-commit хуки) автоматизують ці перевірки. Ми в TrueTech налаштовуємо такі pipelines за 30–60 хвилин, і перевірка трьох змінених файлів займає менше секунди. Це прискорює pre-commit перевірки в 10–30 разів, а команда знову починає довіряти хукам.
Документація lint-staged рекомендує: "Run linters against staged git files and don't let 💩 slip into your code base!"
| Підхід | Час на коміт (500 файлів) | Файли, що перевіряються | Ймовірність обходу |
|---|---|---|---|
| Звичайний скрипт (всі файли) | ~30 секунд | Всі | Висока (--no-verify) |
| lint-staged (тільки staged) | <1 секунди | Тільки змінені | Низька |
| Ручне форматування | N/A | N/A | Дуже висока |
Налаштування lint-staged під ключ коштує від 5000 грн для базового проекту до 15000 грн для проекту з кастомними перевірками та інтеграцією в CI/CD. Економія часу команди з 10 розробників – близько 5 годин на тиждень, що еквівалентно економії 20000 грн на місяць. Наприклад, lint-staged виконується менше ніж за 1 секунду, тоді як звичайний скрипт займає 30 секунд – виграш у 30 разів.
Як налаштувати lint-staged?
Використовуємо lint-staged 15.x, Husky 9.x, ESLint 9.x, Prettier 3.x. Конфігурацію зберігаємо в lint-staged.config.mjs — це зручніше, ніж у package.json, і дозволяє використовувати динамічні функції. Типовий кейс: проект на React 18 + TypeScript. Єдина неочевидна частина — typecheck.
Налаштування typecheck всередині lint-staged
Встановлення:
npm install --save-dev lint-staged Зазвичай разом з Husky. .husky/pre-commit:
npx lint-staged Конфігурація:
export default { '**/*.{ts,tsx,js,jsx}': [ 'eslint --fix --max-warnings 0', 'prettier --write', ], '**/*.{css,scss}': [ 'stylelint --fix', 'prettier --write', ], '**/*.{json,md,yml,yaml}': [ 'prettier --write', ], '**/*.{ts,tsx}': [ 'eslint --fix', 'prettier --write', () => 'node scripts/typecheck-staged.mjs', ], }; Приклад функції-обгортки для typecheck
// scripts/typecheck-staged.mjs import { execSync } from 'node:child_process'; try { execSync('tsc --noEmit --incremental', { stdio: 'inherit' }); } catch { process.exit(1); } Налагодження
# Подивитися, що буде запущено без реального запуску npx lint-staged --debug --dry-run Що входить у налаштування
Порядок робіт ми фіксуємо в брифі та тримаємо його в git-репозиторії замовника:
- Аудит поточного pipeline: заміряємо час pre-commit, виявляємо вузькі місця та підраховуємо частоту
--no-verify. - Підбір набору інструментів під стек: ESLint, Prettier, Stylelint, tsc, кастомні перевірки secrets.
- Розробка конфігурації lint-staged та Husky: конкретні globs, порядок команд, обробка помилок.
- Інтеграція typecheck-обгортки та smoke-тесту CI: pipeline падає, якщо хук не відпрацював.
- Передача знань команді: 30-хвилинний воркшоп та changelog у Confluence на 5–7 сторінок.
| Етап | Опис |
|---|---|
| Аналіз поточних процесів | Вивчаємо ваш проект, стек та pipeline |
| Встановлення та конфігурація | Налаштування lint-staged, Husky, ESLint, Prettier, Stylelint |
| Інтеграція typecheck | Написання функції-обгортки для tsc |
| Кастомні перевірки | Розмір файлів, secrets та інші |
| Документація та навчання | Опис процесу для команди |
| Підтримка після впровадження | Перші тижні, правки за запитом |
Терміни та бюджет
Оцінка проекту займає один робочий день. Саме налаштування — від 2 до 5 днів залежно від складності. У вартість входить: аудит, конфігурація, документація та навчання. Налаштовуємо lint-staged під ключ за 2-5 днів. Вартість розраховується індивідуально і залежить від кількості інструментів, необхідності кастомних перевірок та інтеграції з CI/CD. Напишіть нам для безкоштовної оцінки проекту — зазвичай перша відповідь надходить протягом 4 робочих годин.
Чому варто обрати нас
Гарантуємо якість: більше 10 років досвіду та 100+ впроваджень code quality pipeline. Ми не просто налаштовуємо інструменти, а інтегруємо їх у ваш CI/CD, враховуючи особливості інфраструктури. Наші інженери знають, як lint-staged взаємодіє з іншими хуками та пайплайнами. Замовте налаштування lint-staged в TrueTech — прискорте pre-commit перевірки в 10 разів і поверніть команді час на реальну розробку.
Окремо приділяємо увагу monorepo-конфігураціям: Nx, Turborepo та Yarn Workspaces потребують акуратної збірки конфігурацій — інакше лінтери дублюють роботу, а typecheck падає по колу. У таких проектах розділяємо правила по пакетах: бібліотечний код перевіряємо через tsc --build, додатки — через legacy tsc з --incremental. Додатково підключаємо інкрементальні кеші ESLint та Prettier через опцію --cache, що знижує час на 40–60% при повторних комітах. Для команд з 20+ розробниками додаємо skip-worktree для конфігів, щоб локальні IDE-налаштування не потрапляли в PR.
Після впровадження проводимо два ретроспективні заміри — через тиждень і через місяць. Перший показує, як часто розробники відмовилися від --no-verify (зазвичай з 45% до 3–5%), другий — реальний виграш у часі. Всі метрики фіксуємо в дашборді Grafana, якщо він уже розгорнутий, або в Google Sheets на 25–30 рядків. Оцінимо проект безкоштовно — залиште заявку на нашому сайті або напишіть нам.