Онлайн-форматтер JavaScript для более чистого кода сайта

Введение

Код JavaScript, сжатый минификатором для продакшена или просто набранный наспех, без оглядки на оформление, читается по-настоящему тяжело: единых отступов нет, несколько инструкций втиснуты в одну строку, блоки визуально не отделяются друг от друга. Форматирование переписывает такой код заново — расставляет отступы, переносы строк между инструкциями и одинаковые пробелы — и при этом никак не меняет того, что код делает. Логика, имена переменных и поведение остаются прежними; меняется только то, как код выглядит на экране. Для тех, кто учится не просто писать JavaScript, а читать его, разница существенная: один и тот же скрипт в виде плотной строки выглядит пугающе, а разложенный на аккуратно выстроенные инструкции и блоки становится совершенно понятным.

Как инструмент форматирует ваш код

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

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

Что полезно знать до начала работы

Прежде чем вставлять сюда рабочий код, стоит учесть две особенности:

• Пустые строки не сохраняются. Форматировщик решает, где ставить переносы, исходя из структуры самого кода, а не из того, где вы оставили пустые строки в исходном тексте. Если вы разделяли ими смысловые части скрипта, это разбиение после форматирования может не сохраниться — логика и все инструкции останутся на месте, но без вашей исходной группировки.
• Шаблонные строки (в обратных кавычках) не распознаются как строки. Современный JavaScript позволяет собирать строки из обратных кавычек и встроенных выражений, например `Hello, ${name}`. Форматировщик этого инструмента не считает текст в обратных кавычках строкой в том же смысле, что и текст в обычных кавычках, поэтому код с шаблонными строками может выйти переформатированным неверно именно на этих участках. Если скрипт их использует, внимательно проверьте этот фрагмент результата или отформатируйте остальной код, оставив такие строки без изменений.

Ни то, ни другое не меняет работу вашего исходного кода — вы всегда работаете с тем, что вставили сами, и ничего не изменится, пока вы не скопируете отформатированный результат обратно в проект.

Когда этот инструмент уместен

• Разобрать чужой минифицированный скрипт. JavaScript публичного сайта, открытый через инструменты разработчика в браузере, чаще всего выглядит как плотный неотформатированный файл — вставив его сюда и отформатировав, можно действительно изучить, как он устроен: это полноценная работа с цифровой грамотностью, а не просто наведение порядка в коде.
• Проверить сданный учеником код. Скрипт без единого оформления читается и проверяется медленнее; если сначала его отформатировать, замечания пишутся быстрее и легче.
• Привести в порядок собственный код перед сдачей работы. Единообразное оформление помогает учителю — да и вам самим через несколько месяцев — проследить логику.
• Подготовить пример кода к уроку. Функция, набросанная на скорую руку при подготовке, на проекторе обычно выглядит плотной и трудной для восприятия; отформатированная заранее, она даёт чистый код с ровными отступами, который класс разберёт даже с задних парт.

Если код активно опирается на шаблонные строки или речь идёт о большой современной кодовой базе, где результат обязан быть гарантированно верным, надёжнее воспользоваться встроенным форматировщиком редактора кода — см. ограничение выше. Этот инструмент лучше всего подходит для скриптов обычного учебного масштаба.

Пример

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

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

Меняется ли работа кода после форматирования?

Нет. Меняется только оформление — отступы, переносы строк и пробелы; логика и поведение остаются прежними.

Сохранятся ли мои комментарии?

Да. Комментарии, включая лицензионные шапки, сохраняются и переформатируются вместе с остальным кодом.

Поддерживаются ли шаблонные строки (в обратных кавычках)?

Не вполне надёжно. Код с `like this ${example}` может выйти переформатированным неверно на этих участках — проверьте эту часть результата или оставьте такие строки без форматирования.

Сохраняется ли мой код где-нибудь?

Нет. Вставленный код обрабатывается, чтобы получить отформатированный результат, и после этого не хранится; фиксируется только сам факт обращения к инструменту, но не код.

Добавляет ли он точки с запятой или убирает их?

Нет. Точки с запятой остаются ровно такими, как в вашем исходном коде, и лишь встраиваются в новые переносы и отступы — если их не было, не будет и в результате.

Можно ли отформатировать несколько скриптов сразу?

Вставляйте и форматируйте по одному скрипту за раз. Если их нужно оформить вместе, сначала объедините файлы или повторите процедуру для каждого.

Какие смежные инструменты пригодятся?

Для другого кода подойдут CSS Beautifier и HTML Beauty, а CSS Minifier сожмёт CSS, когда он будет готов к продакшену.