# 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 у форматувачі коду.

Ваша реклама тут?

[Напишіть нам електронною поштою](mailto:hi@dennn.is?subject=%D0%A0%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B0%20%D0%BD%D0%B0%20OneClick%20Pro)

[Реклама Набір плагінів для роботи з агентами для WordPress.](https://sleekwp.com/?ref=oneclickpro)