Prettier форматирование

В экосистеме JavaScript, где одновременно сосуществуют шаблоны локализации, ICU-сообщения и динамически генерируемые строки, поддержание единообразного стиля кода становится критически важным. Prettier выступает инструментом автоматического форматирования, устраняющим споры о стиле и снижая когнитивную нагрузку при работе с интернационализацией через FormatJS.

FormatJS активно используется для работы с сообщениями на основе ICU MessageFormat, а также для построения многоязычных интерфейсов. Такие сообщения часто содержат вложенные конструкции, множественные параметры и условные выражения, что делает ручное форматирование нестабильным и подверженным ошибкам.

Prettier не интерпретирует логику сообщений FormatJS, но корректно форматирует JavaScript/TypeScript-код, внутри которого они находятся, обеспечивая предсказуемую структуру файлов и унифицированное представление строковых шаблонов.

Основы форматирования кода с ICU-сообщениями

ICU-сообщения, используемые в FormatJS, могут быть вложенными и достаточно сложными:

const messages = {
  greeting: "Hello, {name}!",
  inbox: "You have {count, plural, one {# message} other {# messages}}"
};

При росте сложности такие конструкции становятся трудночитаемыми:

const messages = {
  notification:
    "You have {count, plural, one {# new notification} other {# new notifications}} in your inbox"
};

Prettier автоматически приводит подобные конструкции к единообразному виду, разбивая строки по длине и выравнивая отступы в JavaScript-структурах.

Конфигурация Prettier в проектах с FormatJS

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

Пример базового конфигурационного файла

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

Значение параметров в контексте локализации

  • printWidth: ограничивает длину строк, что важно при длинных ICU-конструкциях
  • singleQuote: снижает визуальный шум в строковых ключах переводов
  • trailingComma: упрощает диффы в файлах переводов и message-объектах
  • tabWidth: обеспечивает единообразие в JSON-файлах локализации

Форматирование файлов переводов

В проектах FormatJS часто используются JSON-файлы локализации:

{
  "welcome": "Welcome, {name}",
  "cart.items": "You have {count, number} items in your cart",
  "errors.network": "Network error occurred"
}

Prettier обеспечивает:

  • выравнивание вложенных структур
  • стабильный порядок отступов
  • единый стиль кавычек
  • предсказуемое форматирование больших словарей переводов

Даже при увеличении количества ключей до тысяч строк структура остаётся консистентной.

Работа с ICU MessageFormat и читаемостью

FormatJS использует ICU-синтаксис, который может включать условия, числа и даты:

const message =
  "You have {count, plural, " +
  "one {# unread message} " +
  "other {# unread messages}" +
  "}";

После применения Prettier код приобретает более линейную структуру:

const message =
  "You have {count, plural, " +
  "one {# unread message} " +
  "other {# unread messages}" +
  "}";

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

Форматирование шаблонных литералов с FormatJS

При использовании intl-messageformat часто применяются шаблонные строки:

const msg = new IntlMessageFormat(
  'Hello {name}, you have {count, number} messages',
  'en'
);

Prettier оптимизирует расположение аргументов:

const msg = new IntlMessageFormat(
  'Hello {name}, you have {count, number} messages',
  'en'
);

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

const msg = new IntlMessageFormat(
  'Hello {name}, your balance is {balance, number, currency}',
  'en'
);

Взаимодействие Prettier и ESLint в проектах FormatJS

В типичной архитектуре локализации Prettier и ESLint работают совместно:

  • Prettier отвечает за форматирование
  • ESLint отвечает за корректность кода и использование FormatJS API

Типичная конфигурация интеграции

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "plugins": ["formatjs"],
  "rules": {
    "formatjs/no-missing-translation": "error",
    "formatjs/enforce-placeholders": "warn"
  }
}

Prettier устраняет необходимость ручного форматирования, позволяя ESLint сосредоточиться на проверке структуры сообщений.

Форматирование React-компонентов с FormatJS

FormatJS часто используется в React через react-intl.

import { FormattedMessage } from 'react-intl';

function Header() {
  return (
    <FormattedMessage
      id="header.title"
      defaultMessage="Welcome, {name}"
      values={{ name: 'User' }}
    />
  );
}

Prettier стандартизирует JSX-структуру:

  • перенос пропсов на новые строки при необходимости
  • выравнивание атрибутов
  • единый стиль вложенности

При увеличении количества параметров формат остаётся стабильным:

<FormattedMessage
  id="dashboard.notifications"
  defaultMessage="You have {count} notifications"
  values={{ count }}
/>

Форматирование сложных ICU-структур в JSX

ICU-выражения внутри defaultMessage могут становиться длинными:

<FormattedMessage
  id="cart.summary"
  defaultMessage="You have {count, plural, one {# item} other {# items}} in cart"
/>

Prettier обеспечивает корректное разбиение JSX-элемента:

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

Форматирование TypeScript-кода с FormatJS

В TypeScript-проектах FormatJS часто используется строгая типизация сообщений:

import { defineMessages } from 'react-intl';

const messages = defineMessages({
  title: {
    id: 'page.title',
    defaultMessage: 'Dashboard'
  },
  description: {
    id: 'page.description',
    defaultMessage: 'Overview of your activity'
  }
});

Prettier обеспечивает:

  • единый стиль объектов
  • выравнивание ключей
  • отсутствие лишних запятых и пробелов
  • стабильное представление типов и интерфейсов

Обработка длинных сообщений и автоматическое выравнивание

При росте количества параметров ICU-сообщения становятся громоздкими:

const message =
  'You have {count, plural, one {# message in your inbox} other {# messages in your inbox}}';

Prettier не изменяет логику строки, но обеспечивает корректное форматирование внешней структуры:

  • переносы строк при превышении лимита ширины
  • выравнивание операторов конкатенации
  • стабильное расположение фигурных скобок в объектных структурах

Форматирование JSON-локализаций в масштабных проектах

В больших системах локализации JSON-файлы могут содержать тысячи ключей:

{
  "auth.login.title": "Login",
  "auth.login.error": "Invalid credentials",
  "auth.logout.success": "Successfully logged out"
}

Prettier обеспечивает:

  • предсказуемый порядок форматирования
  • одинаковые отступы на всех уровнях вложенности
  • единый стиль кавычек
  • упрощение чтения при ревизиях переводов

Ограничения Prettier в контексте FormatJS

Несмотря на широкие возможности форматирования, Prettier не влияет на:

  • семантику ICU-сообщений
  • корректность переводов
  • структуру MessageFormat
  • интерпретацию параметров FormatJS

Его задача ограничивается исключительно визуальной консистентностью JavaScript-кода и JSON-структур.

Сложные ошибки локализации остаются в зоне ответственности FormatJS и инструментов линтинга, а не форматирования.

Поведение Prettier при изменении переводов

При редактировании файлов локализации Prettier минимизирует шум в diff:

  • перестановка ключей не приводит к массовым изменениям строк
  • изменения отображаются только в затронутых местах
  • структура файлов остаётся стабильной между коммитами

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

Организация форматирования в монорепозиториях

В монорепозиториях с несколькими приложениями и библиотеками FormatJS Prettier часто применяется централизованно:

  • единый .prettierrc
  • общие правила для всех пакетов
  • синхронизированная ширина строки и стиль кавычек

Это снижает расхождения между frontend, backend и пакетами локализации, особенно при использовании общих словарей сообщений.

Автоматизация форматирования в CI

Prettier обычно интегрируется в pipeline:

  • проверка форматирования перед merge
  • автоматическое исправление стиля при push
  • блокировка неконсистентного кода

В связке с FormatJS это предотвращает попадание неформатированных ICU-сообщений и JSON-локализаций в production-код.

Оглавление