Налаштування lint-staged для перевірки коду перед комітом

Налаштування lint-staged для перевірки коду перед коммітом

lint-staged запускає команди тільки для файлів, доданих до git staging area. Різниця принципова: ESLint на весь проект з 500 файлів займає 20–30 секунд, ESLint тільки на 3 змінених файли — менше секунди. Це робить перевірку pre-commit практично непомітною.

Встановлення

npm install --save-dev lint-staged

Зазвичай встановлюється разом з Husky. .husky/pre-commit повинен містити:

npx lint-staged

Конфігурація

lint-staged.config.mjs:

export default {
  // TypeScript та JavaScript
  '**/*.{ts,tsx,js,jsx}': [
    'eslint --fix --max-warnings 0',
    'prettier --write',
  ],

  // CSS та SCSS
  '**/*.{css,scss}': [
    'stylelint --fix',
    'prettier --write',
  ],

  // JSON, Markdown, YAML — тільки форматування
  '**/*.{json,md,yml,yaml}': [
    'prettier --write',
  ],
};

Порядок команд важливий: спочатку лінтер (може змінити код), потім форматувальник (приводить до єдиного виду).

Конфігурація у package.json

Як альтернатива, ви можете оголосити це прямо в package.json:

{
  "lint-staged": {
    "**/*.{ts,tsx,js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "**/*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ]
  }
}

TypeScript typecheck на поставлених файлах

Проблема: tsc --noEmit не приймає список файлів — він перевіряє весь проект. Можна обійти це через скрипт-обгортку:

// scripts/typecheck-staged.mjs
import { execSync } from 'node:child_process';

try {
  execSync('tsc --noEmit --incremental', { stdio: 'inherit' });
} catch {
  process.exit(1);
}

// lint-staged.config.mjs
export default {
  '**/*.{ts,tsx}': [
    'eslint --fix',
    'prettier --write',
    () => 'node scripts/typecheck-staged.mjs',  // функція — ігнорує список файлів
  ],
};

() => 'command' — коли команда повертається як функція, lint-staged не передає їй список файлів як аргументи.

Паралельне виконання

За замовчуванням lint-staged запускає команди для різних glob-паттернів паралельно. Якщо це викликає проблеми (наприклад, два процеси пишуть в один файл):

export default {
  concurrent: false,  // послідовне виконання
  '**/*.{ts,tsx,js,jsx}': ['eslint --fix'],
};

Додаткові перевірки

Перевірка розміру файлів (випадково не закоммітити великий бінарник):

npm install --save-dev bundlesize

export default {
  '**/*.{js,css}': [
    'bundlesize',
  ],
  // Запобігання коміту файлів > 500KB
  '**/*': (files) => {
    const { statSync } = require('node:fs');
    const large = files.filter(f => {
      try { return statSync(f).size > 512 * 1024; }
      catch { return false; }
    });
    if (large.length) {
      console.error('Large files:', large);
      process.exit(1);
    }
  },
};

Перевірка на секрети через git-secrets або detect-secrets:

export default {
  '**/*': 'detect-secrets scan',
  '**/*.{ts,tsx,js,jsx}': ['eslint --fix', 'prettier --write'],
};

Налагодження

# Див. що буде запущено без фактичного запуску
npx lint-staged --debug --dry-run

Вивід показує: які файли потрапили під які паттерни, які команди будуть виконані.

Часові рамки

Налаштування lint-staged з ESLint та Prettier: 30–60 хвилин. Додавання typecheck та власних перевірок: ще 1–2 години.