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

Форматирование кода в Vite-проектах является отдельным слоем инженерной дисциплины, который не влияет на выполнение приложения, но определяет читаемость, предсказуемость и единообразие кодовой базы. В экосистеме современного JavaScript Prettier используется как основной инструмент автоматического форматирования, исключающий субъективные разногласия по стилю кода и снимающий нагрузку с code review, связанную с косметическими правками.

Vite как сборщик и dev-сервер не навязывает стиль кода и не включает встроенные механизмы форматирования. Его задача ограничивается обработкой модулей, быстрым обновлением в разработке и оптимизацией production-сборки. Форматирование кода существует на уровне инструментов разработки и CI-процессов.

Ключевая особенность Vite-экосистемы заключается в том, что проект обычно использует сразу несколько слоёв инструментов:

• Vite — сборка и dev-сервер
• ESLint — анализ качества кода
• Prettier — форматирование
• TypeScript — статическая типизация (опционально)

Разделение ответственности между этими инструментами критично. ESLint отвечает за логические и потенциально ошибочные конструкции, Prettier — за синтаксическое оформление.

Prettier: принцип работы

Prettier работает как opinionated formatter: он не предоставляет десятки вариантов стиля, а преобразует код к единому стандарту. В отличие от ESLint rules, форматирование Prettier детерминировано и воспроизводимо.

Основные особенности:

• полностью автоматическое форматирование AST-подобным способом
• отсутствие настройки «мнений» (табуляция, переносы, кавычки — ограниченно конфигурируемы)
• стабильный результат вне зависимости от среды выполнения

Prettier работает поверх дерева синтаксического анализа, перезаписывая код с учётом правил форматирования, а не через регулярные выражения.

Установка Prettier в Vite-проект

В типичном Vite-проекте установка выполняется через npm или yarn:

npm install -D prettier

или

yarn add -D prettier

После установки появляется возможность запускать форматирование вручную:

npx prettier . --write

В большинстве проектов форматирование ограничивают директорией src, исключая dist, node_modules и другие генерируемые папки.

Базовая конфигурация Prettier

Конфигурация Prettier задаётся через файл .prettierrc, .prettierrc.json, .prettierrc.js или через поле prettier в package.json.

Пример минимальной конфигурации:

{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2
}

Описание ключевых параметров:

• singleQuote — использование одинарных кавычек вместо двойных
• semi — добавление точек с запятой
• trailingComma — управление завершающими запятыми
• printWidth — максимальная длина строки перед переносом
• tabWidth — размер отступа

Конфигурация Prettier должна оставаться минимальной. Избыточная настройка противоречит его философии и приводит к конфликтам с ESLint.

Ignore-файлы и исключения

Prettier поддерживает .prettierignore, аналогичный .gitignore.

Пример:

node_modules
dist
coverage
public
vite.config.*

Исключение сборочных и зависимых директорий снижает нагрузку и ускоряет форматирование.

В Vite-проектах особенно важно исключать:

• dist — результат сборки
• .vite — кэш dev-сервера
• node_modules — зависимости
• автоматически генерируемые типы или API-клиенты

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

Наиболее частый источник проблем в Vite-проектах — конфликт между ESLint и Prettier. ESLint может содержать правила форматирования, которые противоречат Prettier, например:

• отступы
• кавычки
• переносы строк

Для устранения конфликтов используется пакет интеграции:

npm install -D eslint-config-prettier

Этот пакет отключает ESLint-правила, конфликтующие с Prettier.

Пример ESLint конфигурации:

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "prettier"
  ]
}

Ключевой момент — prettier всегда должен быть последним в списке extends, чтобы переопределять остальные правила.

В некоторых конфигурациях добавляется плагин:

npm install -D eslint-plugin-prettier

Однако его использование становится менее популярным, поскольку современная практика разделяет linting и formatting полностью.

Prettier в Vite-workflow

Vite сам по себе не выполняет форматирование кода, но тесно интегрируется с инструментами разработки через dev-server и HMR. Форматирование влияет на разработку косвенно:

• изменение файлов вызывает HMR
• Prettier изменяет структуру файла
• Vite мгновенно перезагружает модуль

При использовании Prettier важно учитывать, что массовое форматирование может вызвать перезагрузку большого числа модулей.

Форматирование при сохранении файла

Наиболее удобный сценарий — автоматическое форматирование при сохранении.

В VS Code конфигурация выглядит следующим образом:

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

Дополнительно полезно отключить конфликтующие форматтеры ESLint:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Важный момент заключается в порядке выполнения: ESLint может исправлять код после Prettier, поэтому часто Prettier назначается основным форматтером.

Pre-commit hooks: Husky и lint-staged

Форматирование на уровне IDE не гарантирует единообразие в репозитории, поэтому используется pre-commit слой.

Установка:

npm install -D husky lint-staged

Инициализация Husky:

npx husky init

Конфигурация lint-staged в package.json:

{
  "lint-staged": {
    "*.{js,ts,vue,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

Добавление hook:

npx husky add .husky/pre-commit "npx lint-staged"

Такой подход гарантирует, что в репозиторий не попадёт неформатированный код.

Prettier и TypeScript в Vite-проекте

Vite часто используется вместе с TypeScript. Prettier корректно работает с .ts и .tsx файлами без дополнительной настройки.

Однако важно учитывать:

• Prettier не проверяет типы
• Prettier не знает семантики TypeScript
• форматирование не заменяет tsc или ESLint

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

tsc --noEmit

или интеграцию в CI.

Форматирование Vue и React в Vite

Vite активно используется в Vue 3 и React проектах.

Для Vue добавляется плагин ESLint:

npm install -D eslint-plugin-vue

Prettier форматирует .vue файлы через парсер, корректно обрабатывая:

• <template>
• <script>
• <style>

Для React JSX:

• Prettier поддерживает JSX нативно
• требуется корректный parser при нестандартных конфигурациях

Пример .prettierrc для мультифреймворк проекта:

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

Игнорирование конфликтных файлов

В Vite-проектах часто присутствуют файлы, которые не следует форматировать:

• автогенерируемые API-клиенты
• файлы сборки
• lock-файлы в некоторых случаях

Пример расширенного .prettierignore:

node_modules
dist
coverage
.vite
pnpm-lock.yaml
package-lock.json
yarn.lock

Игнорирование lock-файлов может быть спорным решением, но в некоторых командах оно предотвращает шумовые изменения.

CI/CD и Prettier

В CI пайплайне Prettier обычно используется в режиме проверки без изменения файлов:

npx prettier . --check

Такой режим возвращает ошибку, если код не соответствует стандарту форматирования.

Пример шага CI:

- name: Check formatting
  run: npx prettier . --check

Это обеспечивает контроль качества без автоматического переписывания файлов на сервере.

Производительность форматирования

Prettier оптимизирован для больших кодовых баз, но в Vite-проектах с монорепозиториями возможны проблемы производительности при форматировании всей структуры.

Практики оптимизации:

• ограничение scope (src/)
• использование .prettierignore
• форматирование только staged файлов через lint-staged
• исключение больших JSON и autogenerated файлов

Типичные архитектурные ошибки интеграции

В Vite-проектах часто встречаются следующие ошибки конфигурации:

• одновременное использование конфликтующих форматтеров ESLint и Prettier без eslint-config-prettier
• включение избыточных ESLint правил форматирования
• отсутствие pre-commit проверки
• форматирование build-артефактов
• использование Prettier как замены линтинга

Корректная архитектура предполагает строгое разделение:

• Prettier — форматирование структуры кода
• ESLint — логика и качество
• Vite — сборка и разработка
• CI — контроль целостности

Поведение Prettier в больших проектах Vite

При масштабировании проекта Prettier становится частью инфраструктуры, а не локальным инструментом разработчика. Он влияет на:

• скорость code review
• количество конфликтов merge
• стабильность диффов
• единообразие между командами

В крупных Vite-проектах стандартом становится обязательное форматирование на уровне pre-commit и CI, что исключает разночтения в стилях и снижает стоимость сопровождения кода.