Форматировать и минифицировать JavaScript и TypeScript

Форматируйте JavaScript и TypeScript: отступы, кавычки, точки с запятой, висячие запятые — или минифицируйте код. Ошибка в синтаксисе показывается с позицией.

Настройки

Форматирование расставляет отступы и переносы, минификация убирает пробелы между токенами

Сколько символов на каждый уровень вложенности

«Убрать» безопасно только там, где перенос строки вставит её сам — как это и делает движок

Строки, внутри которых стоит такая же кавычка, остаются как есть

Запятая после последнего элемента объекта, массива или списка параметров

Удалять комментарииИ строчные, и блочные. Значения и имена при этом не меняются

Исходный код

Разбор идёт по мере ввода — результат обновляется сразу. Код не выполняется

Результат

Строк: 0 → 0

Зачем форматировать и минифицировать код

Код переписывают не для красоты: отступы и одинаковые кавычки делают diff читаемым, а перенос строки в нужном месте — это то, из-за чего ревью идёт быстрее. Бывает и обратная задача: показать, сколько займёт файл после сжатия, или убрать комментарии из собранной версии, не подключая сборщик. Обе задачи решаются здесь, в браузере, без установки и без отправки файла наружу.

Внутри — не полноценный разборщик, а токенизатор: он видит строки, шаблонные строки вместе с подстановками, регулярные выражения, комментарии, скобки, имена и числа. Этого достаточно, чтобы расставить переводы строк, и достаточно, чтобы не напутать со скобкой внутри строки или со знаком деления, который похож на начало регулярного выражения. Устойчивость важнее полноты: если разбор где-то не сошёлся, текст не меняется вообще, а ошибка показывается с позицией — «почти правильный» код хуже честной ошибки.

Чего инструмент не делает: не переименовывает переменные, не собирает модули, не проверяет типы и не форматирует по стилю вроде Prettier с переносом длинных выражений. Он приводит к выбранному виду отступы, кавычки, точки с запятой и висячие запятые — и одинаково работает с файлами .js, .mjs и .ts.

Частые вопросы

Как отформатировать JavaScript онлайн?

Вставьте код в поле «Исходный код» — результат появится сразу ниже, в поле «Результат», нажимать ничего не нужно. Отступ выбирается в параметрах: два пробела, четыре или табуляция. Заодно можно привести к одному виду кавычки, точки с запятой и висячие запятые. Разбор идёт по мере ввода, поэтому код можно править прямо здесь и следить за результатом.

Что будет, если в коде синтаксическая ошибка?

Текст останется ровно таким, каким вы его вставили, а вместо результата появится ошибка с номером строки, столбцом, смещением от начала и фрагментом, где знак «^» стоит под проблемным символом. Инструмент сознательно не пытается спасти положение: «умные» минификаторы в такой ситуации достраивают скобки на глаз и возвращают код, который выглядит рабочим, но делает не то, что было написано. Здесь лучше явная ошибка, чем тихо испорченный файл.

Минифицированный код работает так же, как исходный?

Да. Минификация убирает только пробелы, переносы и комментарии — имена переменных, значения, порядок вычислений не меняются. Это не сжатие с переименованием, поэтому код остаётся читаемым и не ломается там, где имя используется через строку или рефлексию. Опасное место у любого сжатия одно: перенос строки, который заменял собой точку с запятой. Такой перенос инструмент оставляет переносом, если заменить его пробелом нельзя, — иначе строка «a = b» и следующая за ней «(function(){})()» склеились бы в вызов.

Как инструмент понимает, где блок, а где объект?

По разбору на токены: строки, шаблонные строки с подстановками, регулярные выражения, комментарии, скобки и знаки определяются до того, как расставляются отступы. Поэтому скобка внутри строки или регулярного выражения не считается настоящей, а фигурная скобка после знака «=» остаётся объектом, тогда как после «)» — открывает тело функции. Полноценный разборщик JavaScript для этого не нужен: решения принимаются по соседним токенам, и от них зависят ровно два действия — переносить ли строку и можно ли убрать точку с запятой.

Убирает ли инструмент комментарии и меняет ли кавычки?

И то и другое — по желанию. Флажок «Удалять комментарии» вырезает и строчные, и блочные комментарии: текст кода при этом не меняется. Переключатель кавычек переписывает строки в одинарные или двойные, но только те, где это безопасно: если внутри строки есть та самая кавычка, лишние обратные слэши не добавляются, и строка остаётся как была. Выражение внутри подстановки шаблонной строки — обычный код, и кавычки в нём тоже приводятся к выбранному виду.

Чем это отличается от инструмента для JSON?

Инструмент для JSON работает только со строгим JSON: комментариев в нём нет, а разбор останавливается на первой же лишней запятой. Здесь на вход идёт код — с функциями, комментариями, шаблонными строками, регулярными выражениями и модульным синтаксисом import/export, а также типы TypeScript: интерфейсы, дженерики, необязательные параметры. Для кода на CSS есть отдельный инструмент: правила оформления у него свои, и общий разбор здесь не подошёл бы.

Данные отправляются на сервер?

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