Beautifier JavaScript en ligne — Beautifier JS

Beautifiez du JavaScript instantanément. Formatez votre JS avec une indentation cohérente et des options personnalisables. Traitement dans le navigateur.

Chargement…

Beautification JavaScript

Beautifiez du JavaScript en ligne. Formatez votre JS avec une indentation cohérente — traitement instantané dans le navigateur.

Fonctionnalités

Formatez et beautifiez votre code JavaScript avec une indentation personnalisable (2 ou 4 espaces, ou tabs).

Beautifier

Formatez et beautifiez votre code JavaScript avec une indentation personnalisable (2 ou 4 espaces, ou tabs).

Package utilisé

Terser

v5.47.1

Terser est un compresseur JavaScript moderne qui optimise la taille et les performances de votre code.

Exemple de base

Code d'entrée

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    total += items[i].price;
  }
  return total;
}

const products = [
  { name: 'Laptop', price: 999 },
  { name: 'Mouse', price: 25 }
];

console.log('Total:', calculateTotal(products));

Code minifié

function calculateTotal(t){let e=0;for(let o=0;o<t.length;o++)e+=t[o].price;return e}const products=[{name:"Laptop",price:999},{name:"Mouse",price:25}];console.log("Total:",calculateTotal(products));

Guide d'optimisation JavaScript

Options de minification

Version ECMAScript

Définit la version ECMAScript cible pour la minification (ES5, ES2015, ES2017, ES2020, ES2022)

Exemples par version ECMAScript :

Code original (ES2022)

const data = { name: 'test' };
const { name } = data;
console.log(name);

ES2022

const{name:data}=data;console.log(data)

ES5

var data={name:'test'};var name=data.name;console.log(name)

Niveau de compression

Contrôle l'agressivité de la compression (conservative, normal, aggressive)

ConservativeConservateur - Compression minimale, plus sûr

NormalNormal - Équilibre entre taille et compatibilité

AggressiveAgressif - Compression maximale, peut casser certains codes

Exemples de compression :

Code original

function calculateTotal(items) {
    let total = 0;
    for (let i = 0; i < items.length; i++) {
        total += items[i].price;
    }
    return total;
}

Conservative

function calculateTotal(items){let total=0;for(let i=0;i<items.length;i++)total+=items[i].price;return total}

Normal

function calculateTotal(t){let e=0;for(let l=0;l<t.length;l++)e+=t[l].price;return e}

Aggressive

function e(e){let t=0;for(let n=0;n<e.length;n++)t+=e[n].price;return t}

Préserver les noms de classes

Conserve les noms de classes CSS dans les chaînes de caractères

Comparaison avec/sans l'option :

Code original

element.className = 'my-class';
element.setAttribute('class', 'another-class');

Avec preserveClassNames: true

element.className='my-class';element.setAttribute('class','another-class')

Avec preserveClassNames: false

element.className='a';element.setAttribute('class','b')

Différence

Les noms de classes CSS sont préservés dans les chaînes

Préserver les noms de fonctions

Conserve les noms de fonctions pour le debugging

Comparaison avec/sans l'option :

Code original

function myFunction() { 
    return true; 
}
const obj = { myMethod() { return false; } };

Avec preserveFunctionNames: true

function myFunction(){return!0}const obj={myMethod(){return!1}}

Avec preserveFunctionNames: false

function a(){return!0}const obj={b(){return!1}}

Différence

Les noms de fonctions sont préservés pour le debugging

Supprimer console

Supprime tous les appels console.log, console.warn, etc.

Comparaison avec/sans l'option :

Code original

console.log('Debug info');
console.warn('Warning message');
const result = calculateTotal(items);
console.log('Result:', result);
return result;

Avec removeConsole: true

const result=calculateTotal(items);return result

Avec removeConsole: false

console.log('Debug info');console.warn('Warning message');const result=calculateTotal(items);console.log('Result:',result);return result

Différence

Tous les appels console.* sont supprimés

Supprimer debugger

Supprime les instructions debugger du code

Comparaison avec/sans l'option :

Code original

if (condition) {
    debugger;
    return true;
}
function test() {
    debugger;
    return false;
}

Avec removeDebugger: true

if(condition)return!0;function test(){return!1}

Avec removeDebugger: false

if(condition){debugger;return!0}function test(){debugger;return!1}

Différence

Les instructions debugger sont supprimées

Options de Beautify

Options pour formater et beautifier le JavaScript (uniquement pour Beautify, pas pour Minify/Unminify)

Taille d'indentation

Définit le nombre d'espaces ou de tabs pour l'indentation lors du Beautify

Code original

function test(){return true;}

Avec 2 espaces

function test() {
  return true;
}

Avec 4 espaces

function test() {
    return true;
}

Différence

L'indentation est personnalisable uniquement pour Beautify. Unminify utilise toujours 2 espaces.

Type d'indentation

Utilise des espaces ou des tabs pour l'indentation lors du Beautify

Code original

function test(){return true;}

Avec espaces

function test() {
  return true;
}

Avec tabs

function test() {
	return true;
}

Différence

Les espaces sont plus standards, les tabs peuvent être préférés selon vos conventions de code.

Beautifier JavaScript vs Déminificateur — Quelle différence

Les deux termes désignent le fait de rendre du code minifié lisible, avec des différences subtiles. Un beautifier applique des règles de formatage cohérentes (style d'indentation, placement des accolades) à n'importe quel code. Un déminificateur cible spécifiquement le code minifié pour restaurer la structure supprimée lors de la compression. Notre outil gère les deux — collez votre code et cliquez sur Déminifier ou Beautifier selon vos besoins.