ESLint и Prettier
Линтер или форматтер, flat config, полезные правила, автоматизация, Biome.
Обновлено
Что такое линтер и форматтер
Два разных инструмента, которые часто путают:
| Линтер (ESLint) | Форматтер (Prettier) | |
|---|---|---|
| Вопрос | Код правильный? | Код выглядит единообразно? |
| Находит | вероятные баги: неиспользуемые переменные, забытый await, пропущенные зависимости useEffect, правила доступности |
пробелы, кавычки, запятые, длину строк |
| Исправляет автоматически | часть правил | всё |
| Пример | 'x' is assigned but never used |
"a" → 'a' |
Вместе они убирают из код-ревью два вида споров: «здесь очевидный баг» и «поставь тут пробел».
ESLint
ESLint анализирует код без запуска (статический анализ) и применяет правила. Конфигурация (flat config) — массив объектов:
// eslint.config.mjs — ровно то, что генерирует create-next-app в Next 16
import { defineConfig, globalIgnores } from 'eslint/config'
import nextVitals from 'eslint-config-next/core-web-vitals'
import nextTs from 'eslint-config-next/typescript'
export default defineConfig([
...nextVitals, // React, хуки, Next, доступность, Core Web Vitals
...nextTs, // правила TypeScript
globalIgnores(['.next/**', 'next-env.d.ts']),
{
rules: {
'no-console': ['warn', { allow: ['error'] }],
'react-hooks/exhaustive-deps': 'error',
},
},
])| Уровень | Эффект |
|---|---|
'off' |
отключено |
'warn' |
показывается, но не останавливает CI |
'error' |
останавливает сборку / CI |
Правила, которые ловят настоящие баги: react-hooks/rules-of-hooks, react-hooks/exhaustive-deps, @typescript-eslint/no-floating-promises (Promise без await), jsx-a11y/* (доступность). В Next 16 запускают eslint напрямую (next lint удалён).
Prettier
Prettier переписывает весь код в едином стиле. Опций почти нет — намеренно: о стиле больше не спорят.
// .prettierrc
{
"semi": false,
"singleQuote": true,
"printWidth": 120,
"plugins": ["prettier-plugin-tailwindcss"]
}prettier-plugin-tailwindcss автоматически сортирует классы Tailwind в рекомендуемом порядке.
Где запускать — автоматизация
| Где | Как | Зачем |
|---|---|---|
| редактор | «Format on save» + расширение ESLint | мгновенная обратная связь |
| pre-commit | lefthook / husky + lint-staged: только изменённые файлы | неотформатированный код не попадает в Git |
| CI | npm run lint + prettier --check . + tsc --noEmit |
последний, обязательный барьер |
Альтернатива: Biome
Biome = линтер + форматтер в одном инструменте, написан на Rust, в десятки раз быстрее. Правил и плагинов меньше, чем у ESLint, но конфигурация гораздо проще. Хорош для новых проектов без специальных правил.
Коротко
- Линтер = правильность (вероятные баги); форматтер = внешний вид (стиль).
- ESLint с flat config + правила Next / React hooks / a11y; Prettier для форматирования.
- Запускайте в редакторе, на pre-commit и в CI; Biome — быстрая альтернатива.