Zum Hauptinhalt springen

Prettier 1.7: Anpassungen für JSX, Pragma, TypeScript und CSS-Korrekturen

· 9 Min. Lesezeit
Lily Skye
Lily Skye
Inoffizielle Beta-Übersetzung

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

Diese Version enthält einige Fehlerbehebungen und Anpassungen für JSX, TypeScript, CSS und die JavaScript-Formatierung sowie einige neue Funktionen.

Höhepunkte​

Änderungen an JSX​

Wir haben viel Feedback aus der Community zu den Änderungen an der JSX-Formatierung in Version 1.6.0 erhalten und haben Anpassungen vorgenommen, um die Formatierung näher an die Community-Standards und -Erwartungen zu bringen.

In Version 1.6.0 haben wir einen zweiten Stil für ternäre Ausdrücke (bedingte Ausdrücke, a ? b : c) hinzugefügt, basierend auf einem in der Community beliebten Format, bei dem Klammern zur Abgrenzung von JSX-Inhalten verwendet werden:

const DinnerOptions = ({ willEatMeat, willEatEggs, willEatVegetables }) => (
  <div>
    <div>Let's get some dinner...</div>
    {willEatMeat ? (
      <FullMenu />
    ) : willEatEggs ? (
      <VegetarianMenu />
    ) : willEatVegetables ? (
      <VeganMenu />
    ) : (
      <BackupMenu />
    )}
  </div>
);

Bevor dies hinzugefügt wurde, formatierte Prettier ternäre Ausdrücke nur in einem einheitlichen Stil:

willEatMeat
  ? "Full Menu"
  : willEatEggs
    ? "Vegetarian Menu"
    : willEatVegetables ? "Vegan Menu" : "Backup Menu";

In Version 1.6.0 verwendeten wir die folgende Heuristik, um zu entscheiden, wann die neuen "JSX-Modus-Ternaries" verwendet werden sollen:

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it
  OR
  * The ternary appears inside of some JSX

Diese Heuristik führte jedoch zu einigen unerwarteten Formatierungen: GitHub-Diff, der einen ternären Ausdruck zeigt, der Internationalisierungszeichenfolgen enthält und innerhalb eines JSX-Elements erscheint, der in den JSX-Modus-Style konvertiert wird

Daher haben wir in Version 1.7.0 unsere Heuristik wie folgt überarbeitet:

We should print a ternary using JSX mode if:
  * The ternary contains some JSX in it

Wir hoffen, dass diese Änderung zu weniger überraschenden ternären Ausdrücken führt.

Ein großer Dank geht an @duailibe, der diese Änderung implementiert hat sowie mehrere andere gemeldete JSX-bezogene Formatierungsprobleme.

Konsistente Groß-/Kleinschreibung in CSS​

Wir haben in dieser Version einige Zeit darauf verwendet, unsere CSS-Formatierung zu verfeinern, und als Teil davon hat @lydell Arbeiten zur Normalisierung der Groß-/Kleinschreibung durchgeführt.

Daher wird nun fast alles in CSS in lower case (Kleinschreibung) ausgegeben.

/* Before */
DIV.Foo {
  HEIGHT: 12PX;
}

/* After */
div.Foo {
  height: 12px;
}

Keine Sorge – Prettier wird Ihre $scss-variables, [@less](https://github.com/less)-variables oder FunctionNames() nicht anrühren. Weiter mit dem Preprocessing!

Pragma-Unterstützung​

Es gibt eine neue Option namens --require-pragma (requirePragma über die API), die das Verhalten von Prettier so ändert, dass es eine Datei nur neu formatiert, wenn sie einen speziellen "Pragma"-Kommentar am Anfang enthält, der so aussieht:

/**
 * @prettier
 */

oder

/**
 * @format
 */

Dies war die Idee von @ajhyndman und wurde von @wbinnssmith implementiert.

Weitere Änderungen​

TypeScript​

Es gab einen Fehler in Prettier 1.6.1, bei dem ein Fehler ausgelöst wurde, wenn TypeScript mit dem Typ never geparst wurde, zum Beispiel:

Observable.empty<never>();

Außerdem entfernte Prettier 1.6.1 fälschlicherweise das Schlüsselwort declare aus enum-Deklarationen in *.d.ts-Dateien:

// In
declare const enum Foo {}

// Out
const enum Foo {}

Beide Probleme wurden behoben. Vielen Dank an @JamesHenry und @existentialism für diese Korrekturen, die unsere TypeScript-Community unterstützen!

Konfiguration​

Konfigurierbare Konfigurationspriorität​

Es gibt eine neue CLI-Option --config-precedence, die konfiguriert, wie Prettier Konfigurationsquellen priorisieren soll. Gültige Werte sind:

cli-override (Standard) - CLI-Optionen haben Vorrang vor der Konfigurationsdatei

file-override - Die Konfigurationsdatei hat Vorrang vor CLI-Optionen

prefer-file - Wenn eine Konfigurationsdatei gefunden wird, wird diese ausgewertet und andere CLI-Optionen ignoriert. Wird keine Konfigurationsdatei gefunden, werden CLI-Optionen normal ausgewertet.

Diese Option unterstützt Editor-Integrationen, bei denen Benutzer ihre Standardkonfiguration definieren, aber projektspezifische Konfigurationen respektieren möchten.

prettier.resolveConfig.sync​

Bisher gab es über die API keine Möglichkeit, die Konfiguration für eine Quelldatei synchron aufzulösen. Dank neuer Ergänzungen zu cosmiconfig von @sudo-suhas konnte @ikatyang dies in die Prettier-API integrieren.

In diesem Release zusammengeführte PRs​

In dieser Version behobene Probleme​

Ein herzliches Dankeschön an alle, die zu diesem Release beigetragen haben - sei es durch das Erstellen von Issues, Code-Beiträgen, Code-Reviews oder allgemeines Feedback. Prettier ist ein Community-Projekt und kann nur dank Menschen wie Ihnen weiterbestehen. Vielen Dank!