Formateur JSX
Formater et embellir le JSX avec coloration syntaxique
Entrée
Sortie formatée
Qu'est-ce que le formateur JSX ?
JSX est du JavaScript avec une syntaxe de type XML pour les composants React. Le formateur JSX ajoute l'indentation et les sauts de ligne au code JSX/React. La documentation JSX React définit la syntaxe. Les formateurs JavaScript standards peuvent ne pas gérer correctement le JSX.
Cet outil s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur. Collez du JSX ou importez un fichier .jsx ou .js ; obtenez la sortie formatée. Pour le JavaScript pur, utilisez Formateur JavaScript. Pour la validation, utilisez Validateur JavaScript. Pour la conversion TypeScript, utilisez JavaScript vers TypeScript.
Comment utiliser cet outil
Coller ou importer
Collez le code JSX ou React dans le panneau gauche ou importez un fichier .jsx ou .js. Utilisez Exemple pour charger du code exemple. Utilisez Effacer pour réinitialiser.
Vérifier la sortie
Le panneau droit affiche le JSX formaté avec une indentation correcte. Un JSX invalide affichera une erreur.
Copier ou télécharger
Utilisez Copier ou Télécharger pour obtenir le résultat. Pour exécuter du code, utilisez Console JavaScript. Pour minifier, utilisez Minificateur JavaScript.
Exemples de formateur JSX
Voici un exemple de formatage de code JSX/React minifié.
Exemple : Composant carte abonné
Entrée JSX minifiée :
Sortie formatée :
Quand le formateur JSX aide
Lors de l'utilisation de React, Next.js ou d'autres frameworks basés sur JSX, ce formateur gère le mélange de JavaScript et XML. Idéal pour les composants, hooks et templates JSX. Les outils de build comme webpack et Vite utilisent souvent Babel pour transformer le JSX. Pour le JS pur, utilisez Formateur JavaScript.
Questions fréquentes
Mes données sont-elles privées ?
Oui. Le formatage s'exécute entièrement dans votre navigateur. Aucune donnée n'est envoyée à un serveur.
Formateur JSX vs Formateur JS ?
Le formateur JSX comprend la syntaxe JSX (balises, props). Le formateur JS est pour le JavaScript pur. Utilisez le formateur JSX pour le code React.
Prend-il en charge TypeScript/TSX ?
Il peut gérer le TSX dans certains cas. Pour le formatage TypeScript, vérifiez la sortie.
Qu'en est-il des templates Vue ?
Vue utilise une syntaxe de template différente. Cet outil est pour JSX/React.