# 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)