Prettier 2.1: Neue Option --embedded-language-formatting und neue JavaScript/TypeScript-Features!

24. August 2020 · 34 Min. Lesezeit

Inoffizielle Beta-Übersetzung

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

Diese Version führt die neue Option --embedded-language-formatting ein, unterstützt neue JavaScript/TypeScript-Features und enthält zahlreiche Fehlerbehebungen und Verbesserungen!

Höhepunkte

API

Hinzufügen der Option --embedded-language-formatting={auto,off} (#7875 von @bakkot, #8825 von @fisker)

Wenn Prettier erkennt, dass Code, den es formatieren kann, innerhalb einer Zeichenkette in einer anderen Datei platziert wurde – etwa in einem getaggten Template in JavaScript mit einem Tag namens html oder in Codeblöcken in Markdown – versucht es standardmäßig, diesen Code zu formatieren.

Dieses Verhalten ist manchmal unerwünscht, da es die Funktionsweise Ihres Codes verändern kann. Diese Option ermöglicht es, zwischen dem Standardverhalten (auto) und der vollständigen Deaktivierung dieser Funktion (off) zu wechseln. Sie gilt für alle Sprachen, in denen Prettier eingebetteten Code erkennt, nicht nur für JavaScript.

// Input
html`
<p>
I am expecting this to come out exactly like it went in.
`;

// using --embedded-language-formatting=auto (or omitting this option)
html`
  <p>
    I am expecting this to come out exactly like it went in.
  </p>
`;

// using --embedded-language-formatting=off
html`
<p>
I am expecting this to come out exactly like it went in.
`;

TypeScript

Unterstützung für TypeScript 4.0

Labeled Tuple Elements (#8885 von @fisker, #8982 von @sosukesuzuki)

// Input
type Range = [start: number, end: number];

// Prettier 2.0
SyntaxError: Unexpected token, expected "," (1:20)
> 1 | type Range = [start: number, end: number];

// Prettier 2.1
type Range = [start: number, end: number];

Short-Circuiting Assignment Operators (#8982 von @sosukesuzuki)

// Input
a ||= b;

// Prettier 2.0
SyntaxError: Expression expected. (1:5)
> 1 | a ||= b;

// Prettier 2.1
a ||= b;

Type annotations on catch clauses (#8805 von @fisker)

// Input
try {} catch (e: any) {}

// Prettier 2.0
try {
} catch (e) {}

// Prettier 2.1
try {
} catch (e: any) {}

Weitere Änderungen

JavaScript

Unterstützung der F#- und Smart-Pipeline-Operator-Vorschläge (#6319 von @sosukesuzuki, @thorn0, #7979 von @sosukesuzuki)

F#-Style-Pipeline:

// Input
promises |> await;

// Output (Prettier 2.0)
SyntaxError: Unexpected token (1:18)
> 1 | promises |> await;
    |                  ^

// Output (Prettier 2.1)
promises |> await;

Smart-Pipeline:

// Input
5 |> # * 2

// Output (Prettier 2.0)
SyntaxError: Unexpected character '#' (1:6)
> 1 | 5 |> # * 2
    |      ^

// Output (Prettier 2.1)
5 |> # * 2

Korrektur von Kommentaren am Zeilenende bei nachfolgenden Leerzeichen (#8069 von @shisama)

Wenn eine Kommentarzeile nachstehende Leerzeichen hatte, wurden die Kommentare nicht als Zeilenendkommentare erkannt.

// Input
var a = { /* extra whitespace --> */
    b };

var a = { /* no whitespace --> */
    b };

// Prettier 2.0
var a = {
  /* extra whitespace --> */

  b,
};

var a = {
  /* no whitespace --> */ b,
};

// Prettier 2.1
var a = {
  /* extra whitespace --> */ b,
};

var a = {
  /* no whitespace --> */ b,
};

Korrigiert inkonsistentes Parsing von injizierten Ausdrücken in styled-components-Template-Literalen (#8097 von @thecodrr)

// Input
const SingleConcat = styled.div`
  ${something()}
  & > ${Child}:not(:first-child) {
margin-left:5px;
}
`

const MultiConcats = styled.div`
  ${something()}
  & > ${Child}${Child2}:not(:first-child) {
margin-left:5px;
}
`

const SeparatedConcats = styled.div`
font-family: "${a}", "${b}";
`

// Prettier 2.0 -- same as input

// Prettier 2.1
const SingleConcat = styled.div`
  ${something()}
  & > ${Child}:not(:first-child) {
    margin-left: 5px;
  }
`;

const MultiConcats = styled.div`
  ${something()}
  & > ${Child}${Child2}:not(:first-child) {
    margin-left: 5px;
  }
`;

const SeparatedConcats = styled.div`
  font-family: "${a}", "${b}";
`;

Korrigiert nachgestellte Kommas in Objekten, bei denen die letzte Eigenschaft ignoriert wurde (#8111 von @fisker)

// Input
const foo = {
  // prettier-ignore
  bar: "baz"
}

// Prettier 2.0
const foo = {
  // prettier-ignore
  bar: "baz"
};

// Prettier 2.1
const foo = {
  // prettier-ignore
  bar: "baz",
};

Objektschlüssel mit Escape-Sequenzen unverändert belassen (#8160 von @fisker)

// Input
const a = {
  "\u2139": 'why "\\u2139" converted to "i"?',
};

// Prettier 2.0
const a = {
  ℹ: 'why "\\u2139" converted to "i"?',
};


// Prettier 2.1
const a = {
  "\u2139": 'why "\\u2139" is converted to "i"?',
};

Korrigiert überflüssiges Leerzeichen nach Minus in CSS-in-JS (#8255 von @thorn0)

// Input
css`
color: var(--global--color--${props.color});
`

// Prettier 2.0
css`
  color: var(--global--color-- ${props.color});
`;

// Prettier 2.1
css`
  color: var(--global--color--${props.color});
`;

Korrigiert Kommentare im `extends`-Teil von Klassendeklarationen/-ausdrücken (#8312 von @thorn0)

// Input
class a extends a // comment
{
  constructor() {}
}

// Prettier 2.0
class a extends a // comment {
  constructor() {}
}

// Prettier 2.1
class a extends a { // comment
  constructor() {}
}

Arrays in Jest `test.each`-Template-Strings nicht umbrechen (#8354 von @yogmel)

// Input
test.each`
a | b | c
${1} | ${[{ start: 1, end: 3 },{ start: 15, end: 20 },]} | ${[]}
`("example test", ({a, b, c}) => {})

// Prettier 2.0
test.each`
  a | b | c
  ${1} | ${[
  { start: 1, end: 3 },
  { start: 15, end: 20 }
]} | ${[]}
`("example test", ({ a, b, c }) => {});

// Prettier 2.1
test.each`
  a    | b                                                 | c
  ${1} | ${[{ start: 1, end: 3 }, { start: 15, end: 20 }]} | ${[]}
`("example test", ({ a, b, c }) => {});

Unterstützung für `insertPragma` und `requirePragma` in Dateien mit Shebang (#8376 von @fisker)

// `--insert-pragma`
// Input
#!/usr/bin/env node
hello
  .world();

// Prettier 2.0
SyntaxError: Unexpected token (3:1)
  1 | /** @format */
  2 |
> 3 | #!/usr/bin/env node
    | ^
  4 | hello
  5 |   .world();

// Prettier 2.1
#!/usr/bin/env node
/** @format */

hello.world();

// `--require-pragma`
// Input
#!/usr/bin/env node
/**
 * @format
 */
hello
  .world();

// Prettier 2.0
#!/usr/bin/env node
/**
 * @format
 */
hello
  .world();

// Prettier 2.1
#!/usr/bin/env node
/**
 * @format
 */
hello.world();

Korrigiert Einrückung bei Bereichsformatierung (#8410 von @thorn0)

> echo -e "export default class Foo{\n/**/\n}" | prettier --range-start 16 --range-end 31 --parser babel

// Prettier 2.0
export default class Foo {
                 /**/
               }

// Prettier 2.1
export default class Foo {
  /**/
}

Verbesserte Erkennung von Quellelementen für Bereichsformatierung (#8419 von @thorn0)

Nicht alle Anweisungstypen wurden erkannt (siehe hier, wie die Bereichsformatierung in Prettier funktioniert).

// Input
for   (const  element of list) { /* ... */ }
//     ^^^^^^^^^^^^^^^^^^^^^^ ← range

// Prettier 2.0
for   (const  element of list) { /* ... */ }

// Prettier 2.1
for (const element of list) {
  /* ... */
}

Unterstützung privater Felder in `in` (#8431 von @sosukesuzuki)

Unterstützung für den Stage-2-Vorschlag Private Felder in in.

// Input
#prop in obj;

// Prettier 2.0
SyntaxError: Unexpected token (1:1)
> 1 | #prop in obj;
    | ^
  2 |

// Prettier 2.1
#prop in obj;

Unterstützung für ES-Modulattribute und JSON-Module (#8436 von @fisker)

Unterstützung für den Stage-2-Vorschlag ES-Modul-Attribute und JSON-Module.

// Input
import foo from "foo.json" with type: "json";

// Prettier 2.0
SyntaxError: Unexpected token, expected ";" (1:28)
> 1 | import foo from "foo.json" with type: "json";
    |                            ^

// Prettier 2.1
import foo from "foo.json" with type: "json";

Unterstützung der Record- und Tuple-Syntax (#8453 von @fisker)

Unterstützt den Stage-2-Vorschlag JavaScript Records & Tuples Proposal.

Nur Unterstützung für die Syntax #[]/#{}, nicht {| |} / [| |].

Tuples

// Input
#[1, 2, 3]

// Prettier 2.0
SyntaxError: Unexpected token (1:1)
> 1 | #[1, 2, 3]
    | ^


// Prettier 2.1
#[1, 2, 3];

Records

// Input
#{
  a: 1,
  b: 2,
  c: 3,
}

// Prettier 2.0
SyntaxError: Unexpected token (1:1)
> 1 | #{
    | ^
  2 |   a: 1,
  3 |   b: 2,
  4 |   c: 3,


// Prettier 2.1
#{
  a: 1,
  b: 2,
  c: 3,
};

JSX-Elemente links von "<" mit Klammern umschließen (#8461 von @sosukesuzuki)

// Input
(<div/>) < 5;

// Prettier 2.0
<div/> < 5;

// Prettier 2.0 second output
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (1:9)
> 1 | <div /> < 5;
    |         ^
  2 |

// Prettier 2.1
(<div />) < 5;

Korrigiert Einrückung bei binären Ausdrücken mit nachgestellten Kommentaren (#8476 von @sosukesuzuki)

// Input
a +
  a + // comment
  a;

// Prettier 2.0
a +
a + // comment
  a;

// Prettier 2.1
a +
  a + // comment
  a;

Behebung instabiler Kommentare in binären Ausdrücken (#8491 von @thorn0)

// Input
Math.min(
  (
    /* foo */
    document.body.scrollHeight -
    (window.scrollY + window.innerHeight)
  ) - devsite_footer_height,
  0,
)

// Prettier 2.0 (first output)
Math.min(
  /* foo */
  document.body.scrollHeight -
  (window.scrollY + window.innerHeight) -
    devsite_footer_height,
  0
);

// Prettier 2.0 (second output)
Math.min(
  /* foo */
  document.body.scrollHeight -
    (window.scrollY + window.innerHeight) -
    devsite_footer_height,
  0
);

// Prettier 2.1 (first and second outputs)
Math.min(
  /* foo */
  document.body.scrollHeight -
    (window.scrollY + window.innerHeight) -
    devsite_footer_height,
  0
);

// Input
const topOfDescriptionBox =
      Layout.window.width +          // Images are 1:1 aspect ratio, full screen width
      Layout.headerHeight;

// Prettier 2.0 (first output)
const topOfDescriptionBox =
  Layout.window.width + Layout.headerHeight; // Images are 1:1 aspect ratio, full screen width

// Prettier 2.0 (second output)
const topOfDescriptionBox = Layout.window.width + Layout.headerHeight; // Images are 1:1 aspect ratio, full screen width

// Prettier 2.1 (first and second outputs)
const topOfDescriptionBox =
  Layout.window.width + // Images are 1:1 aspect ratio, full screen width
  Layout.headerHeight;

Anführungszeichen für numerische Schlüssel setzen und entfernen (#8508 von @lydell)

Prettier entfernt Anführungszeichen von Objektschlüsseln, wenn diese Bezeichner sind. Jetzt entfernt Prettier auch Anführungszeichen von Objektschlüsseln, die Zahlen sind.

Falls Sie quoteProps: "consistent" verwenden, kann Prettier auch Anführungszeichen für numerische Schlüssel hinzufügen, sodass alle Eigenschaften am Ende Anführungszeichen haben.

// Input
x = {
  "a": null,
  "1": null,
};

// Prettier 2.0
x = {
  a: null,
  "1": null,
};

// Prettier 2.1
x = {
  a: null,
  1: null,
};

Prettier bearbeitet nur "einfache" Zahlen wie 1 und 123.5. Folgende Transformationen werden nicht durchgeführt, da sie unerwartet wirken:

1e2 -> "100"
0b10 -> "10"
1_000 -> "1000"
1.0 -> "1"
0.99999999999999999 -> "1"
999999999999999999999 -> "1e+21"
2n -> "2"

"1e+100" -> 1e100

(Bitte verwenden Sie keine verwirrenden Zahlen als Objektschlüssel!)

Hinweis: Prettier entfernt Anführungszeichen bei Zahlen nur mit dem "babel"-Parser. In TypeScript ist dies nicht vollständig sicher.

Bevorzugung von vorangestellten Kommentaren bei Kommentaren nach "?" in bedingten Typen (#8557 von @sosukesuzuki)

// Input
type A = B extends T
  ? // comment
    foo
  : bar;

// Prettier 2.0
type A = B extends T // comment
  ? foo
  : bar;

// Prettier 2.1
type A = B extends T
  ? // comment
    foo
  : bar;

Umbruch von ternären Ausdrücken mit mehrzeiligen Blockkommentaren (#8592 von @sosukesuzuki)

// Input
test
  ? /* comment
       comment
    */
    foo
  : bar;

// Prettier 2.0
test ? /* comment
       comment
    */ foo : bar;

// Prettier 2.1
test
  ? /* comment
       comment
    */
    foo
  : bar;

Behebung instabiler Kommentarpaare zwischen Klassenmethoden (#8731 von @fisker)

// Input
class C {
    ma() {} /* D */ /* E */
    mb() {}
}

// Prettier 2.0
class C {
  ma() {} /* E */ /* D */
  mb() {}
}

// Prettier 2.0 (Second format)
class C {
  ma() {} /* D */ /* E */
  mb() {}
}

// Prettier 2.1
class C {
  ma() {} /* D */ /* E */
  mb() {}
}

Behebung doppelter `prettier-ignore`-Kommentare (#8742 von @fisker)

// Input
a = <div {.../* prettier-ignore */{}}/>
a = <div {...{}/* prettier-ignore */}/>

// Prettier 2.0
a = <div {/* prettier-ignore */ .../* prettier-ignore */ {}} />;
a = <div {...{} /* prettier-ignore */ /* prettier-ignore */} />;

// Prettier 2.1
a = <div {.../* prettier-ignore */ {}} />;
a = <div {...{} /* prettier-ignore */} />;

Unterstützung des Decimal Proposals (#8901 von @fisker)

Unterstützung des Stage-1-Proposals Decimal Proposal.

// Input
0.3m;

// Prettier 2.0
SyntaxError: Identifier directly after number (1:4)
> 1 | 0.3m;

// Prettier 2.1
0.3m;

Hinzufügen von Klammern beim Yielding von JSX (#9011 von @fisker)

In v2.0.0 haben wir Klammern beim Yielding von JSX entfernt, was bei den meisten Parsern funktioniert, aber ESLint wirft einen Fehler beim Parsen, verwandtes Issue.

// Input
function* f() {
  yield <div>generator</div>
}

// Prettier 2.0
function* f() {
  yield <div>generator</div>
}

// Prettier 2.1
function* f() {
  yield (<div>generator</div>);
}

TypeScript

Korrektur des `babel-ts`-Parsers für korrekte Syntaxfehler bei `(a:b)` (#8046 von @thorn0)

Zuvor wurde solcher Code ohne Fehler geparst, aber im Printer wurde ein Fehler geworfen, der unfreundlich mit Stacktrace ausgegeben wurde. Jetzt wirft der Parser einen ordentlichen Syntaxfehler.

// Input
(a:b)

// Prettier 2.0
[error] test.ts: Error: unknown type: "TSTypeCastExpression"
[error] ... [a long stack trace here] ...

// Prettier 2.1
[error] test.ts: SyntaxError: Did not expect a type annotation here. (1:2)
[error] > 1 | (a:b)
[error]     |  ^
[error]   2 |

Setzen von Klammern um String-Literale zur Vermeidung der Interpretation als Direktiven (#8422 von @thorn0)

Prettier setzt jedes String-Literal, das in einer Anweisungsposition steht, in Klammern, da solche Strings sonst als Direktiven interpretiert würden, wenn sie am Anfang einer Funktion oder eines Programms auftreten, was das Programmverhalten ändern könnte. Technisch ist dies nicht notwendig für Strings, die nicht in der ersten Zeile einer Funktion oder eines Programms stehen. Es dennoch zu tun, ist jedoch konsistenter und kann Bugs aufdecken. Siehe beispielsweise diesen Thread auf Twitter.

Bisher funktionierte dies nicht konsistent für den typescript-Parser. Nur bereits in Klammern gesetzte Strings behielten diese.

// Input
f();
'use foo';
('use bar');

// Prettier 2.0
f();
"use foo";
("use bar");

// Prettier 2.1
f();
("use foo");
("use bar");

Unterstützung der Breaking Changes von TypeScript 3.9 für Optional Chaining und Non-Null Assertions (#8450 von @sosukesuzuki)

Siehe https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/#breaking-changes

// Input
(a?.b)!.c;

// Prettier 2.0
a?.b!.c;

// Prettier 2.1
(a?.b)!.c;

Flow

Korrektur von Funktions-Typparametern, die nullable Parameter enthalten (#8365 von @fisker)

// Input
let f: <A>(
  ((?A) => B),
) => B;

// Prettier 2.0
let f: <A>((?A) => B) => B;

// Prettier 2.0 (Second format)
SyntaxError: Unexpected token (1:12)
> 1 | let f: <A>((?A) => B) => B;

// Prettier 2.1
let f: <A>(((?A) => B)) => B;

Korrektur des Export default von Flow-Enums (#8768 von @gkz)

Fügt kein abschließendes Semikolon hinzu, wenn ein Flow-Enum per Default exportiert wird.

// Input
export default enum B {}

// Prettier 2.0
export default enum B {};

// Prettier 2.1
export default enum B {}

CSS

Verhindert Code-Bruch durch Kommentare am Ende einer At-Rule (#7009 von @evilebottnawi)

/* Input */
@at-root .foo
// .bar
{

}

/* Prettier 2.0 */
@at-root .foo
// .bar {
}

/* Prettier 2.1 */
@at-root .foo
// .bar
{
}

Korrektur der Manipulation von unquotiertem Inhalt in url() (#7592 von @mattiacci)

Verbessert die Behandlung von unquoted URL-Inhalten in CSS/SCSS/Less. Dies behebt nicht die zugrundeliegenden Parsing-Probleme, stellt aber sicher, dass Prettier URLs nicht verändert.

/* Input */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
@import url(//fonts.googleapis.com/css?family=#{ get-font-family('Roboto') }:100,300,500,700,900&display=swap);
.validUnquotedUrls{
  background: url(data/+0ThisShouldNotBeLowerCased);
  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
}

/* Prettier 2.0 */
@import url(
  https://fonts.googleapis.com/css?family=Roboto:100,
  300,
  400,
  500,
  700,
  900&display=swap
);
@import url(
  //fonts.googleapis.com/css?family=#{get-font-family("Roboto")}:100,
  300,
  500,
  700,
  900&display=swap
);
.validUnquotedUrls {
  background: url(data/+0thisshouldnotbelowercased);
  background: url(https://foo/A*3i8osy6akrmaaaaaaaaaaabkarqnaq);
  background: url(https://example.com/some/quite, long, url, with, commas.jpg);
}


/* Prettier 2.1 */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap);
@import url(//fonts.googleapis.com/css?family=#{ get-font-family('Roboto') }:100,300,500,700,900&display=swap);
.validUnquotedUrls{
  background: url(data/+0ThisShouldNotBeLowerCased);
  background: url(https://foo/A*3I8oSY6AKRMAAAAAAAAAAABkARQnAQ);
  background: url(https://example.com/some/quite,long,url,with,commas.jpg);
}

Korrektur: Falscher Leerraum nach escaped Doppelpunkt in CSS-Grid-Liniennamen (#8535 von @boyenn)

/* Input */
.grid {
  grid-template-rows:
    [row-1-00\:00] auto;
}

/* Prettier 2.0 */
.grid {
  grid-template-rows: [row-1-00\: 00] auto;
}

/* Prettier 2.1 */
.grid {
  grid-template-rows: [row-1-00\:00] auto;
}

Unterstützung für @supports selector(<custom-selector>) hinzugefügt (#8545 von @boyenn)

/* Input */
@supports selector(:focus-visible) {
  button:focus {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid orange;
  }
}

/* Prettier 2.0 */
@supports selector(: focus-visible) {
  button:focus {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid orange;
  }
}

/* Prettier 2.1 */
@supports selector(:focus-visible) {
  button:focus {
    outline: none;
  }

  button:focus-visible {
    outline: 2px solid orange;
  }
}

Verbesserung der Behandlung beliebiger Argumente (#8567, #8566 von @boyenn)

Prettier fügt nicht mehr unerwartet zusätzlichen Leerraum nach Funktionen ein, wenn beliebige Argumente übergeben werden. Prettier bricht Code nicht mehr, wenn Inline-Zahlenlisten als beliebige Argumente verwendet werden.

/* Input */
body {
  test: function($list...);
  foo: bar(returns-list($list)...);
  background-color: rgba(50 50 50 50...);
}

/* Prettier 2.0 */
body {
  test: function($list...);
  foo: bar(returns-list($list) ...);
  background-color: rgba(50 50 50 50..);
}

/* Prettier 2.1 */
body {
  test: function($list...);
  foo: bar(returns-list($list)...);
  background-color: rgba(50 50 50 50...);
}

SCSS

Korrektur übermäßiger Einrückung nach Kommentaren in SCSS (#7844 von @boyenn)

Bisher fügte Prettier Zeilen nach Kommentaren innerhalb von SCSS-Maps übermäßig ein. Prettier fügt diese Einrückungen nun nicht mehr hinzu.

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

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

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

Korrektur von Inline-Kommentaren zwischen Eigenschaft und Wert (#8366 von @fisker)

// Input
a {
  color: // comment
         red;
}

// Prettier 2.0
a {
  color: // comment red;
}

// Prettier 2.1
a {
  color: // comment
    red;
}

Kommentare am Dateiende gingen verloren, wenn das abschließende Semikolon fehlte (#8675 von @fisker)

// Input
@mixin foo() {
  a {
    color: #f99;
  }
}

@include foo() /* comment*/

// Prettier 2.0
@mixin foo() {
  a {
    color: #f99;
  }
}

@include foo();

// Prettier 2.1
@mixin foo() {
  a {
    color: #f99;
  }
}

@include foo(); /* comment*/

Less

Korrektur der `:extend`-Pseudoklasse (#8178 von @fisker)

Der Selektor wurde zuvor als Wert geparst, jetzt wird er korrekt als Selektor erkannt.

// Input
.hello {
  &:extend(.input[type="checkbox"]:checked ~ label)}

// Prettier 2.0
.hello {
  &:extend(.input[type= "checkbox" ]: checked ~label);
}

// Prettier 2.1
.hello {
  &:extend(.input[type="checkbox"]:checked ~ label);
}

Korrektur von Inline-Kommentaren mit `/*` (#8360 von @fisker)

Wenn Inline-Kommentare /* enthalten, wurden andere Kommentare nicht korrekt ausgegeben.

// Input
@import "a";

// '/*' <-- this breaks formatting

@import 'b';
/* block */
/*no-space block*/

// Prettier 2.0
@import "a";

// '/*' <-- this breaks formatting

@import "b";

@import 'b
@import 'b';
/* bl

// Prettier 2.1
@import "a";

// '/*' <-- this breaks formatting

@import "b";
/* block */
/*no-space block*/

HTML

Weglassen abschließender Semikolons bei einzeiligen Style-Attributen (#8013 von @bschlenk)

<!-- Input -->
<div style="margin: 0; padding: 20px"></div>
<div style="margin: 0; padding: 20px; position: relative; display: inline-block; color: blue"></div>

<!-- Prettier 2.0 -->
<div style="margin: 0; padding: 20px;"></div>
<div
  style="
    margin: 0;
    padding: 20px;
    position: relative;
    display: inline-block;
    color: blue;
  "
></div>

<!-- Prettier 2.1 -->
<div style="margin: 0; padding: 20px"></div>
<div
  style="
    margin: 0;
    padding: 20px;
    position: relative;
    display: inline-block;
    color: blue;
  "
></div>

Beibehaltung nicht-ASCII-Leerzeichen in HTML (#8137 von @fisker)

Nicht-ASCII-Leerzeichen wie U+00A0 oder U+2005 gelten in HTML nicht als Leerzeichen und dürfen nicht entfernt werden.

// Prettier 2.0
[...require("prettier").format("<i> \u2005 </i>", { parser: "html" })]
  .slice(3, -5)
  .map((c) => c.charCodeAt(0).toString(16));

// -> [ '20' ]
// `U+2005` is removed

// Prettier 2.1
[...require("prettier").format("<i> \u2005 </i>", { parser: "html" })]
  .slice(3, -5)
  .map((c) => c.charCodeAt(0).toString(16));

// -> [ '20', '2005', '20' ]

Unterstützung veralteter HTML-ähnlicher Kommentare in Script-Blöcken (#8173 von @fisker, #8394 von @fisker)

Bisher wurden HTML-<script>-Blöcke als "module" (ECMAScript-Modulgrammatik) geparst, weshalb Kommentare mit <!-- (HTML-ähnliche Kommentare) nicht geparst werden konnten. Jetzt werden <script>-Blöcke als "script" geparst, außer wenn dieser <script>

type="module"
type="text/babel" und data-type="module" (eingeführt in babel@v7.10.0)

<!-- Input -->
<SCRIPT>
<!--
alert("hello" +    ' world!')
//--></SCRIPT>

<!-- Prettier 2.0 -->
SyntaxError: Unexpected token (2:1)
  1 |
> 2 | <!--
    | ^
  3 | alert("hello" +    ' world!')
  4 | //-->

<!-- Prettier 2.1 -->
<script>
  <!--
  alert("hello" + " world!");
  //-->
</script>

Behandlung von `<select>` als Inline-Block und `<optgroup>`/`<option>` als Blockelemente (#8275 von @thorn0, #8620 von @fisker)

Prettier erkennt jetzt, dass das Hinzufügen von Leerzeichen innerhalb von select-, option- und optgroup-Tags sicher ist.

<!-- Input -->
<select><option>Blue</option><option>Green</option><optgroup label="Darker"><option>Dark Blue</option><option>Dark Green</option></optgroup></select>

<!-- Prettier 2.0 -->
<select
  ><option>Blue</option
  ><option>Green</option
  ><optgroup label="Darker"
    ><option>Dark Blue</option><option>Dark Green</option></optgroup
  ></select
>

<!-- Prettier 2.1 -->
<select>
  <option>Blue</option>
  <option>Green</option>
  <optgroup label="Darker">
    <option>Dark Blue</option>
    <option>Dark Green</option>
  </optgroup>
</select>

Korrektur defekter URLs mit Kommas in srcset (#8359 von @fisker)

<!-- Input -->
<img
srcset="
_20200401_145009_szrhju_c_scale,w_200.jpg 200w,
_20200401_145009_szrhju_c_scale,w_1400.jpg 1400w"
src="_20200401_145009_szrhju_c_scale,w_1400.jpg"
>

<!-- Prettier 2.0 -->
<img
  srcset="
    _20200401_145009_szrhju_c_scale,
    w_200.jpg                        200w,
    _20200401_145009_szrhju_c_scale,
    w_1400.jpg                      1400w
  "
  src="_20200401_145009_szrhju_c_scale,w_1400.jpg"
/>

<!-- Prettier 2.1 -->
<img
  srcset="
    _20200401_145009_szrhju_c_scale,w_200.jpg   200w,
    _20200401_145009_szrhju_c_scale,w_1400.jpg 1400w
  "
  src="_20200401_145009_szrhju_c_scale,w_1400.jpg"
/>

Unterstützung für `<script type="text/html>` (#8371 von @sosukesuzuki)

<!-- Input -->
<script type="text/html">
<div>
<p>foo</p>
</div>
</script>

<!-- Prettier 2.0 -->
<script type="text/html">
  <div>
  <p>foo</p>
  </div>
</script>

<!-- Prettier 2.1 -->
<script type="text/html">
  <div>
    <p>foo</p>
  </div>
</script>

Unterstützung dynamischer Sprachen in Front Matter (#8381 von @fisker)

Unterstützung der dynamischen Spracherkennung in Front Matter, ebenfalls verfügbar für die css-, less-, scss- und markdown-Parser.

<!-- Input -->
---my-awsome-language
title: Title
description: Description
---
  <h1>
    prettier</h1>

<!-- Prettier 2.0 -->
---my-awsome-language title: Title description: Description ---

<h1>
  prettier
</h1>

<!-- Prettier 2.1 -->
---my-awsome-language
title: Title
description: Description
---

<h1>
  prettier
</h1>

Keine Beibehaltung von Zeilenumbrüchen um reinen Textinhalt (#8614 von @fisker)

Bisher behielt Prettier stets Zeilenumbrüche um Inline-Knoten bei (d.h. Inline-Elemente, Text, Interpolationen). Generell versucht Prettier nach Möglichkeit, sich nicht auf die ursprüngliche Formatierung zu verlassen, aber es gibt mindestens zwei Fälle, in denen das Zusammenfassen von Inline-Knoten in einer einzelnen Zeile unerwünscht ist: listenartige Inhalte und bedingte Konstruktionen (z.B. v-if/v-else in Vue). Da keine gute Methode zur Erkennung dieser Fälle gefunden werden konnte, wurde dieser Kompromiss gewählt. Es stellte sich jedoch heraus, dass diese Regelauflockerung bei reinen Textinhalten unnötig war und nur zu verwirrend inkonsistenter Formatierung führte.

<!-- Input -->
<div>
  Hello, world!
</div>
<div>
  Hello, {{ username }}!
</div>

<!-- Prettier 2.0 -->
<div>
  Hello, world!
</div>
<div>Hello, {{ username }}!</div>

<!-- Prettier 2.1 -->
<div>Hello, world!</div>
<div>Hello, {{ username }}!</div>

Bekannte HTML-Tags erkennen (#8621 von @fisker)

<!-- Input -->
<div>before<details><summary>summary long long long long </summary>details</details>after</div>
<div>before<dialog open>dialog long long long long  long long long long </dialog>after</div>
<div>before<object data="horse.wav"><param name="autoplay" value="true"/><param name="autoplay" value="true"/></object>after</div>

<!-- Prettier 2.0 -->
<div>
  before<details><summary>summary long long long long </summary>details</details
  >after
</div>
<div>
  before<dialog open>dialog long long long long long long long long </dialog
  >after
</div>
<div>
  before<object data="horse.wav"
    ><param name="autoplay" value="true" /><param
      name="autoplay"
      value="true" /></object
  >after
</div>

<!-- Prettier 2.1 -->
<div>
  before
  <details>
    <summary>summary long long long long</summary>
    details
  </details>
  after
</div>
<div>
  before
  <dialog open>dialog long long long long long long long long</dialog>
  after
</div>
<div>
  before<object data="horse.wav">
    <param name="autoplay" value="true" />
    <param name="autoplay" value="true" /></object
  >after
</div>

Formatierung von Elementen mit Void-Element als letztem Kind korrigieren (#8643 von @ikatyang)

<!-- Input -->
<video controls width="250">
    <source src="/media/examples/flower.webm"
            type="video/webm">
    <source src="/media/examples/flower.mp4"
            type="video/mp4"
></video>text after

<!-- Prettier 2.0 -->
<video controls width="250">
  <source src="/media/examples/flower.webm" type="video/webm" />
  <source src="/media/examples/flower.mp4" type="video/mp4" /></video

>text after

<!-- Prettier 2.1 -->
<video controls width="250">
  <source src="/media/examples/flower.webm" type="video/webm" />
  <source src="/media/examples/flower.mp4" type="video/mp4" /></video
>text after

Vue

Formatierung von Vue-SFC-Root-Blöcken verbessern (#8023 von @sosukesuzuki, #8465 von @fisker)

Unterstützung der Formatierung aller Sprachblöcke (einschließlich benutzerdefinierter Blöcke mit lang-Attribut) mit integrierten Parsern und Plugins.

<!-- Input -->
<template lang="pug">
div.text( color =   "primary",  disabled  ="true"  )
</template>
<i18n lang="json">
{
"hello": 'prettier',}
</i18n>

<!-- Prettier 2.0 -->
<template lang="pug">
div.text( color =   "primary",  disabled  ="true"  )
</template>
<i18n lang="json">
{
"hello": 'prettier',}
</i18n>

<!-- Prettier 2.1 -->
<template lang="pug">
.text(color="primary", disabled="true")
</template>
<i18n lang="json">
{
  "hello": "prettier"
}
</i18n>

@prettier/plugin-pug ist für dieses Beispiel erforderlich.

Parsing für benutzerdefinierte Blöcke verbessern (#8153 von @sosukesuzuki)

<!-- Input -->
<custom lang="javascript">
const foo =    "</";
</custom>

<!-- Prettier 2.0 -->
SyntaxError: Unexpected character """ (2:19)
[error]   1 | <custom lang="javascript">
[error] > 2 | const foo =    "</";
[error]     |                   ^
[error]   3 | </custom>

<!-- Prettier 2.1 -->
<custom lang="javascript">
const foo = "</";
</custom>

Kaputte Formatierung bei HTML-Tags in Großbuchstaben beheben (#8280 von @fisker)

<!-- Input -->
<!doctype html><HTML></HTML>

<!-- Prettier 2.0 -->
<!DOCTYPE html>><HTML></HTML>

<!-- Prettier 2.1 -->
<!DOCTYPE html><HTML></HTML>

Ungünstige Formatierung für einzeiliges `template` in Vue-SFC korrigieren (#8325 von @sosukesuzuki)

<!-- Input -->
<template><p>foo</p><div>foo</div></template>

<!-- Prettier 2.0 -->
<template
  ><p>foo</p>
  <div>foo</div></template
>

<!-- Prettier 2.1 -->
<template>
  <p>foo</p>
  <div>foo</div>
</template>

Vue-DOM-Vorlagen unterstützen (#8326 von @sosukesuzuki)

Bei Verwendung des Vue-Parsers für HTML wird die Vorlage als HTML geparst.

<!-- Input -->
<!DOCTYPE html>
<html>
  <body STYLE="color: #333">
    <DIV id="app">
      <DIV>First Line</DIV><DIV>Second Line</DIV>
    </DIV>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {}
        },
      });
    </script>
  </body>
</html>

<!-- Prettier 2.0 -->
<!DOCTYPE html>
<html>
  <body STYLE="color: #333">
    <DIV id="app"> <DIV>First Line</DIV><DIV>Second Line</DIV> </DIV>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>

<!-- Prettier 2.1 -->
<!DOCTYPE html>
<html>
  <body style="color: #333">
    <div id="app">
      <div>First Line</div>
      <div>Second Line</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {};
        },
      });
    </script>
  </body>
</html>

Formatierung von HTML-Tags in Großbuchstaben in DOM-Vorlagen verbessern (#8337 von @sosukesuzuki)

<!-- Input -->
<!DOCTYPE html><HTML>
  <body>
    <div v-if="foo ===    'foo'">

</div>
    <script>
new Vue({el: '#app'})
    </script>
  </body>
</HTML>

<!-- Prettier 2.0 -->
<!DOCTYPE html>
<HTML>
  <body>
    <div v-if="foo ===    'foo'">

</div>
    <script>
new Vue({el: '#app'})
    </script>
  </body>
</HTML>

<!-- Prettier 2.1 -->
<!DOCTYPE html>
<HTML>
  <body>
    <div v-if="foo === 'foo'"></div>
    <script>
      new Vue({ el: "#app" });
    </script>
  </body>
</HTML>

Formatierung von geklammerter Interpolation korrigieren (#8747 von @fisker)

<!-- Input -->
<template>
<span>{{(a||          b)}} {{z&&(a&&b)}}</span>
</template>

<!-- Prettier 2.0 -->
<template>
  <span>{{(a||          b)}} {{z&&(a&&b)}}</span>
</template>

<!-- Prettier 2.1 -->
<template>
  <span>{{ a || b }} {{ z && a && b }}</span>
</template>

Formatierungsproblem bei Kurzschreibwerten für benannte Slots beheben (#8839 von @wenfangdu)

<!-- Input -->
<template>
  <div #default="{foo:{bar:{baz}}}"></div>
</template>

<!-- Prettier 2.0 -->
<template>
  <div #default="{foo:{bar:{baz}}}"></div>
</template>

<!-- Prettier 2.1 -->
<template>
  <div #default="{ foo: { bar: { baz } } }"></div>
</template>

Angular

Behebung von optionalem Verkettung mit berechneten Eigenschaften und Behandlung von `this` (#8253 von @thorn0, #7942 von @fisker, Korrekturen in `angular-estree-parser` von @ikatyang)

<!-- Input -->
{{ a?.b[c] }}
{{ a  ( this )}}

<!-- Prettier 2.0 -->
{{ (a?.b)[c] }}
{{ a  ( this )}}

<!-- Prettier 2.1 -->
{{ a?.b[c] }}
{{ a(this) }}

Beibehalten von Klammern um Pipes in Objektliteralen für Kompatibilität mit AngularJS 1.x (#8254 von @thorn0)

<!-- Input -->
<div ng-style="{ 'color': ('#222' | darken)}"></div>

<!-- Prettier 2.0 -->
<div ng-style="{ color: '#222' | darken }"></div>

<!-- Prettier 2.1 -->
<div ng-style="{ 'color': ('#222' | darken)}"></div>

Handlebars (Alpha)

Berücksichtigung der singleQuote-Option bei Attributwerten, die komplexer sind als einfacher Text (#8375 von @dcyriller)

{{!-- Input --}}
<a href='/{{url}}'></a>
<a href="/{{url}}"></a>

<a href='url'></a>
<a href="url"></a>

{{!-- Prettier 2.0 --}}
<a href="/{{url}}"></a>
<a href="/{{url}}"></a>

<a href='url'></a>
<a href='url'></a>

{{!-- Prettier 2.1 --}}
<a href='/{{url}}'></a>
<a href='/{{url}}'></a>

<a href='url'></a>
<a href='url'></a>

Korrektur der Formatierung klassischer Komponenten innerhalb von Elementen (#8593 von @mikoscz)

{{!-- Input --}}
<div>
  {{classic-component-with-many-properties
    class="hello"
    param=this.someValue
    secondParam=this.someValue
    thirdParam=this.someValue
  }}
</div>

{{!-- Prettier 2.0 --}}
<div>
  {{
    classic-component-with-many-properties
    class="hello"
    param=this.someValue
    secondParam=this.someValue
    thirdParam=this.someValue
  }}
</div>

{{!-- Prettier 2.1 --}}
<div>
  {{classic-component-with-many-properties
    class="hello"
    param=this.someValue
    secondParam=this.someValue
    thirdParam=this.someValue
  }}
</div>

Unterstützung für das Escapen von Mustaches mit Backslash (#8634 von @dcyriller)

{{!-- Input --}}
\{{mustache}}
\\{{mustache}}
\\\{{mustache}}

{{!-- Prettier 2.0 --}}
{{mustache}}
\{{mustache}}
\\{{mustache}}

{{!-- Prettier 2.1 --}}
\{{mustache}}
\\{{mustache}}
\\\{{mustache}}

Formatierung ausschließlich von Klassennamen in Attributen (#8677 von @dcyriller)

{{!-- Input --}}
<div class=' class '></div>
<div title=' other attribute '></div>

{{!-- Prettier 2.0 --}}
<div class="class"></div>
<div title="other attribute"></div>

{{!-- Prettier 2.1 --}}
<div class="class"></div>
<div title=" other attribute "></div>

GraphQL

Verbesserung des Umbruchs von GraphQL-Fragmentdirektiven (#7721 von @sasurau4)

# Input
fragment TodoList_list on TodoList @argumentDefinitions(
  count: {type: "Int", defaultValue: 10},
) {
  title
}

# Prettier 2.0
fragment TodoList_list on TodoList
  @argumentDefinitions(count: { type: "Int", defaultValue: 10 }) {
  title
}

# Prettier 2.1
fragment TodoList_list on TodoList
@argumentDefinitions(count: { type: "Int", defaultValue: 10 }) {
  title
}

Korrektur von Kommentaren zwischen Interfaces (#8006 von @fisker)

# Input
type Type1 implements
    A  &
# comment 1
    B
# comment 2
 &  C {a: a}

# Prettier 2.0
type Type1 implements A & # comment 1
B & # comment 2
C {
  a: a
}

# Prettier 2.0 (Second format)
type Type1 implements A & B & C { # comment 1 # comment 2
  a: a
}

# Prettier 2.1
type Type1 implements A &
# comment 1
B &
# comment 2
C {
  a: a
}

Ermöglichen, dass Interfaces andere Interfaces implementieren (#8007 von @fisker)

Siehe "RFC: Allow interfaces to implement other interfaces"

# Input
interface Resource implements Node {
  id: ID!
  url: String
}

# Prettier 2.0
interface Resource {
  id: ID!
  url: String
}

# Prettier 2.1
interface Resource implements Node {
  id: ID!
  url: String
}

Markdown

Aktualisierung von `remark-parse` auf Version 8 (#8140 von @saramarcondes, @fisker, @thorn0)

remark, der von Prettier verwendete Markdown-Parser, erhielt ein längst überfälliges Update (5.0.0 → 8.0.2, siehe Changelog von remark). Dadurch wurden zahlreiche alte Fehler behoben, insbesondere im Zusammenhang mit der Verarbeitung von mit Tabulatoren eingerückten Listenelementen.

Bitte beachten Sie, dass die neue Version strenger bei der Verarbeitung von Fußnoten ist, einer Syntaxerweiterung, die in keiner Spezifikation definiert ist. Bisher verarbeitete Prettier (und gab, abhängig von der Option --tab-width, aus) mehrzeilige Fußnoten, die mit beliebig vielen Leerzeichen eingerückt waren. Die neue Version erkennt nur mehrzeilige Fußnoten, die mit 4 Leerzeichen eingerückt sind. Diese Änderung gilt nicht als Breaking Change, da die Syntax nicht standardisiert ist. Falls Sie diese Syntax verwenden, sollten Sie vor dem Update von Prettier die ältere Version mit --tab-width=4 verwenden, um Ihre Fußnoten mit der neuen Version kompatibel zu machen.

Korrekte Formatierung von CJK-Sätzen mit Variation Selector (#8511 von @ne-sachirou)

<!-- Input -->
麻󠄁羽󠄀‼️

<!-- Prettier 2.0 -->
麻 󠄁 羽 󠄀 ‼️

<!-- Prettier 2.1 -->
麻󠄁羽󠄀‼️

YAML

Behebt instabile Formatierung bei Verwendung von `prettier-ignore` (#8355 von @fisker)

# Input
# prettier-ignore
---
prettier: true
...
hello: world

# Prettier 2.0
# prettier-ignore
---
prettier: true
---
hello: world

# Prettier 2.0 (Second format)
# prettier-ignore
---
prettier: true

---
hello: world

# Prettier 2.1
# prettier-ignore
---
prettier: true
---
hello: world

Bewahrt Leerzeilen in Kommentaren (#8356 von @fisker)

# Input
a:
  - a: a

  # - b: b

  # - c: c

  - d: d


b:
  - a: a

  # - b: b

  # - c: c

# Prettier 2.0
a:
  - a: a

  # - b: b

  # - c: c

  - d: d

b:
  - a: a
  # - b: b
  # - c: c

# Prettier 2.1
a:
  - a: a

  # - b: b

  # - c: c

  - d: d

b:
  - a: a

  # - b: b

  # - c: c

Aktualisiert `yaml` und `yaml-unist-parser` (#8386 von @fisker, Korrekturen in `yaml-unist-parser` von @ikatyang)

# Input
# --- comments ---

# Prettier 2.0
--- # --- comments ---

# Prettier 2.1
# --- comments ---

# Input
empty block scalar: >

 # comment

# Prettier 2.0
empty block scalar: >

# comment

# Prettier 2.1
SyntaxError: Block scalars with more-indented leading empty lines must use an explicit indentation indicator (1:21)
> 1 | empty block scalar: >
    |                     ^
> 2 |
    | ^^
> 3 |  # comment
    | ^^^^^^^^^^^

Behebt Fehler bei der YAML Inline Extend-Syntax (#8888 von @fisker, @evilebottnawi, Korrekturen in `yaml-unist-parser` von @ikatyang)

# Input
foo:
 <<: &anchor
   K1: "One"
 K2: "Two"

bar:
 <<: *anchor
 K3: "Three"

# Prettier 2.0
SyntaxError: Merge nodes can only have Alias nodes as values (2:2)
  1 | foo:
> 2 |  <<: &anchor
    |  ^^^^^^^^^^^
> 3 |    K1: "One"
    | ^^^^^^^^^^^^
> 4 |  K2: "Two"
    | ^^^^^^^^^^^^
> 5 |
    | ^
  6 | bar:
  7 |  <<: *anchor
  8 |  K3: "Three"

# Prettier 2.1
foo:
  <<: &anchor
    K1: "One"
  K2: "Two"

bar:
  <<: *anchor
  K3: "Three"

API

Fügt die Parser von Plugins zur `parser`-Option hinzu (#8390 von @thorn0)

Wenn ein Plugin eine Sprache definiert, werden die dafür spezifizierten Parser nun automatisch zur Liste der gültigen Werte der parser-Option hinzugefügt. Dies kann für Editor-Integrationen oder andere Anwendungen nützlich sein, die eine Liste verfügbarer Parser benötigen.

npm install --save-dev --save-exact prettier @prettier/plugin-php

const hasPhpParser = prettier
  .getSupportInfo()
  .options.find((option) => option.name === "parser")
  .choices.map((choice) => choice.value)
  .includes("php"); // false in Prettier 2.0, true in Prettier 2.1

Korrigiert `prettier.getFileInfo()` (#8548, #8551, #8585 von @fisker)

Bei Übergabe von {resolveConfig: true} sollte inferredParser der aus der Konfigurationsdatei aufgelöste Parser sein. Vorherige Versionen könnten für Dateien, die von integrierten Parsern unterstützt werden, ein falsches Ergebnis zurückgegeben haben.
Bei Übergabe von {resolveConfig: true} und {ignorePath: "a/file/in/different/dir"} könnte das inferredParser-Ergebnis inkorrekt sein.
Wenn der angegebene filePath ignoriert wird, ist inferredParser jetzt immer null.

$ echo {"parser":"flow"}>.prettierrc
$ node -p "require('prettier').getFileInfo.sync('./foo.js', {resolveConfig: true})"

# Prettier 2.0
# { ignored: false, inferredParser: 'babel' }

# Prettier 2.1
# { ignored: false, inferredParser: 'flow' }

$ echo ignored.js>>.prettierignore
$ node -p "require('prettier').getFileInfo.sync('./ignored.js')"

# Prettier 2.0
# { ignored: true, inferredParser: 'babel' }

# Prettier 2.1
# { ignored: true, inferredParser: null }

Korrigiert die Auflösung von editorConfig für Dateien in tiefen Verzeichnissen (#8591 von @fisker)

Vorherige Versionen konnten .editorconfig für Dateien in tiefen Verzeichnissen (Tiefe größer als 9 vom Projektstammverzeichnis aus, siehe #5705) nicht finden.

Unterstützt `.cjs`- und `.json5`-Konfigurationsdateien (#8890, #8957 von @fisker)

Fügt neue Formate für Konfigurationsdateien hinzu:

.prettierrc.json5
.prettierrc.cjs
prettier.config.cjs

Korrektur der falschen Bereichsformatierung bei Dateien mit BOM (#8936 von @fisker)

Wenn Dateien eine BOM (Byte Order Mark) enthalten, wurde in vorherigen Versionen der tatsächliche Bereich falsch berechnet.

const text = "\uFEFF" + "foo = 1.0000;bar = 1.0000;";
//                       ^^^^^^^^^^^^^ Range
const result = require("prettier")
  .format(text, {
    parser: "babel",
    rangeStart: 1,
    rangeEnd: 13,
  })
  // Visualize BOM
  .replace("\uFEFF", "<<BOM>>")
  // Visualize EOL
  .replace("\n", "<<EOL>>");

console.log(result);

// Prettier 2.0
// -> <<BOM>>foo = 1.0;<<EOL>>bar = 1.0;
//                            ^^^^^^^^^ This part should not be formatted

// Prettier 2.1
// -> <<BOM>>foo = 1.0;bar = 1.0000;

CLI

Korrektur: Dateinamen mit CJK-Zeichen oder Emojis wurden nicht korrekt ignoriert (#8098 von @fisker)

// Prettier 2.0
$ echo "dir" > .prettierignore
$ prettier **/*.js -l
dir/😁.js
dir/中文.js
not-ignored.js

// Prettier 2.1
$ echo "dir" > .prettierignore
$ prettier **/*.js -l
not-ignored.js

`--file-info` berücksichtigt nun `.prettierrc` und `--no-config` (#8586, #8830 von @fisker)

$ echo {"parser":"ninja"}>.prettierrc

# Prettier 2.0
$ prettier --file-info file.js
# { "ignored": false, "inferredParser": "babel" }
$ prettier --file-info file.js --no-config
# { "ignored": false, "inferredParser": "babel" }

# Prettier 2.1
$ prettier --file-info file.js
# { "ignored": false, "inferredParser": "ninja" }
$ prettier --file-info file.js --no-config
# { "ignored": false, "inferredParser": "babel" }

Hinzufügen der `--ignore-unknown`-Option (Alias `-u`) (#8829 von @fisker)

# Prettier 2.0
npx prettier * --check
Checking formatting...
foo.unknown[error] No parser could be inferred for file: foo.unknown
All matched files use Prettier code style!

# Prettier 2.1
npx prettier * --check --ignore-unknown
Checking formatting...
All matched files use Prettier code style!

Hinzufügen des `-w`-Alias für die `--write`-Option (#8833 von @fisker)

# Prettier 2.0
$ prettier index.js -w
[warn] Ignored unknown option -w. Did you mean -_?
"use strict";

module.exports = require("./src/index");

# Prettier 2.1
$ prettier index.js -w
index.js 30ms

Keine Vorschläge mehr für `-_` bei unbekannten Optionen (#8934 von @fisker)

# Prettier 2.0
$ prettier foo.js -a
[warn] Ignored unknown option -a. Did you mean -_?

# Prettier 2.1
$ prettier foo.js -a
[warn] Ignored unknown option -a. Did you mean -c?

Höhepunkte​

API​

Hinzufügen der Option --embedded-language-formatting={auto,off} (#7875 von @bakkot, #8825 von @fisker)​

TypeScript​

Unterstützung für TypeScript 4.0​

Labeled Tuple Elements (#8885 von @fisker, #8982 von @sosukesuzuki)​

Short-Circuiting Assignment Operators (#8982 von @sosukesuzuki)​

Type annotations on catch clauses (#8805 von @fisker)​

Weitere Änderungen​

JavaScript​

Unterstützung der F#- und Smart-Pipeline-Operator-Vorschläge (#6319 von @sosukesuzuki, @thorn0, #7979 von @sosukesuzuki)​

Korrektur von Kommentaren am Zeilenende bei nachfolgenden Leerzeichen (#8069 von @shisama)​

Korrigiert inkonsistentes Parsing von injizierten Ausdrücken in styled-components-Template-Literalen (#8097 von @thecodrr)​

Korrigiert nachgestellte Kommas in Objekten, bei denen die letzte Eigenschaft ignoriert wurde (#8111 von @fisker)​

Objektschlüssel mit Escape-Sequenzen unverändert belassen (#8160 von @fisker)​

Korrigiert überflüssiges Leerzeichen nach Minus in CSS-in-JS (#8255 von @thorn0)​

Korrigiert Kommentare im extends-Teil von Klassendeklarationen/-ausdrücken (#8312 von @thorn0)​

Arrays in Jest test.each-Template-Strings nicht umbrechen (#8354 von @yogmel)​

Unterstützung für insertPragma und requirePragma in Dateien mit Shebang (#8376 von @fisker)​

Korrigiert Einrückung bei Bereichsformatierung (#8410 von @thorn0)​

Verbesserte Erkennung von Quellelementen für Bereichsformatierung (#8419 von @thorn0)​

Unterstützung privater Felder in in (#8431 von @sosukesuzuki)​

Unterstützung für ES-Modulattribute und JSON-Module (#8436 von @fisker)​

Unterstützung der Record- und Tuple-Syntax (#8453 von @fisker)​

JSX-Elemente links von "<" mit Klammern umschließen (#8461 von @sosukesuzuki)​

Korrigiert Einrückung bei binären Ausdrücken mit nachgestellten Kommentaren (#8476 von @sosukesuzuki)​

Behebung instabiler Kommentare in binären Ausdrücken (#8491 von @thorn0)​

Anführungszeichen für numerische Schlüssel setzen und entfernen (#8508 von @lydell)​

Bevorzugung von vorangestellten Kommentaren bei Kommentaren nach "?" in bedingten Typen (#8557 von @sosukesuzuki)​

Umbruch von ternären Ausdrücken mit mehrzeiligen Blockkommentaren (#8592 von @sosukesuzuki)​

Behebung instabiler Kommentarpaare zwischen Klassenmethoden (#8731 von @fisker)​

Behebung doppelter prettier-ignore-Kommentare (#8742 von @fisker)​

Unterstützung des Decimal Proposals (#8901 von @fisker)​

Hinzufügen von Klammern beim Yielding von JSX (#9011 von @fisker)​

TypeScript​

Korrektur des babel-ts-Parsers für korrekte Syntaxfehler bei (a:b) (#8046 von @thorn0)​

Setzen von Klammern um String-Literale zur Vermeidung der Interpretation als Direktiven (#8422 von @thorn0)​

Unterstützung der Breaking Changes von TypeScript 3.9 für Optional Chaining und Non-Null Assertions (#8450 von @sosukesuzuki)​

Flow​

Korrektur von Funktions-Typparametern, die nullable Parameter enthalten (#8365 von @fisker)​

Korrektur des Export default von Flow-Enums (#8768 von @gkz)​

CSS​

Verhindert Code-Bruch durch Kommentare am Ende einer At-Rule (#7009 von @evilebottnawi)​

Korrektur der Manipulation von unquotiertem Inhalt in url() (#7592 von @mattiacci)​

Korrektur: Falscher Leerraum nach escaped Doppelpunkt in CSS-Grid-Liniennamen (#8535 von @boyenn)​

Unterstützung für @supports selector(<custom-selector>) hinzugefügt (#8545 von @boyenn)​

Verbesserung der Behandlung beliebiger Argumente (#8567, #8566 von @boyenn)​

SCSS​

Korrektur übermäßiger Einrückung nach Kommentaren in SCSS (#7844 von @boyenn)​

Korrektur von Inline-Kommentaren zwischen Eigenschaft und Wert (#8366 von @fisker)​

Kommentare am Dateiende gingen verloren, wenn das abschließende Semikolon fehlte (#8675 von @fisker)​

Less​

Korrektur der :extend-Pseudoklasse (#8178 von @fisker)​

Korrektur von Inline-Kommentaren mit /* (#8360 von @fisker)​

HTML​

Weglassen abschließender Semikolons bei einzeiligen Style-Attributen (#8013 von @bschlenk)​

Beibehaltung nicht-ASCII-Leerzeichen in HTML (#8137 von @fisker)​

Unterstützung veralteter HTML-ähnlicher Kommentare in Script-Blöcken (#8173 von @fisker, #8394 von @fisker)​

Behandlung von <select> als Inline-Block und <optgroup>/<option> als Blockelemente (#8275 von @thorn0, #8620 von @fisker)​

Korrektur defekter URLs mit Kommas in srcset (#8359 von @fisker)​

Unterstützung für <script type="text/html> (#8371 von @sosukesuzuki)​

Unterstützung dynamischer Sprachen in Front Matter (#8381 von @fisker)​

Keine Beibehaltung von Zeilenumbrüchen um reinen Textinhalt (#8614 von @fisker)​

Bekannte HTML-Tags erkennen (#8621 von @fisker)​

Formatierung von Elementen mit Void-Element als letztem Kind korrigieren (#8643 von @ikatyang)​

Vue​

Formatierung von Vue-SFC-Root-Blöcken verbessern (#8023 von @sosukesuzuki, #8465 von @fisker)​

Parsing für benutzerdefinierte Blöcke verbessern (#8153 von @sosukesuzuki)​

Kaputte Formatierung bei HTML-Tags in Großbuchstaben beheben (#8280 von @fisker)​

Ungünstige Formatierung für einzeiliges template in Vue-SFC korrigieren (#8325 von @sosukesuzuki)​

Vue-DOM-Vorlagen unterstützen (#8326 von @sosukesuzuki)​

Formatierung von HTML-Tags in Großbuchstaben in DOM-Vorlagen verbessern (#8337 von @sosukesuzuki)​

Formatierung von geklammerter Interpolation korrigieren (#8747 von @fisker)​

Formatierungsproblem bei Kurzschreibwerten für benannte Slots beheben (#8839 von @wenfangdu)​

Angular​

Behebung von optionalem Verkettung mit berechneten Eigenschaften und Behandlung von this (#8253 von @thorn0, #7942 von @fisker, Korrekturen in angular-estree-parser von @ikatyang)​

Beibehalten von Klammern um Pipes in Objektliteralen für Kompatibilität mit AngularJS 1.x (#8254 von @thorn0)​

Handlebars (Alpha)​

Berücksichtigung der singleQuote-Option bei Attributwerten, die komplexer sind als einfacher Text (#8375 von @dcyriller)​

Korrektur der Formatierung klassischer Komponenten innerhalb von Elementen (#8593 von @mikoscz)​

Höhepunkte

API

Hinzufügen der Option --embedded-language-formatting={auto,off} (#7875 von @bakkot, #8825 von @fisker)

TypeScript

Unterstützung für TypeScript 4.0

Labeled Tuple Elements (#8885 von @fisker, #8982 von @sosukesuzuki)

Short-Circuiting Assignment Operators (#8982 von @sosukesuzuki)

Type annotations on catch clauses (#8805 von @fisker)

Weitere Änderungen

JavaScript

Unterstützung der F#- und Smart-Pipeline-Operator-Vorschläge (#6319 von @sosukesuzuki, @thorn0, #7979 von @sosukesuzuki)

Korrektur von Kommentaren am Zeilenende bei nachfolgenden Leerzeichen (#8069 von @shisama)

Korrigiert inkonsistentes Parsing von injizierten Ausdrücken in styled-components-Template-Literalen (#8097 von @thecodrr)

Korrigiert nachgestellte Kommas in Objekten, bei denen die letzte Eigenschaft ignoriert wurde (#8111 von @fisker)

Objektschlüssel mit Escape-Sequenzen unverändert belassen (#8160 von @fisker)

Korrigiert überflüssiges Leerzeichen nach Minus in CSS-in-JS (#8255 von @thorn0)

Korrigiert Kommentare im `extends`-Teil von Klassendeklarationen/-ausdrücken (#8312 von @thorn0)

Arrays in Jest `test.each`-Template-Strings nicht umbrechen (#8354 von @yogmel)

Unterstützung für `insertPragma` und `requirePragma` in Dateien mit Shebang (#8376 von @fisker)

Korrigiert Einrückung bei Bereichsformatierung (#8410 von @thorn0)

Verbesserte Erkennung von Quellelementen für Bereichsformatierung (#8419 von @thorn0)

Unterstützung privater Felder in `in` (#8431 von @sosukesuzuki)

Unterstützung für ES-Modulattribute und JSON-Module (#8436 von @fisker)

Unterstützung der Record- und Tuple-Syntax (#8453 von @fisker)

JSX-Elemente links von "<" mit Klammern umschließen (#8461 von @sosukesuzuki)

Korrigiert Einrückung bei binären Ausdrücken mit nachgestellten Kommentaren (#8476 von @sosukesuzuki)

Behebung instabiler Kommentare in binären Ausdrücken (#8491 von @thorn0)

Anführungszeichen für numerische Schlüssel setzen und entfernen (#8508 von @lydell)

Bevorzugung von vorangestellten Kommentaren bei Kommentaren nach "?" in bedingten Typen (#8557 von @sosukesuzuki)

Umbruch von ternären Ausdrücken mit mehrzeiligen Blockkommentaren (#8592 von @sosukesuzuki)

Behebung instabiler Kommentarpaare zwischen Klassenmethoden (#8731 von @fisker)

Behebung doppelter `prettier-ignore`-Kommentare (#8742 von @fisker)

Unterstützung des Decimal Proposals (#8901 von @fisker)

Hinzufügen von Klammern beim Yielding von JSX (#9011 von @fisker)

TypeScript

Korrektur des `babel-ts`-Parsers für korrekte Syntaxfehler bei `(a:b)` (#8046 von @thorn0)

Setzen von Klammern um String-Literale zur Vermeidung der Interpretation als Direktiven (#8422 von @thorn0)

Unterstützung der Breaking Changes von TypeScript 3.9 für Optional Chaining und Non-Null Assertions (#8450 von @sosukesuzuki)

Flow

Korrektur von Funktions-Typparametern, die nullable Parameter enthalten (#8365 von @fisker)

Korrektur des Export default von Flow-Enums (#8768 von @gkz)

CSS

Verhindert Code-Bruch durch Kommentare am Ende einer At-Rule (#7009 von @evilebottnawi)

Korrektur der Manipulation von unquotiertem Inhalt in url() (#7592 von @mattiacci)

Korrektur: Falscher Leerraum nach escaped Doppelpunkt in CSS-Grid-Liniennamen (#8535 von @boyenn)

Unterstützung für @supports selector(<custom-selector>) hinzugefügt (#8545 von @boyenn)

Verbesserung der Behandlung beliebiger Argumente (#8567, #8566 von @boyenn)

SCSS

Korrektur übermäßiger Einrückung nach Kommentaren in SCSS (#7844 von @boyenn)

Korrektur von Inline-Kommentaren zwischen Eigenschaft und Wert (#8366 von @fisker)

Kommentare am Dateiende gingen verloren, wenn das abschließende Semikolon fehlte (#8675 von @fisker)

Less

Korrektur der `:extend`-Pseudoklasse (#8178 von @fisker)

Korrektur von Inline-Kommentaren mit `/*` (#8360 von @fisker)

HTML

Weglassen abschließender Semikolons bei einzeiligen Style-Attributen (#8013 von @bschlenk)

Beibehaltung nicht-ASCII-Leerzeichen in HTML (#8137 von @fisker)

Unterstützung veralteter HTML-ähnlicher Kommentare in Script-Blöcken (#8173 von @fisker, #8394 von @fisker)

Behandlung von `<select>` als Inline-Block und `<optgroup>`/`<option>` als Blockelemente (#8275 von @thorn0, #8620 von @fisker)

Korrektur defekter URLs mit Kommas in srcset (#8359 von @fisker)

Unterstützung für `<script type="text/html>` (#8371 von @sosukesuzuki)

Unterstützung dynamischer Sprachen in Front Matter (#8381 von @fisker)

Keine Beibehaltung von Zeilenumbrüchen um reinen Textinhalt (#8614 von @fisker)

Bekannte HTML-Tags erkennen (#8621 von @fisker)

Formatierung von Elementen mit Void-Element als letztem Kind korrigieren (#8643 von @ikatyang)

Vue

Formatierung von Vue-SFC-Root-Blöcken verbessern (#8023 von @sosukesuzuki, #8465 von @fisker)

Parsing für benutzerdefinierte Blöcke verbessern (#8153 von @sosukesuzuki)

Kaputte Formatierung bei HTML-Tags in Großbuchstaben beheben (#8280 von @fisker)

Ungünstige Formatierung für einzeiliges `template` in Vue-SFC korrigieren (#8325 von @sosukesuzuki)

Vue-DOM-Vorlagen unterstützen (#8326 von @sosukesuzuki)

Formatierung von HTML-Tags in Großbuchstaben in DOM-Vorlagen verbessern (#8337 von @sosukesuzuki)

Formatierung von geklammerter Interpolation korrigieren (#8747 von @fisker)

Formatierungsproblem bei Kurzschreibwerten für benannte Slots beheben (#8839 von @wenfangdu)

Angular

Behebung von optionalem Verkettung mit berechneten Eigenschaften und Behandlung von `this` (#8253 von @thorn0, #7942 von @fisker, Korrekturen in `angular-estree-parser` von @ikatyang)

Beibehalten von Klammern um Pipes in Objektliteralen für Kompatibilität mit AngularJS 1.x (#8254 von @thorn0)

Handlebars (Alpha)

Berücksichtigung der singleQuote-Option bei Attributwerten, die komplexer sind als einfacher Text (#8375 von @dcyriller)

Korrektur der Formatierung klassischer Komponenten innerhalb von Elementen (#8593 von @mikoscz)