JavaScript Formatierung

Hochladen

0 Zeichen

Browserbasiertes Formatierungstool für JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON mit Prettier-konformer Feinkonfiguration, Terser-Komprimierung und -Obfuskierung. Integrierter CodeMirror-Editor mit Echtzeitvorschau, Tastenkürzeln sowie Datei-Upload und -Download.

Anwendungsfälle

Beim Einfügen komprimierter Drittanbieter-JS-Codes während der Frontend-Entwicklung zur schnellen Verschönerung des Layouts für bessere Lesbarkeit und Debugging
Vor Team-Code-Reviews zur einheitlichen Formatierung von JavaScript/TypeScript-Code, um Stilunterschiede bei Einrückung, Anführungszeichen und Semikolons zu beseitigen und sich auf die Logikprüfung zu konzentrieren
Bei der Übernahme von Legacy-Projekten zur Ein-Klick-Formatierung von unsauber formatiertem altem JS-Code, um Codestruktur und Logikhierarchie schnell zu erfassen
Vor Produktivdeployment zur Komprimierung und Obfuskierung von JavaScript-Code mit Terser, um Dateigrößen zu reduzieren und die Ladegeschwindigkeit von Webseiten zu verbessern
Beim Schreiben von JS/JSX-Demos online zur Echtzeitformatierung für sauberen Code, der einfach an Kollegen oder die Community geteilt werden kann
Beim Kennenlernen der einzelnen Prettier-Konfigurationsoptionen zur sofortigen Vorschau von Formatierungsergebnissen beim Anpassen der Optionen, um die Auswirkungen von Parametern wie tabWidth und trailingComma zu verstehen
Bei der Verarbeitung von Code-Snippets von Plattformen wie Stack Overflow oder GitHub zur automatischen Korrektur von Einrückungs- und Zeilenumbruchproblemen
Beim Schreiben von JSON-Konfigurationsdateien zur automatischen Formatierung von Einrückung und Zeilenumbrüchen, um Parserfehler durch Komma- oder Klammerfehler zu vermeiden
Bei der CSS/HTML-Seitenentwicklung zur einheitlichen Formatierung von JS+CSS+HTML-Code im selben Projekt für konsistenten Stil
Vor technischen Interviews zur schnellen Aufbereitung von JS-Algorithmuscode und zur Verbesserung des Code-Eindrucks durch standardisiertes Layout

Anleitung

Öffnen Sie die Seite des JavaScript-Formatierungstools. Sie können Code direkt in den linken Editorbereich einfügen oder auf die Upload-Schaltfläche klicken, um eine lokale Datei auszuwählen (unterstützt .js/.ts/.jsx/.tsx/.css/.html/.json-Formate)
Wählen Sie den entsprechenden Sprachtyp aus: Das Tool erkennt die Sprache normalerweise automatisch. Bei ungenauer Erkennung wählen Sie manuell im Dropdown-Menü zwischen JavaScript/TypeScript/JSX/TSX/CSS/HTML/JSON
Konfigurieren Sie die Formatierungsoptionen: Sie können zwischen schnellen Stilvoreinstellungen (default/modern/classic) wählen oder Prettier-Optionen manuell anpassen (Einrückungsbreite, Tabs/Leerzeichen, Zeilenbreite, Semikolons, Anführungszeichen, abschließende Kommas, Klammern bei Pfeilfunktionen)
Wenn Sie Code komprimieren möchten, wechseln Sie in den Komprimierungsmodus und konfigurieren Sie die Terser-Komprimierungsoptionen (ob compress aktiviert wird, ob Variablennamen gemangelt werden, ob obere Ebenen komprimiert werden), CSS-Optimierungsstufe sowie HTML-Komprimierungsoptionen
Das Tool verarbeitet den Code in Echtzeit. Der rechte Editorbereich zeigt sofort das formatierte oder komprimierte Ergebnis an, und die Statusleiste unten zeigt in Echtzeit Zeichenzahl, Bytegröße und Komprimierungsstatistik
Nutzen Sie Tastenkürzel für mehr Effizienz: Ctrl+Shift+B löst die Formatierung aus, Ctrl+Shift+M wechselt in den Komprimierungsmodus, Ctrl+Shift+O öffnet eine Datei, Ctrl+Shift+D lädt das Ergebnis herunter, Ctrl+Shift+K leert den Editor
Wenn Sie zufrieden sind, klicken Sie auf die Kopier-Schaltfläche, um das Ergebnis in die Zwischenablage zu kopieren, oder auf die Download-Schaltfläche, um es als lokale Datei zu speichern. Sie können auch auf die Teilen-Schaltfläche klicken, um eine URL mit Code und Konfiguration zum Teilen zu generieren

Funktionen

Mehrsprachunterstützung: Formatiert gleichzeitig JavaScript, TypeScript, JSX, TSX, CSS, HTML und JSON – 7 gängige Frontend-Sprachen in einem Tool für die einheitliche Verarbeitung von Frontend-Code
Präzise Prettier-Konfiguration: Unterstützt alle wichtigen Optionen wie tabWidth (Einrückung: 2/4/8 Leerzeichen), useTabs (Tabs vs. Leerzeichen), printWidth (Zeilenbreite), semi (Semikolons), singleQuote (einfache vs. doppelte Anführungszeichen), trailingComma (abschließende Kommas), arrowParens (Klammern bei Pfeilfunktionen) und mehr
Code-Komprimierung: Integrierte Terser-Komprimierungsengine mit Produktionslevel-Optionen: compress (Code-Optimierung), mangle (Variablennamen-Obfuskierung), toplevel (Komprimierung auf oberster Ebene)
CSS-spezifische Optimierung: Konfigurierbare CSS-Optimierungsstufen mit Unterstützung für CSS-Komprimierung, Kommentar- und Leerzeichenentfernung
HTML-Komprimierungsoptionen: HTML-Minify-Konfiguration mit Leerzeichenfaltung, Kommentarentfernung und Entfernung von Attributanführungszeichen
Echtzeitverarbeitung: Sofortige Formatierungsvorschau bei Eingabe – keine Button-Klicks erforderlich, um das Layout-Ergebnis zu sehen
CodeMirror-Editor: Professioneller CodeMirror-Editor mit Syntaxhervorhebung, Zeilennummernanzeige, Klammermatching, Code-Faltung und weiteren professionellen Bearbeitungsfunktionen
Datei-Upload & -Download: Direktes Hochladen lokaler .js/.ts/.jsx/.tsx/.css/.html/.json-Dateien sowie Ein-Klick-Download der verarbeiteten Dateien nach der Formatierung
Teilen via Link: Speichert Code und Konfiguration über URL-Hash und generiert teilbare Links, die Kollegen exakt dieselbe Formatierungssituation reproduzieren lassen
Verlauf: Speichert Formatierungsverlauf automatisch in localStorage, sodass jederzeit zu früheren Codeversionen und Konfigurationen zurückgekehrt werden kann
Tastenkürzel: Unterstützt Tastenkombinationen wie Ctrl+Shift+B (Formatieren), Ctrl+Shift+M (Komprimieren), Ctrl+Shift+O (Datei öffnen), Ctrl+Shift+D (Download), Ctrl+Shift+K (Leeren) und mehr
Schnellvoreinstellungen: Drei Voreinstellungen verfügbar – default (Standard), modern (Modern), classic (Klassisch) – zum Ein-Klick-Wechsel zwischen gängigen Stilen
Zeichenstatistik: Echtzeitanzeige von Zeichenzahl, Bytegröße und Komprimierungsrate im Vergleich zwischen Originalcode und verarbeitetem Code
Beispielcode: Integrierte Beispielcodes für alle Sprachen, die per Klick geladen werden können, um die Funktionen schnell auszuprobieren

Häufig gestellte Fragen

Ändert sich die Logik von formatiertem JavaScript-Code?

Nein. Die Formatierung passt nur Layout-bezogene Inhalte wie Leerzeichen, Einrückung, Zeilenumbrüche, Klammerpositionen und Anführungszeichenstil an. Sie basiert auf AST-Transformation, und die AST-Struktur des Codes ist vor und nach der Formatierung vollständig identisch – die Ausführungslogik ist zu 100 % gleich. Solange der Code selbst syntaktisch korrekt geparst werden kann, ändert die Formatierung keinerlei Ausführungsverhalten und kann bedenkenlos verwendet werden. Die Komprimierung (mangle) ändert die Logik ebenfalls nicht, aber Sie müssen auf spezielle Szenarien wie eval und globale Variablenexporte achten, um Fehlkonfigurationen zu vermeiden.

Was tun, wenn die Ergebnisse des Formatierungstools von der lokalen VS Code/Prettier-Formatierung abweichen?

Die Formatierungslogik dieses Tools ist möglichst konsistent mit dem offiziellen Verhalten von Prettier gehalten. Wenn die Ergebnisse abweichen, überprüfen Sie die Konfigurationsoptionen: Stellen Sie sicher, dass die Kernoptionen tabWidth, useTabs, semi, singleQuote, trailingComma und arrowParens auf beiden Seiten vollständig übereinstimmen. Beachten Sie auch Versionsunterschiede bei Prettier – die Standardkonfigurationen von Prettier 2/3 weisen geringfügige Unterschiede auf (v3 standardmäßig trailingComma: all, v2 standardmäßig es5; ab v2 ist arrowParens standardmäßig always). Wenn Sie in Ihrem lokalen Projekt eine .prettierrc-Konfigurationsdatei haben, passen Sie die Optionen im Web entsprechend an, dann stimmen die Formatierungsergebnisse überein.

Kann komprimierter Code wiederhergestellt werden? Lassen sich gemangelte Variablennamen wiederherstellen?

Formatierter Code ist vollständig reversibel – da sich nur das Layout geändert hat und alle Bezeichner sowie die Logik vollständig erhalten bleiben, kann er durch erneute Formatierung wiederhergestellt werden. Bei komprimiertem Code gilt jedoch: Die Teile, bei denen nur Leerzeichen und Kommentare entfernt wurden, können durch erneute Formatierung wiederhergestellt werden, aber mangle (Variablennamen-Obfuskierung) ist irreversibel – der ursprüngliche aussagekräftige Variablenname userName wurde zu a geändert, und dieser Prozess ist einseitig. Die ursprünglichen Namen können nicht automatisch wiederhergestellt werden. Wenn Sie komprimierten Code in der Produktion debuggen müssen, sollten Sie Source Map-Dateien generieren und über Source Map auf Quellcodepositionen zurückabbilden. Bewahren Sie daher unbedingt den ursprünglichen, unkomprimierten Quellcode vor der Komprimierung auf!

Welche Browser werden unterstützt? Funktioniert es auf Mobilgeräten?

Dieses Tool unterstützt alle modernen Browser: Neueste Versionen von Chrome, Firefox, Safari und Edge funktionieren einwandfrei. IE wird nicht unterstützt (heute verwendet auch niemand IE mehr für Entwicklung). Das responsive Layout passt sich Smartphone-Bildschirmen an, aber die Codebearbeitung auf kleinen Bildschirmen ist kein optimales Erlebnis – es empfiehlt sich die Verwendung in Desktop-Browsern für mehr Effizienz auf großen Bildschirmen. Alle Formatierungs- und Komprimierungsberechnungen laufen lokal im Browser ab, Code muss nicht auf Server hochgeladen werden – der Code verlässt Ihren Browser nicht, sicher und zuverlässig.

Warum kann mancher Code nicht formatiert werden und es wird ein Parsing-Fehler angezeigt?

Formatierungstools müssen Code zunächst in einen AST parsen, um funktionieren zu können. Wenn der Code Syntaxfehler aufweist (nicht übereinstimmende Klammern, nicht geschlossene Strings, falsch geschriebene Schlüsselwörter, überflüssige Kommas usw.), kann der Parser die Codestruktur nicht verstehen und meldet einen Fehler. Überprüfen Sie zunächst die Syntaxfehler im Code selbst: Sehen Sie nach, ob die Konsole Fehlermeldungen anzeigt, ob der Editor rote Wellenlinien zur Fehlerlokalisierung zeigt. Nach Behebung der Syntaxfehler funktioniert die Formatierung normal. Stellen Sie außerdem sicher, dass der richtige Sprachmodus ausgewählt ist – JSX/TSX-Code sollte nicht als normales JS ausgewählt werden.

Wird mein Code auf Server hochgeladen? Ist der Code sicher?

Nein. Alle Formatierung, Komprimierung und Syntaxhervorhebung läuft vollständig lokal in Ihrem Browser über JavaScript ab. Der Code wird nicht an irgendeinen Server gesendet, sondern vollständig auf Ihrem Gerät verarbeitet. Sie können es mit unterbrochener Netzwerkverbindung testen: Bei getrenntem Netzwerk funktioniert das Tool weiterhin einwandfrei. Die Link-Teilen-Funktion kodiert Code und Konfiguration in den URL-Hash – beim Teilen wird nur eine URL generiert, Code wird nicht hochgeladen. Wenn Sie den Link jedoch an andere senden, können diese beim Öffnen des Links Ihren Code sehen. Teilen Sie vertraulichen Code daher nicht über Links.

Können Vue Single-File-Komponenten (.vue-Dateien) formatiert werden? Was ist mit Svelte?

Derzeit umfasst die mehrsprachige Unterstützung dieses Tools JS/TS/JSX/TSX/CSS/HTML/JSON. Vue <template>/<script>/<style>-Single-File-Komponenten (SFC) und Svelte-Komponenten werden derzeit nicht zur direkten Gesamtformatierung unterstützt, aber Sie können die script-Parts (JS/TS), style-Parts (CSS) und template-Parts (HTML) separat kopieren und die entsprechende Sprache zur einzelnen Formatierung auswählen. Zukünftig wird eine Unterstützung für Vue/Svelte SFC-Formatierung in Betracht gezogen.

Wie richte ich einheitliche Formatierungsregeln für das Team ein?

Für einheitliche Teamregeln wird ein dreischichtiges Zusammenspiel empfohlen: ① Platzieren Sie .editorconfig im Projektstammverzeichnis, um grundlegende Editor-Einstellungen zu vereinheitlichen (Einrückung, Zeilenumbrüche, Kodierung); ② Verwenden Sie Prettier und platzieren Sie eine .prettierrc-Konfigurationsdatei im Projekt, sodass alle Personen und die CI diese Konfiguration zur Formatierung verwenden. Auch in diesem Tool können entsprechende Optionen zur Übereinstimmung mit der Konfiguration ausgewählt werden; ③ Verwenden Sie ESLint + eslint-config-prettier, um ESLint-Stilregeln zu deaktivieren und nur Code-Qualität zu prüfen. Konfigurieren Sie den Editor für automatische Formatierung beim Speichern (VS Code mit Prettier-Erweiterung, Einstellung editor.formatOnSave: true) und fügen Sie der CI einen Lint-Schritt zur Formatprüfung hinzu, um sicherzustellen, dass eingereichter Code den Konventionen entspricht.

Welche Vorteile haben abschließende Kommas (trailingComma)? Sollten sie aktiviert werden?

Abschließende Kommas werden dringend empfohlen (mindestens es5-Ebene, empfohlen all-Ebene). Die Vorteile abschließender Kommas sind: ① Sauberere Git-Diffs: Beim Hinzufügen des letzten Elements muss das Komma der vorherigen Zeile nicht geändert werden – es gibt nur einen Diff für die neue Zeile, ohne das Komma den Diff der vorherigen Zeile zu verunreinigen; ② Einfacheres Neuanordnen von Elementen ohne abschließende Kommaprobleme; ③ Moderne Browser und Node.js unterstützen abschließende Kommas vollständig. Alte IE-Versionen unterstützen dies nicht, aber IE muss heute nicht berücksichtigt werden. Der einzige Nachteil ist ein zusätzliches Komma, aber die Vorteile überwiegen bei weitem. Prettier v3 verwendet standardmäßig all.

Soll bei der Komprimierung mangle aktiviert werden? Was ist der Unterschied zwischen compress und mangle?

Für die Produktivkomprimierung wird empfohlen, sowohl compress als auch mangle zu aktivieren. Dies sind zwei unabhängige Komprimierungsoptionen: compress ist die Code-Optimierung (Konstantenfaltung, Entfernen von totem Code, Vereinfachung von Ausdrücken usw.), die Codestruktur nur ändert, wenn sie vereinfacht werden kann, und keine Variablennamen ändert; mangle ist die Kürzung lokaler Variablennamen, bei der lange Variablennamen auf Einzelzeichen geändert werden – dies ist eine der größten Quellen für Volumenreduzierung. Solange Ihr Code nicht als Bibliothek extern direkt über Variablennamen aufgerufen wird oder keine eval zum dynamischen Zugriff auf Variablennamen verwendet, ist mangle sicher und kann das Volumen erheblich reduzieren. Bei Open-Source-Bibliotheken, die API-Namen beibehalten müssen, konfigurieren Sie mangle.reserved, um exportierte Namen zu behalten.

Warum werden bei der JSON-Formatierung automatisch bestimmte Zeichen escaped?

Die JSON-Spezifikation hat strenge Syntaxanforderungen: Strings müssen in doppelten Anführungszeichen stehen, keine abschließenden Kommas, Sonderzeichen müssen escaped werden (Zeilenumbruch→\n, Anführungszeichen→\", Backslash→\\, Tab→\t usw.). Wenn Ihre JSON-Strings nicht-escapete Sonderzeichen enthalten, werden diese bei der Formatierung automatisch gemäß JSON-Spezifikation escaped – dies ist das korrekte Verhalten. Beachten Sie: JSON ist nicht JavaScript. In JSON können keine Kommentare, einfachen Anführungszeichen oder undefined geschrieben werden, da dies zu JSON-Parsing-Fehlern führt.

Wie erreiche ich, dass Pfeilfunktionsparameter immer Klammern haben? Oder keine Klammern?

Passen Sie die arrowParens-Option an: always bedeutet immer Klammern setzen ((x) => x), dies ist der Standard ab Prettier v2. Der Vorteil ist, dass beim Hinzufügen oder Entfernen von Parametern keine Klammern hinzugefügt/entfernt werden müssen, was zu saubereren Diffs führt; avoid bedeutet, Klammern bei einem Parameter wegzulassen (x => x), was den Code kürzer macht. Wählen Sie entsprechend dem Teamstil – beide Stile sind weder richtig noch falsch, Hauptsache einheitlich. Beachten Sie: Parametertypannotationen, Standardparameter und Destrukturierungsparameter haben unabhängig von der Konfiguration immer Klammern.

Kann die Formatierung von ESLint gemeldete Stilprobleme automatisch beheben?

Dieses Tool verwendet Prettier-Stil-Formatierung und kann nur Stilprobleme beheben, für die Prettier zuständig ist (Einrückung, Anführungszeichen, Semikolons, abschließende Kommas, Zeilenbreite, Leerzeichen usw.). Code-Qualitätsprobleme, die ESLint meldet (wie unbenutzte Variablen, fehlendes return, ===-Probleme) sind Logikprobleme, die von Formatierungstools nicht automatisch behoben werden können und manuell geändert werden müssen. Wenn Ihre ESLint-Konfiguration eslint-config-prettier verwendet, meldet ESLint nach der Prettier-Formatierung keine Stilfehler mehr – die verbleibenden Qualitätsprobleme müssen manuell behoben werden.

Welche maximale Codedateigröße wird unterstützt? Wird die Formatierung großer Dateien ruckeln?

Da die Formatierung im Browser lokal läuft, hängt die unterstützte Dateigröße von der Leistung Ihres Geräts ab. Im Allgemeinen können JS-Dateien von einigen zehn KB bis zu mehreren MB normal verarbeitet werden – einzelne JS-Dateien aus regulären Projekten sind vollkommen ausreichend. Bei besonders großen gepackten JS-Dateien (mehrere zehn MB) kann es zu Rucklern oder sogar Speicherknappheit kommen. Für solche extrem großen Dateien wird empfohlen, sie lokal mit Node.js+Prettier/Terser über die Kommandozeile zu verarbeiten. Einzelne Quelldateien aus der täglichen Entwicklung liegen normalerweise im verarbeitbaren Bereich.

Warum öffnet Ctrl+Shift+B in Chrome den Lesezeichen-Manager?

Dies ist ein Standard-Tastenkürzel-Konflikt in Chrome: Ctrl+Shift+B ist die Chrome-Tastenkombination zum Ein-/Ausblenden der Lesezeichenleiste. Browser-Tastenkürzel haben höhere Priorität als Web-JS-Tastenkürzel und werden daher von Chrome abgefangen. Lösungen: ① Bedienen Sie sich über die Formatierungsschaltfläche; ② Wenn Sie Mac-Benutzer sind, funktioniert Cmd+Shift+B ohne Konflikt mit Chrome; ③ Sie können die Browser-Tastenkürzel in den Chrome-Einstellungen ändern; ④ Sie können zuerst den Editor fokussieren – in manchen Fällen kann der Editorfokus das Tastenkürzel erfassen. Bei Tastenkürzel-Konflikten in anderen Browsern können Sie ebenfalls über Schaltflächen bedienen.

Fehlerbehebung

Bei der Formatierung wird »Syntax-Parsing-Fehler« angezeigt, Formatierung nicht möglich

Syntaxfehler im Code selbst: Nicht übereinstimmende Klammern, nicht geschlossene Strings, fehlende Schlüsselwörter, überflüssige Kommas usw. Syntaxfehler führen dazu, dass das AST-Parsing fehlschlägt und keine Formatierung möglich ist. Beheben Sie zuerst die Syntaxfehler Falsche Auswahl des Sprachmodus: Beispielsweise wurde JSX/TSX-Code als JavaScript ausgewählt, sodass Generics-Syntax fälschlicherweise als JSX-Tags erkannt wird (oder umgekehrt). Wählen Sie manuell den richtigen Sprachtyp aus Experimentelle Syntax enthalten: Der Code verwendet zu neue JavaScript-Syntaxvorschläge, die noch nicht standardisiert sind (wie Decorators, Pipeline-Operator), die vom Parser nicht unterstützt werden Datei hat BOM-Header: UTF-8 BOM (EF BB BF) am Anfang. Einige Parser können dies nicht verarbeiten. Versuchen Sie, die Datei als UTF-8 ohne BOM zu speichern Code in anderen Sprachen beigemischt: Beispielsweise in HTML eingebettete Template-Sprachen (EJS, Handlebars, Vue-Template-Direktiven) sind kein reines JS/HTML und werden vom Parser nicht erkannt Nicht abgeschlossene Blockkommentare im Code: /* ohne zugehöriges */ – ein nicht geschlossener Kommentar führt dazu, dass nachfolgender Code vollständig als Kommentar behandelt wird Ambiguität bei regulären Ausdrücken: Stellen, die wie Division/Operatoren aussehen, sind tatsächlich Regex-Literale, die vom Parser falsch interpretiert werden. Fügen Sie ein Semikolon vor dem Regex hinzu, um die Ambiguität zu beseitigen

Fehler bei der Komprimierung (Minify), Komprimierung nicht möglich

Code-Syntaxfehler: Wie bei der Formatierung basiert auch die Komprimierung auf AST. Der Code muss syntaktisch korrekt sein, um komprimiert zu werden. Beheben Sie zuerst die Syntaxfehler ES Module import/export verwendet, aber der Modultyp nicht korrekt markiert oder die Komprimierungskonfiguration nicht mit dem Modultyp übereinstimmt Probleme beim Mangeln von Eigenschaftsnamen: Wenn Eigenschaftsnamen-Mangle aktiviert ist (standardmäßig deaktiviert), führt der dynamische Eigenschaftszugriff obj['key'] dazu, dass Eigenschaften nicht gefunden werden. Aktivieren Sie Eigenschafts-Mangle nicht ohne Grund eval()- oder with-Anweisungen im Code: Bei Terser kann Mangle bei eval/with fehlschlagen, da eval dynamisch auf Geltungsbereichsvariablen zugreifen kann. Vermeiden Sie eval in Produktivcode Falsche Konfiguration reservierter Namen: Wenn mangle.reserved konfiguriert ist, aber Rechtschreibfehler vorliegen oder erforderliche reservierte Namen (wie globale Bibliotheken jQuery, $) fehlen, kann dies zu Laufzeitfehlern führen Probleme mit der toplevel-Komprimierungskonfiguration: Wenn Ihr Code im globalen Geltungsbereich ausgeführt wird und nicht in einem IIFE/Modul gebündelt ist, kann die Aktivierung von compress.toplevel: true globale Variablenreferenzen zerstören Konfigurierte Zielbrowserversion ist zu alt: Bei der Terser-Komprimierung wird möglicherweise Syntax verwendet, die von Zielbrowsern nicht unterstützt wird. Konfigurieren Sie die ecma-Version, um die auszugebende JS-Syntaxversion anzugeben

Chinesische Zeichen/chinesische Kommentare werden nach der Formatierung als verstümmelte Zeichen angezeigt

Dateikodierung ist nicht UTF-8: Die hochgeladene lokale Datei verwendet chinesische Kodierungen wie GBK/GB2312. Das Tool parst standardmäßig als UTF-8, was zu verstümmelten Zeichen führt. Konvertieren Sie die Datei mit einem Editor in UTF-8-Kodierung und laden Sie sie erneut hoch Browser-Seitenkodierung wurde versehentlich geändert: Obwohl Browser heute standardmäßig UTF-8 verwenden, kann die Kodierung bei älteren Browsern oder speziellen Einstellungen falsch sein. Überprüfen Sie im Browser-Menü die Seitenkodierung und setzen Sie sie auf UTF-8 Datei hat UTF-8 BOM-Header: Obwohl BOM normalerweise keine verstümmelten Zeichen verursacht, können einige Parser BOM falsch verarbeiten. Entfernen Sie den BOM mit einem Editor und speichern Sie als UTF-8 ohne BOM Kodierungskonvertierungsprobleme beim Kopieren und Einfügen: Beim Kopieren von Code aus älterer Software (wie alten Editoren, Word) können Sonderzeichen (wie chinesische Anführungszeichen, Ganzbreiten-Leerzeichen) falsch konvertiert werden. Kopieren Sie möglichst mit modernen Editoren wie VS Code Schriftartenproblem: Einige Monospace-Schriftarten unterstützen Chinesisch schlecht, was zu Anzeigeanomalien führt. Dies ist kein Kodierungsproblem, sondern nur ein Anzeigeschriftartenproblem. Wechseln Sie zu einer Monospace-Schriftart mit Chinesisch-Unterstützung Spezielle Unicode-Zeichen: Der Code enthält Emoji, Zero-Width Spaces, Steuerzeichen oder andere spezielle unsichtbare Zeichen, die Anzeigeanomalien oder Formatierungsfehler verursachen können. Aktivieren Sie die Anzeige unsichtbarer Zeichen im Editor, um dies zu überprüfen gzip-Komprimierung oder Proxy-Probleme: Wenn nach dem Deployment beim Zugriff verstümmelte Zeichen auftreten, überprüfen Sie, ob der Server den Antwort-Header Content-Type: application/javascript; charset=utf-8 korrekt gesetzt hat

JSX/TSX-Codeformatierung schlägt fehl oder Parsing-Fehler

Sprachmodus wurde auf JavaScript statt JSX/TSX gesetzt: Der normale JS-Parser erkennt keine <Tag>-Syntax und interpretiert JSX-Tags als Vergleichsoperatoren, was zu Fehlern führt. Wählen Sie manuell die Sprache JSX oder TSX aus Ambiguität bei TSX-Generics: <T>-Generic-Parameter können in TSX fälschlicherweise als JSX-Tags erkannt werden, z. B. const f = <T>(x: T) => x. Fügen Sie ein Komma nach <T> hinzu (<T,>), um die Ambiguität zu beseitigen (dies ist die übliche Schreibweise in TSX) Nicht geschlossene JSX-Tags: JSX erfordert, dass alle Tags korrekt geschlossen sind, selbstschließende Tags müssen /> haben. Anders als bei HTML muss <img> als <img/> geschrieben werden Probleme mit Klammern von JS-Ausdrücken in JSX: JS-Ausdrücke in {} müssen korrekt geschlossen sein. Fehlt die } bei {obj.prop}, führt dies zu nachfolgendem Parsing-Chaos Probleme mit der Fragment-Kurzschreibweise: Leere Tags <></> erfordern React 16+ und müssen korrekt geschlossen sein; bei Verwendung von <Fragment> muss der Import korrekt erfolgen Problem mit Anführungszeichen bei JSX-Attributwerten: JSX-Attributwerte müssen bei Strings in Anführungszeichen (doppelte Anführungszeichen) stehen, bei Ausdrücken in {}. Mischen Sie diese nicht TSX-Datei hat die Erweiterung .ts statt .tsx: Der TypeScript-Parser aktiviert die JSX-Parsing nur bei der Erweiterung .tsx. Wenn Sie JSX mit der Erweiterung .ts schreiben, treten Fehler auf. Verwenden Sie die korrekte Erweiterung

Einrückung nach der Formatierung falsch, entspricht nicht den Erwartungen

tabWidth-Konfiguration falsch: Überprüfen Sie, ob die Einrückungsbreite auf 2 oder 4 konfiguriert ist. Im Team sind häufig 2 Leerzeichen üblich. Wenn Sie 4 Leerzeichen erwarten, passen Sie die tabWidth-Option manuell an useTabs-Konfiguration falsch: Wenn Ihr Team Tab-Einrückung verwendet, Sie aber Leerzeichen konfiguriert haben (oder umgekehrt), überprüfen Sie, ob die useTabs-Option korrekt ist Code selbst hat Syntaxfehler: Syntaxfehler führen zu einer anomalen AST-Struktur, sodass die Einrückung bei der Formatierung durcheinandergerät. Beheben Sie zuerst die durch rote Wellenlinien markierten Syntaxfehler Tabs und Leerzeichen gemischt: Im Originalcode wird teilweise mit Tab, teilweise mit Leerzeichen eingerückt. Die Formatierung vereinheitlicht dies zum konfigurierten Stil, aber bei starkem Chaos im Originalcode sind möglicherweise mehrere Formatierungsdurchläufe erforderlich printWidth zu klein eingestellt: Bei zu kleiner Zeilenbreite (z. B. 40) wird der Code häufig umgebrochen, was die Einrückung durcheinander erscheinen lässt. Ein Wert von 80 oder 100 ist besser geeignet Layout-Optionen wie bracketSameLine/arrowParens entsprechen nicht den Erwartungen: Die Position geschweifter Klammern, Klammern bei Pfeilfunktionen usw. werden durch die Konfiguration bestimmt und sind keine Einrückungsprobleme. Passen Sie die entsprechenden Optionen an EditorConfig und lokale Editorkonfiguration stehen in Konflikt: Wenn Ihr lokaler Editor .editorconfig zur automatischen Einrückungseinstellung verwendet und die Optionen von der Web-Konfiguration abweichen, stimmen die Formatierungsergebnisse beider Seiten nicht überein. Vereinheitlichen Sie die Konfiguration

Tastenkürzel funktionieren nicht, keine Reaktion bei Betätigung

Fokus liegt nicht auf dem Editor: Tastenkürzel funktionieren nur, wenn der Editor den Fokus hat. Wenn der Fokus auf Schaltflächen, Eingabefeldern oder anderen Seitenbereichen liegt, werden Tastenkürzel nicht ausgelöst. Klicken Sie zuerst in den Editorbereich, um ihn zu fokussieren Browser-Tastenkürzel-Konflikt: Einige Tastenkürzel (wie Ctrl+Shift+B in Chrome zum Öffnen der Lesezeichenleiste, Ctrl+Shift+O in Firefox zum Öffnen des Verlaufs) werden vom Browser belegt. Sie können Schaltflächen verwenden oder (auf Mac) Cmd statt Ctrl ausprobieren Eingabemethodenproblem: Bei chinesischer Eingabemethode können einige Tastenkürzel abgefangen werden. Wechseln Sie zur englischen Eingabemethode und versuchen Sie die Tastenkürzel erneut Andere Erweiterungen/Plugins belegen die Kürzel: Im Browser installierte Tastenkürzel-Erweiterungen, Tampermonkey-Skripte oder Proxy-Plugins können Tastenkürzel belegen. Versuchen Sie, die Seite im Inkognito-Modus zu öffnen System-Tastenkürzel-Konflikt: Betriebssysteme oder andere laufende Software (wie Screenshot-Tools, Eingabemethoden, IDEs) haben globale Tastenkürzel, die die Tastenkombinationen belegen. Sie können die Tastenkürzel anderer Software ändern oder die Schaltflächen dieses Tools verwenden Mac/Windows-Tastaturunterschiede: Beachten Sie, dass Mac die Cmd (⌘)-Taste, Windows/Linux die Ctrl-Taste verwendet – verwechseln Sie diese nicht. Auf Mac entspricht Option der Alt-Taste unter Windows Browser-Sicherheitseinschränkungen: Einige Tastenkürzel für den Dateizugriff können durch Browsersicherheitsrichtlinien eingeschränkt sein und nicht vollständig per JS simuliert werden. Verwenden Sie bei Bedarf direkt die entsprechende Schaltfläche

Glossar

Prettier: Das derzeit beliebteste Frontend-Codeformatierungstool mit opinionated-Designphilosophie. Unterstützt mehrere Sprachen wie JS/TS/CSS/HTML/Markdown, erzwingt einheitlichen Codestil und beendet Stil-Debatten im Team.
Terser: Modernes JavaScript-Komprimierungstool, ein ES6+-kompatibler Fork von UglifyJS. Unterstützt Komprimierung und Obfuskierung von ES6+-Syntax und ist der Standard-Komprimierer in modernen Build-Tools wie Webpack, Rollup und Vite.
UglifyJS: Klassisches JavaScript-Komprimierungstool, der Vorgänger von Terser. Unterstützt jedoch nur ES5 und ältere Syntax ohne ES6+-Neuerungen. In neuen Projekten wird im Allgemeinen Terser als Ersatz verwendet.
AST (Abstract Syntax Tree): Abstrakter Syntaxbaum, eine baumartige Darstellung der Syntaxstruktur von Quellcode, bei der jeder Knoten eine Syntaxstruktur im Code repräsentiert. Tools wie Babel, Prettier, Terser und ESLint basieren alle auf AST.
ESLint: Das beliebteste Code-Inspektionstool (Linter) im JavaScript/TypeScript-Ökosystem. Dient zum Auffinden von Code-Qualitätsproblemen und zur Vereinheitlichung des Codestils und kann mit Prettier zusammen verwendet werden.
EditorConfig: Editorübergreifende Konfigurationsdatei zur Vereinheitlichung des Codestils. Definiert grundlegende Einstellungen wie Einrückungsstil, Einrückungsgröße, Zeilenumbrüche und Kodierung, sodass verschiedene Editoren dasselbe Projekt konsistent öffnen.
CodeMirror: Browserbasierte Code-Editor-Komponente mit professionellen Bearbeitungsfunktionen wie Syntaxhervorhebung, Zeilennummern, Klammermatching, Code-Faltung und Mehrcursorn. Eine der Hauptoptionen für webbasierte Code-Editoren.
minify: Der Prozess, das Codevolumen ohne Änderung der Codelogik durch Entfernen von Leerzeichen, Kommentaren, Kürzen von Variablennamen und Code-Optimierungen zu minimieren. Wird in Produktionsumgebungen zur Verbesserung der Ladegeschwindigkeit verwendet.
mangle: Der Schritt während der Komprimierung, bei dem Variablen-, Funktions- und Parameternamen auf Einzelzeichen gekürzt werden. Reduziert das Codevolumen erheblich und macht den Code gleichzeitig schwerer lesbar – auch bekannt als Variablennamen-Obfuskierung.
beautify: Auch Codeformatierung genannt: komprimierter oder unsauberer Code wird neu formatiert mit Einrückungen, Zeilenumbrüchen und Leerzeichen, um die Lesbarkeit zu verbessern – das Gegenteil von minify.
trailing comma: Ein Komma nach dem letzten Element in Objekten, Arrays oder Funktionsparametern. Erleichtert das Hinzufügen neuer Elemente durch sauberere Git-Diffs und wird in ES5+-Umgebungen unterstützt.
arrow parens: Gibt an, ob Parameter einparametriger Pfeilfunktionen in Klammern gesetzt werden müssen, z. B. x => x (ohne Klammern) vs. (x) => x (mit Klammern).
printWidth: Die Zeichenanzahl pro Zeile, bei der die Formatierung automatisch umbricht. Prettier verwendet standardmäßig 80 Zeichen, Teams können je nach Monitorgröße auf 100 oder 120 anpassen.
semicolons: Gibt an, ob am Ende von JavaScript-Anweisungen Semikolons gesetzt werden. JS verfügt über einen ASI-Mechanismus zur automatischen Semikoloneinfügung, aber in den meisten Szenarien wird die Verwendung von Semikolons empfohlen, um Überraschungen zu vermeiden.
single quote: Verwendung einfacher statt doppelter Anführungszeichen für Strings. In JS sind die Funktionen vollständig gleichwertig, es handelt sich um eine Stilpräferenz. Die JSON-Spezifikation erzwingt doppelte Anführungszeichen.
double quote: Verwendung doppelter Anführungszeichen zum Umschließen von Strings. Der Standardstil vieler Sprachen und das von der JSON-Spezifikation geforderte String-Format.
tab width: Die Anzahl der Leerzeichen pro Einrückungsebene. In der Frontend-Community sind häufig 2 Leerzeichen üblich, bei Backend-Sprachen 4 Leerzeichen.
BOM (Byte Order Mark): Byte Order Mark, drei Bytes EF BB BF am Anfang von UTF-8-kodierten Dateien zur Markierung der Kodierung. Kann in bestimmten Szenarien JS-Parsing-Fehler verursachen.
UTF-8: Unicode Transformation Format 8 Bit, die Standard-Dateikodierung für Web- und Frontend-Projekte. Unterstützt alle Unicode-Zeichen und ist die empfohlene Standardkodierung.
source map: Eine Datei, die komprimierten/transpilierten Code auf ursprüngliche Quellcodepositionen zurückabbildet. Wird für das Debugging in Produktionsumgebungen verwendet, sodass bei Fehlern im komprimierten Code Quellcode-Zeilennummern lokalisiert werden können.

Prettier Kernoptionen Referenz

Optionsname	Funktion	Mögliche Werte	Standardwert	Beschreibung
`tabWidth`	Einrückungsbreite (Anzahl Leerzeichen)	`2, 4, 8`	`2`	Wirksam wenn useTabs=false, 2 Leerzeichen im Frontend üblich
`useTabs`	Einrückung mit Tab-Zeichen	`true/false`	`false`	true = Tab-Einrückung, false = Leerzeicheneinrückung
`printWidth`	Zeilenbreiten-Limit (Zeichenanzahl)	`80, 100, 120`	`80`	Automatischer Zeilenumbruch bei Überschreitung, keine harte Beschränkung
`semi`	Semikolons am Anweisungsende	`true/false`	`true`	Bei false nur Semikolons, wo ASI fehlschlagen könnte
`singleQuote`	Einfache Anführungszeichen verwenden	`true/false`	`false`	true = einfache Anführungszeichen, false = doppelte Anführungszeichen, JSX-Attribute immer doppelt
`trailingComma`	Abschließende Kommas Modus	`none, es5, all`	`all (v3+)`	none = keine, es5 = bei Objekten/Arrays, all = auch bei Funktionsparametern
`arrowParens`	Klammern bei einparametrigen Pfeilfunktionen	`avoid, always`	`always (v2+)`	avoid = keine Klammern bei einem Parameter, always = immer Klammern
`bracketSpacing`	Leerzeichen in Objekt-Klammern	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	Position der schließenden Klammer bei HTML/JSX	`true/false`	`false`	true = schließende Klammer am Ende der letzten Zeile, false = in eigener Zeile
`vueIndentScriptAndStyle`	Einrückung von script/style in Vue-Dateien	`true/false`	`false`	Ob Code in script/style-Tags in Vue SFC eingerückt werden soll

JavaScript Vorher-Nachher-Vergleich der Codekomprimierung

Optimierung	Formatierter Code (Entwicklungsversion)	Komprimierter Code (Produktionsversion)	Volumenreduzierung
Leerzeichen und Zeilenumbrüche	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	~60%
Kommentarentfernung	`// Berechnet die Summe zweier Zahlen function add(a,b){return a+b}`	`function add(n,d){return n+d}`	~20%
Lokale Variablen mangle	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	~40%
Konstantenfaltung	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	~50%
Boolsche Vereinfachung	`if (x === true) { doThing(); }`	`if(x)doThing();`	~30%
Vollständiges Beispiel (mit mehreren Optimierungen)	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	~70%

Tastenkürzel Schnellreferenz

Tastenkürzel (Win/Linux)	Tastenkürzel (Mac)	Funktion	Häufigkeit
`Ctrl+Shift+B`	`Cmd+Shift+B`	Formatierung/Verschönerung ausführen	★★★★★
`Ctrl+Shift+M`	`Cmd+Shift+M`	Zwischen Formatierungs-/Komprimierungsmodus wechseln	★★★★
`Ctrl+Shift+O`	`Cmd+Shift+O`	Lokale Datei öffnen	★★★★
`Ctrl+Shift+D`	`Cmd+Shift+D`	Verarbeitete Datei herunterladen	★★★★★
`Ctrl+Shift+K`	`Cmd+Shift+K`	Editorinhalt leeren	★★★
`Ctrl+S`	`Cmd+S`	Datei herunterladen (speichern)	★★★★
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	Suchen / Suchen und Ersetzen	★★★★
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	Rückgängig / Wiederherstellen	★★★★★
`Ctrl+/`	`Cmd+/`	Zeilenkommentar ein/aus	★★★
`Tab / Shift+Tab`	`Tab / Shift+Tab`	Einrückung erhöhen/verringern (bei Auswahl)	★★★★
`Alt+Klick`	`Option+Klick`	Mehrere Cursor hinzufügen	★★★
`Ctrl+D`	`Cmd+D`	Nächstes gleiches Wort auswählen	★★★
`Home / End`	`Cmd+← / Cmd+→`	Zeilenanfang / Zeilenende	★★★★
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	Dateianfang / Dateiende	★★★