IZN Tools

Форматирование JavaScript

Вернуть читаемость минифицированному или сгенерированному JS.

ВВОД
РЕЗУЛЬТАТ
Ожидание ввода
Посчитано на вашем устройстве

Чтение чужого кода

Типичный случай — бандл: одна строка, тысячи символов, невозможно понять, где начинается функция. Форматирование возвращает структуру — вложенность, ветвления, тела циклов, — и этого достаточно, чтобы проследить, что скрипт делает с вашей страницей.

Чего оно вернуть не может — это имена. Для идентификаторов минификация необратима: исходных имён в файле нет. Готовьтесь читать a, b и n и восстанавливать смысл по контексту.

Зачем настоящий парсер

Форматирование расстановкой переносов после точек с запятой и скобок ломается на первой же строке со скобкой внутри, первом регулярном выражении с кавычкой и на любом шаблонном литерале. Prettier разбирает код в синтаксическое дерево и печатает из него, поэтому такие случаи ошибиться структурно не позволяют.

Единообразие важнее вкуса

Ценность форматтера не в том, что его стиль лучший, а в том, что он одинаковый каждый раз. Diff показывает изменённую логику вместо переразбитых строк, и код-ревью перестаёт тратить время на то, где ставить скобку.

Вопросы

Можно так читать минифицированный код?+

Форматирование восстанавливает структуру — отступы, переносы, границы блоков, — и поток управления становится виден. Имена оно вернуть не может: минификатор переименовал переменные в a, b, c, и эта информация утрачена. Вы получаете читаемую форму, а не читаемый смысл.

Может ли форматирование изменить поведение?+

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

Поддерживаются ли JSX и современный синтаксис?+

Да — парсер babel понимает JSX, опциональную цепочку, оператор ??, поля классов, top-level await и декораторы.

Пишет, что не может разобрать код.+

Значит, в таком виде это не валидный JavaScript. Самая частая причина здесь — аннотации TypeScript, вторая — фрагмент, вырезанный из середины файла. Отказ форматтера угадывать — правильное поведение: догадка даёт код, который выглядит верным и таковым не является.