JSX форматувач
Форматуйте компоненти React та інші JSX за допомогою цього форматувача JSX. Вставте код, і інструмент розбере його як модуль JavaScript з JSX, виведе JavaScript із відступом у два пробіли та крапками з комою, а багаторядкові елементи JSX розташує так, щоб вкладені теги були на окремих рядках у дужках. Про синтаксичні помилки буде повідомлено, тож розробники React отримають читабельні компоненти для перегляду, налагодження та документації.
Поширені запитання
Як працює форматувач JSX?
Спочатку код розбирається як модуль JavaScript з увімкненим JSX і виводиться в узгодженому стилі. Елементи JSX розташовуються за тими самими правилами, що й у форматувачі HTML, тож вкладені блокові теги отримують власні рядки з відступами.
Як записуються багаторядкові елементи JSX?
Якщо елемент містить блокових нащадків, як-от div, section, p, ul або h1, кожен нащадок розміщується на окремому рядку, а весь елемент береться в дужки. Елементи, що вміщуються в один рядок, наприклад одиночний тег компонента, залишаються в одному рядку.
Чи підтримуються фрагменти та компоненти із самозакривальними тегами?
Так, фрагменти у формі <> і </> та компоненти із самозакривальними тегами, як-от <Item key={1}/>, розбираються та зберігаються. Їхні атрибути й вирази у фігурних дужках копіюються без змін.
Що відбувається із синтаксичними помилками?
Парсер зупиняється, а інструмент показує повідомлення, наприклад про неочікуваний токен, замість того щоб повертати частково відформатований код. Виправте вказане місце й запустіть форматування знову.
Який стиль використовує частина JavaScript?
Блоки мають відступ у два пробіли, одна інструкція розміщується в кожному рядку, навколо операторів ставляться пробіли, а в кінці інструкцій — крапки з комою. Змінити стиль неможливо.
Коментарі зберігаються?
Так, рядкові та блокові коментарі в JavaScript зберігаються. Коментарі всередині виразів JSX залишаються у фігурних дужках.
Чи підтримує він TypeScript у файлах TSX?
Ні, анотації типів не входять до граматики JSX, яку розбирає цей інструмент, тому TSX із типами відхиляється як синтаксична помилка. Для коду з типами скористайтеся форматувачем TypeScript.
Чи змінить форматування відображення мого компонента?
JavaScript лише повторно виводиться, а макет JSX змінює пробіли між блоковими елементами, які React ігнорує, коли вони розміщені на окремих рядках. Перевірте вбудований текст поруч із тегами, якщо важливі точні пробіли.
Чому вихід обрамлено блоком коду javascript?
JSX — це розширення JavaScript, тому результат повертається як блок коду Markdown з позначкою javascript. Скопіюйте рядки між роздільниками у свій файл .jsx.
Яким може бути розмір мого компонента?
До 5 MB коду за один запуск; більший обсяг відхиляється з повідомленням. Результат такий самий, як опція JSX у форматувачі коду.