ESLint-ревизор: наводим порядок в коде c Prettier и TypeScript

Понедельник, 08:53. Новичок Саша коммитит первую фичу. CI падает: «Unexpected any», «Missing semicolon», «Tabs used instead of spaces».
Пятиминутное исправление превращается в час боли. Как сделать так, чтобы линтер сам ловил огрехи ещё до push’а — и не тормозил разработку?

Разбираемся пошагово: установим ESLint (flat-config), Prettier, TypeScript и Airbnb-правила, подключим VS Code, автоправку и поясним каждый файл, чтобы даже джун чувствовал себя уверенно.

1. Зачем линтер, если есть IDE?

• Ранний сигнал. Ошибки ловятся до сборки.
• Единый стиль. Код читается одинаково в любой команде.
• Меньше споров. Правила описаны конфигом, а не «где-то в голове».

По опросу State of JS-2024, 83 % команд считают ESLint «критически важным» инструментом, а проекты с линтерами в среднем имеют на 37 % меньше баг-фикс коммитов.

2. Быстрый старт: инициализируем проект

mkdir eslint-demo && cd $_
npm init -y                       # создаёт package.json
npm i -D typescript               # ставим TS компилятор
npx tsc --init                    # создаёт tsconfig.json

Node ≥ 18, npm ≥ 10 — нужны для корректной работы flat-config.

3. Ставим ESLint и плагины

npm i -D eslint @eslint/js         \
  @typescript-eslint/parser        \
  @typescript-eslint/eslint-plugin \
  eslint-config-airbnb-typescript  \
  eslint-plugin-import             \
  eslint-plugin-unused-imports

• @eslint/js — базовые правила;
• airbnb-typescript — готовая строгая база стиля;
• unused-imports удаляет висящие импорты автоматически.

4. Flat-config: ни .eslintrc, ни JSON

С конца 2024 ESLint рекомендует eslint.config.js — обычный JS-модуль:

// eslint.config.js (корень проекта)
import js from '@eslint/js';
import tsPlugin from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import airbnb from 'eslint-config-airbnb-typescript';

export default [
  js.configs.recommended,
  {
    files: ['**/*.ts', '**/*.tsx'],
    languageOptions: {
      parser: tsParser,
      parserOptions: { project: './tsconfig.json' },
    },
    plugins: { '@typescript-eslint': tsPlugin },
    rules: {
      ...airbnb.rules,
      'no-console': 'warn',
      'unused-imports/no-unused-imports': 'error',
    },
  },
];

Почему flat-config удобен новичкам

• Явный порядок правил (массив).
• Можно писать условия (if (process.env.CI)…).
• Автодополнение в IDE.

5. Подключаем Prettier

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Создаём .prettierrc.json:

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 100
}

Добавляем Prettier в конфиг ESLint

import prettier from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';

export default [
  /* предыдущие блоки */,
  prettier,                             // отключает конфликтующие правила
  {
    plugins: { prettier: prettierPlugin },
    rules: { 'prettier/prettier': 'error' },
  },
];

Итого: линтер ругается, если файл не отформатирован — и Prettier фиксит за вас.

6. Скрипты npm

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier . --write"
  }
}

• npm run lint — только проверка.
• npm run lint:fix — чинит автоисправляемое.
• npm run format — прогоняет Prettier по всему репо.

7. VS Code: «форматируем при сохранении»

• Установите расширения ESLint и Prettier.
• В settings.json рабочего пространства:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript"]
}

Теперь жмёте Ctrl + S — файл шлифуется сам.

8. Игнор-файлы

• .eslintignore — исключения для линтера (build/, dist/, node_modules/).
• .prettierignore — то же для Prettier (package-lock.json, *.snap).

Это ускорит проверку на больших репо и убережёт от лишнего шума.

9. Частые ошибки и как их победить

10. Итоговый чек-лист

1. npm scripts работают → npm run lint:fix без ошибок.
2. VS Code форматирует при сохранении.
3. CI (GitHub Actions) гоняет npm run lint, npm test.
4. Husky (см. предыдущую статью) в pre-commit вызывает lint-staged.

Саша пушит новый коммит — CI зелёный, ревьюер доволен, команда экономит время на настоящей логике, а не на пробелах. Линтер-ревизор раскрыл преступление «грязного кода» ещё до того, как он попал в репозиторий.