Espace de formatage de code

Choisissez le langage et lancez le formatage Prettier. Comparez ou copiez le résultat ; le code n’est pas exécuté.

Fonctionne localement dans votre navigateur
ÉDITEUR LOCALMonaco 0.56.0Prettier 3.9.6Rien n’est téléversé
Le code est entièrement formaté dans votre navigateur. L’éditeur et le formateur sont auto-hébergés par KivTools et n’envoient aucun extrait à une API distante.
Source

L’éditeur amélioré se charge uniquement sur cette page. S’il ne peut pas démarrer, le même formateur local reste disponible dans le champ de secours.

Sortie formatée

Le formatage modifie les espaces et la disposition ; conservez toujours une copie du projet avant d’appliquer des transformations générales du code.

Comment formater du code dans l’espace de travail

L’espace de travail formate huit langages — JavaScript, TypeScript, JSON, CSS, HTML, Markdown, YAML et GraphQL — avec Prettier 3.9.6 exécuté dans la page. Choisissez le langage, placez le code dans le volet gauche et cliquez sur Formater le code ; le volet droit affiche le résultat.

L’éditeur avancé est Monaco 0.56.0, chargé depuis ce site après la page : le volet en texte brut est utilisable immédiatement et le reste si l’éditeur ne démarre pas. À eux deux, ils représentent environ 1,8 Mo de fichiers servis par kivtools.com, et rien de ce que vous collez n’est envoyé ailleurs.

  1. Choisissez le langage dans la liste. La page s’ouvre avec un exemple JavaScript ; tant que vous n’avez pas modifié le champ, changer de langage remplace l’exemple par un exemple du nouveau langage, et Charger un exemple le recharge à tout moment.
  2. Collez le code dans le volet gauche. Le volet en texte brut est utilisable avant la fin du chargement de l’éditeur avancé, et ce que vous y saisissez passe dans l’éditeur quand il démarre.
  3. Cliquez sur Formater le code. Prettier s’exécute dans la page et le résultat indenté apparaît à droite ; la ligne d’état signale la fin du travail.
  4. Cliquez sur Copier la sortie pour placer le résultat dans le presse-papiers, ou sur Utiliser la sortie comme source pour le renvoyer dans le volet gauche et refaire une passe.
  5. Si le formatage échoue, le message en indique la raison et le volet de sortie est vidé, afin qu’un résultat précédent ne soit pas pris pour le nouveau.

Langages, valeurs par défaut et limites

Les huit langages et leur analyseur

JavaScript et TypeScript passent par les analyseurs Babel et TypeScript : le JSX et la syntaxe de types sont conservés, et les génériques comme <T,> continuent de fonctionner. JSON, CSS, HTML, Markdown, YAML et GraphQL ont chacun leur analyseur : les balises HTML non fermées sont fermées, par exemple, et une règle CSS minifiée est imprimée avec une déclaration par ligne. Chaque langage dispose d’un exemple derrière Charger un exemple.

Il n’y a pas de panneau d’options : ce sont donc les valeurs par défaut de Prettier qui s’appliquent — indentation de deux espaces, guillemets doubles et points-virgules en JavaScript et TypeScript, virgules finales dans les constructions multilignes et largeur d’impression de 80 colonnes. La page ne change que les espaces et la disposition ; elle n’exécute pas le code, n’installe aucune dépendance et ne lit pas le fichier .prettierrc du projet, le résultat peut donc différer de celui d’un script de projet qui définit ses propres options.

Ce que la vue JSON accepte et ce qu’elle laisse passer

La vue JSON est l’analyseur JSON de Prettier, pas un validateur strict de la RFC 8259. Mesuré sur cette page : un document avec des chaînes entre guillemets simples, des clés sans guillemets, une virgule finale, un commentaire //, un nombre hexadécimal ou Infinity se formate sans erreur. Les guillemets simples, les clés sans guillemets et les virgules finales sont réécrits dans la sortie ; les commentaires, 0x10 et Infinity sont conservés tels quels.

Un document peut donc se formater proprement ici et être refusé ailleurs : {"a":1} // note et {"a":Infinity} reviennent avec le commentaire et la valeur Infinity intacts. Avant d’envoyer le résultat à une API, un fichier de configuration ou un autre langage, vérifiez-le avec la page Outil de formatage JSON, qui refuse les commentaires et les virgules finales.

Ce qui reste en local et où sont les limites

Prettier et l’éditeur sont servis par ce site, et le formatage se fait dans le navigateur : la page n’envoie ni le code ni le résultat nulle part et continue de fonctionner quand le réseau tombe. Si l’éditeur ne démarre pas, le même formateur reste disponible dans le volet en texte brut.

Le travail ayant lieu dans l’onglet, les gros fichiers sont limités par la mémoire de l’appareil : un fichier JavaScript de 112 Ko a été formaté ici en environ 0,2 seconde, tandis qu’un fichier de plusieurs mégaoctets peut figer l’onglet. Gardez le fichier sous contrôle de version avant de le remplacer par la sortie : le formateur réécrit la syntaxe telle que Prettier l’imprime, pas telle qu’elle a été écrite.

Outils récents :