Formateur JSX
Formatez les composants React et les autres JSX avec ce formateur JSX. Collez votre code : l’outil l’analyse comme un module JavaScript avec JSX, puis imprime le JavaScript avec une indentation de deux espaces et des points-virgules. Les éléments JSX sur plusieurs lignes sont disposés avec leurs balises imbriquées sur des lignes distinctes entre parenthèses. Les erreurs de syntaxe sont signalées afin que les développeurs React récupèrent des composants lisibles pour les revues, le débogage et la documentation.
Foire aux questions
Comment fonctionne le formateur JSX ?
Il analyse d’abord le code comme un module JavaScript avec JSX activé, puis l’imprime dans un style cohérent. Les éléments JSX sont ensuite disposés selon les mêmes règles que le formateur HTML : les balises de bloc imbriquées sont placées sur leurs propres lignes indentées.
Comment les éléments JSX sur plusieurs lignes sont-ils écrits ?
Lorsqu’un élément contient des enfants de niveau bloc, comme div, section, p, ul ou h1, chaque enfant est placé sur sa propre ligne et l’ensemble de l’élément est entouré de parenthèses. Les éléments qui tiennent sur une seule ligne, comme une balise de composant seule, restent en ligne.
Les fragments et les composants autofermants sont-ils pris en charge ?
Oui, les fragments écrits sous la forme <> et </> ainsi que les composants autofermants comme <Item key={1}/> sont analysés et conservés. Leurs attributs et les expressions entre accolades sont copiés tels quels.
Que se passe-t-il en cas d’erreur de syntaxe ?
L’analyseur s’arrête et l’outil affiche son message, par exemple un jeton inattendu, au lieu de renvoyer du code partiellement formaté. Corrigez l’emplacement indiqué et relancez le formatage.
Quel style utilise la partie JavaScript ?
Les blocs ont une indentation de deux espaces, une instruction par ligne, des espaces autour des opérateurs et des points-virgules à la fin des instructions. Le style ne peut pas être modifié.
Les commentaires sont-ils préservés ?
Oui, les commentaires de ligne et de bloc dans JavaScript sont conservés. Les commentaires dans les expressions JSX restent entre leurs accolades.
Prend-il en charge TypeScript dans les fichiers TSX ?
Non, les annotations de type ne font pas partie de la grammaire JSX analysée par cet outil ; TSX avec des types est donc rejeté comme erreur de syntaxe. Utilisez le formateur TypeScript pour le code typé.
Le formatage modifiera-t-il le rendu de mon composant ?
Le JavaScript est simplement réimprimé, et la disposition JSX modifie les espaces blancs entre les éléments de bloc, que React ignore lorsqu’ils se trouvent sur des lignes distinctes. Vérifiez le texte en ligne à côté des balises si l’espacement exact est important.
Pourquoi la sortie est-elle encadrée comme du javascript ?
JSX est une extension de JavaScript ; le résultat est donc renvoyé dans un bloc de code Markdown marqué javascript. Copiez les lignes entre les délimiteurs dans votre fichier .jsx.
Quelle taille peut faire mon composant ?
Jusqu’à 5 MB de code par exécution ; les entrées plus volumineuses sont rejetées avec un message. La sortie est identique à l’option JSX du formateur de code.