01
Identifier la syntaxe
Choisissez TS pour les annotations de type et TSX quand elles accompagnent du JSX. Les chevrons peuvent sinon être interprétés autrement.
- Le bouton Exemple charge un extrait adapté au mode sélectionné.
HTML / CSS Dev Tools
Formateur JavaScript
Choisissez la syntaxe et le style, puis comparez le résultat au code source.
Formateur JavaScript
Code source
Votre code reste dans cet onglet et n’est pas téléversé.
Résultat formaté
Collez du code ou chargez un exemple.
Un extrait collé depuis une issue peut être pénible à relire. Ce Formateur JavaScript conserve le texte initial à gauche et affiche à droite la version mise en forme, que ce soit du JS, du JSX, du TS ou du TSX.
Le Formateur JavaScript analyse la syntaxe avant de réécrire le code. Les chaînes de gabarit, les balises JSX et les annotations TypeScript ne sont pas traitées par un simple remplacement des espaces. Pour formater JavaScript, choisissez ensuite le mode correspondant.
Pourquoi choisir ce Formateur JavaScript ?
Le mode explicite et la comparaison préservent le contexte de chaque changement.
Quatre syntaxes sur la même page
Choisissez JS, JSX, TS ou TSX. Les composants TSX conservent leurs types et leurs balises; ils ne sont jamais présentés comme du JS directement minifiable.
Le texte original reste visible
Réglez les retraits, guillemets, points-virgules, largeur et virgules finales sans écraser la source. Le Formateur JavaScript désactive la copie tant que le résultat est périmé.
Trois vérifications avant de copier
02
Fixer le style
La mise en forme automatique attend 350 ms après une modification et repart si vous changez une option. Désactivez-la pour afficher le bouton manuel.
- En mode manuel, Ctrl/Cmd+Enter lance la mise en forme.
03
Vérifier la fraîcheur
Après une modification, copie et téléchargement attendent le nouveau résultat. Une erreur de syntaxe indique sa première ligne et sa colonne.
- Vérifier la syntaxe ne remplace pas le contrôle des types TypeScript.
Analyse et réglages disponibles
De JS à TSX
Les parseurs Prettier adaptés comprennent JavaScript, les balises JSX, les types TypeScript et les composants TSX.
Style détaillé
Choisissez deux ou quatre espaces, Tab, les guillemets, points-virgules, largeur et virgules finales. Le panneau source reste intact.
Contrôle et minification
Lancez le contrôle syntaxique séparément. Terser minifie uniquement le JS ordinaire et permet un téléchargement .min.js. Minifier JavaScript reste réservé au mode JS.
Ce que le résultat ne garantit pas
- Pas de validation des types
- Une analyse réussie ne prouve pas que les types sont corrects. Les dépendances du projet et tsconfig.json ne sont pas chargés.
- Minification limitée au JS
- JSX, TS et TSX doivent être transpilés dans votre propre chaîne de compilation. Le bouton est désactivé dans ces modes.
- Pas de réparation automatique
- Une chaîne ou une parenthèse inachevée produit une position de panne. Le Formateur JavaScript ne devine pas le code manquant et ne lance aucun script.
- Pas de configuration du dépôt
- Seules les options affichées s’appliquent. Les fichiers .prettierrc, plugins et règles ESLint du projet ne sont pas lus.
Questions sur le Formateur JavaScript
Ce format prend-il en charge TypeScript ?
Oui. Sélectionnez TypeScript ou TSX pour les types, et JSX pour les balises sans types. Le code est formaté, pas compilé.
La sortie est-elle compatible avec Prettier ?
Le moteur est Prettier avec les options visibles ici, mais il ne lit pas votre .prettierrc. Le rendu peut donc différer de celui de votre dépôt.
Pourquoi cela a-t-il échoué sur mon fichier ?
Le parseur a rencontré une syntaxe invalide ou incomplète. Vérifiez la ligne, la colonne et le mode choisi avant de relancer.
L'outil préserve-t-il mes commentaires ?
La mise en forme cherche à préserver les commentaires, mais leur position peut bouger avec la structure imprimée. La minification JS peut les supprimer.
Ce formateur JavaScript téléverse-t-il mon code ?
Non. Le code reste traité dans cet onglet du navigateur; cet outil ne le téléverse pas.
Pas de réponse ?
Essayer le Formateur JavaScript
Revenez au panneau, choisissez votre syntaxe et comparez la source au résultat avant de copier la version à jour.
Traitement local dans le navigateur.