Formateur Babel

Formatez votre code JavaScript ES6+ et JSX moderne.

ES6+ / JSX

Formatage

Options

Code Formaté

Guide Babel & ES6+

Qu'est-ce que Babel

Babel est un compilateur JavaScript qui transforme le code ES6+ (et JSX) en JavaScript compatible avec les anciens navigateurs. Il permet d'utiliser les dernières fonctionnalités du langage sans se soucier de la compatibilité. Cet outil formate le code utilisant la syntaxe ES6+ que Babel compile.

Syntaxe ES6+

Arrow Functions

const fn = (x) => x * 2; : syntaxe concise, this lexical.

Destructuring

const { name, age } = user; : extraction de propriétés.

Template Literals

`Hello ${name}` : interpolation de strings.

Spread/Rest

{ ...obj }, [...arr] : copie et fusion d'objets/arrays.

Fonctionnalités modernes

  • Optional chaining : user?.address?.city évite les erreurs null
  • Nullish coalescing : value ?? defaultValue pour null/undefined
  • async/await : Code asynchrone lisible comme du synchrone
  • Modules : import/export pour la modularité

Questions fréquentes

Babel est-il encore nécessaire en 2024 ?

La plupart des navigateurs modernes supportent ES6+. Babel reste utile pour : JSX (React), les proposals pas encore standards, et le support de navigateurs legacy (IE11). Pour les projets modernes, esbuild ou SWC sont souvent préférés pour la vitesse.

Comment configurer Babel pour React ?

Installez @babel/preset-react. Dans babel.config.json : { "presets": ["@babel/preset-env", "@babel/preset-react"] }. Pour le nouveau JSX runtime (React 17+), ajoutez { "runtime": "automatic" }. Create React App et Next.js configurent automatiquement.

Babel vs TypeScript : lequel utiliser ?

TypeScript offre le typage statique + la transpilation. Babel ne fait que transpiler. Vous pouvez combiner les deux : TypeScript pour le type-checking (tsc --noEmit), Babel pour la transpilation (plus de plugins). Mais TypeScript seul suffit pour la plupart des projets.

Qu'est-ce que les stage proposals ?

Les proposals TC39 passent par 5 stages (0-4). Stage 4 = standard finalisé. Babel permet d'utiliser les proposals avant qu'elles soient standards via des plugins. Attention : les proposals peuvent changer ou être abandonnées. Préférez stage 3+ pour la production.