OnlineConverTools
Se connecter

Formateur JavaScript

Formatez ou minifiez du code JavaScript

À propos de l’outil Formateur JavaScript

L’outil Formateur JavaScript fait deux travaux opposés sur le même code. « Formater » utilise js-beautify : indentation de 2 espaces, une instruction par ligne, des espaces autour des opérateurs, au plus une ligne vide gardée à la suite, et les chaînes, les littéraux de gabarit, les expressions régulières et les commentaires laissés tels qu’ils sont écrits. « Minifier » utilise Terser, le même moteur que l’outil Minificateur JS : il analyse le code, raccourcit les noms locaux et retire le code mort et les commentaires. « Formater » ne signale jamais de code invalide ; « Minifier » s’arrête et affiche le message de Terser, sans numéro de ligne. js-beautify et Terser traitent tous deux votre code dans l’onglet du navigateur.

Exemple

« Formater » : une fonction écrite sur une ligne, mise en forme avec une indentation de 2 espaces.

Entrée

function f(a,b){if(a){return b}else{return 0}}var x=f(1,2);

Sortie

function f(a, b) {
  if (a) {
    return b
  } else {
    return 0
  }
}
var x = f(1, 2);

Comment formater ou minifier du JavaScript

  1. 1Collez du JavaScript dans « Entrée ».
  2. 2Cliquez sur « Formater » pour le rendre lisible, ou sur « Minifier » pour le rendre compact.
  3. 3Lisez « Sortie » ; après « Minifier », une erreur s’y affiche sous la forme « Erreur : » suivie du message de Terser.
  4. 4Cliquez sur « Copier », ou sur « Télécharger » pour enregistrer « formatted.js » (le nom reste le même après « Minifier »).

Formats et limites

Entrée
JavaScript, scripts ou modules, sous forme de texte
Formater
js-beautify : indentation de 2 espaces, espaces autour des opérateurs, une seule ligne vide à la suite au plus
Minifier
Terser : compression et raccourcissement des noms, commentaires retirés
Erreurs
« Formater » n’en signale aucune ; « Minifier » affiche le message de Terser, sans ligne ni colonne

Où votre code est traité

Le formateur et le minificateur sont des bibliothèques JavaScript chargées dans cette page à la première utilisation ; ils lisent votre code dans le navigateur, et votre code n’est pas envoyé. Quand une erreur de « Minifier » s’affiche, son message est envoyé à notre journal des erreurs, épuré des passages entre guillemets, des nombres longs et des adresses, avec le nom de l’outil ainsi que le nom et la version de votre navigateur.

Questions fréquentes

La mise en forme change-t-elle ce que fait mon code ?

Non. « Formater » ne change que les espaces : l’indentation, les retours à la ligne et les espaces autour des opérateurs et des mots-clés. Les chaînes, les littéraux de gabarit, les expressions régulières et les commentaires sont gardés exactement tels qu’ils sont écrits.

Le code minifié peut-il être utilisé sans risque ?

Oui, quand Terser l’accepte : il analyse d’abord le code, si bien que l’insertion automatique des points-virgules et des expressions comme a - -b gardent leur sens. Les noms globaux restent ; seuls les noms locaux à une fonction sont raccourcis.

L’erreur de « Minifier » donne-t-elle un numéro de ligne ?

Non. La page n’affiche que le message de Terser, comme Name expected, et pas la position que Terser garde à part. Pour trouver l’erreur, collez le code dans l’outil Formateur de code, qui signale les erreurs de syntaxe avec la ligne et la colonne.

Trucs et astuces

  • ✓Formatez le code minifié d’un site web pour le lire ; gardez votre propre code source lisible et minifiez-en une copie pour la mise en ligne.

Outils associés