Prettier: установка и настройка форматирования кода

Зачем нужен Prettier

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

Женщина работает за MacBook Pro

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

Установка Prettier

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

Создайте пустую папку для проекта, например prettier-demo, затем откройте терминал и выполните:

npm init -y

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

Установите 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

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

function sum(a, b) {  
  return a + b;  
}  
const user = {  
  name: "Kyle",  
  age: 27,  
  isProgrammer: true,  
  longKey: "Value",  
  moreData: 3,  
};

Prettier умеет форматировать и HTML. Создайте index.html и вставьте плохо отформатированный HTML:

Отформатировать HTML:

npx prettier --write index.html

Результат:

Проверить, соответствует ли файл правилам Prettier, можно флагом –check:

npx prettier --check script.js

Это удобно использовать в качестве pre-commit хука, чтобы не допускать в репозиторий неотформатированные файлы.

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

Установить расширение Prettier в VS Code проще всего через вкладку Extensions. Найдите и установите Prettier - Code formatter, затем включите его.

Скриншот расширения Prettier в VS Code

Откройте настройки через File > Preferences > Settings и в поле поиска введите Prettier. Там доступны параметры конфигурации.

Скриншот настроек Prettier в VS Code

Рекомендуемые настройки VS Code (пример в settings.json):

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

Пояснения:

editor.defaultFormatter устанавливает Prettier как форматтер по умолчанию для поддерживаемых типов файлов.
editor.formatOnSave включает автоматическое форматирование при сохранении.
prettier.requireConfig заставляет расширение работать только если в проекте есть конфигурация Prettier — удобно для многопроектных рабочих пространств.

Важно: в больших командах включайте prettier.requireConfig, чтобы расширение не применяло глобальные настройки к проектам с другими правилами.

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

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

Не стоит запускать –write на всей папке и форматировать чужие node_modules. Создайте файл .prettierignore и добавьте туда node_modules. Пример .prettierignore:

node_modules
dist
build
*.min.js

Чтобы игнорировать все HTML-файлы, добавьте строку *.html.

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

Вы можете задать параметры Prettier несколькими способами:

Внутри package.json под ключом prettier.
В отдельном файле .prettierrc (JSON, YAML или JS).
В .prettierrc.json или .prettierrc.js.

Пример настройки в package.json:

{  
  ...  
  "scripts": {  
    "test": "echo \"Error: no test specified\" && exit 1"  
  },  
  prettier: {  
    // options go here  
  }  
}

Мы рекомендуем использовать .prettierrc. Пример с отключением точек с запятой для TypeScript:

{  
  "semi": true,  
  "overrides": [  
    {  
      "files": ".ts",  
      "options": {  
        "semi": false  
      }  
    }  
  ]  
}

Параметры, которые чаще всего меняют команды:

printWidth — максимальная ширина строки;
tabWidth — ширина табуляции в пробелах;
useTabs — использовать табы вместо пробелов;
semi — ставить точки с запятой;
singleQuote — использовать одинарные кавычки;
trailingComma — запятые в конце объектов/массивов;
overrides — отдельные правила для разных типов файлов.

Полный список опций доступен в официальной документации Prettier.

Использование Prettier совместно с ESLint

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

Установка:

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

Добавьте “prettier” последним элементом в extends в .eslintrc:

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

Для максимально гладкой интеграции используйте также плагины eslint-plugin-prettier, которые позволяют запускать Prettier как правило ESLint (но при этом предпочтительнее использовать отдельные шаги: сначала Prettier, потом ESLint).

Полезные рабочие процессы и автоматизация

Примеры распространённых паттернов внедрения Prettier в командный рабочий процесс:

pre-commit hook через Husky + lint-staged: запускает Prettier только на изменённых файлах перед коммитом.
CI: запуск npx prettier –check для проверки соответствия кода правилам на этапе сборки.
git hook для форматирования: автоматическое исправление файлов перед коммитом.

Пример настройки lint-staged и husky в package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "npx lint-staged"
    }
  },
  "lint-staged": {
    "*.js": [
      "npx prettier --write",
      "git add"
    ],
    "*.ts": [
      "npx prettier --write",
      "git add"
    ]
  }
}

CI-скрипт для проверки форматирования:

# example CI step
npx prettier --check "src/**/*.{js,ts,jsx,tsx,css,scss,html,json,md}"

Если проверка не прошла, CI завершится с ошибкой и попросит запустить npx prettier –write локально.

Рецепты конфигураций

Ниже несколько готовых пресетов .prettierrc для распространённых случаев.

Пресет базовый:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

Пресет без точек с запятой для TypeScript:

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

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

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "all",
  "overrides": [
    {
      "files": "packages/*/src/**/*.ts",
      "options": {
        "printWidth": 120
      }
    }
  ]
}

Отладка и частые проблемы

Prettier не запускается при сохранении: проверьте editor.defaultFormatter и убедитесь, что расширение esbenp.prettier-vscode установлено.
Конфликты с ESLint: установите eslint-config-prettier и поместите “prettier” в конец extends.
Различия в окружениях разработчиков: используйте prettier.requireConfig и добавьте .prettierrc в репозиторий.
Форматирование больших файлов в CI занимает время: используйте –check вместо –write в проверочных шагах.

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

Нужен сильный контроль над разметкой (например, особые переносы строк в сгенерированном коде). Prettier старается быть бессердечным: он применит свои правила даже если это ломает читаемость в специфических случаях.
Форсированная совместимость с архитектурными требованиями (например, строгие шаблоны кодирования для встроенных систем) — иногда нужен ручной подход.

Альтернативы Prettier: js-beautify, eslint –fix (для некоторых правил), clang-format для C/C++ и смешанных стеков. Эти инструменты могут быть полезны там, где Prettier не покрывает форматирование целиком.

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

Разделяй ответственность: Prettier — форматирование, ESLint — ошибки и правила стиля.
Автоматизируй ближе к источнику: форматирование при сохранении и pre-commit хук уменьшают человеческие ошибки.
Требуй конфигурацию в проекте, чтобы все участники видели одинаковые правила.

Чеклист для ролей

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

Установил локально Prettier и расширение VS Code
Настроил editor.formatOnSave
Запустил npx prettier –check перед PR

Ревьюер:

Проверил, что в PR нет изменений только по форматированию
Убедился, что CI пропускает проверки Prettier

Админ репозитория:

Добавил .prettierignore
Добавил husky + lint-staged или CI-процесс
Обеспечил документированные правила в README

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

Все файлы в целевой ветке проходят npx prettier –check.
В проекте есть .prettierrc и .prettierignore в корне репозитория.
Пре-коммит хук (или CI) форматирует изменения и не блокирует рабочую ветку без веской причины.

Быстрая карта принятия решения

graph TD
  A[Есть ли форматтер в проекте?] -->|Нет| B[Установить Prettier]
  A -->|Да| C[Есть ли конфликты с ESLint?]
  C -->|Да| D[Добавить eslint-config-prettier и проверить extends]
  C -->|Нет| E[Включить formatOnSave и pre-commit хук]
  B --> E

Тестовые сценарии и контроль качества

Запустить npx prettier –check для всех исходников и ожидать успешного выполнения.
Изменить один файл, не соблюдающий правила, закоммитить и проверить, что pre-commit хук исправляет его.
Создать PR с отформатированным и неотформатированным кодом и убедиться, что CI отклоняет PR пока правила не соблюдены.

Краткое руководство по миграции большого репозитория

Добавьте .prettierrc и .prettierignore в корень репозитория.
Включите prettier.requireConfig для локальных редакторов.
Примените npx prettier –write к целым пакетам поэтапно (например, пакет за пакетом), чтобы минимизировать шум в истории коммитов.
Используйте отдельные коммиты только для форматирования, чтобы упростить откат.

Вывод

Prettier упрощает поддержание единого стиля кода и ускоряет ревью. Его легко интегрировать с VS Code, ESLint и CI. Для командного использования рекомендуется хранить конфигурацию в репозитории, автоматизировать форматирование при сохранении и добавлять pre-commit хуки.

Ключевые рекомендации:

Всегда храните .prettierrc в корне проекта.
Используйте eslint-config-prettier при совместном применении с ESLint.
Автоматизируйте форматирование (editor.formatOnSave и husky + lint-staged).

Спасибо за внимание. Если нужно, могу подготовить готовые файлы .prettierrc, .prettierignore и settings.json, а также пример настроек husky для вашего репозитория.

Prettier: как установить и настроить форматирование кода