Форматирование и минификация JavaScript

Что такое форматтер JavaScript?#

Форматтер JavaScript берёт код, который трудно читать, — минифицированный выход бандлера, свалку фрагмента, скопированную из чата, или просто файл, который правили пять человек с пятью разными привычками к отступам, — и переписывает его так, чтобы структура была видна. Отступы соответствуют вложенности, операторы получают единые пробелы, а операторы завершаются там, где вы ожидаете. Хороший форматтер делает и обратное: убирает всё лишнее, когда нужен максимально компактный payload.

Эта страница делает обе работы и честно показывает, как работает каждая. Форматировать работает на standalone-сборке Prettier с парсером Babel — на том же движке, что многие команды запускают в редакторе при сохранении, поэтому выход здесь совпадает с тем, что выдаст ваш проект. Сжать намеренно консервативно: убирает комментарии и схлопывает пробелы, сохраняя каждый перевод строки, поэтому автоматическая вставка точек с запятой (ASI) ничего не ломает. Это не минификатор на уровне токенов вроде esbuild или terser — он не переименовывает переменные, не удаляет мёртвый код и не искажает имена свойств. Поэтому результат безопасно скормить обратно JS-движку, но это неподходящий инструмент, чтобы ужать продакшен-бандл. Понимать разницу — весь смысл его грамотного использования.

Как пользоваться#

1. Вставьте JavaScript в панель JavaScript слева или нажмите Пример, чтобы загрузить короткий пример.
2. Выберите стиль Отступ на панели инструментов: 2 пробела, 4 пробела или Табуляция. Два пробела — почти универсальный стандарт в современных проектах; табуляцию выбирайте, только если собираетесь вставить результат в редактор, настроенный под табы.
3. Нажмите действие:
   • Форматировать — переопечатывает код через Prettier с выбранным отступом. Точки с запятой ставятся по умолчанию, как и в стандартном поведении Prettier.
   • Сжать — удаляет строчные комментарии // и блочные /* */, схлопывает последовательности пробелов и табов и убирает висящие пробелы в конце каждой строки. Переводы строк сохраняются намеренно.
4. Прочитайте результат в панели Вывод справа. Возьмите его через Копировать в шапке вывода. Очистить очищает обе панели.

Если «Форматировать» не может разобрать вход (лишняя скобка, незакрытый template-литерал), строка состояния показывает сообщение об ошибке Prettier, а не выдаёт сломанный выход — поэтому вы чините настоящую проблему, а не гоняетесь за обманчивым переформатированием.

Ключевые возможности#

• Настоящий движок Prettier. «Форматировать» запускает standalone-сборку Prettier с плагинами Babel + estree, а не самописный beautifier. Что вы получаете здесь — то, что выдаёт prettier --write.
• Минификация, безопасная для ASI. При сжатии переводы строк сохраняются, поэтому строка, полагавшаяся на автоматическую вставку точки с запятой, продолжает работать. Слепое удаление переводов строки — именно то, как небрежные «минификаторы» плодят баги.
• Учитывает строки, регулярки и шаблоны. Удалитель комментариев различает // внутри строки и настоящий строчный комментарий, а также / как деление и как начало регулярки — поэтому он никогда не подъедает ваш код.
• Две панели, готово к копированию. Вход и выход рядом; выход только для чтения с копированием в один клик.
• Работает полностью в вашем браузере. Бэкенда нет, отправки нет. Prettier встроен в страницу и подгружается по требованию, поэтому скрипт по-прежнему удовлетворяет строгой политике безопасности контента self-only.

Разбор примера#

Функция, скопированная из старого gist’а, с комментариями и неровными отступами:

Ввод:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Нажмите Форматировать с отступом 2 пробела:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier правит кривой отступ, расставляет единые пробелы вокруг операторов и добавляет точки с запятой — но блочный комментарий оставляет ровно там, где он был. Теперь нажмите Сжать на исходном входе:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

Комментарий ушёл, лишний отступ ушёл, но каждый оператор остался на своей строке. Заметьте, чего не произошло: fetchUser не сократилось, "GET" не преобразовалось, стрелочная функция сохранила список параметров. Это читаемое сжатие, безопасное для вставки обратно в <script> — не агрессивная обфускация, которую сделал бы бандлер при сборке.

FAQ#

Почему «Сжать» не переименовывает переменные и не ужимает мой бандл?#

Потому что для корректной работы нужен полный цикл парсер-и-кодогенерация (анализ областей видимости, отслеживание свойств, выявление побочных эффектов). Минификация этого инструмента намеренно работает как сканер: она быстрая, лёгкая по зависимостям и заведомо не может изменить поведение в рантайме. Для продакшен-бандла запускайте настоящий бандлер офлайн; эту страницу используйте для быстрой чистки, вставки в документ или подготовки фрагмента, который будет читать другой человек.

Удаляет ли минификатор комментарии внутри строк?#

Нет. Сканер проходит исходник символ за символом и отслеживает, находится ли он внутри строки в одинарных кавычках, в двойных, в template-литерале или в регулярке. //, встреченное внутри любого из них, считается текстом и остаётся нетронутым; удаляются только настоящие комментарии.

Поддерживает ли TypeScript или JSX?#

Путь «Форматировать» использует парсер Babel, который принимает JSX. Типы TypeScript и синтаксис .ts/.tsx здесь не включён — если они вам нужны, инструмент сообщит об ошибке разбора, а не промолча выдаст неверный результат. Держите эту страницу для обычного JavaScript.

Мой код куда-то отправляется?#

Нет. Всё работает в той вкладке, которую вы видите. Prettier встроен в страницу и импортируется по требованию; ваш исходный текст разбирается в памяти и никогда не уходит в сеть.