Formateur JavaScript

Ce que fait le formateur JavaScript

Un code écrit par plusieurs personnes, copié depuis un forum ou extrait d’un bundle minifié est difficile à lire. L’espacement varie d’une ligne à l’autre, les longues chaînes d’appels débordent de l’écran et les callbacks imbriqués perdent leur forme. Un formateur JavaScript réécrit la mise en page du code selon un seul jeu de règles, pour que vous puissiez vous concentrer sur ce qu’il fait.

Cette page exécute Prettier 3, un formateur de code open source très répandu, directement dans votre navigateur. L’analyseur JavaScript n’est téléchargé qu’au premier formatage, et votre code ne quitte jamais la page.

Mode d’emploi

1. Collez du JavaScript ou du JSX dans la zone de gauche. Il est formaté juste après le collage.
2. Ou appuyez sur Ouvrir un fichier pour charger un fichier .js, ou sur Exemple pour voir un exemple.
3. Choisissez les options :
   • Indentation : 2 espaces, 4 espaces ou tabulations.
   • Largeur de ligne : 80, 100, 120 ou 160 caractères avant le passage à la ligne.
   • Virgules finales : Toutes, ES5 ou Aucune.
   • Guillemets simples : utiliser 'texte' au lieu de "texte".
   • Points-virgules : activé, il les ajoute en fin d’instruction ; désactivé, il les retire là où c’est sans danger.
4. Appuyez sur Formater ou Ctrl+Entrée.
5. Appuyez sur Copier, ou sur Télécharger pour enregistrer un fichier .js.

Après le premier passage, le résultat suit votre frappe, et changer une option reformate aussitôt.

Avant et après

Saisie minifiée :

const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}

Après Formater avec les options par défaut :

const total = (items) =>
  items
    .filter((i) => i.qty > 0)
    .reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  return res.json();
}

Le paramètre de la fonction fléchée reçoit des parenthèses, la chaîne de méthodes est découpée en un appel par ligne car elle ne tient pas en 80 caractères, et les guillemets simples deviennent doubles. Avec une Largeur de ligne de 100, la même chaîne tient sur une ligne :

const total = (items) =>
  items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);

Guillemets, points-virgules et virgules finales

Ces trois options couvrent la plupart des débats de style en équipe.

Avec Guillemets simples activé et Points-virgules désactivé :

const name = 'Ada'
let list = [1, 2, 3]

Virgules finales décide si le dernier élément d’une liste ou d’un objet sur plusieurs lignes reçoit une virgule. Toutes, la valeur par défaut de Prettier, donne :

const user = {
  firstName: "Ada",
  lastName: "Lovelace",
  email: "[email protected]",
  role: "admin",
};

Aucune retire la dernière virgule après "admin". Les virgules finales rendent les diffs plus propres, car ajouter un élément ne modifie qu’une ligne. ES5 les ajoute dans les tableaux et les objets mais pas dans les paramètres de fonction, pour les environnements très anciens.

Les chaînes en français, accents et apostrophes compris, ne sont pas modifiées. Avec Guillemets simples, Prettier garde des guillemets doubles autour d’une chaîne qui contient une apostrophe, comme "l'été", pour éviter d’avoir à l’échapper.

JSX

Les composants React sont formatés aussi :

const App = () => (
  <div className="app">
    <h1>Hello</h1>
    <p>{name}</p>
  </div>
);

Erreurs de syntaxe

Si le code ne peut pas être analysé, le formateur s’arrête et vous dit où. Pour un objet auquel il manque une virgule :

const a = {
  b: 1
  c: 2
};

le message est Ligne 3, colonne 3 : Unexpected token, expected ",". Appuyez sur Afficher dans l’entrée pour aller à cet endroit. Une fonction sans accolade fermante donne Ligne 3, colonne 1 : Unexpected token, qui pointe la fin de la saisie où l’analyseur attendait }. Les messages de l’analyseur sont en anglais.

Le formateur n’exécute pas votre code et ne le passe pas au linter. Les variables inutilisées, les noms de fonctions erronés et les erreurs de logique ne sont pas signalés.

Conseils

• Mettez-vous d’accord une fois sur les options et écrivez-les dans un fichier .prettierrc du projet, pour que les éditeurs et cette page donnent le même résultat.
• Formatez avant de lire un code inconnu. Une mise en page qui suit la structure rend les erreurs d’imbrication faciles à repérer.
• Pour du code avec annotations de types, utilisez le formateur TypeScript. L’analyseur JavaScript s’arrête au premier : string.
• Pour des données plutôt que du code, le formateur JSON est plus strict et valide aussi.

Autres façons de formater du JavaScript

• VS Code : Mettre en forme le document (Maj+Alt+F sous Windows, Maj+Option+F sous macOS). Installez l’extension Prettier et choisissez-la comme formateur par défaut pour obtenir le même résultat que cette page.
• Ligne de commande : npx prettier --write src/app.js, ou npx prettier --check . en intégration continue pour faire échouer un build quand des fichiers ne sont pas formatés.
• Outils de développement du navigateur : le bouton d’affichage lisible du panneau Sources rend les scripts minifiés lisibles pendant le débogage.

Les scripts placés dans une page HTML peuvent être formatés en même temps que le balisage avec le formateur HTML.