Как пользоваться: JavaScript форматтер
- Вставьте JavaScript (или JSON/JSX) в поле Input JavaScript, перетащите файл
.jsили нажмите Sample. - Выберите отступ, при необходимости ширину переноса и стиль скобок. Результат обновляется сразу.
- Скопируйте или скачайте результат. Используйте режим Minify, чтобы удалить комментарии и пробелы из небольшого скрипта.
Что такое форматтер JavaScript?
Форматтер (или beautifier) JavaScript пересобирает отступы и разносит инструкции, свойства объектов и блоки по отдельным строкам. Чаще всего его используют, чтобы распаковать продакшен-бандлы и читать их при отладке. Также он удобен для приведения в порядок фрагмента с Stack Overflow, букмарклета или кода, скопированного из чата. Этот инструмент использует js-beautify, который понимает современный синтаксис: стрелочные функции, классы, template literals, async/await, optional chaining, ES-модули и JSX.
Стили скобок
| Опция | Результат |
|---|---|
| На той же строке (K&R / «1TBS») | if (ok) { — принятый в большинстве руководств по стилю JavaScript и в Prettier вариант. |
| На той же строке, сохранить в одну строку | Как выше, но короткие блоки вроде { a: 1 } остаются в одной строке. |
| На новой строке (Allman) | Открывающая скобка на отдельной строке, распространена в кодовых базах C#. |
| else на новой строке | } и else на разных строках (похоже на Stroustrup). |
Форматирование не равно деобфускации
Минификаторы вроде Terser или esbuild переименовывают локальные переменные в однобуквенные имена (function(e,t){…}). Форматирование восстанавливает структуру кода, но не может вернуть исходные имена и комментарии: эта информация утеряна. Если сайт публикует source map (//# sourceMappingURL=), DevTools браузера может показать исходники. Код, который намеренно обфусцирован (массивы строк, упаковка через eval), остаётся трудночитаемым даже после форматирования.
О минификаторе
Режим Minify — безопасный минификатор пробелов и комментариев, а не полноценный компрессор. Он корректно разбивает код на токены (строки, template literals, регулярные выражения) и удаляет комментарии и пробелы, но сохраняет перенос строки там, где его удаление могло бы изменить автоматическую вставку точек с запятой, например после return или перед ++. Для каждого результата выполняются две проверки: поток токенов должен совпадать с исходным кодом, а результат должен успешно парситься. Ожидайте экономию 20–40%. Для продакшен-бандлов лучше использовать сборщик, например Terser или esbuild: они также переименовывают переменные и удаляют мёртвый код, что даёт гораздо больший эффект.
Частые проблемы
- «Не парсится как обычный JavaScript» — появляется для TypeScript, JSX или реальной синтаксической ошибки. Форматирование всё равно работает, а минификация требует корректного JavaScript.
- JSON здесь форматируется нормально, но JSON-форматтер также проверяет его и указывает на точную ошибку.
- Хотите сравнить файл до и после изменений? Вставьте обе версии в Diff Checker.
Также ищут как: js beautifier, beautify javascript онлайн, распаковать js, js minifier, jsx форматтер, форматирование js кода.
Инструменты, которые хорошо сочетаются с JavaScript форматтер
- Код в картинку — Вставьте фрагмент и получите аккуратный скриншот кода за несколько секунд: подсветка синтаксиса для JavaScript, TypeScript, Python, CSS, HTML, JSON, SQL, Bash, Go и PHP, выбор тем, окно с именем файла, градиентный или прозрачный фон, отступы и номера строк.
- HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
- CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
- Тестер регулярных выражений — Введите шаблон и смотрите, как совпадения подсвечиваются прямо в тестовом тексте.
Часто задаваемые вопросы
Можно ли распаковать JavaScript с сайта?
.min.js, и код будет выведен в читаемом виде. Имена переменных, сокращённые минификатором (например, e, t, n), восстановить нельзя, а комментарии безвозвратно удалены.