Embellisseur de code : formate 26 langages dans votre navigateur, rien uploadé
Vous avez collé du source depuis un minifier et c'est une ligne qui s'étire à travers l'écran. Ou vous avez copié un prettifier depuis une page de doc et il a des tabulations au lieu des espaces dont votre projet a besoin. Ou c'est juste du code d'un collègue qui "n'utilise pas de formatter" et a sa propre philosophie d'indentation.
Cet embellisseur de code fait ce que fait le bouton "Format Document" de VS Code : prend du code source laid, écrasé ou désordonné et le rend joliment formaté, avec une coloration syntaxique à droite.
Il supporte 26 langages, et 21 d'entre eux obtiennent maintenant de vrais formatters : pas juste un fix d'indentation, mais un reformatage complet. JavaScript, TypeScript, JSX, TSX, HTML, CSS, SCSS, LESS, JSON, YAML, Markdown et GraphQL passent par Prettier 3+. C / C++ / Java / C# : le **clang-format** original compilé en WebAssembly : le même moteur que VS Code et Google utilisent. Go : le canonique gofmt, en WASM. Python : **Ruff** (Black-compatible, le même moteur que `ruff format` lance dans le terminal). Bash : shfmt en WASM. PHP : **Mago** en WASM. SQL : sql-formatter (mots-clés MAJUSCULES, JOIN bien cassés). XML : xml-formatter, respecte la structure DOM. Seuls Rust, Kotlin, Swift et Ruby restent sur la passe cosmétique (indenteur brace-aware pour les langages à `{}`, espaces purs pour Ruby) : leurs formatters complets (rustfmt, ktlint, swift-format) ont besoin d'une toolchain qui n'existe simplement pas dans le navigateur.
Trois modes pour trois besoins différents : Gentle utilise Prettier et ne casse les lignes que quand elles dépassent votre largeur (100 par défaut). Aggressive utilise js-beautify pour JS/HTML/CSS : chaque instruction sur sa propre ligne, méthodes chaînées cassées, tout expandi. Cosmetic-only est notre propre implémentation d'environ 50 lignes : convertit tabulations ↔ espaces, normalise la largeur d'indent, supprime les espaces en fin de ligne, normalise CRLF → LF.
Tout tourne localement dans votre navigateur. Le code ne quitte jamais votre machine : pas d'upload, pas de télémétrie, pas de logs côté serveur. Vous pouvez couper votre connexion internet en pleine session et l'outil marche encore (après le premier format : les bibliothèques sont en cache alors).
Comment l'utiliser
- Choisissez un langage dans le dropdown en haut à gauche, ou laissez sur Auto : highlight.js devinera pour vous à chaque changement d'input. Auto reconnaît les 26 langages supportés donc il ne confondra pas SQL avec Python.
- Choisissez un mode : Gentle (défaut, ne casse que les lignes trop larges), Aggressive (tout sur sa propre ligne : JS/HTML/CSS seulement), Cosmetic-only (réécrit indentation + supprime espaces, marche partout).
- Collez votre code dans le panneau de gauche, ou cliquez sur "Upload file" : nous acceptons jusqu'à 5 Mo. Toutes les extensions courantes (.js, .py, .go, .rs, .java, ...) : à l'upload, nous détectons le langage depuis l'extension automatiquement.
- Cliquez sur Format. Le premier clic prend un moment : les bibliothèques (Prettier, Shiki, highlight.js, js-beautify) lazy-load à la demande ("Loading formatter..."). Les clics suivants sont instantanés parce qu'elles sont en cache navigateur.
- À droite vous obtenez un aperçu avec coloration syntaxique (propulsé par Shiki : les mêmes grammaires TextMate que VS Code utilise). Vous pouvez Copy, Download comme fichier (extension assortie au langage), ou Open in new tab (utile pour la sortie longue).
- Il y a une icône d'engrenage (settings) : largeur d'indent (tab / 2 espaces / 4 espaces), longueur max de ligne (80/100/120), guillemets (single / double), points-virgules (on/off), virgules de fin (all / es5 / none).
- La plupart des langages obtiennent maintenant un reformatage complet dans le navigateur : C / C++ / Java / C# via clang-format (WASM), Go via gofmt (WASM), Python via Ruff (WASM, Black-compatible), Bash via shfmt (WASM), PHP via Mago (WASM), plus SQL (sql-formatter) et XML (xml-formatter). Les formatters complets lazy-load au premier clic (~80-300 ko WASM par langage, en cache après). Rust, Kotlin, Swift, Ruby ont encore la bannière d'info jaune et le mode Cosmetic-only (indenteur brace-aware / espaces purs).
- Si votre code a une erreur de syntaxe (par ex. crochet non fermé), le panneau de droite affiche le message d'erreur exact avec la ligne et la colonne : même diagnostic que vous verriez du vrai Prettier dans le terminal.
Quand c'est utile
Six situations courantes où ce formatter de code vous épargne du travail manuel :
- Pretty-print d'un fichier production minifié. Vous avez ouvert DevTools, trouvé `app.min.js`, c'est une ligne d'un mile de long. Collez, mode Aggressive, vous obtenez du source lisible : pas l'original complet (les variables restent `_a`, `_b`), mais au moins vous voyez la structure.
- Nettoyer la PR d'un collègue. Il a collé du code qui "marche" mais utilise des indents de 6 espaces, tabulations mélangées avec espaces, et 4 lignes vides entre fonctions. Mode Gentle + 2 espaces + Prettier = la code review arrête de crier sur les espaces.
- Convertir tabulations en espaces (ou inverse). Votre `.editorconfig` dit 2 espaces, mais le code du stagiaire utilise des tabulations. Cosmetic-only + 2 espaces fait la conversion en un clic, sans toucher à la structure.
- Vérification de JSON ou YAML. Vous avez collé un YAML GitHub Actions et la CI crie qu'il est invalide : collez, Gentle, Prettier retourne l'erreur avec ligne et colonne. Plus rapide que de lire la spec YAML.
- Beautifier pour du code copié depuis un PDF. Vous avez transcrit un exemple d'un PDF de manuel / doc et coller a perdu l'indentation (les PDF ne peuvent pas copier les espaces de façon fiable). Collez, Gentle, Prettier reconstruit la structure depuis les points-virgules et crochets.
- Conversion CRLF → LF sur Windows. Un fichier de Windows ouvert sur Mac/Linux a `^M` à la fin de chaque ligne et git se plaint. Cosmetic-only normalise les fins de ligne en LF, laissant le reste intact.