Что такое Prettier, и как он помогает форматировать код

Что такое Prettier

Форматирование кода — важный процесс. Исходный код становится легче читать, понимать и поддерживать. Эффективное форматирование помогает работать в команде — стандартизированный код легче обозревать и разбирать. Многие инструменты, такие как JSLint, JSHint, ESLint и Stylelint помогают улучшить кода, но изменяют его синтаксис, а не форматируют. Отформатировать код помогает Prettier. Подробнее об этом инструменте рассказываем в статье.

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

Основные характеристики и возможности Prettier

Ключевая особенность Prettier заключается в его универсальности. Он поддерживает множество языков программирования и шаблонов, включая JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular и другие. Среди настроек форматирования − ширина отступов, предпочтение одинарных или двойных кавычек, расстановка запятых и требования к переносам строк. Эти опции позволяют настраивать Prettier, чтобы форматирование кода соответствовало личным предпочтениям, а также корпоративным и отраслевым стандартам.

Как установить и настроить Prettier

Чтобы установить Prettier, добавьте пакет в ваш проект через npm или yarn. После настройте его через файл .prettierrc, который позволяет определить стандартное поведение форматтера для вашего проекта. Prettier может игнорировать определенные файлы и директории через .prettierignore, а также интегрирует расширенные концепции, такие как «overrides», что даёт гибкость в ситуациях форматирования.

Чтобы установить Prettier в проект на Node.js, выполните команду npm i --save-dev prettier. После этого, создайте файл конфигурации .prettierrc. Например:

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

Этот конфигурационный файл исключает использование точек с запятой в конце выражений, добавляет запятые в конце объектов и массивов там, где это возможно ("trailingComma": "es5"), использует одинарные кавычки и ограничивает длину строки 80 символами.

Интеграция Prettier в процесс разработки

В разработке важно совместить Prettier с линтерами, такими как ESLint для JavaScript или TSLint для TypeScript. Используйте дополнение eslint-plugin-prettier— оно позволяет запускать Prettier как правило ESLint. Линтер сделает код, который будет соответствовать лучшим практикам, а Prettier наложит на него единый стиль.

На практике инструмент можно интегрировать непосредственно в текстовые редакторы, такие как Visual Studio Code, Atom и Sublime Text, через плагины и расширения и обеспечить автоматическое форматирование кода на лету. Для проектов, которые использую системы контроля версий, например Git, можно настроить хуки. Они будут применять Prettier к коду перед каждым коммитом и использовать инструменты Husky и lint-staged. Это гарантирует, что весь код будет отформатирован перед попаданием в репозиторий.

Пример интеграции с Git рассмотрим использование husky и lint-staged:

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

Этот настройки обеспечивают выполнение Prettier для всех файлов .js перед каждым коммитом.

Примеры использования Prettier в проектах

Применение Prettier в реальных проектах значительно упрощает сопровождение и разработку. Например, в больших проектах, где участвует много разработчиков, Prettier обеспечивает, чтобы весь код соответствовал заранее определенным стандартам форматирования без дополнительных трудозатрат со стороны команды. Автоматическое форматирование при коммитах с использованием Git хуков препятствует попаданию "грязного" кода в основную ветку разработки.

Prettier применим для форматирования как отдельных файлов, так и всего проекта. Пример команды для форматирования всех файлов JavaScript в проекте:

prettier --write "**/*.js"

Эта команда отформатирует все .js файлы в проекте, применяя настройки из .prettierrc.

Для демонстрации, рассмотрим пример кода до и после применения Prettier:

До:

const greet = (name) => { console.log("Hello, " + name) };

После:

const greet = name => {
   console.log(Hello, $ {
      name
   });
};

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

Лучшие практики работы с Prettier

Чтобы максимально эффективно использовать Prettier в командной разработке, рекомендуется договориться о единой конфигурации на уровне проекта. Использование общего файла .prettierrc и .prettierignore в репозитории помогает избежать расхождений в стилях форматирования между разными разработчиками. Включение этих файлов в репозиторий также облегчает новым членам команды настройку их рабочего пространства. Важно также регулярно обновлять версию Prettier в проекте, чтобы воспользоваться последними улучшениями и исправлениями.

Преимущества использования Prettier включают существенное повышение качества кода и эффективности командной работы за счет единообразия стиля кодирования. Однако, как и любой инструмент, Prettier имеет свои ограничения и требует времени на начальную настройку и интеграцию в процессы CI/CD. Ключевым моментом является выбор правильного набора правил форматирования, который будет соответствовать как техническим требованиям проекта, так и предпочтениям команды. Важно помнить, что цель Prettier не в том, чтобы навязывать стиль, а предоставлять инструмент для его поддержания.