UTILS.
100% у браузері
🎨

Форматувальник / бьютіфаєр JavaScript

Гарно форматуйте мініфікований або неохайний JavaScript і JSON з узгодженими відступами, пробілами та переносами рядків — власноруч написаний форматувальник, що працює повністю у браузері.

— результат з’явиться тут —

Про цей інструмент

Бьютіфаєр JavaScript переформатовує мініфікований, однорядковий або неузгоджено відформатований JavaScript і JSON у чистий, читабельний код з рівномірними відступами та пробілами. Він зручний для читання зібраної бібліотеки, впорядкування скопійованого фрагмента або огляду блоку JSON. Усе відбувається у вашому браузері — код лише переформатовується як текст, ніколи не виконується, тож немає eval, немає new Function і ніщо не завантажується.

Форматувальник — це власноруч написаний токенізатор, а не хак на регулярних виразах: він сканує код у токени, правильно пропускаючи вміст рядків, шаблонних літералів, регулярних виразів та рядкових/блочних коментарів, тож лапки й слеші всередині них ніколи не сприймаються як структура. Класична евристика lookbehind відрізняє оператор ділення від літерала регулярного виразу. Потік токенів потім переви­дається з переносами рядків після '{', '[' та ';', зменшеними відступами перед '}' і ']', одним елементом на рядок усередині об'єктних і масивних літералів та одним пробілом навколо операторів і після ключових слів.

Виберіть відступ у 2 пробіли, 4 пробіли або табуляцію, і стиль фігурних дужок: collapse залишає відкриваючу дужку на тому ж рядку (K&R / 1TBS), тоді як expand переносить її на власний рядок (Allman). Оскільки інструмент зберігає вміст рядків і регулярних виразів байт-у-байт, переформатований код семантично ідентичний вхідному. Скопіюйте результат прямо у ваш редактор.

Поширені запитання

Чи запускає або обчислює він мій код?
Ні. Бьютіфаєр лише токенізує та перевидає ваш код як текст. Він ніколи не викликає eval чи new Function і ніколи не виконує код, тож вставляти недовірений або власницький JavaScript безпечно. Уся робота залишається у вашому браузері.
Чи працює він також із JSON?
Так. JSON є підмножиною синтаксису JavaScript, тож вставлення мініфікованого об'єкта чи масиву JSON переформатовує його у форму з відступами й одним ключем на рядок. Рядки, числа та вкладені структури форматуються так само, як у JavaScript.
У чому різниця між стилями фігурних дужок?
Collapse (K&R / 1TBS) залишає відкриваючу дужку на тому ж рядку, що й інструкція, наприклад 'if (x) {'. Expand (Allman) ставить відкриваючу дужку на власний рядок під інструкцією. Обидва дають ідентичний, коректний код — відрізняється лише розташування.
Чи змінить він те, що робить мій код?
Ні. Змінюються лише пробіли, відступи та переноси рядків. Вміст рядків, шаблонних літералів та регулярних виразів зберігається точно, тож переформатований результат функціонально ідентичний оригінальному коду.

Більше інструментів