Zum Hauptinhalt springen

Prettier 1.12: Fixes, Features und Formatierung, oh je!

· 17 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 →

Hallo zusammen und willkommen bei Prettier 1.12.0! Diese Version enthält viele Bugfixes, Formatierungsanpassungen, neue Funktionen für unsere Plugin-API und neue Markdown-Funktionen.

Höhepunkte​

JavaScript​

Verschachtelte ternäre Operatoren umbrechen (#4120 von @duailibe)​

Bei verschachtelten ternären Operatoren konnte es je nach Druckbreite und Einrückungsebene vorkommen, dass der äußere Operator über mehrere Zeilen umgebrochen wurde, während der innere Operator in einer Zeile blieb:

// Input:
const platformString = Platform.OS == "ios" ? "iOS"
  : Platform.OS == "android" ? "Android" : "unknown";

// Formatted (Prettier 1.11.1):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android" ? "Android" : "unknown";

Das sah etwas ungewöhnlich aus. Um die Lesbarkeit zu verbessern, werden verschachtelte ternäre Operatoren jetzt alle mehrzeilig formatiert, sobald einer von ihnen mehrzeilig wird:

// Formatted (Prettier 1.12.0):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android"
      ? "Android"
      : "unknown";

Umgang mit Kommentaren vor else (#4264 von @duailibe)​

Ein lang bestehender Bug betraf das Verhalten bei Kommentaren vor else. Kommentare vor dem else-Schlüsselwort wurden bisher in den else-Block verschoben, was verwirrend sein konnte, wenn der Kommentar die Bedingung erklärte statt den Block selbst. Zudem behinderte dies das Auskommentieren von Teilen einer if/else-Kette.

Eingabe:​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log('2');
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log('4');
}
Formatiert (Prettier 1.11.1):​
if (obj.foo) {
  return foo;
} else if (obj.bar) {
  // Use bar as a fallback
  return bar;
}

if (a == 2) {
  console.log("2");
} else if (a == 4) {
  // else if (a == 3) {
  //   console.log('3');
  // }
  console.log("4");
}

Es war störend, dass diese Kommentare verschoben wurden, aber wir waren uns unsicher, wie wir vorgehen sollten, da wir else-Blöcke konsistent im Stil } else { formatieren wollten.

Mit dieser Version haben wir uns entschieden, eine Ausnahme von der normalen Formatierung zu machen und else anders zu formatieren, allerdings nur wenn ein Kommentar zwischen else und der öffnenden Klammer erscheint. Dies scheint die beste Lösung:

Formatiert (Prettier 1.11.1):​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log("2");
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log("4");
}

Inline-Formatierung von Angular async-Tests und beforeEach etc. (#4241 von @ad1992)​

In Prettier 1.11.1 wurden Angular-Tests mit dem async-Testhelfer mit unnötig vielen Zeilenumbrüchen formatiert. Wir haben die Formatierung geändert, um mit diesem Helfer umschlossene Funktionen inline zu belassen, was diese unnötigen Zeilenumbrüche verhindert.

// Input:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

// Formatted (Prettier 1.11.1):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [AppComponent]
      }).compileComponents();
    })
  );
  it(
    "should create the app",
    async(() => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    })
  );
});

// Formatted (Prettier 1.12.0):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it("should create the app", async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

Umbruch von ObjectPatterns mit verschachtelten ObjectPatterns (#4267 von @duailibe)​

Wir erhielten viel Community-Feedback, dass die Syntax für Objekt- und Array-Destrukturierung manchmal schlecht formatiert wurde. Als ersten Schritt zur Verbesserung sorgen wir nun dafür, dass verschachtelte nicht-endständige Objekt- oder Array-Muster in einem Destrukturierungsmuster mehrzeilig werden, wenn eines ihrer Elternelemente dies tut:

// Input:
const {
  name: {
    first,
    last,
  },
  organisation: {
    address: {
      street: orgStreetAddress,
      postcode: orgPostcode,
    },
  },
} = user;

// Formatted (Prettier 1.11.1):
const {
  name: { first, last },
  organisation: { address: { street: orgStreetAddress, postcode: orgPostcode } }
} = user;

// Formatted (Prettier 1.12.0):
const {
  name: { first, last },
  organisation: {
    address: { street: orgStreetAddress, postcode: orgPostcode }
  }
} = user;

Markdown​

Unterstützung für hasPragma/insertPragma (#4275 von @ikatyang)​

Prettier 1.7.0 und 1.8.0 führten zwei neue Optionen ein: --require-pragma und --insert-pragma. Bisher waren diese Optionen jedoch nur für JavaScript verfügbar. Jetzt sind sie auch in Markdown unterstützt!

<!-- @prettier -->

# My Markdown Document

A long time ago, in my hometown of Ericsburgh...

Unterstützung für prettier-ignore-start/prettier-ignore-end auf oberster Ebene (#4202 von @ikatyang)​

Bei der Verwendung von Tools wie all-contributors oder markdown-toc traten Situationen auf, in denen automatisch generierter Markdown-Inhalt von Prettier seltsam formatiert wurde oder der --list-different-Modus von Prettier automatisch generierte Inhalte markierte, deren Formatierung den Nutzern nicht wichtig war.

Um diese Probleme zu lösen, haben wir eine neue Art von Ignore-Kommentar für Markdown eingeführt, genannt Range Ignore:

<!-- prettier-ignore-start -->
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
| [<img src="https://avatars1.githubusercontent.com/u/12345?v=4" width="100px;"/><br /><sub><b>Alice</b></sub>](https://github.com/example-alice)<br /> [💻](https://github.com/my/repo/commits?author=example-alice "Code") [📖](https://github.com/my/repo/commits?author=example-alice "Documentation") [⚠️](https://github.com/my/repo/commits?author=example-alice "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12346?v=4" width="100px;"/><br /><sub><b>Bob</b></sub>](https://github.com/example-bob)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-bob "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/123457?v=4" width="100px;"/><br /><sub><b>Jeffrey</b></sub>](https://github.com/example-jeffrey)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-jeffrey "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/123458?v=4" width="100px;"/><br /><sub><b>Sarah</b></sub>](https://github.com/example-sarah)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-sarah "Bug reports") |
| :---: | :---: | :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->
<!-- prettier-ignore-end -->

Sie können prettier-ignore-start- und prettier-ignore-end-Kommentare um automatisch generierte Inhalte setzen – Prettier ignoriert alles dazwischen. Bitte beachten Sie, dass diese Funktion derzeit nur für Markdown verfügbar ist und ausschließlich auf oberster Ebene verwendet werden kann.

GraphQL​

Neue Interface-Syntax für GraphQL ermöglichen (#4012 von @ruiaraujo)​

Die GraphQL-Schema-Definitionssprache hat kürzlich die Syntax für mehrere vererbte Interfaces geändert und verwendet nun & statt ,:

// Old style
type Foo implements Bar, Baz { field: Type }

// New style
type Foo implements Bar & Baz { field: Type }

Prettier 1.11.1 konnte den neuen Stil nicht verarbeiten; jetzt unterstützen wir beide Varianten.

Plugin-API (Beta)​

Pragmabehandlung in Plugins verlagern (#3685 von @duailibe)​

Prettier-Plugins können nun eine hasPragma-Funktion in ihrem Parser und eine insertPragma-Funktion in ihrem Printer implementieren, um Unterstützung für --insert-pragma und --require-pragma anzubieten. Dies sind ihre Signaturen:

function hasPragma(text: string): boolean;
function insertPragma(text: string): string;

Aktivieren der pluginspezifischen Kommentarfunktion (#4182 von @mgrip)​

Plugins können nun Prettiers internen Algorithmus zur Kommentarverarbeitung fallweise überschreiben, um die Kommentarformatierung für ihre Sprache besser zu unterstützen. Diese API ist noch nicht dokumentiert, Sie können jedoch ihre Verwendung im kürzlich veröffentlichten Prettier-PHP-Plugin hier und hier einsehen.

Weitere Änderungen​

JavaScript​

Flow auf 0.69 aktualisieren und ?.-Unterstützung aktivieren (#4296 von @vjeux)​

Optionales Verketten (?.) wird nun beim Verwenden des flow-Parsers unterstützt:

const name = this.model?.user?.firstName || "No Name Set"

Beende die Markierung aller Kommentare in benannten Exporten als führende Kommentare (#4292 von @duailibe)​

Diese Änderung behebt einen Fehler, bei dem ignorierte Kommentare in benannten Exporten bei jedem Formatieren dupliziert wurden:

// Input:

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.11.1):

// prettier-ignore
// comment
// comment
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.12.0):

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

Kommentare für ContinueStatement und BreakStatement behandeln (#4279 von @duailibe)​

Prettier hat fälschlicherweise einige Kommentare in der Nähe der Schlüsselwörter continue und break nicht ausgegeben. Dies wurde korrigiert:

// Input:
for (let i = 0; i < 5; i++) {
  continue /* Comment */;
}

for (let i = 0; i < 10; i++) {
  break /* Comment */;
}

// Output (Prettier 1.11.1):
/*
  Error: Comment "Comment" was not printed. Please report this error!
    at https://prettier.io/lib/index.js:2312:75
    at Array.forEach (<anonymous>)
    at ensureAllCommentsPrinted (https://prettier.io/lib/index.js:2312:22)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:949)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at formatRange (https://prettier.io/lib/index.js:2331:215)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:288)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at Object.format (https://prettier.io/lib/index.js:2333:277)
    at formatCode (https://prettier.io/worker.js:130:21)
    at self.onmessage (https://prettier.io/worker.js:80:19)
*/

// Formatted (Prettier 1.12.0):
for (let i = 0; i < 5; i++) {
  continue; /* Comment */
}

for (let i = 0; i < 10; i++) {
  break; /* Comment */
}

Korrektur für eingebettetes GraphQL in JS mit Backticks (#4265 von @duailibe, #4278 von @duailibe)​

In Prettier 1.11.1 verhinderte ein Fehler die Formatierung von GraphQL mit escapeden Backtick-Strings. Dies wurde in Prettier 1.12.0 behoben:

// Input:
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`

// Formatted (Prettier 1.11.1):
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`;

// Formatted (Prettier 1.12.0):
gql`
  "\`foo\` mutation payload."
  type FooPayload {
    bar: String
  }
`;

Expressions nicht vermischen bei Verwendung von prettier-ignore innerhalb von Template-Literals (#4220 von @evilebottnawi)​

Ein Fehler in Prettier 1.11.1 führte dazu, dass Ausdrücke in Template-Literalen verschoben wurden, wenn innerhalb des Literals prettier-ignore-Kommentare unter bestimmten Bedingungen verwendet wurden:

// Input:
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''};
`

// Formatted (Prettier 1.11.1):
styled.div`
  color: ${props => (props.small ? "font-size: 0.8em;" : "")};
  /* prettier-ignore */
  ${props => props.theme.colors.paragraph};
`;

Beachten Sie, dass die beiden Funktionen, die props erhalten, die Plätze getauscht haben.

Dieser Fehler wurde in Prettier 1.12.0 behoben:

// Formatted (Prettier 1.12.0):
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => (props.small ? "font-size: 0.8em;" : "")};
`;

Verhindern des "übermäßigen Einrückens" von Klassen-Eigenschaftswerten (#4085 von @duailibe)​

In Prettier 1.11.1 gab es ein Problem, bei dem die Einrückungsebene für binäre Ausdrücke (wie 2 + 2, 4 * 4 usw.) bei jedem Zeilenumbruch unter bestimmten Bedingungen zunahm. Dies wurde in Prettier 1.12.0 behoben:

// Input:
class EnterpriseQualityClass {
	foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    (this.bar * 90) * (this.foo + 2)
}

// Formatted (Prettier 1.11.1):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
      // then add bar and multiply by 90 time foo plus 2
      this.bar * 90 * (this.foo + 2);
}

// Formatted (Prettier 1.12.0):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    this.bar * 90 * (this.foo + 2);
}

Verbesserte Formatierung von Switch-Anweisungen (#4165 von @evilebottnawi)​

Wenn der Diskriminant einer switch-Anweisung sehr lang war, wurde er nicht optimal formatiert. Die Formatierung wurde in Prettier 1.12.0 verbessert:

// Input:
switch (longLongLongLongLongLongLongVariable &&
    longLongLongLongLongLongLongVariable) {
  case (1): {
    console.log("hi");
  }
}

// Formatted (Prettier 1.11.1):
switch (longLongLongLongLongLongLongVariable &&
  longLongLongLongLongLongLongVariable) {
  case 1: {
    console.log("hi");
  }
}

// Formatted (Prettier 1.12.0):
switch (
  longLongLongLongLongLongLongVariable && longLongLongLongLongLongLongVariable
) {
  case 1: {
    console.log("hi");
  }
}

TypeScript​

Kein Semikolon mehr nach export default interface Foo {} (#4128 von @j-f1)​

In Prettier 1.11.1 wurden fälschlicherweise Semikolons nach standardmäßig exportierten Interfaces ausgegeben. Dies wurde in Prettier 1.12.0 behoben:

// Input:
export default interface Foo {
  readonly bar?: string;
}

// Formatted (Prettier 1.11.1):
export default interface Foo {
  readonly bar?: string;
};

// Formatted (Prettier 1.12.0):
export default interface Foo {
  readonly bar?: string;
}

Erzwinge Klammern um "TSAsExpression" in einem "UpdateExpression" (#4183 von @UselessPickles)​

Prettier 1.11.1 entfernte fälschlicherweise Klammern um Typecast-Update-Ausdrücke, was zu Syntaxfehlern führte. Dieses Problem wurde in Prettier 1.12.0 behoben:

// Input:
(obj.value as any)++

// Formatted (Prettier 1.11.1):
obj.value as any++;

// Formatted (Prettier 1.12.0):
(obj.value as any)++;

Markdown​

Entfernung überflüssiger Leerzeilen im Front Matter (#4280 von @ikatyang)​

Prettier 1.11.1 gab eine überflüssige Leerzeile aus, wenn ein Markdown-Dokument mit leerem YAML/TOML-Front-Matter formatiert wurde; diese Zeile wird nicht mehr ausgegeben:

Eingabe:​
---
---

Hello
Formatiert (Prettier 1.11.1):​
---

---

Hello
Formatiert (Prettier 1.11.1):​
---
---

Hello

Unterstützung für Sprachbezeichner mit Attributen bei umzäunten Codeblöcken (#4153 von @ikatyang)​

Einige Markdown-Dokumente verwenden Attribute hinter der Sprachangabe für spezielle Zwecke; beispielsweise nutzt sie markdown-preview-enhanced, um Anzeigeoptionen zu modifizieren oder Code-Ausführungsparameter festzulegen.

Sprachattribute für Codeblöcke sehen folgendermaßen aus:

```js {cmd=node .line-numbers}
console.log("hello world");
```

Prettier hat den Inhalt dieser Markdown-Blöcke bisher nicht formatiert, da es die Sprache eines Codeblocks bei vorhandenen Attributen nicht erkennen konnte. Jetzt erkennt Prettier die Sprache korrekt.

Korrekte Einrückung verschachtelten HTML-Codes (#4115 von @ikatyang)​

In Prettier 1.11.1 wurde HTML-Code innerhalb von Listenelementen nicht korrekt eingerückt; die Einrückungsebene änderte sich bei jeder Neuformatierung. Dies wurde nun behoben.

<!-- Input: -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

<!-- Output (Prettier 1.11.1): -->
1.  A list item

    <table class="table table-striped">
<tr>
<th>Test</th>
<th>Table</th>
</tr>
<tbody>
    <tr>
    <td>Test</td>
    <td>Data</td>
    </tr>
</tbody>
</table>

<!-- Output (Prettier 1.12.0): -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

Drucke literalline für Zeilenumbrüche statt hardline (#4083 von @ikatyang)​

In Prettier 1.11.1 gab es beim Einbetten von CSS oder JSX in Markdown ein Problem mit falscher Einrückungsebene bei Blockkommentaren in bestimmten Situationen. Dies wurde in Prettier 1.12.0 behoben:

<!-- Input: -->
```pcss
.Avatar {
    @container (width > 100px) {
      /*
      Change some styles on the image element when the container is
      wider than 100px
      */
    }
}
```

<!-- Formatted (Prettier 1.11.1): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
          Change some styles on the image element when the container is
          wider than 100px
          */
  }
}
```

<!-- Formatted (Prettier 1.12.0): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
      Change some styles on the image element when the container is
      wider than 100px
      */
  }
}
```

CSS/SCSS/Less​

Variablennamen in benutzerdefinierten Selektoren nicht in Kleinbuchstaben umwandeln #4254 (#4255 von @Coobaha)​

Prettier 1.11.1 hatte fälschlicherweise Variablennamen in benutzerdefinierten Selektoren kleingeschrieben. Dies wurde in Prettier 1.12.0 behoben:

/* Input: */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
 color: red;
}

/* Formatted (Prettier 1.11.1): */
@custom-selector :--camelCase .my-css-selector;

:--camelcase {
  color: red;
}

/* Formatted (Prettier 1.12.0): */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
  color: red;
}

Wert-Eigenschaft mit eingebetteter URL nicht umbrechen (#4236 von @evilebottnawi)​

In Prettier 1.11.1 gab es ein Problem mit falsch formatierten url()-Angaben in Kurzschreibweisen. Dies wurde in Prettier 1.12.0 behoben.

/* Input: */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K) center center no-repeat;
}

/* Formatted (Prettier 1.11.1): */
.search-icon {
  background: url(
      data:image/svg+xml;base64,
      PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K
    )
    center center no-repeat;
}

/* Formatted (Prettier 1.12.0): */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K)
    center center no-repeat;
}

Inline-Kommentare in Listen und Maps korrigieren (#4205 von @evilebottnawi)​

Prettier 1.11.0 hat Code beschädigt, wenn Inline-Kommentare in SCSS-Listen oder -Maps auftraten. Dies wurde in Prettier 1.12.0 behoben. Hinweis: Dieser Formatierungsstil ist zwar noch nicht ideal, behebt aber die Code-Beschädigung.

// Input:
$my-list:
  'foo', // Foo
  'bar'; // Bar

$my-map: (
  'foo': 1, // Foo
  'bar': 2, // Bar
);

// Formatted (Prettier 1.11.1):
$my-list: "foo", / / Foo "bar"; // Bar

$my-map: (
  "foo": 1,
  / / Foo "bar": 2,
  / / Bar
);

// Formatted (Prettier 1.12.0):
$my-list: "foo",
  // Foo
    "bar"; // Bar

$my-map: (
  "foo": 1,
  // Foo
    "bar": 2,
  // Bar
);

Exportierte Variablen in CSS-Modulen nicht in Kleinbuchstaben umwandeln (#4152 von @evilebottnawi)​

Prettier 1.11.1 hat fälschlicherweise Namen exportierter CSS-Variablen in CSS-Modulen kleingeschrieben, was zu Problemen beim Import der Variablen in JavaScript führte.

/* Input: */
:export {
  myColor: red;
}

/* Formatted (Prettier 1.11.1): */
:export {
  mycolor: red;
}

Dies wurde in Prettier 1.12.0 behoben:

/* Formatted (Prettier 1.12.0): */
:export {
  myColor: red;
}

Umgang mit unicode-range (#4117 von @evilebottnawi)​

Prettier 1.11.1 hat unicode-range-Regeln fehlerhaft formatiert. Dies wurde in Prettier 1.12.0 behoben.

/* Input: */
@font-face {
  unicode-range: U+00-FF;
}

/* Formatted (Prettier 1.11.1): */
@font-face {
  unicode-range: U + 00-FF;
}

/* Formatted (Prettier 1.12.0): */
@font-face {
  unicode-range: U+00-FF;
}

HTML/Handlebars/Vue​

Unterstützung für Kommentare am Anfang eines HTML-Dokuments (#4141 von @evilebottnawi)​

Das Prettier-Team arbeitet weiter an unserem noch nicht produktionsreifen HTML-Formatter. Dieses Release behebt ein Problem, bei dem ein Kommentar am Dokumentanfang (wie ein htmlhint-Kommentar) dazu führte, dass das Dokument nicht korrekt formatiert wurde. Dieses Problem wurde behoben.

Korrektur von Handlebars else if (#4256 von @n8n8baby)​

Unser Handlebars-Formatter ist ebenfalls noch nicht für die öffentliche Nutzung bereit, aber in diesem Release-Zyklus wurde eine Korrektur hinzugefügt, damit else if-Blöcke korrekt ausgegeben werden. Prettier 1.11.1 hatte sie fälschlicherweise in if-Anweisungen umgewandelt.

Korrektur selbstschließender Style-Tags in Vue (#4108 von @duailibe)​

Prettier 1.11.1 verarbeitete selbstschließende Style- oder Script-Tags in Vue-Dateien nicht korrekt; die Ausgabe erfolgte unerwartet. Dies wurde in Prettier 1.12.0 behoben.

<!-- Input: -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.11.1): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />
<template><span : class= "$style.root" ><slot / ></span> </template> <style src=
  "./style.css" module / >;
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.12.0): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

Verschiedenes​

Playground: Unterstützung für rangeStart und rangeEnd (#4216 von @JamesHenry)​

--range-start und --range-end können nun im Playground verwendet werden, dank der Arbeit von @JamesHenry. Dies hilft der Prettier-Community, da es den Meldevorgang für Fehler im Zusammenhang mit der Formatierung von Editor-Auswahlen vereinfacht.

Korrektur der Ausgabe ignorierter Dateien mit --debug-check (#4066 von @duailibe)​

Prettier 1.11.1 gab fälschlicherweise die Inhalte ignorierter Dateien aus, wenn die Option --debug-check verwendet wurde. In Prettier 1.12.0 werden die Inhalte ignorierter Dateien nicht mehr auf stdout geschrieben.

An die großartige Community von Prettier, bestehend aus Nutzern, Beitragenden und Maintainern: Vielen Dank! Das ist etwas, das wir nur gemeinsam aufbauen können ❤️