Softonic

Formateur JavaScript

Étape 1 / 3
Suivant

Collez un bloc de JavaScript minifié ou mal indenté et obtenez un code propre et lisible formaté avec les mêmes règles que celles utilisées par les éditeurs. Choisissez des tabulations ou des espaces, des guillemets simples ou doubles, des points-virgules ou non, des virgules finales en ES5 ou partout. Gère la syntaxe moderne, chaînage optionnel, coalescence nullish, JSX, TypeScript, await au niveau supérieur.

Comment formater JavaScript

  1. 1

    Collez la source

    Tout JS, JSX ou TypeScript valide. Le parseur choisit le dialecte à partir de la syntaxe.

  2. 2

    Définissez vos préférences

    Taille d'indentation, tabulations vs espaces, style de guillemets, points-virgules, largeur d'impression, virgules finales.

  3. 3

    Formater

    L'outil exécute un passage compatible avec Prettier et produit le résultat formaté.

  4. 4

    Copiez la sortie

    Copie en un clic, ou téléchargez en tant que fichier. L'indentation d'origine est supprimée, pas superposée.

Options de style

Option Valeurs Par défaut
Indentation tab, 2, 4 2 espaces
Style de guillemets simple, double double
Points-virgules toujours, jamais toujours
Largeur d’impression 60 - 120 80
Virgules finales aucune, es5, toutes es5
Parenthèses fléchées toujours, éviter toujours
Espacement des crochets true, false true
Guillemets simples JSX true, false false

Pourquoi le formatage est important

Le formatage n’est pas cosmétique, il s’agit de réduire la charge cognitive. Un code formaté de manière cohérente permet aux réviseurs de se concentrer sur le changement logique, et non sur la recherche d’une accolade mal placée.

  • Le débat sur les détails prend fin une fois qu’un projet adopte un formateur. git diff montre le véritable changement, pas les débats sur l’indentation.
  • Hooks pré-commit (avec des outils comme Husky + lint-staged) formatent automatiquement les fichiers indexés avant qu’ils ne soient validés.
  • Intégration à l’éditeur (VS Code, WebStorm) applique les mêmes règles lors de l’enregistrement.

Ce que le formatage ne fait pas

  • Il ne fait pas de linting. Les règles de style (no-unused-vars, eqeqeq) relèvent d’ESLint. Un formateur ne fait que remodeler les espaces et la ponctuation, il ne rejette pas le code pour des problèmes logiques.
  • Il ne corrige pas les erreurs de syntaxe. Si l’entrée est un JS invalide, le formateur échouera. Utilisez-le comme un contrôle de santé pour vous assurer que votre code se parse au moins.
  • Il n’impose pas de conventions de nommage. camelCase vs snake_case est une règle de lint, pas une règle de formateur.

Erreurs courantes

  • Lutter contre le formateur. Si vous continuez à reformater après qu’il ait été exécuté, vous perdez tous les deux du temps. Configurez les options ou acceptez le choix du projet.
  • Exécuter le format sur un fichier généré. Sortie de bundler, code transpilé, .min.js, aucun d’eux n’en bénéficie. Formatez les sources, pas les artefacts.
  • Formater sans analyser. Un “pretty-print” regex corrompra les littéraux de modèle, les littéraux regex et JSX. Utilisez toujours un formateur basé sur un AST (comme celui-ci).

Questions fréquentes

Oui. Le parseur détecte la syntaxe TypeScript (types, interfaces, génériques, décorateurs) et formate en conséquence. JSX est également pris en charge dans les fichiers .tsx / .jsx.

Elle suit les mêmes règles que les valeurs par défaut de Prettier, configurables via les options habituelles (largeur d’impression, guillemets, points-virgules, virgules finales). Un fichier formaté ici devrait correspondre à un fichier formaté par Prettier avec la même configuration.

Le formateur nécessite un JavaScript valide et analysable. Si vous obtenez une erreur, le code a probablement un problème de syntaxe (accolade non fermée, JSX invalide, faute de frappe). Exécutez-le d’abord à travers un linter si le message n’est pas clair.

Oui. Les commentaires sur une seule ligne (//) et les commentaires en bloc (/* */) sont conservés dans la sortie, positionnés près de leur emplacement d’origine dans la source.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Compteur de FPS

Mesurez les FPS du navigateur avec requestAnimationFrame : lissage, fréquence d'images min et max, seuil d'alerte et graphique facultatif. Tout se passe en local, sans envoi ni API.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Générateur de flèches CSS

Créez localement une flèche CSS avec direction, couleur, taille et épaisseur de bordure, puis copiez la règle.

Outil disponible dans d’autres langues