⭐ Mes favoris

⭐
Aucun favori pour l'instant.
Cliquez ☆ sur une carte pour l'épingler.

✨ Formateur de code

Formatez votre code avec Prettier — 10 langages, options personnalisables, 100% local.

Prêt · Prettier en cours de chargement…
Entrée
Résultat

Qu'est-ce que Prettier ?

Prettier est le formateur de code le plus utilisé au monde (30+ millions de téléchargements par semaine). Il analyse syntaxiquement votre code (contrairement aux simples beautifiers qui manipulent du texte) et le ré-imprime selon des règles cohérentes. Résultat : tout votre code devient homogène, peu importe qui l'a écrit.

Avantages vs un "beautifier" basique

• Détecte les erreurs de syntaxe — si votre code est cassé, Prettier le dit au lieu de produire du n'importe quoi.
• Respecte la logique du langage — indentation JSX correcte, chaînage conditionnel lisible, retours à la ligne intelligents selon printWidth.
• Reformate vraiment — pas juste des espaces, mais une nouvelle impression complète du code selon les règles.

Options clés

printWidth — largeur cible en caractères avant retour à la ligne. 80 = classique, 100 = moderne, 120 = écran large.
tabWidth — 2 (React/JS) ou 4 (Python, PHP classique) espaces par indentation.
semi — ajoute les ; en fin d'instruction (convention majoritaire en JS).
singleQuote — 'chaîne' plutôt que "chaîne" (préférence JS/TS).
trailingComma — virgule finale dans les tableaux/objets. all = partout (plus propre en diff Git).

🔒 100% local — Prettier tourne dans votre navigateur, aucun envoi serveur.
`, markdown: `# Mon titre Un paragraphe avec **gras** et *italique*. ## Sous-titre - item 1 - item 2 - imbriqué \`\`\`js const x=1 \`\`\``, yaml: `name: epsylon-box version: 1.0.0 deps: react: "18" vite: "5" scripts: dev: "vite" build: vite build`, graphql: `query GetUsers($limit:Int!){users(limit:$limit){id name email posts{title createdAt}}}` }; // === Lang switching === $langBar.addEventListener('click', (e) => { const b = e.target.closest('.fc-lang-btn'); if (!b) return; $langBar.querySelectorAll('.fc-lang-btn').forEach(x => x.classList.remove('active')); b.classList.add('active'); currentParser = b.dataset.lang; currentLabel = b.dataset.label; // Auto-format si déjà du contenu if ($input.value.trim()) scheduleFormat(); }); // === Format === let formatTimer = null; function scheduleFormat() { clearTimeout(formatTimer); formatTimer = setTimeout(runFormat, 250); } $input.addEventListener('input', scheduleFormat); $btnFormat.addEventListener('click', runFormat); async function runFormat() { const src = $input.value; if (!src.trim()) { $output.value = ''; setStatus('En attente', ''); hideError(); return; } try { const core = await loadCore(); const plugins = await pluginsForParser(currentParser); const options = readOptions(); const formatted = await core.format(src, { parser: currentParser, plugins, ...options }); $output.value = formatted; const gain = src.length - formatted.length; const gainLabel = gain > 0 ? `−${gain} car.` : gain < 0 ? `+${-gain} car.` : 'identique'; setStatus(`✓ Formaté (${currentLabel}) · ${gainLabel}`, 'ok'); hideError(); } catch (e) { setStatus(`⚠ Erreur (${currentLabel})`, 'err'); showError(e && e.message ? e.message : String(e)); } } function readOptions() { const opts = { printWidth: parseInt(document.getElementById('printWidth').value, 10) || 80, tabWidth: parseInt(document.getElementById('tabWidth').value, 10) || 2, useTabs: document.getElementById('useTabs').checked, semi: document.getElementById('semi').checked, singleQuote: document.getElementById('singleQuote').checked, trailingComma: document.getElementById('trailingComma').value }; return opts; } // === Re-format on option change === ['printWidth', 'tabWidth', 'useTabs', 'semi', 'singleQuote', 'trailingComma'].forEach(id => { document.getElementById(id).addEventListener('change', scheduleFormat); }); // === Actions globales === window.copyOutput = function () { if (!$output.value) { toast('Rien à copier'); return; } navigator.clipboard.writeText($output.value).then(() => toast('Résultat copié')); }; window.clearAll = function () { $input.value = ''; $output.value = ''; hideError(); setStatus('Prêt', ''); }; window.loadSample = function () { $input.value = SAMPLES[currentParser] || SAMPLES.babel; scheduleFormat(); }; window.swapInputOutput = function () { if (!$output.value) return; $input.value = $output.value; scheduleFormat(); }; window.downloadResult = function () { if (!$output.value) { toast('Rien à télécharger'); return; } const extMap = { babel: 'js', typescript: 'ts', json: 'json', css: 'css', scss: 'scss', less: 'less', html: 'html', vue: 'vue', markdown: 'md', yaml: 'yaml', graphql: 'graphql' }; const ext = extMap[currentParser] || 'txt'; const blob = new Blob([$output.value], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `formate.${ext}`; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100); toast('Fichier téléchargé'); }; function setStatus(msg, cls) { $status.textContent = msg; $status.className = 'fc-status' + (cls ? ' ' + cls : ''); } function showError(msg) { $err.textContent = msg; $err.classList.add('show'); } function hideError() { $err.classList.remove('show'); } function toast(msg) { const t = document.getElementById('copyToast'); if (!t) return; t.textContent = msg; t.classList.add('show'); setTimeout(() => t.classList.remove('show'), 1800); } // === Raccourci Ctrl+S pour télécharger === $input.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); runFormat(); } }); // === Bootstrap === (async function () { try { setStatus('Chargement de Prettier…', ''); await loadCore(); setStatus('Prêt · Collez du code ou cliquez sur « Exemple »', ''); } catch (e) { setStatus('⚠ Erreur chargement Prettier', 'err'); showError('Impossible de charger Prettier depuis le CDN : ' + (e.message || e)); } })();
Copié !