Prettier — автоматическое форматирование кода

Зачем это нужно?

Prettier — это opinionated (упрямый) форматтер кода, который принудительно приводит весь проект к единому стилю.

Какие проблемы решает:

• 🔥 Прекращает споры о стиле кода (табы vs пробелы, точки с запятой и т.д.).
• 👀 Снижает визуальный шум в Pull Requests и Code Review — видны только реальные изменения логики.
• ⏳ Экономит время — больше не нужно тратить время на ручное выравнивание кода.
• 🤝 Гарантирует единообразие — код всей команды выглядит так, будто его писал один человек.

---

Как добавить в проект

1. Установка

Используем pnpm:

pnpm install -D prettier

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

Создайте файл .prettierrc в корне проекта:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120,
  "tabWidth": 2,
  "endOfLine": "lf"
}

3. Игнорирование файлов (Опционально)

Создайте файл .prettierignore, чтобы исключить папки из форматирования (например папку с svg иконками):

node_modules
dist
build
coverage

---

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

Если вы используете ESLint, важно отключить конфликтующие правила форматирования.

1. Установите конфиг:

   pnpm install -D eslint-config-prettier

2. В eslint.config.js импортируйте конфиг и добавьте его последним в массив конфигураций:

   import eslintConfigPrettier from 'eslint-config-prettier';
   
   extends: [
     // ... другие настройки
     eslintConfigPrettier,
   ];

---

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

Ручной запуск

Чтобы отформатировать все файлы в проекте:

npx prettier . --write

Через скрипты package.json

Добавьте удобные команды в package.json:

{
  "scripts": {
    "format": "prettier . --write",
    "format:check": "prettier . --check",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

Запуск:

• pnpm format — форматирует файлы (Prettier).
• pnpm format:check — проверяет стиль (полезно для CI/CD).
• pnpm lint — ищет проблемы в коде (ESLint).
• pnpm lint:fix — пробует автоматически исправить проблемы (ESLint).

---

Настройка редактора (IDE)

Чтобы Prettier работал автоматически при сохранении файла.

VS Code

1. Установите расширение Prettier – Code formatter.

2. Откройте настройки (Ctrl + ,) или settings.json.

3. Включите форматирование при сохранении:

   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }

WebStorm / IntelliJ

1. Откройте Settings → Languages & Frameworks → JavaScript → Prettier.
2. Убедитесь, что путь к пакету указан верно (обычно находится автоматически в node_modules).
3. Включите галочки:
   • On 'Reformat Code' action
   • On save

---

Настройка EditorConfig

EditorConfig помогает настроить базовые параметры форматирования (отступы, переводы строк) на уровне редактора.

1. Создайте файл .editorconfig в корне проекта:

   root = true
   
   [*]
   charset = utf-8
   indent_style = space
   indent_size = 2
   end_of_line = lf
   insert_final_newline = true
   trim_trailing_whitespace = true

2. Если вы используете VS Code, установите расширение EditorConfig for VS Code. В WebStorm и IntelliJ IDEA поддержка встроена из коробки.

Prettier автоматически подхватывает настройки из .editorconfig, если они не переопределены в .prettierrc.

---

Автоматизация с Git Hooks (Husky)

Настроим автоматический запуск форматирования перед коммитом, чтобы "грязный" код не попадал в репозиторий.

1. Установка Husky и lint-staged

pnpm install -D husky lint-staged

2. Инициализация Husky

Настроим скрипт prepare в package.json и создаст папку .husky выполнив команду:

pnpm husky init

3. Настройка lint-staged

Добавьте в package.json:

{
  "lint-staged": {
    "**/*.{js,ts,jsx,tsx,json,css,md}": "prettier --write"
  }
}

4. Добавление хука pre-commit

В файле .husky/pre-commit замените содержимое на:

npx lint-staged

Результат:

• При git commit автоматически запускается форматирование.
• lint-staged обрабатывает только изменённые файлы (staged), что работает очень быстро.
• Неотформатированный код физически не может попасть в коммит.

---

Бонус. Проблема End of Line (CRLF vs LF)

Разные операционные системы используют разные символы для обозначения конца строки:

• Windows: CRLF (\r\n)
• Linux / macOS: LF (\n)

Если в команде есть разработчики на разных ОС, Git может "сходить с ума", показывая, что изменился весь файл, хотя код не менялся. Prettier также может требовать определенный формат (обычно LF).

Решение: .gitattributes

Чтобы раз и навсегда решить проблему, создайте файл .gitattributes в корне проекта:

* text=auto eol=lf

Что это делает: Git будет автоматически конвертировать окончания строк в LF при коммите, независимо от того, какая ОС у разработчика.

---

Альтернативы

Biome (ранее Rome)

• Плюсы: Невероятно быстрый (Rust), объединяет линтер и форматтер.
• Минусы: Меньшая экосистема и гибкость по сравнению с Prettier+ESLint.

---

Итог

1. Prettier — стандарт индустрии.
2. Должен быть настроен на трёх уровнях:
   • В редакторе (для удобства разработчика).
   • В скриптах проекта (для CI/CD и ручного запуска).
   • В Git Hooks (как гарант качества кода).
3. Форматирование — это задача роботов, а не людей.

Полезные ссылки

• Prettier документация
• Статья про проблему с CRLF и LF в Git