Линтинг и форматирование в CI

Запуск ESLint, Prettier и TypeScript в CI-пайплайне — автоматическая проверка стиля и корректности кода при каждом PR, исключающая «вкусовые» разногласия при code review.

Зачем нужно

Без автоматической проверки в CI разработчики тратят время code review на стилевые замечания («здесь пробел не нужен»). Линтинг в CI переносит эти проверки на машину: пайплайн заблокирует PR с нарушениями до того, как другой разработчик откроет код. Форматирование через Prettier устраняет разногласия полностью — один стиль для всей команды.

Где используется

  • ESLint + Prettier в каждом JavaScript/TypeScript проекте
  • TypeScript type-check (tsc --noEmit) в CI перед деплоем
  • Pre-commit хуки (Husky) для быстрой проверки до пуша
  • GitHub Actions: автоматическое форматирование через --fix + commit

Основной контент

Настройка ESLint + Prettier

npm install -D eslint prettier eslint-config-prettier \
  @typescript-eslint/eslint-plugin @typescript-eslint/parser

// eslint.config.js (flat config, ESLint 9+)
import tseslint from '@typescript-eslint/eslint-plugin';
import tsparser from '@typescript-eslint/parser';
import prettier from 'eslint-config-prettier';

export default [
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: { parser: tsparser },
    plugins: { '@typescript-eslint': tseslint },
    rules: {
      ...tseslint.configs.recommended.rules,
      '@typescript-eslint/no-explicit-any': 'error',
      'no-console': 'warn',
    },
  },
  prettier,  // отключает правила ESLint, конфликтующие с Prettier
];

// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

package.json скрипты

{
  "scripts": {
    "lint": "eslint src --ext .ts,.tsx",
    "lint:fix": "eslint src --ext .ts,.tsx --fix",
    "format": "prettier --write src",
    "format:check": "prettier --check src",
    "typecheck": "tsc --noEmit"
  }
}

CI-пайплайн с проверками

# .github/workflows/quality.yml
name: Code Quality

on:
  pull_request:
    branches: [main]

jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - run: npm ci

      - name: Type check
        run: npm run typecheck

      - name: Lint
        run: npm run lint

      - name: Check formatting
        run: npm run format:check

Pre-commit хуки через Husky + lint-staged

npm install -D husky lint-staged
npx husky init

// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml}": ["prettier --write"]
  }
}

# .husky/pre-commit
npx lint-staged

Теперь при каждом git commit автоматически форматируются только изменённые файлы.

Commitlint — проверка сообщений коммитов

npm install -D @commitlint/cli @commitlint/config-conventional

// commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'] };

# .husky/commit-msg
npx --no -- commitlint --edit $1
# Теперь: "fix: correct typo" ✓, "fixed stuff" ✗

Частые ошибки

  • Линтер только локально, не в CI — разработчики пушат код без проверки
  • eslint --fix в CI с авто-коммитом в основную ветку — может создать проблемы
  • Конфликт правил ESLint и Prettier — eslint-config-prettier отключает конфликтующие правила
  • Линт всего проекта при каждом коммите через Husky (медленно) — lint-staged лечит проблему

Связанные темы

Ресурсы