moex-vibe/docs/features/pre-commit-checks/plan.md

Pre-commit Checks Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Добавить pre-commit хуки (ESLint + Prettier) для backend и frontend, блокирующие коммит при ошибках.

Architecture: Husky + lint-staged в корне монорепозитория. ESLint 8 (совместим с существующим backend) для обеих workspace. Frontend получает свой .eslintrc.cjs с React-правилами.

Tech Stack: Husky 9, lint-staged 15, ESLint 8, Prettier 3

---

Task 1: ESLint для фронтенда

Файлы:

• Создать: apps/frontend/.eslintrc.cjs

• Изменить: apps/frontend/package.json (scripts + devDependencies)

• Step 1: Добавить devDependencies в apps/frontend/package.json

В секцию devDependencies добавить:

"eslint": "^8.0.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0"

• Step 2: Добавить скрипт lint в apps/frontend/package.json

"lint": "eslint \"src/**/*.{ts,tsx}\""

• Step 3: Создать apps/frontend/.eslintrc.cjs

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
    ecmaFeatures: { jsx: true },
  },
  plugins: ['@typescript-eslint/eslint-plugin', 'react', 'react-hooks'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
  ],
  root: true,
  env: {
    browser: true,
    es2020: true,
  },
  settings: {
    react: { version: 'detect' },
  },
  ignorePatterns: ['.eslintrc.cjs', 'vite.config.ts', 'vitest.config.ts', 'dist/'],
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    '@typescript-eslint/no-explicit-any': 'off',
    'react/react-in-jsx-scope': 'off',
  },
};

• Step 4: Проверить, что ESLint работает на фронтенде

Run:

npm run lint -w apps/frontend

Expected: ESLint проверяет все .ts,.tsx файлы в apps/frontend/src/. Если есть ошибки — мы их фиксим. Если ошибок нет — чистый выход.

• Step 5: Commit

git add apps/frontend/package.json apps/frontend/.eslintrc.cjs
git commit -m "feat: add ESLint config for frontend"

---

Task 2: Husky + lint-staged

Файлы:

• Изменить: package.json (корень) — devDependencies + lint-staged config

• Создать: .husky/pre-commit

• Создать: .husky/_/ (содержимое от husky init)

• Step 1: Установить husky и lint-staged в корень

Run:

npm install --save-dev husky lint-staged

• Step 2: Инициализировать Husky

Run:

npx husky init

Это создаст .husky/ директорию с pre-commit хуком.

• Step 3: Добавить lint-staged config в корневой package.json

В корневой package.json добавить (после devDependencies):

"lint-staged": {
  "apps/backend/src/**/*.ts": ["eslint --max-warnings=0"],
  "apps/backend/test/**/*.ts": ["eslint --max-warnings=0"],
  "apps/frontend/src/**/*.{ts,tsx}": ["eslint --max-warnings=0"],
  "*.{ts,tsx}": ["prettier --check"]
}

• Step 4: Настроить .husky/pre-commit

Проверить содержимое .husky/pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged

Если husky init уже создал подходящий файл, оставить как есть. Убедиться, что вызов npx lint-staged присутствует.

• Step 5: Commit

git add package.json .husky/
git commit -m "feat: add Husky pre-commit hook with lint-staged"

---

Task 3: Обновить root lint script

Файлы:

• Изменить: package.json (корень) — секция scripts

• Step 1: Обновить lint скрипт в корневом package.json

Найти строку:

"lint": "npm run lint -w apps/backend",

Заменить на:

"lint": "npm run lint -w apps/backend && npm run lint -w apps/frontend",

• Step 2: Проверить, что корневой lint работает

Run:

npm run lint

Expected: ESLint проходит по backend и frontend, возвращает 0 при отсутствии ошибок.

• Step 3: Проверить chain целиком (опционально)

Протестировать pre-commit hook:

git add . && git commit -m "test pre-commit hook"

Должен выполнить lint-staged, проверить ESLint + Prettier на staged файлах.

• Step 4: Commit

git add package.json
git commit -m "chore: update root lint script to cover both workspaces"