Formateur JSX

Téléverser

0 caractères

Outil Formateur JSX GeekFormat, basé sur le moteur Prettier v3 Standalone pour l'embellissement professionnel du code des composants React JSX/TSX. Prend en charge 12 configurations de formatage (taille d'indentation, points-virgules, style de guillemets, virgules de fin, espacement des accolades, parenthèses de fonction fléchée, largeur d'impression, guillemets simples JSX, accolade JSX sur la même ligne, stratégie de guillemets de propriété, etc.), moteur de compression Terser intégré, offre la commutation entre 7 langues : JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON. Éditeur avec coloration syntaxique CodeMirror 6, comparaison en temps réel dans des panneaux gauche-droite, prend en charge le téléversement/téléchargement de fichiers, l'historique, le partage URL, la copie en un clic. Traitement purement côté navigateur, pas d'envoi de code au serveur.

Recommandations connexes

Minification JSX

Formateur TSX

Formater JavaScript

Formatage CSS

Formatage JSON

À propos du formatage JSX

JSX signifie JavaScript XML, une extension de syntaxe JavaScript introduite par le framework React qui permet d'écrire directement des structures de balises de type HTML dans le code JavaScript. JSX est converti en appels de fonction React.createElement() classiques au moment de la compilation par des outils comme Babel ou TypeScript. JSX rend la structure du code des composants plus intuitive, permettant aux développeurs de décrire la structure de l'interface utilisateur comme en écrivant du HTML tout en obtenant toute la puissance expressive de JavaScript. Cependant, si le code JSX manque de formatage normalisé — niveaux d'imbrication de balises désordonnés, arrangement des attributs désorganisé, indentation incohérente — cela affectera gravement la lisibilité et l'efficacité de la maintenance, ce qui est aussi la valeur des outils de formatage JSX.

Prettier est actuellement l'outil de formatage de code le plus répandu dans l'écosystème JavaScript/JSX, créé par James Long en 2017, et est désormais devenu la norme de facto. Le concept central de Prettier est le « formateur opinionné » (opinionated formatter) — il ne propose que quelques éléments configurables, et le reste des règles sont intégrées et non modifiables. L'avantage de cette approche est d'éliminer les débats sans fin sur le style de code entre les équipes. Prettier prend en charge plusieurs langages et formats tels que JSX/TSX/JavaScript/TypeScript/JSON/CSS/HTML/Markdown, et est largement adopté par les communautés de frameworks principaux telles que React, Vue et Angular. La plupart des projets frontend modernes intègrent Prettier dans les pipelines CI/CD pour garantir un style de code cohérent.

Les règles centrales du formatage JSX incluent : Premièrement, les niveaux d'indentation — chaque balise et expression JSX imbriquée augmente d'un niveau d'indentation, reflétant la structure arborescente du DOM ; Deuxièmement, l'arrangement des attributs — lorsqu'une balise a plusieurs attributs et dépasse la largeur de ligne, chaque attribut occupe sa propre ligne et est aligné ; Troisièmement, le traitement des parenthèses — les expressions JSX multi-lignes sont généralement enveloppées de parenthèses pour prévenir les problèmes d'insertion automatique de point-virgule (ASI) ; Quatrièmement, les balises auto-fermantes — les composants sans éléments enfants utilisent la forme <Component /> ; Cinquièmement, les guillemets de chaîne — les attributs JSX utilisent par défaut des guillemets doubles (conformes à HTML), les chaînes JavaScript utilisent par défaut des guillemets simples ; Sixièmement, le traitement des espaces — l'ajout ou non d'espaces des deux côtés des accolades {} à l'intérieur des balises est configurable.

La compression JSX (Minification) est l'opération inverse du formatage, dont le but est de convertir JSX en code exécutable de volume minimal, utilisé pour le déploiement de production afin de réduire le volume de transmission réseau et d'accélérer le chargement. La compression JSX comprend généralement les étapes suivantes : d'abord compiler JSX en appels React.createElement (c'est-à-dire JavaScript ordinaire) à l'aide de Babel, puis utiliser un compresseur (tel que Terser, UglifyJS) pour : supprimer les commentaires et les caractères d'espacement, raccourcir les noms de variables et de fonctions (mangling), éliminer le code mort (dead code elimination), simplifier les expressions et les instructions conditionnelles, fusionner les déclarations, les fonctions en ligne, etc. Les outils de construction modernes (Webpack, Vite, Rollup) exécutent automatiquement la compression du code en mode production.

Pourquoi le formatage de code est-il important ? Dans la collaboration d'équipe, un style de code unifié peut grandement améliorer la lisibilité et l'efficacité de la revue. Si chaque développeur formate le code selon ses propres préférences, le Git diff sera rempli d'un grand nombre de changements de format sans signification, rendant difficile pour les réviseurs de trouver les changements logiques réels. Des recherches montrent que les développeurs passent beaucoup plus de temps à lire du code qu'à en écrire, et un style de formatage cohérent peut réduire considérablement la charge cognitive de lecture. De grandes entreprises comme Google, Meta et Airbnb ont toutes des spécifications de style de code strictes et des chaînes d'outils de formatage automatisées, ce qui est aussi un reflet de la maturité du génie logiciel.

La division du travail entre Prettier et les Linters (tels que ESLint, TSLint) est la bonne pratique de l'ingénierie frontend moderne : Prettier se spécialise dans le formatage — retours à la ligne, indentation, espaces, points-virgules, guillemets, virgules et autres problèmes de style pur ; ESLint se spécialise dans la qualité du code — variables inutilisées, bugs potentiels, problèmes de sécurité, bonnes pratiques et autres problèmes logiques. Lors de l'utilisation des deux ensemble, vous devez désactiver les règles de formatage qui se chevauchent dans ESLint via eslint-config-prettier pour éviter les conflits. De nombreuses équipes configurent également des hooks pre-commit (via husky + lint-staged) pour exécuter automatiquement Prettier et ESLint avant la soumission du code, garantissant que le code soumis respecte les spécifications.

Plusieurs facteurs doivent être pris en compte lors du choix d'un outil de formatage JSX : Premièrement, le choix du moteur — privilégier Prettier comme moteur, car c'est la norme communautaire, les résultats sont prévisibles et cohérents avec les extensions IDE ; Deuxièmement, la configurabilité — choisir le nombre de paramètres réglables selon les besoins de l'équipe, trop d'options augmentent plutôt le coût de décision ; Troisièmement, la sécurité — garantir que l'outil traite le code localement, ne l'envoie pas aux serveurs, évite les risques de fuite de code source ; Quatrièmement, les fonctionnalités supplémentaires — compression, coloration syntaxique, historique, partage et autres fonctionnalités peuvent améliorer l'efficacité d'utilisation ; Cinquièmement, la prise en charge multilingue — un outil couvrant plusieurs langages tels que JS/TS/JSX/TSX/CSS/HTML/JSON peut réduire les coûts de changement d'outil.

Précautions de sécurité pour l'utilisation d'outils de formatage de code en ligne : Premièrement, privilégier les outils à traitement purement côté navigateur — ces outils n'ont pas besoin de serveur, le code ne s'exécute que localement, avec la sécurité la plus élevée ; Deuxièmement, ne pas coller de code contenant des informations sensibles — telles que des mots de passe de base de données, des clés API, de la logique métier interne, des algorithmes propriétaires, etc., même si l'outil prétend ne pas téléverser, maintenir une conscience de sécurité ; Troisièmement, vérifier si l'outil utilise HTTPS — prévenir les écoutes clandestines pendant la transmission (bien que les outils traités localement n'aient pas besoin de transmission, la page elle-même a également besoin d'un chargement sécurisé) ; Quatrièmement, utiliser des outils locaux pour le code important — pour le code métier principal, il est recommandé d'utiliser Prettier CLI installé localement ou des extensions IDE, ne pas dépendre des services en ligne ; Cinquièmement, examiner régulièrement la crédibilité de l'outil — vérifier s'il est open source, quelles sont les évaluations de la communauté, s'il y a une politique de confidentialité, etc.

Cas d'utilisation

Code de composant React copié sur internet avec un format désordonné, formater rapidement pour faciliter la lecture et l'apprentissage
Organiser les fichiers de composants JSX lors de la reprise de projets anciens, unifier le style de code avant le développement secondaire
Formater avant la revue de code, éliminer les diffs sans signification causés par les différences de format, se concentrer sur la revue logique
Déformater du code JSX de production compressé, lire du code obscurci lors du dépannage de problèmes de production
Embellir le code d'exemple JSX avant de rédiger des blogs techniques ou de la documentation, améliorer le professionnalisme du contenu
Comparer les effets de différentes configurations de formatage, référence pour la sélection de la configuration Prettier de l'équipe
Démontrer le processus de formatage du code JSX de désordonné à normalisé lors de présentations pédagogiques
Lors du débogage en ligne d'extraits de code React, formater d'abord puis analyser la structure et localiser les bugs
Dans la documentation de bibliothèque de composants générant du code JSX, garantir que le style des exemples de code est unifié et beau
Organiser le code de votre projet React avant les entretiens, garantir que les échantillons de code soumis suivent les normes de style
Formater le code JSX généré par l'IA avant de l'intégrer dans les projets, éliminer le formatage incohérent de la sortie IA
Formater rapidement des extraits de code de composants en ligne lors du développement de projets React Native ou Next.js

Comment utiliser

Collez le code JSX/TSX dans l'éditeur gauche, ou cliquez sur le bouton de téléversement pour importer des fichiers .jsx/.tsx, ou chargez directement à partir des exemples
Cliquez sur le bouton de paramètres pour ajuster les paramètres de formatage : taille d'indentation, points-virgules, guillemets, virgules de fin, largeur d'impression, options JSX, etc., ou gardez la configuration par défaut
Cliquez sur le bouton d'embellissement (ou appuyez sur le raccourci) pour exécuter le formatage, le panneau droit affiche instantanément les résultats, vous pouvez glisser gauche-droite pour ajuster la largeur du panneau
Si une compression est nécessaire, cliquez sur le bouton de compression pour passer en mode compression, le moteur Terser produira du code JSX minimisé
Cliquez sur le bouton de copie pour copier les résultats dans le presse-papiers, ou cliquez sur télécharger pour sauvegarder en fichier, ou envoyez à d'autres via un lien de partage

Fonctionnalités

Moteur Prettier v3 : Basé sur Prettier v3 Standalone, le plus populaire du secteur, associé au parseur Babel, pour des résultats cohérents avec l'extension Prettier dans VS Code, garantissant un style de code d'équipe unifié
12 configurations de formatage : Taille d'indentation réglable (2/4/8 espaces ou Tab), points-virgules, guillemets simples/doubles, virgules de fin (none/es5/all), espacement des accolades, parenthèses de fonction fléchée, largeur d'impression, guillemets simples JSX, accolade JSX sur la même ligne, stratégie de guillemets de propriété, et 12 autres paramètres
Éditeur avec coloration syntaxique JSX : Éditeur de code professionnel basé sur CodeMirror 6, prenant en charge la coloration syntaxique JSX/TSX, les numéros de ligne, la correspondance d'accolades, avec comparaison en temps réel entre l'entrée gauche et les résultats droits
Fonction de compression JSX : Moteur de compression Terser intégré, compresse en un clic le code des composants JSX à la taille minimale, prenant en charge des options de compression avancées telles que le mangling de noms de variables, l'élimination de code mort, le nettoyage console/debugger, etc.
7 langues commutables librement : Prend en charge JavaScript, TypeScript, JSX, TSX, CSS, HTML, JSON — sept langages frontend courants, un outil couvre tous les besoins de formatage full-stack
Téléversement et téléchargement de fichiers : Prend en charge le téléversement direct et le formatage de fichiers .jsx/.tsx/.js/.ts/.css/.html/.json, qui peuvent être téléchargés et sauvegardés localement après traitement
Panneau d'historique : Sauvegarde automatiquement les enregistrements de formatage récents, prend en charge le retour aux versions historiques, et compare les effets de formatage avec différentes configurations
Copie des résultats en un clic : Le code formaté ou compressé peut être copié dans le presse-papiers en un clic, directement collé dans l'IDE ou les projets
Fonction de partage URL : Encode le code et la configuration dans le hash de l'URL via la compression LZ-String, copiez le lien pour partager le code complet et les paramètres de formatage
Messages d'erreur de syntaxe conviviaux : Distingue les erreurs de syntaxe des autres erreurs en cas d'échec du formatage, fournissant des indications de localisation pour aider à résoudre rapidement les problèmes de code
Panneaux fractionnés déplaçables : La largeur des panneaux gauche et droit peut être librement ajustée par glisser-déposer, s'adaptant à différentes tailles d'écran et habitudes de lecture
Traitement local dans le navigateur : Tout le formatage, la compression et l'analyse sont effectués en JavaScript dans le navigateur, le code n'est pas envoyé à un serveur, la sécurité du code source est garantie

FAQ

Quel est le principe du formatage JSX ? Quelle est sa relation avec Prettier ?

Cet outil utilise la version Prettier v3 Standalone comme moteur de formatage sous-jacent, analyse la syntaxe JSX via le parseur Babel, puis ressort du code proprement formaté selon les règles configurées. Prettier est actuellement l'outil de formatage de code le plus populaire de l'écosystème frontend, largement utilisé dans les projets React/Vue/Angular. Le résultat de formatage de cet outil est fondamentalement cohérent avec celui de l'extension Prettier dans VS Code pour les fichiers JSX, adapté au formatage en ligne rapide sans ouvrir l'IDE local.

Quelles options de formatage sont prises en charge ? Peut-on personnaliser l'indentation et le style des guillemets ?

Prend en charge 12 configurations de formatage : 1) Taille d'indentation : 2 espaces/4 espaces/8 espaces ou utilisation de Tab ; 2) Utilisation des points-virgules ; 3) Guillemets simples ou doubles ; 4) Stratégie de virgule de fin : none/es5/all (y compris les paramètres de fonction) ; 5) Espacement à l'intérieur des accolades d'objet ; 6) Parenthèses pour les fonctions fléchées à un seul paramètre ; 7) Largeur d'impression (nombre maximum de caractères par ligne) ; 8) Guillemets simples ou doubles pour les attributs JSX ; 9) Accolade de fermeture de JSX multi-lignes sur la même ligne que le contenu ; 10) Stratégie de guillemets pour les propriétés d'objet : as-needed/preserve/consistent ; 11) Sensibilité aux espaces blancs HTML ; 12) Utilisation de Tab pour l'indentation. Librement ajustable dans le panneau de paramètres.

Le formatage change-t-il la logique du code JSX ? Est-ce sûr ?

Le formatage ajuste uniquement les caractères d'espacement (sauts de ligne, indentation, espaces) et les formes de sucre syntaxique comme les guillemets et les points-virgules, il ne modifie aucune logique de code. Prettier est un outil mature vérifié par des millions de développeurs dans le monde, et le code formaté est sémantiquement complètement équivalent au code original. Cependant, notez : si le code original lui-même a des erreurs de syntaxe (comme des accolades non appariées, des balises non fermées), le formatage échouera et signalera une erreur de syntaxe, auquel cas vous devez d'abord corriger le problème de code avant de formater.

Comment la fonction de compression JSX est-elle mise en œuvre ? Quelles options de compression sont prises en charge ?

La compression JSX utilise le moteur Terser (l'un des compresseurs JavaScript les plus populaires du secteur) exécuté localement dans le navigateur. La compression comprend : suppression des commentaires et des espaces supplémentaires, raccourcissement et mangling des noms de variables, élimination de code mort (dead_code), suppression des variables inutilisées (unused), optimisation de la remontée de fonctions/variables, simplification des expressions conditionnelles, optimisation des boucles, etc. La compilation compile d'abord JSX en JavaScript ordinaire via Babel, puis effectue l'optimisation de compression. Note : le code compressé a une lisibilité considérablement réduite, adapté au déploiement de production, pas adapté au développement et au débogage.

TypeScript (TSX) est-il pris en charge ? Quelle est la différence avec JSX ?

Prise en charge. L'outil utilise par défaut le langage JSX, vous pouvez passer en mode TSX via le menu de commutation de langue en haut à gauche. Le mode TSX utilise le parseur TypeScript, qui peut reconnaître correctement les annotations de type TypeScript (interface, type, génériques, assertions de type, etc.), et ne signalera pas d'erreurs dues à la syntaxe de type. Le mode JSX utilise le parseur Babel, adapté aux composants React en JavaScript pur. La compression TSX supprimera automatiquement d'abord les annotations de type avant d'effectuer la compression Terser.

Le code JSX saisi sera-t-il envoyé au serveur ? La vie privée et la sécurité sont-elles garanties ?

Complètement sûr. Toutes les fonctionnalités de cet outil (formatage, compression, détection de syntaxe, historique) sont effectuées localement dans votre navigateur via JavaScript, le contenu du code n'est pas envoyé sur le réseau à un serveur externe. Prettier et Terser sont tous deux des bibliothèques implémentées en JavaScript pur qui peuvent s'exécuter directement côté navigateur. Vous pouvez utiliser cet outil hors connexion, toutes les fonctionnalités fonctionnent toujours normalement. L'historique est sauvegardé dans le localStorage du navigateur, visible uniquement sur votre appareil actuel.

Où l'historique est-il sauvegardé ? Seront-ils perdus ?

L'historique est sauvegardé dans le localStorage (stockage local) du navigateur, lié au navigateur et à l'appareil spécifiques. Si vous effacez les données du navigateur, changez de navigateur ou utilisez le mode navigation privée, l'historique sera perdu. L'historique est utilisé pour retrouver rapidement les extraits de code récemment formatés, pratique pour comparer les effets de différentes configurations. Il est recommandé de sauvegarder vous-même le code important sous forme de fichiers, et de ne pas compter uniquement sur la fonction d'historique.

La fonction de partage URL envoie-t-elle le code au serveur ?

Non. La fonction de partage URL compresse le code et la configuration à l'aide de LZ-String et les encode dans la partie hash de l'URL (contenu après le symbole #). Le hash URL a une caractéristique importante : il n'est pas envoyé au serveur avec les requêtes HTTP, et n'est lu et analysé que par JavaScript localement dans le navigateur. Lorsque le destinataire ouvre le lien de partage, le navigateur analyse directement le hash et décompresse pour afficher le code, l'ensemble du processus ne nécessite pas la participation du serveur. Mais veuillez noter : le lien de partage contient le contenu complet du code, si le code est sensible, ne le partagez pas via des canaux publics.

Que faire si le formatage échoue avec un message d'erreur de syntaxe ?

La cause la plus fréquente d'échec du formatage est des erreurs de syntaxe dans le code lui-même : 1) Balises JSX non fermées — vérifiez que toutes les balises sont appariées, les balises auto-fermantes sont correctes (<img /> pas <img>) ; 2) Accolades non appariées — vérifiez si les accolades {}, parenthèses (), crochets [] sont appariés ; 3) Guillemets non fermés — si les guillemets de chaîne sont complets ; 4) Syntaxe incorrecte — par exemple, utilisation d'une syntaxe non autorisée en JSX. Vous pouvez d'abord vérifier le numéro de ligne et le message d'erreur pour localiser le problème, ou simplifier le code et dépanner étape par étape.

Que signifie la largeur d'impression (print width) ? Quelle valeur dois-je définir ?

La largeur d'impression (printWidth) est l'un des paramètres centraux de Prettier, représentant le nombre maximum de caractères par ligne de code. Lorsqu'une ligne de code dépasse cette largeur, Prettier la renvoie automatiquement à la ligne. La valeur par défaut est de 80 caractères, ce qui est une convention de programmation ancienne (provenant des cartes perforées et de la largeur des terminaux). Les valeurs de paramétrage courantes : 80 (classique conservateur), 100 (plus courant), 120 (convivial pour écrans larges). Une valeur trop petite entraînera des retours à la ligne fréquents rendant le code plus difficile à lire, une valeur trop grande rend une ligne trop longue pour être lue sur des écrans étroits. Il est recommandé de choisir une valeur entre 80-120 selon les spécifications de l'équipe et la largeur du moniteur.

À quoi sert la virgule de fin (trailing comma) ? Quel mode dois-je choisir ?

La virgule de fin fait référence à l'ajout d'une virgule après le dernier élément dans des structures multi-lignes telles que les tableaux, les objets, les paramètres de fonction, etc. Les avantages incluent : 1) L'ajout/suppression d'éléments ne modifie qu'une ligne, le Git diff est plus propre ; 2) Éviter les erreurs de syntaxe causées par l'oubli d'ajouter des virgules ; 3) Une analyse plus stable dans certains cas. Prettier propose trois modes : none (pas de virgule de fin, le plus concis), es5 (ajouter uniquement là où ES5 le prend en charge, c'est-à-dire tableaux et objets, le plus compatible), all (ajouter partout où c'est possible, y compris les paramètres de fonction, nécessite ES2017+ ou la prise en charge Babel/TS). Les projets modernes recommandent d'utiliser le mode 'all', ce qui est parfaitement correct avec la compilation Babel ou TypeScript.

Quels sont les effets des guillemets simples JSX et de l'accolade JSX sur la même ligne ?

Guillemets simples JSX (jsxSingleQuote) : Contrôle si les valeurs des attributs JSX utilisent des guillemets simples ou doubles. Par défaut désactivé (guillemets doubles), ce qui est cohérent avec les conventions des attributs HTML. Lorsqu'activé, les chaînes d'attributs en JSX utiliseront des guillemets simples. Accolade JSX sur la même ligne (jsxBracketSameLine) : Contrôle si l'accolade droite de fermeture (/> ou >) des éléments JSX multi-lignes est placée à la fin de la dernière ligne (même ligne), ou sur une nouvelle ligne (ligne différente). Par défaut désactivé (nouvelle ligne), lorsqu'activé l'accolade droite est sur la même ligne que le dernier attribut. Différentes équipes ont différentes préférences, choisissez simplement le style cohérent avec le projet.

Le formatage par lots de plusieurs fichiers est-il pris en charge ?

Actuellement, l'outil en version web est principalement conçu pour les scénarios de formatage rapide de fichier unique, prenant en charge le traitement par téléversement de fichier unique. Si vous avez un grand nombre de fichiers JSX/TSX à formater par lots, il est recommandé d'installer l'outil Prettier CLI dans votre projet et de les traiter par lots via la ligne de commande (par ex., npx prettier --write "src/**/*.jsx"). Le moteur sous-jacent de cet outil est complètement cohérent avec Prettier, avec les mêmes résultats de formatage. Les versions futures pourront envisager d'ajouter des fonctionnalités de traitement par lots.

Peut-on l'utiliser avec ESLint ?

Oui. Dans les projets réels, il est recommandé d'utiliser Prettier pour le formatage du code (retours à la ligne, indentation, espaces, guillemets, etc.), et ESLint pour la qualité du code (variables inutilisées, bugs potentiels, bonnes pratiques, etc.). La bonne pratique pour utiliser les deux ensemble est : 1) Installer eslint-config-prettier pour désactiver les règles de formatage d'ESLint qui entrent en conflit avec Prettier ; 2) Exécuter d'abord le formatage Prettier, puis exécuter les vérifications ESLint. Cet outil se concentre sur le formatage (ce que Prettier fait bien), et n'inclut pas les fonctionnalités de vérification de code d'ESLint.

Peut-on l'utiliser sur téléphone portable ? Quelle est l'expérience mobile ?

Il peut être utilisé dans les navigateurs mobiles. L'outil adopte un design réactif, ajustant automatiquement la mise en page sur les appareils à petit écran — les panneaux fractionnés gauche-droite deviennent des panneaux haut-bas, et les boutons de la barre d'outils sont optimisés pour des tailles conviviales au toucher. Cependant, l'expérience d'édition de code sur mobile n'est pas aussi bonne que sur ordinateur, il est recommandé de l'utiliser principalement sur ordinateur. Si vous avez fréquemment besoin de traiter du code sur des appareils mobiles, il est recommandé d'utiliser une application d'éditeur de code mobile prenant en charge Prettier.

Dépannage

Que faire si le formatage échoue avec un message d'erreur de syntaxe ?

Vérifiez d'abord si le code est complet : les composants JSX ont généralement besoin d'export ou incluent au moins une fonction renvoyant JSX. Les erreurs de syntaxe courantes incluent : 1) Balises JSX non fermées — vérifiez que chaque balise ouvrante a une balise fermante correspondante ou une marque d'auto-fermeture ; 2) Accolades non appariées — si les parenthèses des expressions {} en JSX sont appariées ; 3) Guillemets de chaîne non fermés — vérifiez tous les guillemets simples/doubles/accent grave ; 4) Utilisation de mots réservés en JSX — par ex., class doit être écrit comme className, for doit être écrit comme htmlFor ; 5) Plusieurs éléments racine — JSX n'autorise qu'un seul élément racine, plusieurs éléments doivent être enveloppés avec <>...</> ou <div>. Les messages d'erreur indiquent généralement le numéro de ligne et la raison, vous pouvez localiser en conséquence.

Aucune réponse après le téléversement d'un fichier ou le format est incorrect ?

Vérifiez d'abord si l'extension de fichier est correcte — les fichiers .jsx/.tsx/.js/.ts/.css/.html/.json peuvent tous être téléversés. Si l'extension de fichier n'est pas standard, l'outil peut ne pas reconnaître correctement le format de langage, entraînant des résultats de formatage non conformes aux attentes. Solutions : 1) Assurez-vous que l'extension de fichier est au format standard ; 2) Après le téléversement, vérifiez si la sélection de langue en haut à gauche est correcte, sinon vous pouvez basculer manuellement ; 3) Confirmez que le contenu du fichier est du texte brut et non binaire ; 4) Les fichiers trop volumineux (plus de 1 Mo) peuvent provoquer des ralentissements du navigateur, il est recommandé d'utiliser des outils de bureau pour le traitement.

Le code formaté est différent de mes résultats Prettier locaux ?

Raisons possibles : 1) Différence de version — cet outil utilise Prettier v3, si votre projet utilise la version v2, certains détails peuvent différer (comme les changements de valeurs par défaut des virgules de fin) ; 2) Configurations différentes — vérifiez si des paramètres comme la largeur d'impression, l'indentation, les guillemets, les virgules de fin sont cohérents avec la configuration du projet ; 3) Parseur différent — JSX utilise le parseur Babel, TSX utilise le parseur TypeScript, confirmez la sélection correcte ; 4) Différence de plugins — si Prettier local a des plugins supplémentaires installés (comme prettier-plugin-tailwindcss), cet outil n'inclut pas ces plugins. Il est recommandé d'ajuster la configuration de cet outil pour qu'elle soit cohérente avec le .prettierrc du projet.

Le code ne s'exécute pas correctement après la compression JSX ?

La compression JSX utilise le moteur Terser, qui compile d'abord JSX en JavaScript ordinaire avant la compression. Si le code ne s'exécute pas après compression, vérifiez : 1) Si la configuration de compression est trop agressive — par ex., l'activation de toplevel peut modifier le comportement du module ; 2) Si eval ou l'accès dynamique aux propriétés est utilisé dans le code — le mangling de variables peut provoquer une incompatibilité de noms ; 3) Si des noms de fonction ou de classe spécifiques sont dépendants — si oui, il faut activer les options keep_fnames ou keep_classnames. La compression de l'environnement de production est recommandée d'être effectuée à l'aide des outils de construction du projet (Vite/Webpack), qui ont une configuration et un écosystème de plugins plus complets.

Glossaire

JSX: Abréviation de JavaScript XML, extension de syntaxe JavaScript introduite par React, permettant d'écrire des structures de balises de type HTML en JS, convertie en appels React.createElement() après compilation.
Prettier: Actuellement l'outil de formatage de code opinionné le plus populaire, prenant en charge JS/TS/JSX/TSX/JSON/CSS/HTML/Markdown, etc., est devenu la norme de facto du formatage de code frontend.
Babel: Compilateur JavaScript qui peut convertir une nouvelle syntaxe comme ES6+/JSX/TS en code ES5 compatible avec les anciens navigateurs, sert également de moteur sous-jacent à Prettier pour analyser JSX.
Terser: Le compresseur (minifier) JavaScript/JSX le plus populaire du secteur, prenant en charge le mangling de variables, l'élimination de code mort, la compression de code, etc., est le compresseur par défaut des outils de construction comme Webpack/Vite.
Print Width: L'un des paramètres centraux de Prettier, représentant le nombre maximum de caractères par ligne de code, retour automatique à la ligne en cas de dépassement. Par défaut 80 caractères, les paramètres courants sont 80/100/120.
Trailing Comma: Ajouter une virgule après le dernier élément dans des structures multi-lignes telles que les tableaux, les objets, les paramètres de fonction, etc. Peut rendre le Git diff plus propre et éviter les erreurs de syntaxe. Prettier prend en charge trois modes none/es5/all.
Mangle: Technologie de raccourcissement de noms de variables/fonctions dans la compression de code, remplaçant les longs noms de variables significatifs par des noms courts comme a/b/c, réduisant le volume du code, augmentant également la difficulté de lecture.
Dead Code Elimination: Technologie d'optimisation de compresseur qui supprime le code qui ne sera jamais exécuté (tel que le code sous condition false, les variables et fonctions inutilisées), réduisant la taille du build de production.
CodeMirror: Le composant d'éditeur de code côté navigateur utilisé par cet outil (version 6), fournissant des fonctionnalités d'édition professionnelles telles que la coloration syntaxique, les numéros de ligne, la correspondance d'accolades, largement utilisé dans divers IDE en ligne.
LZ-String: Algorithme de compression LZ implémenté en JavaScript, utilisé pour compresser et stocker efficacement le contenu du code dans le hash d'URL. Haut taux de compression et vitesse de décodage rapide, adapté aux scénarios de liens de partage.
localStorage: API de stockage clé-valeur local fournie par les navigateurs, capacité d'environ 5-10MB, les données persistent (sauf effacement actif). Cet outil l'utilise pour stocker l'historique de formatage.
ESLint: Outil de vérification statique de code JavaScript/TypeScript (Linter), principalement responsable de la qualité du code et des bonnes pratiques, généralement utilisé avec Prettier (Prettier gère le format, ESLint gère la qualité).

Langages et formats de fichiers pris en charge

L'outil prend en charge 7 langages frontend courants, commutables librement via le menu en haut à gauche :

Langage	Extension de fichier	Moteur de formatage	Moteur de compression
JavaScript	`.js, .mjs, .cjs`	Prettier (Babel)	Terser
TypeScript	`.ts, .mts, .cts`	Prettier (TypeScript)	Terser (types supprimés d'abord)
JSX	`.jsx`	Prettier (Babel)	Terser
TSX	`.tsx`	Prettier (TypeScript)	Terser (types supprimés d'abord)
CSS	`.css`	Prettier (PostCSS)	CSSO
HTML	`.html, .htm`	Prettier (HTML)	Implémentation personnalisée
JSON	`.json`	Prettier (JSON)	JSON.stringify

Aperçu des éléments de configuration de formatage

12 paramètres de formatage configurables et leurs effets :

Élément de configuration	Valeurs possibles	Valeur par défaut	Description
tabWidth Taille d'indentation	`2 / 4 / 8 / Tab`	`2 espaces`	Nombre d'espaces par niveau d'indentation, ou utilisation du caractère Tab
semi Points-virgules	`true / false`	`true`	Ajouter ou non des points-virgules en fin d'instructions
singleQuote Guillemets simples	`true / false`	`false (guillemets doubles)`	Les chaînes JS utilisent des guillemets simples ou doubles
trailingComma Virgule de fin	`none / es5 / all`	`es5`	Ajouter ou non une virgule de fin après le dernier élément dans les structures multi-lignes
bracketSpacing Espacement des accolades	`true / false`	`true`	Ajouter ou non des espaces à l'intérieur des accolades d'objet
arrowParens Parenthèses de flèche	`always / avoid`	`always`	Ajouter ou non des parenthèses pour les fonctions fléchées à un seul paramètre
printWidth Largeur d'impression	`nombre (recommandé 80-120)`	`80`	Nombre maximum de caractères par ligne, retour automatique en cas de dépassement
jsxSingleQuote Guillemets simples JSX	`true / false`	`false`	Les valeurs des attributs JSX utilisent des guillemets simples (par défaut guillemets doubles)
jsxBracketSameLine Accolade JSX même ligne	`true / false`	`false`	L'accolade droite de JSX multi-lignes est sur la même ligne que le dernier attribut
quoteProps Guillemets de propriété	`as-needed / preserve / consistent`	`as-needed`	Quand ajouter des guillemets aux noms de propriétés d'objet

Comparaison avant et après compression JSX

En utilisant un composant React typique comme exemple, montrant le changement de volume avant et après compression :

Élément de comparaison	Formaté (Développement)	Compressé (Production)	Taux de compression
Taille du code	~ 2,5 Ko	~ 0,8 Ko	`~68%`
Nombre de lignes	~ 80 lignes	1 ligne	`~99%`
Noms de variables	Noms significatifs	Lettres simples a/b/c/d	`—`
Commentaires	Tous les commentaires conservés	Tous supprimés	`—`
Lisibilité	Élevée (débogable et lisible)	Très faible (lisible par machine uniquement)	`—`
Cas d'utilisation	Développement, débogage, revue	Déploiement production, distribution CDN	`—`

Privacy & Security

Toutes les opérations de cet outil formateur JSX sont effectuées complètement localement dans le navigateur : le code que vous saisissez ou téléversez n'est formaté et compressé que dans le JavaScript du navigateur, et ne sera pas envoyé sur le réseau à un serveur externe. Prettier et Terser sont tous deux des bibliothèques JavaScript pures qui peuvent s'exécuter directement côté navigateur. L'historique est sauvegardé dans le localStorage (stockage local) du navigateur, visible uniquement sur l'appareil et le navigateur actuels. La fonction de partage URL compresse le code via LZ-String et l'encode dans la partie hash de l'URL (le contenu après # n'est pas envoyé au serveur). La page n'utilise pas de suivi par Cookie, et ne collecte pas le contenu du code saisi par les utilisateurs. Vous pouvez utiliser cet outil hors connexion, les fonctionnalités principales sont normalement disponibles.

Authoritative References

prettier.ioDocumentation officielle Prettier
terser.orgTerser - Compresseur JavaScript
react.devDocumentation officielle React - Présentation de JSX