# 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` добавить: ```json "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`** ```json "lint": "eslint \"src/**/*.{ts,tsx}\"" ``` - [ ] **Step 3: Создать `apps/frontend/.eslintrc.cjs`** ```js 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: ```bash npm run lint -w apps/frontend ``` Expected: ESLint проверяет все `.ts,.tsx` файлы в `apps/frontend/src/`. Если есть ошибки — мы их фиксим. Если ошибок нет — чистый выход. - [ ] **Step 5: Commit** ```bash 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: ```bash npm install --save-dev husky lint-staged ``` - [ ] **Step 2: Инициализировать Husky** Run: ```bash npx husky init ``` Это создаст `.husky/` директорию с `pre-commit` хуком. - [ ] **Step 3: Добавить lint-staged config в корневой `package.json`** В корневой `package.json` добавить (после `devDependencies`): ```json "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`: ```bash #!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx lint-staged ``` Если `husky init` уже создал подходящий файл, оставить как есть. Убедиться, что вызов `npx lint-staged` присутствует. - [ ] **Step 5: Commit** ```bash 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`** Найти строку: ```json "lint": "npm run lint -w apps/backend", ``` Заменить на: ```json "lint": "npm run lint -w apps/backend && npm run lint -w apps/frontend", ``` - [ ] **Step 2: Проверить, что корневой lint работает** Run: ```bash npm run lint ``` Expected: ESLint проходит по backend и frontend, возвращает 0 при отсутствии ошибок. - [ ] **Step 3: Проверить chain целиком (опционально)** Протестировать pre-commit hook: ```bash git add . && git commit -m "test pre-commit hook" ``` Должен выполнить lint-staged, проверить ESLint + Prettier на staged файлах. - [ ] **Step 4: Commit** ```bash git add package.json git commit -m "chore: update root lint script to cover both workspaces" ```