Formateur JS / TS
Embellit ou minifie JavaScript, TypeScript et JSX/TSX avec les options de Prettier.
Votre code est formaté localement dans votre navigateur avec Prettier et Terser, et rien n'est envoyé à un serveur.
Besoin de formater aussi des styles ? Essayez le Formateur CSS.
À propos de Formateur JS / TS
Ce formateur js embellit ou minifie JavaScript, TypeScript et JSX/TSX directement dans votre navigateur. En tant qu'embellisseur JavaScript, il exécute Prettier avec un panneau d'options complet, tandis que la minification utilise Terser pour réduire le code en production. Choisissez l'analyseur Auto pour détecter la syntaxe automatiquement, ou forcez JS/JSX ou TS/TSX lorsque vous avez besoin d'un formateur TypeScript spécifique. Ajustez les points-virgules, le style de guillemets, la largeur des tabulations, la largeur d'impression et les virgules finales pour correspondre au style de votre projet. Conçu pour les développeurs nettoyant des extraits désordonnés, les ingénieurs QA inspectant des sorties groupées et quiconque veut une alternative rapide à prettier en ligne. Tout est traité localement dans votre navigateur, votre code source ne quitte jamais votre appareil et rien n'est envoyé à un serveur.
Fonctionnalités
- Embellit JavaScript, TypeScript et JSX/TSX avec Prettier
- Minifie avec Terser pour réduire le code en production
- Détection automatique de l'analyseur, plus modes explicites JS/JSX et TS/TSX
- Activez les points-virgules, les guillemets simples ou doubles et tabulations contre espaces
- Largeur de tabulation configurable (2 ou 4) et largeur d'impression (80, 100, 120)
- Choisissez les virgules finales : none, es5 ou all
- Formatage instantané à mesure que vous ajustez une option
- Tout s'exécute dans votre navigateur
Comment utiliser Formateur JS / TS
- Collez votre JavaScript ou TypeScript dans la zone de saisie.
- Choisissez Embellir pour formater joliment ou Minifier pour compresser.
- Choisissez l'analyseur : Auto, JS / JSX ou TS / TSX.
- Ajustez les options comme la largeur de tabulation, les guillemets, les points-virgules et les virgules finales.
- Copiez la sortie formatée depuis le panneau de résultat.
Exemple
Entrée
const greet=(name)=>{return 'salut '+name}
Sortie
const greet = (name) => {
return 'salut ' + name;
};
Embelli avec les options Prettier par défaut (indentation de 2 espaces, points-virgules).
Erreurs courantes et dépannage
- La sortie est vide ou affiche une erreur d'analyse après le collage. — Assurez-vous que l'extrait est du JavaScript ou TypeScript valide. Passez l'analyseur en TS / TSX pour les annotations de type, ou JS / JSX pour la syntaxe React.
- Le mode Auto analyse mal une syntaxe spécifique à TypeScript. — Auto essaie d'abord l'analyseur TypeScript puis se replie sur Babel ; forcez explicitement TS / TSX si votre fichier utilise des fonctionnalités de type avancées.
- La sortie minifiée semble illisible. — C'est attendu. Terser retire les espaces et raccourcit le code pour la production. Utilisez Embellir si vous voulez un résultat lisible.
- Les guillemets ou points-virgules ne sont pas ceux souhaités. — Activez les options Guillemets simples et Points-virgules avant de copier. Prettier reformate instantanément quand vous les changez.
Foire aux questions
- Qu'est-ce que le formateur JS et que peut-il faire ?
- C'est un outil basé sur le navigateur qui embellit ou minifie JavaScript, TypeScript et JSX/TSX. L'embellissement exécute Prettier avec des options de style complètes et la minification exécute Terser pour compresser le code en production.
- Comment formater du TypeScript ou du JSX avec le formateur JS ?
- Choisissez l'analyseur : JS / JSX, TS / TSX ou Auto. Auto essaie d'abord l'analyseur TypeScript puis se replie sur Babel, le JavaScript pur, le JSX et le TypeScript se formatent donc tous correctement.
- Le formateur JS utilise-t-il Prettier et Terser ?
- Oui. L'embellissement utilise Prettier et la minification utilise Terser, la sortie correspond donc aux mêmes outils que vous utiliseriez dans un vrai pipeline de build.
- Quelles options de style puis-je contrôler dans le formateur JS ?
- Vous pouvez activer les guillemets simples ou doubles et les points-virgules, basculer entre tabulations et espaces, définir la largeur de tabulation à 2 ou 4, choisir une largeur d'impression de 80, 100 ou 120, et choisir des virgules finales none, es5 ou all.
- Le formateur JS envoie-t-il mon code quelque part ?
- Non. Prettier et Terser s'exécutent tous deux entièrement dans votre navigateur, votre code ne quitte jamais votre appareil et rien n'est envoyé à un serveur.
Outils associés
- Formateur CSS / SCSS — Embellit ou minifie CSS/SCSS/LESS, trie les propriétés et supprime les doublons.
- Formateur HTML — Embellit ou minifie le HTML, met en forme le CSS/JS en ligne et prévisualise le résultat.
- Formateur JSON — Embellit, minifie et valide le JSON avec la localisation des erreurs.
- JSON vers TypeScript — Génère des interfaces TypeScript à partir d’un échantillon JSON.
- Formateur SQL — Met en forme le SQL pour MySQL, PostgreSQL, SQL Server, SQLite, BigQuery et Oracle.
- Formateur GraphQL — Met en forme ou minifie les requêtes et schémas GraphQL, valide la syntaxe et extrait les opérations.
- Formateur XML — Embellit, minifie et valide le XML, et convertit XML ↔ JSON.
- cURL vers Fetch — Convertit une commande curl en un appel fetch() JavaScript.
Tous les outils ArrayKit