Для чего нужен и как настраивается Prettier в проекте?

Что такое Prettier и зачем он нужен?

Prettier — это opinionated форматтер кода, который автоматически приводит код к единому стилю, устраняя споры о форматировании в команде. Он поддерживает множество языков: JavaScript, TypeScript, CSS, HTML, JSON, Markdown и другие. Основная цель — избавить разработчиков от ручного форматирования и сделать код читаемым и предсказуемым.

Как настроить Prettier в проекте?

Установка Prettier выполняется через npm или yarn:

npm install --save-dev prettier

Создайте файл конфигурации .prettierrc в корне проекта. Пример:

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

Также можно добавить файл .prettierignore, чтобы исключить определённые файлы или папки из форматирования, например node_modules или dist.

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

Для автоматического форматирования при сохранении в VS Code установите расширение Prettier и настройте в settings.json:

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

Для запуска в CI/CD или pre-commit хуках используйте pretty-quick или lint-staged. Пример с husky и lint-staged:

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

Вывод

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