Форматировщик кода Prettier

Форматируйте JavaScript, TypeScript, JSON, HTML, CSS, Markdown, YAML, GraphQL и связанные файлы с помощью Prettier прямо в браузере.

Исходный код
Вставьте JavaScript, TypeScript, JSON, HTML, CSS, Markdown, YAML, GraphQL или связанные файлы и отформатируйте их в браузере с помощью Prettier.
Отформатированный результат
Предпросмотр использует выбранный парсер Prettier и параметры ниже.
Форматирование кода...
Параметры форматирования
Выберите парсер и правила оформления, не редактируя исходник вручную.
Отступы
Стиль

Что такое форматировщик кода Prettier?

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

Поддерживаемые форматы

Этот rewrite сохраняет фокус на форматах, которые Prettier уже хорошо обрабатывает в браузере: JavaScript, JSX, TypeScript, TSX, Flow, варианты JSON, HTML, XML, CSS, PostCSS, SCSS, Less, Markdown, MDX, YAML, GraphQL и шаблонные форматы вроде Angular, Vue, Svelte, LWC, MJML и Handlebars. Выбор языка управляет тем, какой парсер запускается, а при импорте файла парсер будет определяться автоматически, если расширение распознано.

Как работает этот rewrite

В rewrite тяжёлая логика форматирования вынесена из основного UI-потока. Запросы на форматирование собираются из чистой локальной конфигурации инструмента и затем выполняются через ленивый worker-backed пайплайн Prettier, чтобы обычный ввод оставался отзывчивым. Для больших входных данных автоформатирование приостанавливается и появляется явное действие Форматировать сейчас, что предсказуемее, чем попытка переформатировать огромный файл на каждом нажатии клавиши.