Prettier 1.11: CSS-Korrekturen und Unterstützung neuer TypeScript-Features

Inoffizielle Beta-Übersetzung

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

Dieses Release bietet zahlreiche Korrekturen für die CSS-Formatierung sowie Unterstützung für neue TypeScript-Features, zusätzlich zu allgemeinen Fehlerbehebungen für andere Sprachen.

Seit dem letzten Release hat die Prettier-Website dank @orta ein komplett neues Design erhalten!

Facebook ist 💯% Prettier

Eine weitere spannende Neuigkeit: Alle JavaScript-Dateien im Facebook-Codebase wurden nun auf Prettier umgestellt! Das Verblüffende daran ist, dass es keine konzertierte Aktion zur Migration gab – wir haben lediglich die Werkzeuge bereitgestellt und dokumentiert, wie man Ordner migriert, woraufhin Entwickler eigenständig ihre Codebereiche umstellten.

Innerhalb von 8 Monaten wurden 75% des Codebases organisch konvertiert. Letzte Woche erfolgte der finale Schub für den Rest, sodass nun jede Datei Prettier nutzt und dies auch zwingend vorgeschrieben ist! Dies beweist, dass Prettier robust genug ist, um selbst exotische Edge Cases zu bewältigen, und einen hohen Mehrwert bietet – was die beeindruckende Adoptionsrate erklärt.

Höhepunkte

CSS/SCSS/Less

Unsere CSS-Formatierung erhielt viel Liebe von @evilebottnawi in diesem Release!

Formatierung von At-Rules (#3828 von @evilebottnawi)

Bisher wurden einige At-Rules (wie @if und @include) nicht von Prettier formatiert, sondern unverändert ausgegeben. Jetzt werden sie formatiert:

// Before:
.selector {
  @include absolute($top: $long-variable-name, $right: $long-variable-name, $left: auto, $bottom: auto);
}

// After:
.selector {
  @include absolute(
    $top: $long-variable-name,
    $right: $long-variable-name,
    $left: auto,
    $bottom: auto
  );
}

Unterstützung beliebter PostCSS-Plugins (#3959 von @evilebottnawi)

Beliebte PostCSS-Plugins wie postcss-mixins funktionierten aufgrund von Prettiers CSS-Formatierung nicht. Diese Plugins werden nun berücksichtigt:

// Before
$theme: blue;

a {
  @mixin $(theme) -colors;
}

// After
$theme: blue;

a {
  @mixin $(theme)-colors;
}

Unterstützung von YAML-Frontmatter-Blöcken in SCSS (#3802 von @evilebottnawi)

Jekyll benötigt YAML-Frontmatter zur Erkennung von SCSS-Dateien. Prettier entfernte dies bisher, was Jekyll-Sites beim Deployment beschädigte. Das YAML-Frontmatter bleibt nun erhalten und bewahrt das Styling:

---
title: Title
description: Description
---

a {
  color: red;
}

TypeScript

Unterstützung der definitiven Zuweisung (!:) (#4020 von @ikatyang)

TypeScript 2.7 führte die definitive Zuweisung für Klassenproperty-Initialisierer ein. Sie signalisiert TypeScript, dass eine Property zur Laufzeit einen Wert hat – auch ohne Initialisierer – und nicht undefined ist:

class MyComponent {
  ngModel!: ng.INgModelController;
}

Prettier 1.10.2 konnte diese Syntax nicht parsen:

SyntaxError: '=' expected. (2:10)
  1 | class MyComponent {
> 2 |   ngModel!: ng.INgModelController;
    |          ^
  3 | }

In Prettier 1.11.0 wird sie nun unterstützt.

Unterstützung von unique symbol (#3967 von @ikatyang)

TypeScript 2.7 führte außerdem den Typ unique symbol ein:

interface SymbolConstructor {
  readonly iterator: unique symbol;
}

Prettier 1.10.2 konnte diese Syntax nicht parsen:

SyntaxError: ';' expected. (2:29)
  1 | interface SymbolConstructor {
> 2 |   readonly iterator: unique symbol;
    |                             ^
  3 | }
  4 |

In Prettier 1.11.0 wird sie nun unterstützt.

Unterstützung von Conditional Types (#4006 von @Cryrivers)

TypeScript 2.8 führt Conditional Types ein, die ternären Operatoren ähneln, aber im Typkontext erscheinen:

export type DeepReadonly<T> =
    T extends any[] ? DeepReadonlyArray<T[number]> :
    T extends object ? DeepReadonlyObject<T> :
    T;

Prettier 1.10.2 konnte diese nicht parsen:

SyntaxError: ';' expected. (2:7)
  1 | export type DeepReadonly<T> =
> 2 |     T extends any[] ? DeepReadonlyArray<T[number]> :
    |       ^
  3 |     T extends object ? DeepReadonlyObject<T> :
  4 |     T;

Diese Syntax wird in Prettier 1.11.0 unterstützt.

JavaScript

Ternäre Operatoren wurden mit --use-tabs falsch eingerückt (#3745 von @ikatyang)

Da Tabulatoren unterschiedliche Breiten haben können, hat Prettier ternäre Ausdrücke bei Verwendung von Tabs manchmal falsch eingerückt. Jetzt berechnen wir die Einrückung korrekt:

// Before:
const abc = props.something
	? xyz
	: {
			prop1: a,
			prop2: b,
			prop3: false,
		};

// After:
const abc = props.something
	? xyz
	: {
			prop1: a,
			prop2: b,
			prop3: false
	  };

Weitere Änderungen

CSS/SCSS/Less

Listen von Listen haben jetzt ein saubereres Format (#3930 von @evilebottnawi)

Wir haben Listen von Listen in SCSS nicht optimal behandelt. Jetzt gehen wir besser damit um.

// Before:
$space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1")
  (
    1.25,
    "1-25"
  ) (1.5, "1-5") (1.75, "1-75") (2, "2") (2.25, "2-25") (2.5, "2-5")
  (
    2.75,
    "2-75"
  ) (3, "3") (3.25, "3-25") (3.5, "3-5") (3.75, "3-75") (4, "4");

// After:
$space-scale: (0, "0") (0.25, "0-25") (0.5, "0-5") (0.75, "0-75") (1, "1")
  (1.25, "1-25") (1.5, "1-5") (1.75, "1-75") (2, "2") (2.25, "2-25")
  (2.5, "2-5") (2.75, "2-75") (3, "3") (3.25, "3-25") (3.5, "3-5")
  (3.75, "3-75") (4, "4");

Kommentare in @font-face-Deklarationen erhalten (#3906 von @evilebottnawi)

Bisher wurde bei Code wie diesem:

@font-face {
  font-family: "Prettier";
  src: local("Prettier"), /* Local */
    url("http://prettier.com/font.woff") /* Network*/
}

...der "Local"-Kommentar von Prettier entfernt:

@font-face {
  font-family: "Prettier";
  src: local("Prettier"), url("http://prettier.com/font.woff"); /* Network*/
}

Jetzt wird er erhalten:

@font-face {
  font-family: "Prettier";
  src: local("Prettier"), /* Local */ url("http://prettier.com/font.woff"); /* Network*/
}

CSS-Einrückung verwendet bei Zeilen mit öffnender Klammer keine 3 Leerzeichen mehr (#3930 von @evilebottnawi)

Wenn eine CSS-Zeile eingerückt werden sollte und mit einer Klammer begann, wurden fälschlich 3 statt 2 Leerzeichen verwendet. Jetzt sind es korrekt 2 Leerzeichen.

// Before:
$longVariable: (
   (mobile $mobile) (tablet $tablet) (desktop $desktop) (wide $wide)
);

// After:
$longVariable: (
  (mobile $mobile) (tablet $tablet) (desktop $desktop) (wide $wide)
);

Keine überflüssigen Leerzeichen mehr in Maps (#3814 von @evilebottnawi)

Prettier fügte versehentlich Leerzeichen in SCSS-Maps ein. Diese werden jetzt nicht mehr hinzugefügt.

// Before:
$map: map-merge($map,  ($key: $value));

// After:
$map: map-merge($map, ($key: $value));

SCSS-Kommentare in Selektorlisten brechen Formatierung nicht mehr (#3909 von @evilebottnawi)

Prettier formatierte nachgestellte SCSS-Kommentare in Selektorlisten falsch, was Code beschädigte:

// Before formatting:
.field {
  &[data-field-id="1"], // Name
  &[data-field-id="2"], // Email
  &[data-field-id="3"], // Postal Code
  {
    background: green;
  }
}

// After formatting (Prettier 1.10.2):
.field {
  &[data-field-id="1"],
  // Name &[data-field-id="2"],
  // Email &[data-field-id="3"] {
    background: green;
  }
}

Diese Kommentare werden jetzt korrekt behandelt:

// After formatting (Prettier 1.11.0):
.field {
  &[data-field-id="1"], // Name
  &[data-field-id="2"], // Email
  &[data-field-id="3"], // Postal Code
 {
    background: green;
  }
}

Kein Komma mehr nach @import-URLs (#3770 von @evilebottnawi)

Prettier fügte versehentlich ein Komma nach @import-URLs ein. Dies wird nicht mehr hinzugefügt:

/* Before */
@import url("responsive/gt768.css"), screen and (min-width: 768px);

/* After */
@import url("responsive/gt768.css") screen and (min-width: 768px);

!default-Direktive wird korrekt behandelt (#3724 von @evilebottnawi)

Prettier gab die !default-Direktive bisher ungewöhnlich aus:

$theme-checkbox-colors: (
    default: $theme-color-border,
    checked: $theme-color-checked,
    disabled: $theme-color-disabled,
    disabled-font: $theme-color-font-secondary
  )
  !default;

Jetzt wird sie korrekt behandelt:

$theme-checkbox-colors: (
  default: $theme-color-border,
  checked: $theme-color-checked,
  disabled: $theme-color-disabled,
  disabled-font: $theme-color-font-secondary
) !default;

Inhalte von @warn und @error nicht formatieren (#3769 von @evilebottnawi)

SCSS verfügt über eine Funktion, die die Ausgabe von Text während des Builds mittels @warn oder @error ermöglicht:

// Unformatted code:
@if ($error) {
  @error 'An error occurred: (#{$error}).';
}

Leider behandelte Prettier diese Direktiven wie Media Queries und formatierte ihre Inhalte unerwartet (hier wurde vor dem Punkt ein Leerzeichen eingefügt):

// Formatted code (Prettier 1.10.2):
@if ($error) {
  @error 'error (#{$error}) .';
}

Diese Direktiven werden jetzt korrekt behandelt, der String-Inhalt bleibt unverändert:

// Formatted code (Prettier 1.11.0):
@if ($error) {
  @error "error (#{$error}).";
}

Semikolon in Less-Regelsatzdeklaration nicht entfernen (#3841 von @evilebottnawi)

Prettier entfernte fälschlich Semikolons nach Less-Regelsatzdeklarationen, was zu Kompilierungsfehlern führte. Sie bleiben jetzt erhalten:

// Before:
@detached-ruleset: {
  background: red;
}

// After:
@detached-ruleset: {
  background: red;
};

Keine neue Zeile in leere CSS-Dateien einfügen (#3723 von @hudochenkov)

Prettier fügte bisher eine End-of-File-Zeile in CSS-Dateien ein. Da dies bei JS-Dateien nicht geschah, wurde das Verhalten vereinheitlicht, um unerwartete Änderungen in der Versionskontrolle zu vermeiden.

media-Parameter mit SCSS-Interpolation ignorieren (#3801 von @evilebottnawi)

Prettier beschädigte Code, wenn Media Queries SCSS-Interpolation enthielten. Dieser wird jetzt erhalten:

// Unformatted code:
$sm-only: '(min-width: 768px) and (max-width: 991px)';
$lg-and-up: '(min-width: 1200px)';

@media screen and #{$sm-only, $lg-and-up} {
    color: #000;
}

// Formatted code (Prettier 1.10.2):
@media screen and,  {
	color: #000;
}

// Formatted code (Prettier 1.11.0):
$sm-only: "(min-width: 768px) and (max-width: 991px)";
$lg-and-up: "(min-width: 1200px)";

@media screen and #{$sm-only, $lg-and-up} {
  color: #000;
}

Keine zwei Leerzeichen zwischen Selektoroperator und öffnender Klammer (#3738 von @evilebottnawi)

Prettier fügte fälschlich ein Leerzeichen ein, wenn ein CSS-Selektor mit einem Operator endete (ein SCSS-Feature). Dies wurde behoben:

// Unformatted code:
.this > .ends > .with > .an > .operator > {
  // content
}

// Formatted code (Prettier 1.10.2):
.this > .ends > .with > .an > .operator >  {
  // content
}

// Formatted code (Prettier 1.11.0):
.this > .ends > .with > .an > .operator > {
  // content
}

Großschreibung von SCSS-Funktionsnamen nicht ändern (#3768 von @evilebottnawi)

Prettier hatte fälschlicherweise SCSS-Funktionsnamen in bestimmten Fällen kleingeschrieben. Dies wurde behoben.

// Unformatted code:
@include breakpoint (getBp(md)) {
  &:nth-child(2n + 3) {
    clear: both;
  }
}

// Formatted code (Prettier 1.10.2):
@include breakpoint (getbp(md)) {
  &:nth-child(2n + 3) {
    clear: both;
  }
}

// Formatted code (Prettier 1.11.0):
@include breakpoint(getBp(md)) {
  &:nth-child(2n + 3) {
    clear: both;
  }
}

Leerzeichen um Vue-Deep-Selektor >>> beibehalten (#3792 von @evilebottnawi)

Prettier entfernte fälschlicherweise Leerzeichen um den Deep-Selektor von Vue:

<!-- Unformatted code: -->
<style scoped>
  .box >>> .child-component {
    font-size: 24px;
  }
</style>

<!-- Formatted code (Prettier 1.10.2): -->
<style scoped>
  .box>>>.child-component {
    font-size: 24px;
  }
</style>

<!-- Formatted code (Prettier 1.11.0): -->
<style scoped>
.box >>> .child-component {
  font-size: 24px;
}
</style>

Korrektur der @nest-At-Regel (#3975 von @evilebottnawi)

Prettier fügte fälschlicherweise Leerzeichen um das &-Zeichen in Selektoren für @nest ein, was den kompilierten Selektor veränderte. Dies wurde behoben:

// Unformatted code:
.title {
  @nest :global(h1)& {
    background: red;
  }
}

// Formatted code (Prettier 1.10.2):
.title {
  @nest :global(h1) & {
    background: red;
  }
}

// Formatted code (Prettier 1.11.0):
.title {
  @nest :global(h1)& {
    background: red;
  }
}

progid:DXImageTransform.Microsoft.gradient unverändert ausgeben (#4028 von @evilebottnawi)

In Prettier 1.10.2 gab es umfangreiche Logik zur Formatierung von Microsoft-spezifischen Filterwerten, die dennoch unbefriedigend formatiert wurden. Da sie nicht standardkonform und selten genutzt sind, werden sie nun unformatiert ausgegeben.

Nesting-Selektor nicht kleinschreiben (#4048 von @evilebottnawi)

In Prettier 1.10.2 wurden SCSS-Nesting-Selektoren fälschlicherweise kleingeschrieben:

// Unformatted code:
.foo {
  &-1Bar {
  }
}

// Formatted code: (Prettier 1.10.2):
.foo {
  &-1bar {
  }
}

Dies wurde in Prettier 1.11.0 behoben:

// Formatted code: (Prettier 1.11.0):
.foo {
  &-1Bar {
  }
}

JavaScript

Seltsam aussehende Klammern bei return-Argumenten mit Kommentar vermeiden (#3665 von @duailibe)

Prettier setzte Klammern um das Argument eines return-Statements auf ungewöhnliche Weise, wenn das Argument einen Kommentar enthielt. Diese Klammern werden nun besser formatiert.

// Unformatted code:
func1(function() {
  return func2
      //comment
      .bar();
});

// Formatted code (Prettier 1.10.2):
func1(function() {
  return (func2
      //comment
      .bar() );
});

// Formatted code (Prettier 1.11.0):
func1(function() {
  return (
    func2
      //comment
      .bar()
  );
});

Null-Einrückung bei Markdown-in-JS respektieren (#3676 von @ikatyang)

Prettiermarkdown-in-JS-Formatierung (ausgelöst durch md-Template-Literale) fügte Einrückungen ein:

// Unformatted code
md`
This is some markdown
`

// Formatted code (Prettier 1.10.2)
md`
  This is some markdown
`;

Dieses Verhalten war für Tags wie react-markings erwünscht, brach jedoch andere Implementierungen.

Prettier 1.11.0 respektiert nun die manuell gesetzte Einrückungsebene in Markdown, sodass Benutzer von Template-Tag-Funktionen wie der von react-markings bereitgestellten ihren Code weiter einrücken können, während Benutzer anderer Template-Tag-Funktionen ohne Einrückungsunterstützung dies unterlassen können.

AMD-define-Aufrufe wie CJS-require formatieren (#3830 von @salemhilal)

Bei AMD-Modulen werden Abhängigkeiten anonymer Module mit define spezifiziert:

define([
  "jquery",
  "common/global.context",
  "common/log.event",
  "some_project/square",
  "some_project/rectangle",
  "some_project/triangle",
  "some_project/circle",
  "some_project/star"
], function($, Context, EventLogger, Square, Rectangle, Triangle, Circle, Star) {
  console.log("some code");
});

Prettier 1.10.2 brach dies in mehrere Zeilen mit starker Einrückung:

define(
  [
    "jquery",
    "common/global.context",
    "common/log.event",
    "some_project/square",
    "some_project/rectangle",
    "some_project/triangle",
    "some_project/circle",
    "some_project/star"
  ],
  function($, Context, EventLogger, Square, Rectangle, Triangle, Circle, Star) {
    console.log("some code");
  }
);

Prettier 1.11.0 lässt nun Array und Funktionsausdruck "aneinander schmiegen", was die Einrückung reduziert:

define([
  "jquery",
  "common/global.context",
  "common/log.event",
  "some_project/square",
  "some_project/rectangle",
  "some_project/triangle",
  "some_project/circle",
  "some_project/star"
], function(
  $,
  Context,
  EventLogger,
  Square,
  Rectangle,
  Triangle,
  Circle,
  Star
) {
  console.log("some code");
});

QUnits skip wie test formatieren (#3735 von @tmquinn)

Prettier behandelte die Formatierung für describe, it und test speziell, um die Formatierung in Tests basierend auf Benutzererwartungen und -anfragen zu verbessern. Allerdings formatierten wir QUnits skip-Methode nicht mit derselben Logik, was zu gemischter Formatierung führte, wenn ein Test zwischen test und skip umgeschaltet wurde:

// Unformatted code
test("this is a really long description of some test I want to go here", function (assert) {
  assert("something");
});

skip("this is a really long description of some test I want to go here", function (assert) {
  assert("something");
});

// Formatted code (Prettier 1.10.2):
test("this is a really long description of some test I want to go here", function(assert) {
  assert("something");
});

skip(
  "this is a really long description of some test I want to go here",
  function(assert) {
    assert("something");
  }
);

Nun wird skip gleich wie describe, it und test behandelt, was QUnit-Tests einheitlicher macht:

// Formatted code (Prettier 1.11.0):
test("this is a really long description of some test I want to go here", function(assert) {
  assert("something");
});

skip("this is a really long description of some test I want to go here", function(assert) {
  assert("something");
});

JSX-Element bei Zeilenumbruch in String-Literal-Prop umbrechen (#4011 von @duailibe)

Laut der JSX-Spezifikation sind Zeilenumbrüche innerhalb von JSX-Stringliteralen erlaubt. Prettier behandelte ein JSX-Element jedoch nicht als mehrzeilig, wenn einer seiner Attributwerte eine Zeichenkette mit einem Zeilenumbruch enthielt. Prettier behandelt diese Elemente nun wie erwartet als mehrzeilig:

// Unformatted code:
<path d="M4.765 16.829l3.069-2.946 5.813 5.748
  11.33-11.232 3.006 3.18-14.36 14.080z"
/>;

// Formatted code (Prettier 1.10.2):
<path d="M4.765 16.829l3.069-2.946 5.813 5.748
  11.33-11.232 3.006 3.18-14.36 14.080z" />;

// Formatted code (Prettier 1.11.0):
<path
  d="M4.765 16.829l3.069-2.946 5.813 5.748
  11.33-11.232 3.006 3.18-14.36 14.080z"
/>;

Unterstützung für JSX-Children-Spread mit Flow-Parser (#3899 von @vjeux)

Die Verwendung eines Spread-Operators in einem JSX-Children-Expression-Container verursachte in Prettier 1.10.2 beim Einsatz des Flow-Parsers einen Parsing-Fehler:

<JSX>
  {...edges}
</JSX>

SyntaxError: Unexpected token ... (2:4)
  1 | <JSX>
> 2 |   {...edges}
    |    ^^^
  3 | </JSX>

In Prettier 1.11.0 wird diese Syntax mit dem Flow-Parser unterstützt.

Fehler beim Ausgeben des Flow Maybe-Object-Rückgabetyps behoben (#3948 von @azz)

In Prettier 1.10.2 führte dieser Code zu einem Fehler:

function getScaledData({x}): ?{foo: number} {}

Dies wurde in Prettier 1.11.0 behoben.

--insert-pragma entfernt keine doppelten Pragmas mehr (#3947 von @azz)

Die Verwendung von --insert-pragma bei Code mit doppelten Pragmas entfernte bisher alle bis auf ein Duplikat. Dies wurde behoben:

// Unformatted code:
/**
 * @x 1
 * @x 2
 */

// Formatted code (Prettier 1.10.2):
/**
 * @format
 * @x 2
 */

// Formatted code (Prettier 1.11.0):
/**
 * @format
 * @x 1
 * @x 2
 */

Flow-Typcast-Ternaries werden nun in Klammern gesetzt (#3940 von @j-f1)

Zur Verbesserung der Codeklarheit werden Typcast-Ternaries nun in Klammern gesetzt:

// Unformatted code:
const foo = ((1?2:3): number);

// Formatted code (Prettier 1.10.2):
const foo = (1 ? 2 : 3: number);

// Formatted code (Prettier 1.11.0):
const foo = ((1 ? 2 : 3): number);

Fehler mit fehlendem Semikolon beim Ausgeben von DeclareExportDeclaration behoben (#3979 von @existentialism)

Semikolons wurden fälschlicherweise aus declare export default-Anweisungen in Flow-Bibliotheksdefinitionsdateien entfernt. Dies wurde behoben.

TypeScript

Klammern von (void 0)! nicht entfernen (#3989 von @azz)

Prettier entfernte fälschlicherweise Klammern von (void 0)!, was den AST des Programms veränderte. Dies wurde behoben.

Korrekte Verkettung bei TSNonNullExpression (#4005 von @ericanderson)

Prettier verwendete seinen Verkettungsformatierungsstil nicht, wenn die Kette einen TypeScript-!-Non-Null-Ausdruck enthielt. Dies wurde behoben:

// Unformatted code:
this.tokenLoads.get(locator).get(start).push({});

this.tokenLoads.get(locator)!.get(start).push({});

// Formatted code (Prettier 1.10.2):
this.tokenLoads
  .get(locator)
  .get(start)
  .push({});

this.tokenLoads.get(locator)!.get(start).push({});

// Formatted code (Prettier 1.11.0):
this.tokenLoads
  .get(locator)
  .get(start)
  .push({});

this.tokenLoads
  .get(locator)!
  .get(start)
  .push({});

Markdown

Überschrift nach Listenelement wird in Liste integriert (#3780 von @ikatyang)

Prettier integrierte fälschlicherweise eine Überschrift unter einem Listenelement in die Liste. Nun wird sie als Überschrift behandelt:

<!-- Unformatted code -->
* Something
### Some heading

<!-- Formatted code (Prettier 1.10.2) -->
* Something
  ### Some heading

<!-- Formatted code (Prettier 1.11.0) -->
* Something

### Some heading

HTML-Entitäten in Link-URLs nicht parsen (#3780 von @ikatyang)

Links, deren URL HTML-Entitäten enthielten, wurden fälschlicherweise geändert, wenn sie durch Prettier verarbeitet wurden. Sie werden nun beibehalten.

<!-- Unformatted code -->
[Test](http://localhost:8080/test?language=DE&currency=EUR)

<!-- Formatted code (Prettier 1.10.2) -->
[Test](http://localhost:8080/test?language=DE¤cy=EUR)

<!-- Formatted code (Prettier 1.11.0) -->
[Test](http://localhost:8080/test?language=DE&currency=EUR)

Einrückung von Template-Strings in Codeblöcken korrigieren (#3676 von @ikatyang)

Die Einrückung von JS-Tagged-Template-String-Inhalten innerhalb von Markdown-Codeblöcken wurde falsch berechnet:

<!-- Unformatted code: -->
- 1
  - 2
    - 3
      ```js
      something`
      asd

      asd

      asd
      `
      ```

<!-- Formatted code (Prettier 1.10.2): -->
* 1

  * 2

    * 3

      ```js
      something`
asd

asd

asd
`;
      ```

Dies wurde in Prettier 1.11.0 behoben:

<!-- Formatted code (Prettier 1.11.0): -->
* 1

  * 2

    * 3

      ```js
      something`
      asd

      asd

      asd
      `;
      ```

Mehrzeiligen Inhalt in footnoteDefinition korrekt ausgeben (#3787 von @ikatyang)

Prettier verwendete fälschlicherweise eine falsche Einrückungsebene beim Ausgeben einer Fußnote, die einen Codeblock enthielt. Dies wurde behoben:

<!-- Unformatted code: -->
Some text.[^fn]

[^fn]: Here is a footnote which includes code.

    ```rs
    fn main() {
        println!("this is some Rust!");
    }
    ```

<!-- Formatted code (Prettier 1.10.2): -->
Some text.[^fn]

[^fn]: Here is a footnote which includes code.

```rs
fn main() {
    println!("this is some Rust!");
}
```

<!-- Formatted code (Prettier 1.11.0): -->

Some text.[^fn]

[^fn]: Here is a footnote which includes code.

```rs
fn main() {
    println!("this is some Rust!");
}
```

tabWidth für Listenelemente berücksichtigen (#3990 von @ikatyang)

Wir haben festgestellt, dass CommonMark von der ursprünglichen Markdown-Syntax für Codeblöcke in Listenelementen abweicht. Dies führt dazu, dass eingerückte Codeblöcke in Markdown als normale Absätze gerendert wurden. Diese Änderung verwendet die Option tabWidth, um zu bestimmen, wie viel Einrückung in Listenelementen verwendet wird. Lesen Sie #3459, wenn Sie an den Details interessiert sind.

<!-- before -->
1. Change to your home directory:

   cd

<!-- after -->
1. Change to your home directory:

        cd

Diese Änderung sollte auch die Einrückung in Texteditoren verbessern:

API

Unterstützung für Optionen in Plugins (#3775 von @ikatyang)

Als Teil der Erweiterung unserer Beta-Plugin-API für Community-Erweiterungen haben wir Unterstützung für pluginspezifische Optionen hinzugefügt!

Plugin-Optionen werden nun in der Hilfe ausgegeben:

prettier --plugin @prettier/plugin-python --help

Ebenso können Plugin-Optionen in der Kommandozeile angegeben werden:

prettier --plugin my-cool-prettier-plugin --my-custom-option

Und Plugin-Optionen können auch in .prettierrc definiert werden:

{ "plugins": ["foo-plugin"], "fooOption": "bar" }

Keine kebab-case-Optionen in Konfigurationsdateien erlauben (#3622 by @ikatyang)

Kebab-Case-Optionen in .prettierrc-Dateien nicht mehr zulässig (#3622 von @ikatyang)

{ "print-width": 100 }

Dies war nicht beabsichtigt erlaubt und wurde rückgängig gemacht (in diesem Fall müsste printWidth verwendet werden).

Konfiguration

EditorConfig-Berücksichtigung bei Übergabe von --config (#3992 von @josephfrazier)

Kleine Änderung im Umgang mit .editorconfig-Dateien: Bisher wurde .editorconfig ignoriert, wenn --config angegeben wurde.

---

Vielen Dank an alle Mitwirkenden von Prettier und die Community, die Prettier zu einem erfolgreichen Open-Source-Projekt machen! Ohne euch wäre das nicht möglich ❤️