Як працює форматування 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 дає вам читабельний код без кроку збірки й без завантаження даних. Вставте мінімізований або неохайний скрипт, виберіть відступ і стиль дужок, потім скопіюйте або завантажте результат. Нічого не залишає ваш пристрій, акаунт не потрібен, а бібліотека завантажується лише на вимогу — тому відкриття цієї сторінки коштує кілька кілобайт, а не мегабайт.