Prettier: установка, настройка и интеграция в VS Code

Написание чистого и читаемого кода важно как при индивидуальной разработке, так и в командной работе. Одним из ключевых факторов читаемости является единообразное форматирование кода. Ручное форматирование уязвимо к ошибкам и затратам времени; именно здесь помогает Prettier — инструмент, который автоматически приводит код к единому стилю.

В этой статье вы найдёте пошаговую инструкцию по установке Prettier, использованию через командную строку, подключению к VS Code, интеграции с ESLint, примеры конфигурации, чек-листы и распространённые сценарии использования.

Почему стоит использовать Prettier

• Устраняет дебаты о стилях кодирования (tab vs space, где ставить запятую).
• Быстро форматирует файлы при сохранении.
• Снижает шум в ревью (рецензии концентрируются на логике, не на отступах).
• Хорошо работает с большинством популярных языков фронтенда и бэкенда.

Важно: Prettier фокусируется на форматировании, а не на логических ошибках — для статического анализа используйте ESLint/TypeScript.

Установка Node.js и подготовка проекта

Перед началом убедитесь, что на компьютере установлен Node.js. Скачайте последнюю версию с официальной страницы Node.js. В неё включён npm — менеджер пакетов, который мы будем использовать.

1. Создайте пустую папку проекта и перейдите в неё:

mkdir prettier-demo
cd prettier-demo

2. Инициализируйте проект Node.js:

npm init -y

Эта команда создаст package.json с настройками по умолчанию.

3. Установите Prettier как dev-зависимость:

npm i --save-dev prettier

Флаг –save-dev означает, что Prettier используется только во время разработки.

Быстрое использование Prettier через командную строку

Создайте файл script.js с примерным неотформатированным кодом:

function sum(a, b) {   return a + b }

const user = { name: "Kyle", age: 27,
    isProgrammer: true,
    longKey: "Value",
    moreData: 3
}

Отформатировать файл можно командой:

npx prettier --write script.js

npx запускает локально установленный prettier, а –write перезаписывает файл результатом форматирования.

Проверить соответствие формату (без изменения файлов) можно так:

npx prettier --check script.js

Пример для HTML — создайте index.html с плохо отформатированным кодом, затем:

npx prettier --write index.html

Игнорирование файлов

Чтобы Prettier не форматировал файлы (например, node_modules), создайте .prettierignore и добавьте туда пути:

node_modules
dist
*.min.js

Можно игнорировать по расширению: добавьте *.html, если хотите пропускать все HTML-файлы.

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

Есть несколько способов задать опции:

1. Добавить ключ prettier в package.json:

{
  "name": "prettier-demo",
  "version": "1.0.0",
  "scripts": {},
  "prettier": {
    "tabWidth": 2,
    "singleQuote": true
  }
}

2. Рекомендованный способ — файл .prettierrc (JSON, YAML или JS):

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "overrides": [
    {
      "files": "*.ts",
      "options": { "semi": false }
    }
  ]
}

Пояснения к распространённым опциям:

• semi: ставить точку с запятой (true/false).
• singleQuote: использовать одинарные кавычки вместо двойных.
• tabWidth: ширина табуляции (обычно 2 или 4).
• trailingComma: где ставить завершающие запятые (none, es5, all).
• overrides: правила для конкретных типов файлов.

Интеграция Prettier в Visual Studio Code

Запускаться вручную — неудобно. Лучше настроить автоматическое форматирование при сохранении файла.

1. Откройте вкладку Extensions и установите расширение Prettier — Code formatter.

2. В настройках VS Code (File > Preferences > Settings) найдите Prettier и просмотрите опции.

3. Включите форматирование при сохранении: найдите setting formatOnSave и поставьте галочку.

4. Для явного указания форматтера в settings.json добавьте:

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

Если расширение конфликтует с другими форматтерами, убедитесь, что Prettier указан как defaultFormatter для нужного языка.

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

ESLint — инструмент для поиска проблем в коде. Prettier и ESLint могут конфликтовать в правилах форматирования. Чтобы избежать конфликта, используйте eslint-config-prettier, который отключает правила ESLint, дублирующие форматирование Prettier.

Установите пакет:

npm i --save-dev eslint-config-prettier

Добавьте в .eslintrc в конце списка extends:

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ],
  "rules": {
    "indent": "error"
  }
}

Для автоматического исправления комбинации правил используйте eslint-plugin-prettier, который запускает Prettier как правило ESLint и сообщает о несоответствиях:

npm i --save-dev eslint-plugin-prettier

И добавьте в .eslintrc:

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Pre-commit хуки: Husky и lint-staged

Чтобы гарантировать форматирование перед каждым коммитом, используйте husky и lint-staged:

npm i --save-dev husky lint-staged

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

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx,css,scss,md,json}": [
      "prettier --write",
      "git add"
    ]
  }
}

Таким образом, все файлы, попадающие под маску, будут автоматически отформатированы перед коммитом.

Примеры конфигураций и сниппеты

Обычная .prettierrc для фронтенд-проекта:

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

Настройки VS Code (settings.json):

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.documentSelectors": [
    "javascript",
    "typescript",
    "json",
    "html",
    "css"
  ]
}

Частые команды:

• npx prettier –write . — отформатировать все файлы в репозитории (учтите .prettierignore).
• npx prettier –check . — проверить соответствие формату.
• npx prettier –write “src/*/.js” — форматировать только файлы в папке src.

Когда Prettier не подходит или где он ограничен

• Сложные правила форматирования, зависящие от семантики кода (Prettier ориентирован на синтаксис, не на семантику).
• Проекты с очень специфичным стилем (например, требования проекта диктуют особое выравнивание, которое Prettier может сломать).
• Большие изменения в истории коммитов при массовой первичной автоматической правке — лучше применять постепенными коммитами.

Альтернативы: EditorConfig для базовых отступов, Beautify для более детализируемых опций форматирования в некоторых языках.

Ментальные модели и правила принятия решения

• Если цель — единообразное форматирование и скорость — выбирайте Prettier.
• Если нужно строгое статическое правило (типизация, ошибки) — используйте ESLint/TypeScript дополнительно.
• Для командной дисциплины ставьте pre-commit хуки и настройте CI-проверки (npx prettier –check).

Рекомендации по миграции существующего кода

1. Сначала добавьте .prettierignore и исключите папки с чужим кодом (node_modules, vendor).
2. Запустите npx prettier –check . чтобы выявить объём работ.
3. Применяйте форматирование по категориям (папка за папкой), делая отдельные коммиты для уменьшения шума в ревью.
4. Настройте pre-commit хуки и CI для предотвращения отката.

Чек-листы по ролям

Разработчик:

• Установил Prettier локально?
• Включил formatOnSave в редакторе?
• Добавил .prettierrc и .prettierignore?

Ревьювер:

• Концентрируется на логике, а не на стиле.
• Просит автоформатирование перед ревью, если файл неотформатирован.

Поддерживающий проект/менеджер репозитория:

• Настроил CI-проверки (prettier –check).
• Добавил husky + lint-staged для pre-commit.

Критерии приёмки

1. В проекте присутствует файл .prettierrc или prettier ключ в package.json.
2. Форматирование при сохранении включено в используемом редакторе (если редактор поддерживается).
3. Перед коммитом запускаются хуки, форматирующие изменённые файлы.
4. В CI выполняется npx prettier –check . и сборка отклоняется при несоответствии.

Частые ошибки и как их избежать

• Не добавлять .prettierignore — результат: форматируются временные файлы и зависимости.
• Конфликт ESLint+Prettier — решается eslint-config-prettier и eslint-plugin-prettier.
• Массовый форматирующий коммит без разбивки — усложняет ревью; разбивайте коммиты по логическим блокам.

Краткий глоссарий

• Prettier: инструмент автоформатирования кода.
• ESLint: линтер для JavaScript/TypeScript.
• Husky: менеджер Git-хуков.
• lint-staged: запускает команды только на изменённых файлах.

Итог

Prettier — простой в установке инструмент, который заметно повышает читаемость кода и снижает количество споров о стиле между разработчиками. Правильная интеграция с редактором, ESLint и Git-хуками позволяет держать кодовую базу аккуратной и предсказуемой.

Важно: при внедрении на существующем коде планируйте постепенную миграцию и настройте CI, чтобы изменения не вносили неожиданные правки в историю.

Полезные команды напоследок:

# Установить prettier
npm i --save-dev prettier

# Отформатировать один файл
npx prettier --write script.js

# Проверить соответствие без записи
npx prettier --check .

# Форматировать все подходящие файлы (учитывает .prettierignore)
npx prettier --write .

Спасибо за внимание. Если хотите, могу сгенерировать готовую .prettierrc и settings.json для вашего проекта или показать пример миграции большого репозитория шаг за шагом.