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 в форматере кода.