Настройка Prettier для автоматического форматирования кода

01.08.2025 | Категория: Балкон и лоджия

Начинайте с глобальной установки Prettier через менеджер пакетов, например:
npm install —save-dev prettier. Это добавит инструмент в ваш проект и обеспечит единый стиль форматирования.

Создание файла конфигурации

Создайте файл .prettierrc в корне проекта. В нем укажите основные параметры, например:

  • tabWidth: 2 – задает количество пробелов для отступов
  • singleQuote: true – использует одинарные кавычки
  • semi: false – убирает точку с запятой в конце строк
  • printWidth: 80 – устанавливает предел длины строки

Пример файла:

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

Добавление команд в скрипты

В файл package.json добавьте следующий раздел:

"scripts": {
"format": "prettier --write "src/**/*.{js,jsx,ts,tsx,css,scss,json}""
}

Это позволит запускать автоматическое форматирование командой:
npm run format.

Интеграция с редактором

Установите плагин Prettier для используемого редактора (например, VS Code). Настройте автоматическое форматирование при сохранении файла, добавив в настройки:

"editor.formatOnSave": true,
"prettier.requireConfig": true

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

Дополнительные советы по настройке

  1. Используйте editorconfig: создайте файл .editorconfig с настройками, совместимыми с Prettier, для унифицированных отступов и переносов.
  2. Автоматизация проверки: добавьте команду проверки форматирования в CI/CD, например, через prettier —check.
  3. Настройка игнорируемых файлов: создайте файл .prettierignore для исключения папок и файлов, не требующих форматирования.

Следуя этим шагам, вы достигнете единых стандартов оформления кода и ускорите процесс разработки.