Как работает форматирование JavaScript
Форматтер читает ваш код посимвольно, отслеживает глубину вложенности каждого выражения и выводит его с единообразными отступами. Он никогда не меняет то, что делает код — только то, как он выглядит.
- Токенизация. Библиотека сканирует входные данные в поток токенов: ключевые слова, идентификаторы, строки, операторы и знаки препинания. Строки, шаблонные литералы и литералы регулярных выражений распознаются как единые целые, поэтому фигурная скобка внутри строки никогда не будет принята за разделитель блока.
- Отслеживание вложенности. Проходя по потоку токенов, форматтер поддерживает текущий уровень отступа. Каждая открывающая фигурная скобка, скобка или скобка увеличивает уровень; каждая закрывающая — уменьшает. Эта глубина определяет, сколько единиц отступа стоит перед каждой возвращаемой строкой.
- Применение настроек. Ваш выбор отступа (2 пробела, 4 пробела или табуляция) задаёт ширину одного уровня. Параметр стиля скобок определяет, будет ли открывающая скобка примыкать к предшествующему выражению или переходить на собственную строку. Лимит пустых строк сворачивает длинные серии пустых строк до указанного значения.
- Вывод. Наконец форматтер выводит токены обратно с вычисленными отступами и переносами строк, при необходимости добавляя точки с запятой, которые автоматическая расстановка точек с запятой добавила бы во время выполнения. Результат — та же программа, оформленная так, чтобы человек мог её прочитать.
Зачем форматировать JavaScript
- Читать минифицированный код. Продакшн-бандлы поставляются в одну строку с однобуквенными именами переменных. Форматирование восстанавливает переносы строк и отступы, позволяя реально отследить ошибку до вызвавшего её выражения — даже без source map.
- Приводить в порядок непоследовательные файлы. Код, который редактировали несколько человек, постепенно приобретает смешанные отступы и разные стили скобок. Один проход через форматтер нормализует весь файл до единого оформления, так что следующий diff покажет реальные логические изменения, а не пробельный шум.
- Этот инструмент не нагружает вашу страницу. Большинство онлайн-форматтеров загружают всю библиотеку при открытии страницы. Этот загружает js-beautify лениво — только когда вы нажимаете «Форматировать» или включаете живой режим, — поэтому открытие страницы стоит несколько килобайт вместо нескольких сотен, а начальный рендеринг остаётся быстрым.
- Ничего не покидает ваш браузер. Форматтер работает полностью на вашем устройстве. Ваш код никогда не загружается на сервер — это важно, когда проверяемый скрипт принадлежит клиенту, содержит внутренние API-пути или подпадает под соглашение о конфиденциальности.
Типичные применения
Форматирование JavaScript используется всякий раз, когда нужно прочитать код, написанный не для чтения.
- Отладка в продакшне: вставьте минифицированный бандл из вкладки Network, чтобы найти функцию, стоящую за стектрейсом ошибки, который иначе невозможно расшифровать.
- Подготовка к код-ревью: переформатируйте файл соавтора с непоследовательными отступами перед открытием pull request, чтобы ревьюеры видели логику, а не пробельный шум.
- Аудит безопасности и соответствия требованиям: разверните сторонний аналитический или рекламный сниппет, чтобы точно проверить, что именно он делает до того, как он выйдет в прод.
Практический пример
Возьмём минифицированную однострочку: function f(a){if(a){return a*2}else{return 0}}. Вставьте её выше с отступом 2 пробела и стилем скобок «Свернуть», затем нажмите «Форматировать». Вы получите читаемый блок: function f(a) {, затем с отступом if (a) {, выражение return a * 2; на уровень глубже и совпадающие скобки, выровненные под ним. Переключите стиль скобок на «Развернуть» — и каждая открывающая скобка перейдёт на собственную строку. Измените отступ на «Табуляция» — и каждый уровень сместится с двух пробелов на символ табуляции. Структура одинакова; меняется только оформление.
FAQ
Это работает в моём браузере?
Да. Библиотека js-beautify загружается лениво при первом нажатии «Форматировать» или включении живого режима, а затем кэшируется. Ваш код никогда не покидает страницу — нет серверного запроса и нет загрузки данных.
Форматирование — то же самое, что разминификация?
Оно восстанавливает читаемое оформление — отступы, переносы строк и пробелы — но не может вернуть исходные имена переменных или комментарии, удалённые минификацией. Если существует source map, DevTools браузера может восстановить исходные имена; форматтер сам по себе работает только с тем, что есть в файле.
Изменит ли форматирование поведение моего кода?
Нет. Форматирование только добавляет и убирает пробелы и переносы строк; программа выполняется идентично. Единственная опция, затрагивающая токены, — «Добавить пропущенные точки с запятой», которая вставляет разделители выражений, которые автоматическая расстановка точек с запятой добавила бы во время выполнения, делая код безопасным для последующей минификации.
Что означают варианты стиля скобок?
«Свернуть» оставляет открывающую скобку на той же строке, что и выражение (if (x) {), — это общепринятое соглашение JavaScript. «Развернуть» переносит каждую открывающую скобку на собственную строку (стиль Allman). «Развернуть в конце» оставляет открывающую скобку присоединённой, но помещает else и catch на новую строку после закрывающей скобки.
Браузерное форматирование JavaScript даёт вам читаемый код без шага сборки и без загрузки данных. Вставьте минифицированный или небрежный скрипт, выберите отступ и стиль скобок, затем скопируйте или скачайте результат. Ничего не покидает ваше устройство, аккаунт не нужен, а библиотека загружается только по запросу — так что открытие этой страницы стоит несколько килобайт, а не мегабайт.