Prettier 1.13: Eroberung des Webs!

27. Mai 2018 · 22 Min. Lesezeit

Inoffizielle Beta-Übersetzung

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

Dieses Release fügt Unterstützung für mehrere neue Syntax-Features, Formatierungsverbesserungen und erstklassige Browser-Unterstützung hinzu.

Höhepunkte

API/CLI

Prettier funktioniert im Browser!

Lange vom Team und unseren Nutzern gewünscht, verkünden wir endlich: Prettier 1.13 bietet erstklassige Unterstützung für den Betrieb im Browser. Früher waren Workarounds nötig, doch jetzt genügt es, das Core-Bundle und gewünschte Parser zu laden.

<script src="https://unpkg.com/prettier@1.13.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-babylon.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-graphql.js"></script>
<script type="text/javascript">
var formatButton = document.querySelector("#format");
var textInput = document.querySelector("#input");
formatButton.addEventListener("click", function() {
  var value = textInput.value;
  textInput.value = prettier.format(value, {
    parser: "babylon",
    plugins: prettierPlugins
  });
});</script>

Mehr dazu in der Dokumentation oder direkt im JS Bin testen.

Kein Standard-JavaScript-Parser mehr (#4528 von @duailibe)

Bei Prettier 1.12 und älter wurde bei Dateien ohne Dateiendung automatisch JavaScript angenommen. Dies führte zu verwirrenden Fehlern:

Bei Ausführung auf dem .git-Verzeichnis wurden Dateien neu formatiert und das Repository beschädigt.
Bei HTML-Dateien wurde manchmal ein Fehler geworfen, andererseits HTML als JSX geparst und unsicher formatiert.

In Prettier 1.13 ändern wir dieses Verhalten: Wenn die Sprache nicht anhand der Dateiendung bestimmbar ist und kein Parser manuell angegeben wurde, wird die Datei übersprungen.

Für Dateien mit nicht unterstützten Erweiterungen kann die Option --parser den zu verwendenden Parser angeben. Bei Eingaben über stdin muss --stdin-filepath mitgegeben werden, damit die Dateiendung zur Spracherkennung genutzt werden kann.

In der JavaScript-API werfen prettier.format und prettier.formatWithCursor nun Fehler, wenn weder parser noch filepath in den Optionen enthalten sind. Ebenso wenn filepath ohne parser angegeben wird und der Parser nicht ermittelt werden kann.

`prettier.getFileInfo()`-Methode und `--file-info`-CLI-Option (#4341 von @kachkaev)

Bisher gab es keine Möglichkeit, über die API zu prüfen, ob eine Datei ignoriert wird (.prettierignore) oder unterstützt wird. Editor-Plugins mussten diese Logik implementieren. Ab 1.13 kann vor dem format-Aufruf geprüft werden, welcher Parser verwendet wird und ob die Datei ignoriert ist.

Details in der Dokumentation.

Unterstützung für globales Prettier und Plugins (#4192 von @kachkaev)

Bei globaler Installation suchte Prettier Plugins nur im nächsten package.json. Jetzt werden Plugins im Installationsverzeichnis (node_modules) gesucht. Für spezielle Setups wurde die Option --plugin-search-dir hinzugefügt, um Suchpfade manuell festzulegen.

Mehr dazu in der Plugin-Dokumentation.

Verbesserte Cursor-Offset-Verfolgung (#4397 von @ds300)

Prettier 1.13 verbessert die Cursor-Positionsverfolgung in mehreren Fällen erheblich, in denen Prettier zuvor falsche Positionen ausgab, wodurch Editor-Integrationen den Cursor an falsche Stellen bewegt haben.

JavaScript

Mehr Klammern in mathematischen Ausdrücken einfügen (#4413 und #4407 von @duailibe)

Prettier fügt nun Klammern um Modulo-Operationen ein, wenn sie innerhalb einer Additionsoperation stehen oder bei der Kombination verschiedener multiplikativer Operationen, selbst wenn sie nicht notwendig sind. Dies hilft beim schnelleren Verständnis von Codeausschnitten.

// Input
a % 10 - 5;
2 / 3 * 10 / 2 + 2;

// Output with Prettier 1.13
(a % 10) - 5;
((2 / 3) * 10) / 2 + 2;

Inline-Formatierung für AngularJS-Tests mit `inject` (#4495 von @thorn0)

Prettier behält AngularJS-Tests mit Dependency Injection nun in einer Zeile, wie es auch bei anderen Tests der Fall ist.

// Input:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

// Output with Prettier 1.12.1:
it(
  "has calculated the answer correctly",
  inject(function(DeepThought) {
    expect(DeepThought.answer).toBe(42);
  })
);

// Output with Prettier 1.13:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

Bessere Zeilenumbrüche für D3 (#4285 von @1wheel, #4505 von @duailibe)

In Prettier 1.12 und früher wurden Ketten, die mit d3 oder anderen kurzen Namen begannen, vor dem ersten . umgebrochen. In Prettier 1.13 fügen wir nach dem Namen keinen Zeilenumbruch mehr ein, wenn er kürzer als die Einzugsbreite ist.

// Input
d3.select('body')
  .append('circle')
  .at({ width: 30, fill: '#f0f' })
  .st({ fontWeight: 600 })

// Output with Prettier 1.12.1:
d3
  .select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

// Output with Prettier 1.13:
d3.select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

Formatierung neuer `describe.each`-Tabellen in Jest 23 (#4423 von @ikatyang)

Jest 23 führte ein neues Feature namens datengetriebene Tests ein, bei dem Testbeispiele in Tabellen beschrieben werden. Prettier 1.13 unterstützt dieses Feature und rückt die Tabelle automatisch ein, wenn datengetriebene Tests verwendet werden.

// Input
describe.each`
a|b|expected
${11   } | ${  1  }|${222}
${1-1}|${2+2}|${ 3333}
${2+1+2}|${1111}|${3}
`('$a + $b', ({a, b, expected}) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

// Output with Prettier 1.13
describe.each`
  a            | b        | expected
  ${11}        | ${1}     | ${222}
  ${1 - 1}     | ${2 + 2} | ${3333}
  ${2 + 1 + 2} | ${1111}  | ${3}
`("$a + $b", ({ a, b, expected }) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

Bessere Formatierung funktionaler Komposition (#4431 von @suchipi)

Eine der meistgewünschten Prettier-Änderungen war die bessere Formatierung funktionaler Komposition. Dieses Muster ist in funktionalen Programmierbibliotheken wie RxJS, Redux, Lodash und Ramda weit verbreitet. In Version 1.13 erkennt Prettier diese Art der Funktionskomposition heuristisch und formatiert sie so, dass jede komponierte Funktion in einer eigenen Zeile steht. Dies verbessert die Lesbarkeit bei Funktionen wie pipe, compose, flowRight usw.

// Input
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

// Output with Prettier 1.12.1
compose(sortBy(x => x), flatten, map(x => [x, x * 2]));

pipe(filter(x => x % 2 === 0), map(x => x + x), scan((acc, x) => acc + x, 0));

// Output with Prettier 1.13
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

Klammern um `do`-Ausdrücke bei Bedarf beibehalten und Formatierung verbessern (#4479 von @existentialism)

In Prettier 1.12 und früher entfernte Prettier in einigen Fällen Klammern um do-Ausdrücke unsicher, was zu ungültigem Code führte. Diese Fälle sind in 1.13 behoben. Zusätzlich wurde die Formatierung von do-Ausdrücken allgemein verbessert.

// Input
(do {});
(do {} + 1);
(1 + do {});

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

// Output with Prettier 1.12
do {
};
do {
} + 1;
1 +
  do {
  };

() =>
  do {
    var obj = { foo: "bar", bar: "foo" };
    for (var key in obj) {
      obj[key];
    }
  };

// Output with Prettier 1.13
(do {});
(do {} + 1);
1 + do {};

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

Flow

Korrekte Ausgabe von Klassen-Mixins und -Implements (#4326 von @existentialism)

In Version 1.12 und früher entfernte Prettier fälschlicherweise mixins und implements aus Flow-Libdef-Klassen, was die Codebedeutung änderte. Dies wurde in 1.13 behoben.

// Input
declare class A implements B {}
declare class C mixins D {}

// Output with Prettier 1.12
declare class A {}
declare class C {}

// Output with Prettier 1.13
declare class A implements B {}
declare class C mixins D {}

Unterstützung für Nullish-Coalescing-Operator und numerische Trennzeichen hinzugefügt (#4536 von @vjeux)

Diese JS-Features wurden bereits mit dem Standard-Babylon-Parser unterstützt, aber Prettier 1.13 fügt Unterstützung für den Flow-Parser hinzu.

Unterstützung für neue Flow-Syntax-Features hinzugefügt (#4543, #4540 und #4551 von @existentialism)

Neue Flow-Features werden nun von Prettier unterstützt:

Inline-Interfaces
```
type A = interface { p: string};
```
Explizite Typ-Argumente
```
fnCall<string>("name");
```
Proto-Modifikator-Syntax
```
declare class A { proto: T }
```

TypeScript

Unterstützung für TypeScript-Importtypen hinzugefügt (#4429 und #4438 von @ikatyang)

Ein neues Feature in TypeScript 2.9 zur Beschreibung der Struktur dynamisch importierter Module.

// Input
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: typeof import("./foo2") = { Bar: Bar2 };

// Output with Prettier 1.13
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: import("./foo2") = { Bar: Bar2 };

Unterstützung für generische JSX-Elemente in TypeScript hinzugefügt (#4268 von @ikatyang)

Ein weiteres Feature aus TypeScript 2.9 ist die Unterstützung von Generics in JSX-Elementen, die Prettier 1.13 nun formatieren kann.

// Example:
<MyComponent<number> data={12} />

Unterstützung für TaggedTemplateExpression typeParameters hinzugefügt (#4353 von @ikatyang)

Ebenfalls in TypeScript 2.9 eingeführt: Es ist nun möglich, Typparameter an Tags von Template Expressions zu übergeben.

// Example:
export const RedBox = styled.div<{ foo: string }>`
  background: red;
  ${props => props.foo};
`;

Verbessertes Format für Typumwandlungen mit Generics und Unions (#4219 von @kpdonn)

// Input
const finalConfiguration =
  <Immutable.Map<string, any>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.12
const finalConfiguration = <Immutable.Map<
  string,
  any
>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.13
const finalConfiguration = <Immutable.Map<string, any>>(
  someExistingConfigMap.mergeDeep(fallbackOpts)
);

JSON

JSON- und JSON5-Parser getrennt (#4367 und #4371 von @ikatyang, #4333 von @duailibe)

JSON5 ist eine Obermenge von JSON, die Kommentare, nachgestellte Kommas und nicht in Anführungszeichen gesetzte Eigenschaftsschlüssel unterstützt. Einige Dateien (wie .babelrc) verwenden JSON5, daher sind dort Kommentare, nachgestellte Kommas und nicht in Anführungszeichen gesetzte Schlüssel erlaubt. Andere Dateien (wie package.json) verwenden kein JSON5, daher sind diese Elemente dort nicht zulässig. Prettier hatte bisher einen gemeinsamen Parser/Printer namens JSON für beide Varianten, was zu subtilen Fehlern führte, insbesondere bei der Erkennung und Einfügung von /* @prettier */-Pragma-Kommentaren. Durch die Trennung sind diese Fehler behoben.

`json-stringify`-Parser für `JSON.stringify`-Formatierung hinzugefügt (#4450 von @ikatyang)

Eine häufige Kritik an Prettier war, dass es package.json und package-lock.json anders formatierte als npm und yarn. Wenn Sie also einen npm- oder yarn-Befehl ausführten, konnte dies Prettier-Verstöße verursachen, und das Bearbeiten von package.json konnte Zeilenumbrüche hinzufügen, die später entfernt wurden, wenn Sie erneut einen npm- oder yarn-Befehl ausführten. Dies führte zu unnötigem Diff-Rauschen und schlechter User Experience. In Prettier 1.13 wurde der neue Parser/Drucker json-stringify hinzugefügt, der sich wie JSON.stringify verhält, sodass Änderungen nicht mehr hin- und herwechseln. Er ist jetzt Standard für package.json und package-lock.json – nach dem Upgrade entfallen diese Diffs ohne Konfigurationsänderung.

CSS/Less/SCSS

Formatierung von SCSS-Maps verbessert (#4487 von @evilebottnawi)

/* Output with Prettier 1.12 */
a {
  @include section-type-1(
    $header: (margin: 0 0 $margin-base, text-align: left),
    $decoration:
      (
        type: base,
        margin: 0 auto -1px 0,
        primary-color: $brand-primary,
        secondary-color: $gray-light
      ),
    $title:
      (
        margin: 0 0 $margin-small,
        color: false,
        font-size: $font-size-h3,
        font-weight: false,
        line-height: $line-height-h3
      )
  );
}

/* Output with Prettier 1.13 */
a {
  @include section-type-1(
    $header: (
      margin: 0 0 $margin-base,
      text-align: left
    ),
    $decoration: (
      type: base,
      margin: 0 auto -1px 0,
      primary-color: $brand-primary,
      secondary-color: $gray-light
    ),
    $title: (
      margin: 0 0 $margin-small,
      color: false,
      font-size: $font-size-h3,
      font-weight: false,
      line-height: $line-height-h3
    )
  );
}

Formatierung der `@support`-At-Regel verbessert (#4372 von @evilebottnawi)

/* Input */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

/* Output with Prettier 1.12 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

/* Output with Prettier 1.13 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
  (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

Markdown

Symbol für ungeordnete Listen auf Bindestrich geändert (#4440 von @ikatyang)

Bei der Markdown-Einführung nutzte Prettier GitHub BigQuery-Daten und entdeckte, dass das Symbol * für ungeordnete Listen geringfügig häufiger als - verwendet wurde. Nach massivem Community-Feedback, dass - tatsächlich bevorzugt wird, verwendet Prettier 1.13 nun das Symbol - für ungeordnete Listen.

<!-- Input -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.12.1 -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.13 -->
- Top level list item 1
- Top level list item 2
  - Nested List item 1
  - Nested List item 2
    - Sub-Nested List item 1
    - Sub-Nested List item 2

Inhalte von Liquid-Tags erhalten (#4484 von @duailibe)

Liquid ist eine Template-Sprache für statische Seiten-Generatoren wie Jekyll. In Prettier 1.12 wurden Liquid-Tags in Markdown als normaler Text behandelt, was zu ungewollten Änderungen führte. Prettier 1.13 erkennt Liquid-Tags und erhält deren Inhalte unverändert.

<!-- Input -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

<!-- Output with Prettier 1.12 -->
{% include_relative \_installations/tarball.md %}

{% cloudinary nice*prefix*-\_for_the_filename.jpg %}

<!-- Output with Prettier 1.13 -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

Link-Definitionen bei Bedarf in mehrere Zeilen umbrechen (#3531 von @j-f1)

Link-Definitionen werden mit --prose-wrap always in mehrere Zeilen umgebrochen, wenn sie die Druckbreite überschreiten.

<!-- Input -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."

[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.12 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."
[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.13 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]:
  https://example.com
  "a long, long title. It's really really long. Here have words."
[long]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
  "look a title!"

GraphQL

Nur Leerzeilen nach Top-Level-Definitionen hinzufügen, wenn im Original vorhanden (#4512 von @ad1992)

In Prettier 1.12 und früher wurde immer eine Leerzeile zwischen Top-Level-Definitionen eingefügt. In Version 1.13 wird nur dann eine Leerzeile ausgegeben, wenn sie bereits im Original existierte. Dieses Verhalten entspricht der Formatierung von JavaScript in Prettier.

# Input
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.12.1
type TypeA {
  fieldA: string
}

type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.13
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

Weitere Änderungen

API/CLI

Bereich nicht formatieren, wenn erforderliches Pragma in der Datei fehlt (#3996 von @josephfrazier)

In Prettier 1.12 und früher wurde ein Bereich formatiert, selbst wenn die Datei kein /** @prettier */-Pragma enthielt und Prettier mit --require-pragma nur für einen Bereich aufgerufen wurde. Jetzt prüft Prettier das Vorhandensein des Pragmas auch bei der Formatierung von Teilbereichen.

Plugin-Auflösung verbessern, wenn Pfad nicht mit `./` beginnt (#4451 von @kachkaev)

Bei Angabe von --plugin=path/to/plugin stürzte Prettier 1.12 und früher ab, da es nach einem path/to/plugin im Ordner node_modules suchte. Prettier 1.13 sucht nun zuerst im aktuellen Verzeichnis und erst danach in node_modules.

Plugin-Schnittstelle für isBlockComment hinzugefügt (#4347 von @mgrip)

Ein Blockkommentar kann inline mit Code ausgegeben werden (für JS: /* comment */). Da Prettier für die Ausgabe von Kommentaren verantwortlich ist, benötigen Plugins die Möglichkeit zu bestimmen, ob ein Kommentar ein Blockkommentar ist. Details in unserer Dokumentation.

JavaScript

Destructuring-Regeln für Funktionen auf catch-Parameter anwenden (#4385 von @duailibe)

In 1.12 wurden Destrukturierungen in catch-Argumenten wie Zuweisungen formatiert. Code wirkt jedoch besser, wenn sie wie Funktionsparameter behandelt werden - daher diese Änderung:

// Input
try {
  doSomething();
} catch ({data: {message}}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({data: {message: {errors}}}) {
  handleError(errors);
}

// Output with Prettier 1.12.1
try {
  doSomething();
} catch ({
  data: { message }
}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

// Output with Prettier 1.13
try {
  doSomething();
} catch ({ data: { message } }) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

Backslashes korrekt für Markdown in JS escapen (#4381 von @ikatyang)

Prettier 1.12 entfernte fälschlich Backslashes in Markdown-Template-Literalen. Prettier 1.13 behandelt diese korrekt.

// Input
markdown`
  const cssString = css\`
    background-color: \$\{color('base')\}
  \`;
`
// Output with Prettier 1.12.1
markdown`
  const cssString = css\`background-color: ${color('base')}\`;
`;

// Output with Prettier 1.13
markdown`
  const cssString = css\`background-color: \$\{color('base')\}\`;
`;

Unterstützung für styled-components Foo.extend.attrs()`` (#4434 von @duailibe)

Prettier 1.12.1 erkannte nicht, dass das Template-Literal für styled-components-Funktion Foo.extends.attrs() CSS enthielt. Version 1.13 unterstützt diese Syntax und formatiert den Inhalt als CSS.

// Input
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.12
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.13
Button.extend.attrs({})`
  border-color: black;
`;

Unterstützung für GraphQL-Kommentar-Tag hinzugefügt (#4395 von @tjallingt)

Wir formatieren GraphQL in getaggten Template-Literalen, aber manche Bibliotheken verwenden ungetaggte Literale. Viele Editoren nutzen den Kommentar /* GraphQL */ davor zur Erkennung. Prettier 1.13 erkennt nun ebenfalls diesen Kommentar und formatiert den GraphQL-Code.

// Input
const query = /* GraphQL */`
      {
    user(   id :   5  )  {
      firstName
      lastName
    }
  }
`;

// Output with Prettier 1.13
const query = /* GraphQL */ `
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`;

Styles von Angular-Komponenten formatieren (#4361 von @JamesHenry)

Prettier 1.13 formatiert Inline-Styles von Angular-Komponenten.

// Input
@Component({
       selector: 'app-test',
  styles: [   `

 :host {
   color: red;
 }
 div { background: blue
 }
`

]
})
class     TestComponent {}

// Output with Prettier 1.13
@Component({
  selector: "app-test",
  styles: [
    `
      :host {
        color: red;
      }
      div {
        background: blue;
      }
    `,
  ],
})
class TestComponent {

Zeilenumbrüche bei Klassen-Property-Initialisierern korrigieren (#4442 von @nicolo-ribaudo)

Prettier 1.12 rückte nachfolgende Zeilen bei umgebrochenen Klassen-Property-Initialisierern nicht ein. Dies wurde in 1.13 behoben.

// Input
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

// Output with Prettier 1.12
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  this.props.barbarbarbar;
}

// Output with Prettier 1.13
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

Korrektur langer Methodennamen in Bind-Ausdrücken (#4447 von @misoguy)

Prettier 1.13 verbessert die Formatierung langer Member-Expression-Ketten in Bind-Ausdrücken.

// Input
function Foo() {
	const longVariableName = ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

// Output with Prettier 1.12
function Foo() {
  const longVariableName = ::veryLongObjectName.veryLongObjectChain
    .veryLongObjectProperty;
}

// Output with Prettier 1.13
function Foo() {
  const longVariableName =
    ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

Klammern für den `?.`-Operator nicht mehr entfernen (#4542 von @duailibe)

Es gibt einen Sonderfall im Optional-Chaining-Proposal, bei dem Klammern das Laufzeitverhalten beeinflussen. Prettier 1.12 und früher entfernten hier fälschlicherweise die Klammern, was in Version 1.13 korrigiert wurde.

// Input
(a?.b).c

// Output with Prettier 1.12
a?.b.c

// Output with Prettier 1.13
(a?.b).c

Flow

`?() => T` bei Bedarf in Klammern setzen (#4475 von @nicolo-ribaudo)

Prettier 1.12 und früher veränderten unbeabsichtigt die Bedeutung von Typen beim Nullable-Operator aufgrund von Operator-Präzedenz. Dies wurde in Prettier 1.13 behoben.

// Input
type Foo = { arg: ?(() => void) | string };

// Output with Prettier 1.12
type Foo = { arg: ?() => void | string };
// which is equivalent to:
type Foo = { arg: ?() => (void | string) };

// Output with Prettier 1.13
type Foo = { arg: ?(() => void) | string };

TypeScript

Geschützte Klasseneigenschaften beibehalten (#4517 von @ikatyang)

Strikte Eigenschaftsinitialisierungsprüfungen gelten nicht für geschützte Klasseneigenschaften in TypeScript. Prettier 1.13 behält die Anführungszeichen bei, wenn sie im Originalcode vorhanden waren.

// Input
class Username {
  age: number;
  "username": string;
}

// Output with Prettier 1.12
class Username {
  age: number;
  username: string;
}

// Output with Prettier 1.13
class Username {
  age: number;
  "username": string;
}

Markdown

Zeilenumbruch in leeren `.md`-Dateien entfernen (#4388 von @huyvohcmc)

Prettier 1.12.1 fügte beim Formatieren leerer Markdown-Dateien einen Zeilenumbruch ein. Dies wurde in Version 1.13 korrigiert.

Zusammenführung von fortlaufendem CJK-Text mit `--prose-wrap preserve` verhindern (#4504 von @ikatyang)

Bei Verwendung von --prose-wrap preserve führt Prettier fortlaufenden CJK-Text, der über mehrere Zeilen verteilt ist, nicht mehr zusammen.

<!-- Input -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.12 -->
::: warning 注意该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.13 -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

CSS/SCSS/Less

Nachgestellte Kommas in SCSS-Listen und Maps ausgeben (#4317 von @ad1992)

Prettier gibt nun nachgestellte Kommas in SCSS-Listen und Maps aus, wenn trailingComma nicht "none" ist und die Liste/Map über mehrere Zeilen verteilt ist.

/* Input */
$list: (a);
$colors: (
  "red",
  "blue"
);
$map: (
  'medium': (min-width: 800px),
  'large': (min-width: 1000px),
  'huge': (min-width: 1200px),
);

/* Output with Prettier 1.13 */
$list: (a);
$colors: (
  "red",
  "blue",
);
$map: (
  "medium": (min-width: 800px),
  "large": (min-width: 1000px),
  "huge": (min-width: 1200px),
);

Leeren Frontmatter korrigieren (#4392 und #4457 von @eliasmeire)

Prettier 1.12 unterstützte Frontmatter-Blöcke in CSS/SCSS/Less-Dateien, entfernte jedoch leere Blöcke (oder Blöcke nur mit Kommentaren). Dies wurde in Version 1.13 behoben.

SCSS-String-Interpolation nicht formatieren (#4490 von @evilebottnawi)

Prettier brach in einigen Fällen SCSS-Code beim Formatieren von Strings mit Interpolation. Prettier 1.13 gibt nun den Originalcode aus.

/* Input
a {
 content: "#{my-fn("_")}";
}

/* Output with Prettier 1.12 */
a {
 content: "#{my-fn(" _ ")}";
}

/* Output with Prettier 1.13 */
a {
 content: "#{my-fn("_")}";
}

Zeichen korrekt escapen (#4472 von @evilebottnawi)

Prettier 1.12 escapete Zeichen in manchen Fällen nicht korrekt.

/* Input */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

/* Output with Prettier 1.12 */
@media only screen and (max-width: 767px) {
  @include widths(2 3 4, \ @small);
}

$widths-breakpoint-separator: \ @small;

/* Output with Prettier 1.13 */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

SCSS-Interpolation in CSS-Variablen korrigieren (#4471 von @evilebottnawi)

/* Input */
a {
  --bg: var(--#{$type});
}

/* Output with Prettier 1.12 */
a {
  --bg: var(-- #{$type});
}

/* Output with Prettier 1.13 */
a {
  --bg: var(--#{$type});
}

Abstandsproblem bei berechneten PostCSS-Variablen beheben (#4408 von @ad1992)

/* Input */
background-color: $$(style)Color;

/* Output with Prettier 1.12 */
background-color: $$(style) Color;

/* Output with Prettier 1.13 */
background-color: $$(style)Color;

Höhepunkte​

API/CLI​

Prettier funktioniert im Browser!​

Kein Standard-JavaScript-Parser mehr (#4528 von @duailibe)​

prettier.getFileInfo()-Methode und --file-info-CLI-Option (#4341 von @kachkaev)​

Unterstützung für globales Prettier und Plugins (#4192 von @kachkaev)​

Verbesserte Cursor-Offset-Verfolgung (#4397 von @ds300)​

JavaScript​

Mehr Klammern in mathematischen Ausdrücken einfügen (#4413 und #4407 von @duailibe)​

Inline-Formatierung für AngularJS-Tests mit inject (#4495 von @thorn0)​

Bessere Zeilenumbrüche für D3 (#4285 von @1wheel, #4505 von @duailibe)​

Formatierung neuer describe.each-Tabellen in Jest 23 (#4423 von @ikatyang)​

Bessere Formatierung funktionaler Komposition (#4431 von @suchipi)​

Klammern um do-Ausdrücke bei Bedarf beibehalten und Formatierung verbessern (#4479 von @existentialism)​

Flow​

Korrekte Ausgabe von Klassen-Mixins und -Implements (#4326 von @existentialism)​

Unterstützung für Nullish-Coalescing-Operator und numerische Trennzeichen hinzugefügt (#4536 von @vjeux)​

Unterstützung für neue Flow-Syntax-Features hinzugefügt (#4543, #4540 und #4551 von @existentialism)​

TypeScript​

Unterstützung für TypeScript-Importtypen hinzugefügt (#4429 und #4438 von @ikatyang)​

Unterstützung für generische JSX-Elemente in TypeScript hinzugefügt (#4268 von @ikatyang)​

Unterstützung für TaggedTemplateExpression typeParameters hinzugefügt (#4353 von @ikatyang)​

Verbessertes Format für Typumwandlungen mit Generics und Unions (#4219 von @kpdonn)​

JSON​

JSON- und JSON5-Parser getrennt (#4367 und #4371 von @ikatyang, #4333 von @duailibe)​

json-stringify-Parser für JSON.stringify-Formatierung hinzugefügt (#4450 von @ikatyang)​

CSS/Less/SCSS​

Formatierung von SCSS-Maps verbessert (#4487 von @evilebottnawi)​

Formatierung der @support-At-Regel verbessert (#4372 von @evilebottnawi)​

Markdown​

Symbol für ungeordnete Listen auf Bindestrich geändert (#4440 von @ikatyang)​

Inhalte von Liquid-Tags erhalten (#4484 von @duailibe)​

Link-Definitionen bei Bedarf in mehrere Zeilen umbrechen (#3531 von @j-f1)​

GraphQL​

Nur Leerzeilen nach Top-Level-Definitionen hinzufügen, wenn im Original vorhanden (#4512 von @ad1992)​

Weitere Änderungen​

API/CLI​

Bereich nicht formatieren, wenn erforderliches Pragma in der Datei fehlt (#3996 von @josephfrazier)​

Plugin-Auflösung verbessern, wenn Pfad nicht mit ./ beginnt (#4451 von @kachkaev)​

Plugin-Schnittstelle für isBlockComment hinzugefügt (#4347 von @mgrip)​

JavaScript​

Destructuring-Regeln für Funktionen auf catch-Parameter anwenden (#4385 von @duailibe)​

Backslashes korrekt für Markdown in JS escapen (#4381 von @ikatyang)​

Unterstützung für styled-components Foo.extend.attrs()`` (#4434 von @duailibe)​

Unterstützung für GraphQL-Kommentar-Tag hinzugefügt (#4395 von @tjallingt)​

Styles von Angular-Komponenten formatieren (#4361 von @JamesHenry)​

Zeilenumbrüche bei Klassen-Property-Initialisierern korrigieren (#4442 von @nicolo-ribaudo)​

Korrektur langer Methodennamen in Bind-Ausdrücken (#4447 von @misoguy)​

Klammern für den ?.-Operator nicht mehr entfernen (#4542 von @duailibe)​

Flow​

?() => T bei Bedarf in Klammern setzen (#4475 von @nicolo-ribaudo)​

TypeScript​

Geschützte Klasseneigenschaften beibehalten (#4517 von @ikatyang)​

Markdown​

Zeilenumbruch in leeren .md-Dateien entfernen (#4388 von @huyvohcmc)​

Zusammenführung von fortlaufendem CJK-Text mit --prose-wrap preserve verhindern (#4504 von @ikatyang)​

CSS/SCSS/Less​

Nachgestellte Kommas in SCSS-Listen und Maps ausgeben (#4317 von @ad1992)​

Leeren Frontmatter korrigieren (#4392 und #4457 von @eliasmeire)​

SCSS-String-Interpolation nicht formatieren (#4490 von @evilebottnawi)​

Zeichen korrekt escapen (#4472 von @evilebottnawi)​

SCSS-Interpolation in CSS-Variablen korrigieren (#4471 von @evilebottnawi)​

Abstandsproblem bei berechneten PostCSS-Variablen beheben (#4408 von @ad1992)​

Höhepunkte

API/CLI

Prettier funktioniert im Browser!

Kein Standard-JavaScript-Parser mehr (#4528 von @duailibe)

`prettier.getFileInfo()`-Methode und `--file-info`-CLI-Option (#4341 von @kachkaev)

Unterstützung für globales Prettier und Plugins (#4192 von @kachkaev)

Verbesserte Cursor-Offset-Verfolgung (#4397 von @ds300)

JavaScript

Mehr Klammern in mathematischen Ausdrücken einfügen (#4413 und #4407 von @duailibe)

Inline-Formatierung für AngularJS-Tests mit `inject` (#4495 von @thorn0)

Bessere Zeilenumbrüche für D3 (#4285 von @1wheel, #4505 von @duailibe)

Formatierung neuer `describe.each`-Tabellen in Jest 23 (#4423 von @ikatyang)

Bessere Formatierung funktionaler Komposition (#4431 von @suchipi)

Klammern um `do`-Ausdrücke bei Bedarf beibehalten und Formatierung verbessern (#4479 von @existentialism)

Flow

Korrekte Ausgabe von Klassen-Mixins und -Implements (#4326 von @existentialism)

Unterstützung für Nullish-Coalescing-Operator und numerische Trennzeichen hinzugefügt (#4536 von @vjeux)

Unterstützung für neue Flow-Syntax-Features hinzugefügt (#4543, #4540 und #4551 von @existentialism)

TypeScript

Unterstützung für TypeScript-Importtypen hinzugefügt (#4429 und #4438 von @ikatyang)

Unterstützung für generische JSX-Elemente in TypeScript hinzugefügt (#4268 von @ikatyang)

Unterstützung für TaggedTemplateExpression typeParameters hinzugefügt (#4353 von @ikatyang)

Verbessertes Format für Typumwandlungen mit Generics und Unions (#4219 von @kpdonn)

JSON

JSON- und JSON5-Parser getrennt (#4367 und #4371 von @ikatyang, #4333 von @duailibe)

`json-stringify`-Parser für `JSON.stringify`-Formatierung hinzugefügt (#4450 von @ikatyang)

CSS/Less/SCSS

Formatierung von SCSS-Maps verbessert (#4487 von @evilebottnawi)

Formatierung der `@support`-At-Regel verbessert (#4372 von @evilebottnawi)

Markdown

Symbol für ungeordnete Listen auf Bindestrich geändert (#4440 von @ikatyang)

Inhalte von Liquid-Tags erhalten (#4484 von @duailibe)

Link-Definitionen bei Bedarf in mehrere Zeilen umbrechen (#3531 von @j-f1)

GraphQL

Nur Leerzeilen nach Top-Level-Definitionen hinzufügen, wenn im Original vorhanden (#4512 von @ad1992)

Weitere Änderungen

API/CLI

Bereich nicht formatieren, wenn erforderliches Pragma in der Datei fehlt (#3996 von @josephfrazier)

Plugin-Auflösung verbessern, wenn Pfad nicht mit `./` beginnt (#4451 von @kachkaev)

Plugin-Schnittstelle für isBlockComment hinzugefügt (#4347 von @mgrip)

JavaScript

Destructuring-Regeln für Funktionen auf catch-Parameter anwenden (#4385 von @duailibe)

Backslashes korrekt für Markdown in JS escapen (#4381 von @ikatyang)

Unterstützung für styled-components Foo.extend.attrs()`` (#4434 von @duailibe)

Unterstützung für GraphQL-Kommentar-Tag hinzugefügt (#4395 von @tjallingt)

Styles von Angular-Komponenten formatieren (#4361 von @JamesHenry)

Zeilenumbrüche bei Klassen-Property-Initialisierern korrigieren (#4442 von @nicolo-ribaudo)

Korrektur langer Methodennamen in Bind-Ausdrücken (#4447 von @misoguy)

Klammern für den `?.`-Operator nicht mehr entfernen (#4542 von @duailibe)

Flow

`?() => T` bei Bedarf in Klammern setzen (#4475 von @nicolo-ribaudo)

TypeScript

Geschützte Klasseneigenschaften beibehalten (#4517 von @ikatyang)

Markdown

Zeilenumbruch in leeren `.md`-Dateien entfernen (#4388 von @huyvohcmc)

Zusammenführung von fortlaufendem CJK-Text mit `--prose-wrap preserve` verhindern (#4504 von @ikatyang)

CSS/SCSS/Less

Nachgestellte Kommas in SCSS-Listen und Maps ausgeben (#4317 von @ad1992)

Leeren Frontmatter korrigieren (#4392 und #4457 von @eliasmeire)

SCSS-String-Interpolation nicht formatieren (#4490 von @evilebottnawi)

Zeichen korrekt escapen (#4472 von @evilebottnawi)

SCSS-Interpolation in CSS-Variablen korrigieren (#4471 von @evilebottnawi)

Abstandsproblem bei berechneten PostCSS-Variablen beheben (#4408 von @ad1992)