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

Настройка ESLint, Prettier и инструментов для обеспечения качества кода.

Обзор

Проект использует современный стек инструментов для автоматического контроля качества кода:

ESLint 9 - Анализ кода и обнаружение ошибок
Prettier 3 - Автоматическое форматирование
lint-staged - Запуск проверок только на измененных файлах
Husky - Автоматизация при коммитах

ESLint

Версия и конфигурация

Версия: ESLint 9
Конфиг: eslint.config.mjs (flat config)
Парсер: TypeScript ESLint

Установленные плагины

Плагин	Версия	Назначение
sonarjs	3.0.1	Качество кода (sonar рекомендации)
unicorn	56.0.1	Best practices JavaScript
simple-import-sort	12.1.1	Сортировка импортов
unused-imports	4.1.4	Удаление неиспользуемых импортов
typescript-eslint	8.0.0	TypeScript поддержка

Основные правила

typescript

// ❌ Не используем явные return types
function getUserName(id: string) {
	return name;
}

// ✅ Правильно
function getUserName(id: string) {
	return name;
}

typescript

// ❌ Не используем else after return
if (!user) {
	return null;
} else {
	return user.name;
}

// ✅ Правильно - early return
if (!user) {
	return null;
}
return user.name;

typescript

// ❌ Не оставляем неиспользуемые переменные
const unused = 5;
const x = 10;
console.log(x);

// ✅ Правильно
const x = 10;
console.log(x);

typescript

// ❌ Импорты не отсортированы
import { z } from "zod";
import { Controller } from "@nestjs/common";
import { ApiTags } from "@nestjs/swagger";

// ✅ Правильно - отсортированы автоматически
import { ApiTags, Controller } from "@nestjs/swagger";
import { z } from "zod";

Конфигурация файла

Путь: eslint.config.mjs

javascript

import sonarjs from "eslint-plugin-sonarjs";
import unicorn from "eslint-plugin-unicorn";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import unusedImports from "eslint-plugin-unused-imports";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";

export default [
	{
		ignores: ["**/documentation", "**/*.gql", "**/scripts/**"]
	},
	{
		files: ["**/*.ts", "**/*.tsx"],
		plugins: {
			sonarjs,
			unicorn,
			"simple-import-sort": simpleImportSort,
			"unused-imports": unusedImports,
			"@typescript-eslint": typescriptEslint
		}
		// 100+ правил конфигурации...
	}
];

Команды ESLint

bash

# Проверить код
npm run lint

# Автоматическое исправление
npm run lint:fix

# Для staged файлов (используется Husky)
npm run lint:staged

Типичные ошибки ESLint

Ошибка	Причина	Решение
`no-unused-vars`	Неиспользуемая переменная	Удалить переменную
`no-explicit-any`	Использование `any`	Указать конкретный тип
`prefer-const`	Используется `let` вместо `const`	Изменить на `const`
`eqeqeq`	Используется `==` вместо `===`	Изменить на `===`
`simple-import-sort`	Импорты не отсортированы	Переупорядочить импорты

Prettier

Версия и конфигурация

Версия: Prettier 3
Конфиг: Из package.json (если есть) или defaults

Форматируемые файлы

TypeScript (.ts, .tsx)
JavaScript (.js, .jsx)
JSON
YAML
Markdown
CSS, SCSS

Основные правила

typescript

// Prettier автоматически форматирует:
// - Отступы (2 пробела)
// - Длину строк (80+ символов)
// - Кавычки (одинарные)
// - Точки с запятой (обязательны)
// - Пробелы вокруг операторов

Команды Prettier

bash

# Проверить форматирование
npm run format:check

# Переформатировать все файлы
npm run format

# Для staged файлов (используется Husky)
npx pretty-quick --staged

pretty-quick

Быстрое форматирование только измененных файлов:

bash

# Форматировать только staged файлы
npx pretty-quick --staged

# Форматировать только измененные файлы
npx pretty-quick

Lint-Staged

Конфигурация

Запускает проверки только на staged файлах при коммите.

Файл: .lintstagedrc.json или в package.json

json

{
	"*.ts": ["eslint --fix"],
	"*.{ts,js,json,md}": ["prettier --write"]
}

Использование

bash

# Автоматически запускается при коммите через Husky
git commit -m "feat: add feature"

# Выполняет:
# - ESLint на .ts файлах
# - Prettier на всех файлах

Интеграция с IDE

VS Code

Расширения

json

// Рекомендуемые расширения в .vscode/extensions.json
{
	"recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "firsttris.vscode-jest-runner"]
}

Настройки

json

// .vscode/settings.json
{
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true
	},
	"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

WebStorm / IntelliJ

Файл → Параметры → Инструменты → ESLint
- Enable ESLint
- Automatic ESLint Configuration
Файл → Параметры → Инструменты → Prettier
- Enable Prettier
- On Format Code Action
Файл → Параметры → Editor → Code Style
- Выбрать "Project defaults" (Prettier)

Workflow линтинга

1. При разработке

bash

# IDE автоматически подсвечивает ошибки ESLint
# IDE автоматически форматирует при сохранении

2. Перед коммитом (Husky)

bash

# Запускается автоматически:
npm run removeComments:staged      # Удаление комментариев
npm run removeReturnTypes:staged   # Удаление return types
npx pretty-quick --staged          # Prettier
npx lint-staged                    # ESLint fix

3. Перед пушем (Husky)

bash

# Запускается автоматически:
npm run lint  # Полная ESLint проверка всего кода

Полезные команды

Исправить все ошибки

bash

npm run lint:fix

Проверить форматирование

bash

npm run format:check

Переформатировать все

bash

npm run format

Исправить только staged файлы

bash

npx lint-staged
npx pretty-quick --staged

Игнорирование правил

Игнорировать файлы

В eslint.config.mjs:

javascript

{
	ignores: ["**/documentation", "**/*.gql", "**/scripts/**"];
}

Отключить правило на строке

typescript

// eslint-disable-next-line no-console
console.log("Debug message");

Отключить правило в блоке

typescript

/* eslint-disable no-console */
console.log("Debug 1");
console.log("Debug 2");
/* eslint-enable no-console */

Troubleshooting

ESLint не работает в IDE

Решение:

bash

# Переустановить расширение
# Перезагрузить IDE

# Проверить конфигурацию
npm run lint --debug

Prettier конфликтует с ESLint

Решение:

bash

# Обновить оба инструмента
npm install --save-dev eslint@latest prettier@latest

# Переформатировать все файлы
npm run format

# Проверить
npm run lint

Pre-commit hook ошибки

Решение:

bash

# Исправить вручную
npm run lint:fix
npm run format

# Добавить и повторить коммит
git add .
git commit -m "fix: linting issues"

Best Practices

✅ Правильно

Используйте IDE интеграцию - Видите ошибки в реальном времени
Исправляйте локально - Запускайте npm run lint:fix часто
Коммитьте часто - Small commits = меньше конфликтов
Доверяйте автоисправлению - ESLint/Prettier знают что делают

❌ Неправильно

Пропускайте проверки - git commit --no-verify
Игнорируйте ошибки - Потом будет больше проблем
Отключайте правила - Используйте только когда это необходимо
Конфликтующие конфиги - Синхронизируйте ESLint и Prettier

Следующие шаги

Git Workflow - Husky и pre-hooks
Тестирование - Jest и тесты
Правила кода - Стандарты

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

Обзор ​

ESLint ​

Версия и конфигурация ​

Установленные плагины ​

Основные правила ​

Конфигурация файла ​

Команды ESLint ​

Типичные ошибки ESLint ​

Prettier ​

Версия и конфигурация ​

Форматируемые файлы ​

Основные правила ​

Команды Prettier ​

pretty-quick ​

Lint-Staged ​

Конфигурация ​

Использование ​

Интеграция с IDE ​

VS Code ​

Расширения ​

Настройки ​

WebStorm / IntelliJ ​

Workflow линтинга ​

1. При разработке ​

2. Перед коммитом (Husky) ​

3. Перед пушем (Husky) ​

Полезные команды ​

Исправить все ошибки ​

Проверить форматирование ​

Переформатировать все ​

Исправить только staged файлы ​

Игнорирование правил ​

Игнорировать файлы ​

Отключить правило на строке ​

Отключить правило в блоке ​

Troubleshooting ​

ESLint не работает в IDE ​

Prettier конфликтует с ESLint ​

Pre-commit hook ошибки ​

Best Practices ​

✅ Правильно ​

❌ Неправильно ​

Следующие шаги ​

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

Обзор

ESLint

Версия и конфигурация

Установленные плагины

Основные правила

Конфигурация файла

Команды ESLint

Типичные ошибки ESLint

Prettier

Версия и конфигурация

Форматируемые файлы

Основные правила

Команды Prettier

pretty-quick

Lint-Staged

Конфигурация

Использование

Интеграция с IDE

VS Code

Расширения

Настройки

WebStorm / IntelliJ

Workflow линтинга

1. При разработке

2. Перед коммитом (Husky)

3. Перед пушем (Husky)

Полезные команды

Исправить все ошибки

Проверить форматирование

Переформатировать все

Исправить только staged файлы

Игнорирование правил

Игнорировать файлы

Отключить правило на строке

Отключить правило в блоке

Troubleshooting

ESLint не работает в IDE

Prettier конфликтует с ESLint

Pre-commit hook ошибки

Best Practices

✅ Правильно

❌ Неправильно

Следующие шаги