Форматиращ инструмент за 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 във Форматиращия инструмент за код.