JavaScript-форматирование и украшение

Вставьте JavaScript-код (включая минифицированные файлы) и получите чистую, структурированную версию с правильными отступами. Инструмент корректно обрабатывает современный синтаксис ES6+.

Возможности

Переключение «оформить/сжать»
Пользовательский отступ
Подсветка синтаксиса

Как использовать

1. Вставьте JavaScript-код в поле ввода слева.

2. Нажмите «Форматировать» для украшения или «Минифицировать» для сжатия.

3. Скопируйте отформатированный результат.

Об этом инструменте

Минифицированные скрипты, код из чата или бандл, открытый в браузере, трудно читать, когда всё в одной строке. Этот форматировщик заново расставляет отступы в JavaScript по фигурным, квадратным и круглым скобкам, выносит инструкции на отдельные строки и сохраняет строки и комментарии нетронутыми, чтобы снова стала видна структура функций и объектов. Выберите два пробела, четыре пробела или табуляцию. Минификация делает обратное — удаляет комментарии и лишние пробелы, давая компактную копию. Это лёгкий форматировщик, который мгновенно работает в браузере, а не полноценный компилятор, поэтому он идеален для чтения и приведения кода в порядок; для единообразного форматирования всего проекта используйте Prettier или форматировщик редактора.

Часто задаваемые вопросы

Можно ли вернуть обфусцированный или минифицированный код к исходному виду?
Форматирование восстанавливает отступы и переносы строк, и минифицированный код становится читаемым, но сокращённые имена переменных вроде a, b или e не превратятся обратно в исходные. Для этого нужны source maps.
Поддерживаются ли TypeScript и JSX?
Простой TypeScript и JSX часто форматируются приемлемо, потому что отступы следуют за скобками, но аннотации типов и JSX-теги отдельно не разбираются. Для надёжного форматирования этих языков используйте Prettier.
Можно ли использовать минифицированный результат в продакшене?
Он удаляет комментарии и пробелы, но не переименовывает переменные и не вырезает мёртвый код, как специализированные минификаторы вроде Terser или esbuild. Для продакшен-сборок используйте минификатор своего сборщика, который заодно создаёт source maps.
Изменит ли форматирование работу кода?
Форматировщик меняет только пробелы и переносы строк. Главный риск — код, который полагается на автоматическую расстановку точек с запятой между строками; перед коммитом всегда прогоняйте тесты на отформатированном коде.
Почему результат выглядит странно рядом с регулярными выражениями?
Литерал регулярного выражения вроде /[a-z]+/ может показаться лёгкому форматировщику делением. Если строка со сложным регулярным выражением разбита странно, поправьте её вручную или используйте форматировщик на основе полноценного парсера.

Похожие инструменты