Aller au contenu principal
Tooletto

Formateur TypeScript

Un préréglage de Formateur JavaScript

Formatez du TypeScript avec un support complet des annotations de type, génériques, décorateurs et interfaces. Utilise l'analyseur TypeScript plutôt que celui de JavaScript, donc la syntaxe de type est comprise plutôt que traitée comme une erreur.

  • Les fichiers ne quittent jamais votre appareil
  • Gratuit, sans inscription
  • Aucun filigrane
  • Fonctionne hors ligne une fois chargé
Loading tool…

Comment utiliser Formateur JavaScript

  1. 1

    Collez votre code

    JavaScript, TypeScript ou JSX.

  2. 2

    Définissez votre style

    Indentation, points-virgules et préférence de guillemets.

  3. 3

    Copiez le résultat

    Formaté exactement comme le ferait Prettier dans votre éditeur.

Pourquoi TypeScript a besoin de son propre analyseur plutôt que de réutiliser celui de JavaScript

TypeScript est un sur-ensemble de JavaScript, mais la syntaxe au niveau des types qu'il ajoute — interfaces, génériques contraints avec `extends`, décorateurs, assertions de type `as`, et déclarations indépendantes uniquement de type — n'a aucune signification dans la grammaire du JavaScript brut et fait qu'un analyseur JavaScript seul échoue directement sur du TypeScript parfaitement valide. Utiliser l'analyseur dédié de TypeScript plutôt que d'essayer de forcer celui de JavaScript à accepter un sur-ensemble de sa propre grammaire est ce qui permet à un fichier plein de génériques et d'interfaces d'être correctement formaté plutôt que rejeté comme erreur de syntaxe dès qu'il utilise une fonctionnalité que JavaScript lui-même n'a pas.

JSX dans TypeScript, spécifiquement

Un fichier `.tsx` combinant syntaxe JSX et annotations de type TypeScript est réellement ambigu à analyser à un endroit précis : une assertion de type entre chevrons comme `<Foo>value` paraît identique au début d'une balise d'élément JSX pour un analyseur à qui l'on n'a pas dit quel dialecte il lit. Sélectionner le mode d'analyse TypeScript-avec-JSX résout correctement cette ambiguïté, donc choisir le bon dialecte à l'avance — plutôt que de supposer qu'un analyseur JavaScript générique le résoudra — compte spécifiquement pour les fichiers de composants mélangeant les deux.

Les décorateurs restent une partie évolutive de la syntaxe

Les décorateurs — les annotations de style `@Component` courantes dans Angular et certains frameworks backend construits sur TypeScript — sont passés par plusieurs étapes de proposition distinctes dans le processus de standardisation du langage, et différentes bases de code peuvent cibler des versions légèrement différentes de cette syntaxe selon quand elles ont été écrites et quelles options de compilateur elles utilisent. Analyser correctement la syntaxe des décorateurs nécessite spécifiquement l'analyseur conscient de TypeScript ; un analyseur JavaScript brut rencontrant un `@` avant une classe ou méthode n'a aucune signification définie vers laquelle se rabattre et rejettera directement le fichier.

Questions fréquentes

Est-ce la même chose qu'exécuter Prettier localement ?

Oui — c'est Prettier lui-même, s'exécutant dans votre navigateur plutôt que dans Node. Avec les mêmes options vous obtenez une sortie identique octet par octet à `npx prettier` sur le même fichier.

Pourquoi ne pas utiliser un formateur plus simple ?

Parce que les formateurs naïfs cassent du vrai code. Les accolades dans les littéraux de template et expressions régulières, JSX, et l'insertion automatique de points-virgules nécessitent tous d'analyser réellement le langage. Un formateur qui corrompt silencieusement un fichier sur cinquante est pire qu'aucun.

Fonctionne-t-il avec TypeScript et JSX ?

Oui. Les annotations de type, génériques, décorateurs et JSX sont tous analysés. Notez qu'il formate seulement — il ne vérifie pas les types ni ne compile.

Pourquoi le formatage a-t-il échoué ?

Le code a une erreur de syntaxe — Prettier doit l'analyser avant de pouvoir l'imprimer. Le message inclut la ligne et colonne du premier problème, ce qui est généralement suffisant pour le trouver.

Mon code est-il envoyé à un serveur ?

Non. Prettier est téléchargé dans votre navigateur et s'y exécute. Le code propriétaire ne quitte jamais votre machine, ce qui n'est pas vrai pour la plupart des formateurs en ligne.