JavaScript formatieren

Was der JavaScript Formatter macht

Code, den mehrere Leute geschrieben haben, der aus einem Forum kopiert oder aus einem minifizierten Bundle gezogen wurde, ist schwer zu lesen. Die Abstände unterscheiden sich von Zeile zu Zeile, lange Ketten laufen über den Bildschirmrand hinaus, und verschachtelte Callbacks verlieren ihre Form. Ein Formatter schreibt das Layout des Codes nach einem einheitlichen Regelwerk neu, damit du dich darauf konzentrieren kannst, was er tut.

Diese Seite führt Prettier 3, einen weit verbreiteten Open-Source-Code-Formatter, direkt in deinem Browser aus. Der JavaScript-Parser wird erst heruntergeladen, wenn du zum ersten Mal etwas formatierst, und dein Code verlässt die Seite nie.

So nutzt du ihn

1. Füge JavaScript oder JSX in das linke Feld ein. Es wird direkt nach dem Einfügen formatiert.
2. Oder klicke auf Datei öffnen, um eine .js-Datei zu laden, oder auf Beispiel, um ein Beispiel zu sehen.
3. Wähl die Optionen:
   • Einrückung: 2 Leerzeichen, 4 Leerzeichen oder Tabs.
   • Zeilenbreite: 80, 100, 120 oder 160 Zeichen, bevor eine Zeile umbricht.
   • Trailing Commas: Alle, ES5 oder Keine.
   • Einfache Anführungszeichen: 'text' statt "text".
   • Semikolons: An fügt sie am Ende von Anweisungen ein, Aus entfernt sie dort, wo es sicher ist.
4. Klicke auf Formatieren oder drück Strg+Enter.
5. Klicke auf Kopieren oder auf Herunterladen, um eine .js-Datei zu speichern.

Nach dem ersten Durchlauf hält die Ausgabe beim Tippen mit, und eine geänderte Option formatiert sofort neu.

Vorher und nachher

Minifizierte Eingabe:

const total=items=>items.filter(i=>i.qty>0).reduce((sum,{price,qty})=>sum+price*qty,0);async function load(url){const res=await fetch(url);if(!res.ok){throw new Error('Request failed: '+res.status)}return res.json()}

Nach Formatieren mit den Standardoptionen:

const total = (items) =>
  items
    .filter((i) => i.qty > 0)
    .reduce((sum, { price, qty }) => sum + price * qty, 0);
async function load(url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error("Request failed: " + res.status);
  }
  return res.json();
}

Der Parameter der Arrow Function bekommt Klammern, die Methodenkette wird auf einen Aufruf pro Zeile aufgeteilt, weil sie nicht in 80 Zeichen passt, und die einfachen Anführungszeichen werden zu doppelten. Mit einer Zeilenbreite von 100 passt dieselbe Kette in eine Zeile:

const total = (items) =>
  items.filter((i) => i.qty > 0).reduce((sum, { price, qty }) => sum + price * qty, 0);

Anführungszeichen, Semikolons und Trailing Commas

Diese drei Optionen decken die meisten Stil-Diskussionen im Team ab.

Mit Einfache Anführungszeichen an und Semikolons aus:

const name = 'Ada'
let list = [1, 2, 3]

Trailing Commas entscheidet, ob das letzte Element einer mehrzeiligen Liste oder eines Objekts ein Komma bekommt. Alle, die Voreinstellung von Prettier, ergibt:

const user = {
  firstName: "Ada",
  lastName: "Lovelace",
  email: "[email protected]",
  role: "admin",
};

Keine entfernt das letzte Komma nach "admin". Trailing Commas machen Diffs sauberer, weil ein neues Element dann nur eine Zeile ändert. ES5 setzt sie in Arrays und Objekten, aber nicht in Funktionsparametern, für sehr alte Umgebungen.

JSX

Auch React-Komponenten werden formatiert:

const App = () => (
  <div className="app">
    <h1>Hello</h1>
    <p>{name}</p>
  </div>
);

Syntaxfehler

Wenn der Code nicht geparst werden kann, hält der Formatter an und sagt dir, wo. Der Meldungstext kommt vom Parser und bleibt Englisch, nur Zeile und Spalte davor sind deutsch. Bei einem Objekt mit fehlendem Komma:

const a = {
  b: 1
  c: 2
};

lautet die Meldung Zeile 3, Spalte 3: Unexpected token, expected ",". Klicke auf In der Eingabe zeigen, um an die Stelle zu springen. Eine Funktion mit fehlender schließender Klammer ergibt Zeile 3, Spalte 1: Unexpected token, was auf das Ende der Eingabe zeigt, wo der Parser } erwartet hat.

Der Formatter führt deinen Code nicht aus und lintet ihn nicht. Ungenutzte Variablen, falsche Funktionsnamen und Logikfehler werden nicht gemeldet.

Tipps

• Einigt euch einmal auf die Optionen und schreibt sie in eine .prettierrc-Datei in eurem Projekt. Dann liefern Editoren und diese Seite dasselbe Ergebnis.
• Formatiere fremden Code, bevor du ihn liest. Ein Layout, das der Struktur folgt, macht Fehler in der Verschachtelung leicht sichtbar.
• Für Code mit Typannotationen nimm den TypeScript Formatter. Der JavaScript-Parser stoppt beim ersten : string.
• Für Daten statt Code ist der JSON Formatter strenger und validiert auch.

Andere Wege, JavaScript zu formatieren

• VS Code: Dokument formatieren (Umschalt+Alt+F unter Windows, Umschalt+Option+F unter macOS). Installiere die Prettier-Erweiterung und setz sie als Standard-Formatter, damit das Ergebnis zu dieser Seite passt.
• Kommandozeile: npx prettier --write src/app.js, oder npx prettier --check . in der CI, damit ein Build fehlschlägt, wenn Dateien nicht formatiert sind.
• Entwicklertools im Browser: Der Button zum hübschen Ausgeben im Bereich Quellen macht minifizierte Skripte beim Debuggen lesbar.

Skripte innerhalb einer HTML-Seite kannst du zusammen mit dem Markup im HTML Formatter formatieren.