Formateur de code

Formatez votre code JavaScript, TypeScript, JSX, JSON, HTML, XML, CSS, SCSS, LESS, SQL, YAML, Markdown ou GraphQL et rendez-le lisible

À propos de l’outil Formateur de code

L’outil Formateur de code met en forme 13 langages dans votre navigateur et reconnaît celui que vous avez collé. JavaScript, TypeScript, JSX, HTML, CSS, SCSS, LESS, YAML, Markdown et GraphQL passent par Prettier 3 ; XML par le plugin XML de Prettier, après une vérification que le XML est bien formé ; SQL par sql-formatter, avec 20 dialectes ; JSON par le code de réindentation du site, qui garde chaque nombre, chaque séquence d’échappement et l’ordre des clés tels qu’ils sont écrits. Prettier applique son propre style : les guillemets, les points-virgules et les retours à la ligne peuvent donc changer. Quand le moteur signale une erreur de syntaxe, rien n’est formaté et la sortie affiche le message, avec sa position chaque fois que le moteur la donne.

Exemple

Avec « Détection automatique », ce code est lu comme du GraphQL ; la ligne sous la sortie indique « Formaté en GraphQL (détecté) ».

Entrée

query{user(id:1){name,friends(first:2){name}}}

Sortie

query {
  user(id: 1) {
    name
    friends(first: 2) {
      name
    }
  }
}

Comment formater du code en ligne

  1. 1Collez votre code dans « Entrée ».
  2. 2Laissez « Détection automatique » dans la liste « Langage », ou choisissez le langage ; pour SQL, une liste « Dialecte SQL » apparaît.
  3. 3Cliquez sur « Formater ».
  4. 4Vérifiez la ligne sous la sortie, qui nomme le langage utilisé, puis cliquez sur « Copier » ou « Télécharger ».

Formats et limites

Langages
JavaScript, TypeScript, JSX (React), JSON, HTML, XML, CSS, SCSS, LESS, SQL, YAML, Markdown, GraphQL
Dialectes SQL
20 : SQL standard, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server (T-SQL), Oracle (PL/SQL), BigQuery, Snowflake, Amazon Redshift, ClickHouse, DuckDB, Trino / Presto, Spark SQL, Hive, IBM Db2, IBM Db2 for i, SingleStore, TiDB, N1QL (Couchbase)
Style
Prettier avec une largeur de ligne de 80 caractères et une indentation de 2 espaces (texte des éléments XML gardé tel qu’il est écrit) ; JSON indenté de 2 espaces ; mots-clés SQL en majuscules
Détection
Lit surtout les 4 000 premiers caractères (le JSON est vérifié sur tout le texte) ; une erreur de détection se corrige en choisissant le langage

Où votre code est traité

Le formatage se fait dans le navigateur : chaque outil de formatage (Prettier avec le plugin dont un langage a besoin, ou sql-formatter) est chargé la première fois que vous formatez ce langage, et votre code n’est jamais envoyé. Si le formatage échoue, la première ligne de l’erreur, par exemple « Ligne 3, colonne 12 : Unexpected token », est envoyée à notre journal des erreurs avec le nom de l’outil ainsi que le nom et la version de votre navigateur, épurée des passages entre guillemets, des nombres longs et des adresses.

Questions fréquentes

L’outil peut-il détecter le langage automatiquement ?

Oui, d’après le texte lui-même : ses premiers caractères (une balise, une accolade, un mot-clé SQL ou GraphQL) et des marques propres à un seul langage, comme les annotations de type de TypeScript ou les $variables de SCSS. Si la détection se trompe, choisissez le langage et cliquez de nouveau sur « Formater ».

Le formatage modifie-t-il mon code ?

Non pour le JSON : seuls les espaces et les retours à la ligne changent, et les nombres comme « 1.10 » ou les identifiants de 20 chiffres sont copiés tels qu’ils sont écrits. Oui pour le style des autres langages : Prettier peut changer les guillemets, ajouter des points-virgules et couper les longues lignes, et les mots-clés SQL passent en majuscules.

L’outil indique-t-il où se trouve une erreur de syntaxe ?

Oui, quand le moteur donne une position : la sortie commence par la ligne, la colonne et le message, puis affiche les lignes voisines avec un ^. Rien n’est formaté. Quelques erreurs arrivent sans position et ne s’affichent que sous forme de message.

Quels dialectes SQL sont pris en charge ?

20, à choisir dans la liste « Dialecte SQL » qui apparaît pour SQL, parmi lesquels MySQL, PostgreSQL, SQLite, SQL Server (T-SQL), Oracle (PL/SQL), BigQuery, Snowflake, ClickHouse et DuckDB. L’outil Formateur SQL utilise le même moteur avec une liste plus courte.

Trucs et astuces

  • ✓Collez un fichier JavaScript, CSS ou HTML minifié pour le rendre lisible avant de le déboguer.
  • ✓Pour un JSON indenté de 4 espaces ou par tabulations, ou des clés triées, utilisez l’outil Formateur JSON, qui propose ces options.