TypeScript-Formatierer
Eine Voreinstellung von JavaScript-Formatierer
Formatieren Sie TypeScript mit vollständiger Unterstützung für Typannotationen, Generics, Dekoratoren und Interfaces. Nutzt den TypeScript-Parser statt den von JavaScript, daher wird Typsyntax verstanden statt als Fehler behandelt.
- Dateien verlassen niemals Ihr Gerät
- Kostenlos, keine Anmeldung
- Keine Wasserzeichen
- Funktioniert nach dem Laden auch offline
So verwenden Sie JavaScript-Formatierer
- 1
Code einfügen
JavaScript, TypeScript oder JSX.
- 2
Ihren Stil festlegen
Einrückung, Semikolons und Anführungszeichen-Präferenz.
- 3
Ergebnis kopieren
Formatiert exakt so, wie Prettier es in Ihrem Editor täte.
Warum TypeScript einen eigenen Parser braucht statt den von JavaScript wiederzuverwenden
TypeScript ist eine Obermenge von JavaScript, aber die typebene Syntax, die es hinzufügt — Interfaces, mit `extends` eingeschränkte Generics, Dekoratoren, `as`-Typ-Assertions, und eigenständige reine Typdeklarationen — hat keine Bedeutung in der Grammatik von reinem JavaScript und lässt einen reinen JavaScript-Parser bei völlig gültigem TypeScript direkt scheitern. Den dedizierten TypeScript-Parser zu nutzen, statt zu versuchen, den von JavaScript zu zwingen, eine Obermenge seiner eigenen Grammatik zu akzeptieren, ist es, was einer mit Generics und Interfaces gefüllten Datei erlaubt, korrekt formatiert zu werden, statt als Syntaxfehler abgelehnt zu werden, sobald sie eine Funktion nutzt, die JavaScript selbst nicht hat.
JSX innerhalb von TypeScript, speziell
Eine `.tsx`-Datei, die JSX-Syntax mit TypeScript-Typannotationen kombiniert, ist an einer bestimmten Stelle wirklich mehrdeutig zu analysieren: eine Typ-Assertion mit spitzen Klammern wie `<Foo>value` sieht identisch aus wie der Beginn eines JSX-Element-Tags für einen Parser, dem nicht gesagt wurde, welchen Dialekt er liest. Den TypeScript-mit-JSX-Analysemodus zu wählen löst diese Mehrdeutigkeit korrekt, daher zählt es speziell für Komponentendateien, die beide mischen, den richtigen Dialekt vorher zu wählen, statt anzunehmen, dass ein generischer JavaScript-Parser es lösen wird.
Dekoratoren bleiben ein sich entwickelnder Teil der Syntax
Dekoratoren — die in Angular und manchen auf TypeScript aufgebauten Backend-Frameworks üblichen `@Component`-artigen Annotationen — haben mehrere unterschiedliche Vorschlagsstufen im Standardisierungsprozess der Sprache durchlaufen, und unterschiedliche Codebasen können auf leicht unterschiedliche Versionen dieser Syntax zielen, je nachdem, wann sie geschrieben wurden und welche Compiler-Optionen sie verwenden. Dekorator-Syntax korrekt zu analysieren erfordert speziell den TypeScript-bewussten Parser; ein reiner JavaScript-Parser, der ein `@` vor einer Klasse oder Methode antrifft, hat keine definierte Bedeutung, auf die er zurückgreifen kann, und wird die Datei direkt ablehnen.
Häufig gestellte Fragen
Ist das dasselbe wie Prettier lokal auszuführen?
Ja — es ist Prettier selbst, ausgeführt in Ihrem Browser statt in Node. Mit denselben Optionen erhalten Sie eine byteidentische Ausgabe zu `npx prettier` bei derselben Datei.
Warum keinen einfacheren Formatierer verwenden?
Weil naive Formatierer echten Code brechen. Geschweifte Klammern in Template-Literalen und regulären Ausdrücken, JSX, und automatische Semikolon-Einfügung erfordern alle, die Sprache wirklich zu analysieren. Ein Formatierer, der still eine von fünfzig Dateien beschädigt, ist schlimmer als keiner.
Funktioniert es mit TypeScript und JSX?
Ja. Typannotationen, Generics, Dekoratoren und JSX werden alle analysiert. Beachten Sie, es formatiert nur — es prüft keine Typen und kompiliert nicht.
Warum ist die Formatierung fehlgeschlagen?
Der Code hat einen Syntaxfehler — Prettier muss ihn analysieren können, bevor er ihn ausgeben kann. Die Meldung enthält Zeile und Spalte des ersten Problems, was normalerweise ausreicht, um es zu finden.
Wird mein Code an einen Server gesendet?
Nein. Prettier wird in Ihren Browser heruntergeladen und dort ausgeführt. Proprietärer Code verlässt nie Ihre Maschine, was bei den meisten Online-Formatierern nicht der Fall ist.
Das könnte Sie auch interessieren
JSON-Formatierer
JSON sofort formatieren, validieren und minifizieren
HTML-Formatierer
HTML korrekt verschönern und einrücken
CSS-Formatierer
Stylesheets verschönern oder minifizieren
Base64-Encoder und -Decoder
Base64 und Base64URL kodieren und dekodieren
CSS-Minifizierer
Stylesheets mit einem echten CSS-bewussten Minifizierer verkleinern
Hash-Generator
MD5, SHA-1, SHA-256, SHA-384 und SHA-512
JS-Minifizierer
JavaScript mit echter Minifizierung verkleinern, nicht mit Regex
JWT-Decoder
JSON Web Tokens dekodieren und untersuchen