Was ist Prettier?

Inoffizielle Beta-Übersetzung

Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →

Prettier ist ein Code-Formatierer mit klaren Vorgaben, der folgende Sprachen unterstützt:

JavaScript (einschließlich experimenteller Funktionen)
JSX
Angular
Vue
Flow
TypeScript
CSS, Less und SCSS
HTML
Ember/Handlebars
JSON
GraphQL
Markdown, einschließlich GFM und MDX v1
YAML
Lightning Web Components (LWC)
MJML

Es entfernt die ursprüngliche Formatierung* und stellt sicher, dass der ausgegebene Code einem einheitlichen Stil folgt. (Siehe diesen Blogpost)

Prettier nimmt Ihren Code und gibt ihn neu aus, wobei die Zeilenlänge berücksichtigt wird.

Betrachten Sie zum Beispiel folgenden Code:

foo(arg1, arg2, arg3, arg4);

Er passt in eine Zeile und bleibt daher unverändert. Doch wir alle kennen diese Situation:

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

Plötzlich funktioniert unser bisheriges Format für Funktionsaufrufe nicht mehr, weil es zu lang ist. Prettier übernimmt die mühsame Arbeit, es für Sie neu auszugeben:

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

Prettier erzwingt einen einheitlichen Code-Stil (d.h. Code-Formatierung, die den AST nicht beeinflusst) in Ihrer gesamten Codebasis, indem es die ursprüngliche Formatierung* ignoriert – es parst sie weg und gibt den geparsten AST mit eigenen Regeln neu aus, die die maximale Zeilenlänge berücksichtigen und Code bei Bedarf umbrechen.

Wenn Sie mehr erfahren möchten, sind diese beiden Konferenzvorträge eine gute Einführung:

Fußnoten

* Eigentlich wird in der Praxis ein Teil der ursprünglichen Formatierung beibehalten – siehe Leerzeilen und mehrzeilige Objekte.

Fußnoten​

Fußnoten