Prettier 2.6: Neue Option singleAttributePerLine und neue JavaScript-Features!
Diese Seite wurde von PageTurner AI übersetzt (Beta). Nicht offiziell vom Projekt unterstützt. Fehler gefunden? Problem melden →
Dieses Release enthält die neue Option singleAttributePerLine. Diese Option bewirkt, dass in Vue-SFC-Templates, HTML und JSX jeweils nur ein Attribut pro Zeile ausgegeben wird. Entsprechend unserer Optionsphilosophie würden wir eine solche Option eigentlich nicht hinzufügen wollen. Allerdings wünschen sich viele Nutzer diese Funktion, und wichtige Styleguides wie der JavaScript-Styleguide von Airbnb und der Vue-Styleguide empfehlen den Stil mit einem Attribut pro Zeile. Ein PR für diese Funktion wurde bereits im Oktober 2019 eröffnet und sowohl dieser als auch das zugehörige Issue erhielten erhebliche Unterstützung von Nutzern. Für uns war es eine schwierige Entscheidung, diese Option hinzuzufügen. Wir hoffen, dass die neue Option vielen Nutzern zugutekommt, ohne unsere Grundsätze wesentlich zu beeinträchtigen.
Außerdem haben wir die Formatierungsunterstützung für einige neue JavaScript-Syntaxvorschläge via Babel hinzugefügt.
Dank an unsere Sponsoren!
Wie in einem Blogbeitrag vom Anfang des Jahres beschrieben, zahlen wir unsere Maintainer nun aus Mitteln unserer Sponsoren. Wir möchten unseren vielen Sponsoren danken, die dies ermöglicht haben! Besonders dankbar sind wir folgenden Unternehmen und Personen, die uns über 1.000 US-Dollar gespendet haben:
Wenn Ihnen Prettier gefällt und Sie unsere Arbeit unterstützen möchten, erwägen Sie eine direkte Förderung über unser OpenCollective oder durch Unterstützung der Projekte, von denen wir abhängen, darunter typescript-eslint, remark und Babel.
Höhepunkte
TypeScript
TypeScript 4.6-Unterstützung (#12400 von @dependabot)
Wir haben die Version von TypeScript, die wir zum Parsen von TS-Code verwenden, auf TypeScript 4.6 aktualisiert. Da dieses TypeScript-Release jedoch keine neue Syntax hinzufügt, waren keine weiteren Änderungen erforderlich.
HTML
Erzwinge ein Attribut pro Zeile (#6644 von @kankje)
Die Option singleAttributePerLine wurde hinzugefügt, um festzulegen, ob Prettier in HTML, Vue und JSX jeweils nur ein Attribut pro Zeile ausgeben soll.
<!-- Input -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier 2.5 -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier 2.6, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier 2.6, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
data-a="1"
data-b="2"
data-c="3"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Weitere Änderungen
JavaScript
Erkenne waitForAsync als Test-Statement in Angular (#11992 von @HendrikN)
// Input
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar")
}));
// Prettier 2.5
test(
"foo bar",
waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
})
);
// Prettier 2.6
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
}));
Bewahre Kommentare am Zeilenende nach if-Anweisungen ohne Blöcke (#12017 von @sosukesuzuki)
// Input
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C
// Prettier 2.5
if (condition1) expression1;
// comment A
else if (condition2) expression2;
// comment B
else expression3; // comment C
// Prettier 2.6
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C
Drucke Kommentare für eingeklammerte TS-Schlüsselworttypen mit babel-ts-Parser (#12070 von @sosukesuzuki)
// Input
let foo: (
// comment
never
);
// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!
// Prettier 2.6
let foo: // comment
never;
Drucke Kommentare am Zeilenende für continue/break-Anweisungen (#12075 von @sosukesuzuki)
// Input
for (;;) continue // comment
;
// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!
// Prettier 2.6
for (;;)
continue; // comment
Füge await-Ausdrücke inline in JSX ein (#12088 & #12109 von @j-f1)
await-Ausdrücke in JSX werden nun inline eingefügt, wenn ihr Argument ebenfalls inline wäre.
// Input
{await Promise.all(
someVeryLongExpression
)}
{await (
<div>Lorem ipsum ...</div>
)}
// Prettier 2.5
{
await Promise.all(
someVeryLongExpression
)
}
{
await (
<div>Lorem ipsum ...</div>
)
}
// Prettier 2.6
{await Promise.all(
someVeryLongExpression
)}
{await (
<div>Lorem ipsum ...</div>
)}
Füge acorn-Parser hinzu (#12172 von @fisker)
Ein neuer Wert für die Option parser wurde hinzugefügt: acorn – Ein kleiner, schneller, JavaScript-basierter JavaScript-Parser.
Behalte Kommentare nach default-Cases in derselben Zeile (#12177 von @duailibe)
Behalte Kommentare direkt nach default-Cases (in switch-Anweisungen) in derselben Zeile, wenn möglich.
// Input
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default: // expression;
return ExpressionStatement.read();
}
}
// Prettier 2.5
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default:
// expression;
return ExpressionStatement.read();
}
}
// Prettier 2.6
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default: // expression;
return ExpressionStatement.read();
}
}
Korrigiere falsch platzierte Argumentkommentare in abstrakten Methoden (#12185 von @duailibe)
// Input
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
)
}
// Prettier 2.5
abstract class Foo {
abstract bar(userId);
/** comment explaining userId param */
}
// Prettier 2.6
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
);
}
Korrigiere Typumwandlung der Superklasse in Klassendeklarationen (#12222 & #12226 von @duailibe)
Dies war eine Kombination aus zwei separaten Fehlern: Das Verschieben von Kommentaren vor die Superklasse und das Hinzufügen mehrerer Klammern um die Superklasse.
// Input
class Foo extends /** @type {Type} */ (Bar) {}
// Prettier 2.5
class Foo /** @type {Type} */ extends ((Bar)) {}
// Prettier 2.6
class Foo extends /** @type {Type} */ (Bar) {}
Füge Unterstützung für Unicode-Set-Notation in regulären Ausdrücken hinzu (#12241 von @fisker)
Der Stage-3-Vorschlag für Unicode-Set-Notation in regulären Ausdrücken wird nun über Babel 7.17.0 unterstützt.
Details hierzu finden Sie im Release-Blogpost von Babel v7.17.0 und im README dieses Proposals. Beachten Sie bitte auch unsere Richtlinie zu nicht standardisierter Syntax, bevor Sie diese vorgeschlagene Syntaxfunktion mit Prettier verwenden.
// Examples
/[\p{Decimal_Number}--[0-9]]/v; // Non-ASCII decimal digits
"Did you see the 👩🏿❤️💋👩🏾 emoji?".match(/\p{RGI_Emoji}/v). // ["👩🏿❤️💋👩🏾"]
/[\r\n\q{\r\n|NEWLINE}]/v; // Matches \r, \n, \r\n or NEWLINE
Klammern für ClassExpression mit Decorators hinzugefügt (#12260 von @fisker)
// Input
(@f() class {});
// Prettier 2.5
@f()
class {};
// Prettier 2.5 (Second format)
SyntaxError: A class name is required. (2:7)
1 | @f()
> 2 | class {};
| ^
3 |
// Prettier 2.6
(
@f()
class {}
);
Verbesserte Darstellung von Kommentaren in Type-Aliases für Flow & TS (#12268 von @duailibe)
Für Flow werden Kommentare nun konsistenter dargestellt – analog zur Darstellung bei Zuweisungen, bei denen die rechte Seite ein Objektausdruck ist:
// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};
// Prettier 2.5
// comment explaining the props
type Props = {
isPlaying: boolean,
};
// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};
Diese Änderung behebt auch ein Problem, bei dem ein ähnlich platzierter Kommentar in TypeScript bei erneuter Formatierung verschoben wurde:
// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};
// Prettier 2.5
type Props = { // comment explaining the props
isPlaying: boolean;
};
// Prettier 2.5 (2nd format)
type Props = {
// comment explaining the props
isPlaying: boolean;
};
// Prettier 2.6
type Props =
// comment explaining the props
{
isPlaying: boolean,
};
Unterstützung für Destrukturierung privater Felder (#12276 von @sosukesuzuki)
Das Stage-2-TC39-Proposal für die Destrukturierung privater Felder wird nun über Babel 7.17 unterstützt. Bitte lesen Sie unsere Richtlinie zu nicht standardisierter Syntax, bevor Sie diese vorgeschlagene Syntaxfunktion mit Prettier verwenden.
// Example
class Foo {
constructor() {
console.log(this.#x); // => 1
const { #x: x } = this;
console.log(x); // => 1
}
}
Unterstützung der Decorator-Auto-Accessors-Syntax (#12299 von @sosukesuzuki)
Unterstützung der Auto-Accessors-Syntax aus dem neuen Decorators-Proposal. Bitte lesen Sie unsere Richtlinie zu nicht standardisierter Syntax, bevor Sie diese Syntaxfunktion mit Prettier verwenden.
// Example
@defineElement("my-class")
class C extends HTMLElement {
@reactive accessor clicked = false;
}
Behebung von Idempotenzproblemen durch Zeilenkommentare nach = in Zuweisungen (#12349 von @thorn0)
// Input
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);
// Prettier 2.5, first format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb( // !!!
annularCooeedSplicesWalksWayWay
);
// Prettier 2.5, second format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb(
// !!!
annularCooeedSplicesWalksWayWay
);
// Prettier 2.6
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);
TypeScript
Überarbeitung der Darstellung von Definite Assignment Assertions (#12351 von @thorn0)
Definite Assignment Assertions werden nun auch ohne nachfolgende Typanmerkungen dargestellt. Dies ist in TypeScript zwar ein Fehler, aber TS kann die Datei trotzdem parsen.
// Input
let a!;
// Prettier 2.5
let a;
// Prettier 2.6
let a!;
Trailing-Komma für Rest-Elemente in Tuple-Typen (#12390 von @sosukesuzuki)
Seit TypeScript 4.2 erlaubt TypeScript Rest-Elemente in Tuple-Typen (...T) mit nachfolgenden normalen Elementen. Prettier setzt nun ein Trailing-Komma für das abschließende Rest-Element (sofern Trailing-Kommas aktiviert sind) – für Konsistenz und reduzierte Diffs bei späteren Erweiterungen.
// { trailingCommma: "all" }
// Input
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];
// Prettier 2.5
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement
];
// Prettier 2.6
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];
Flow
Korrektur der Formatierung von static-Indexern in Flow-Klassendeklarationen (#12009 von @gkz)
// Input
declare class A {
static [string]: boolean;
}
// Prettier 2.5
declare class A {
[string]: boolean;
}
// Prettier 2.6
declare class A {
static [string]: boolean;
}
CSS
Beibehaltung leerer Zeilen in SCSS-Maps (#12210 von @duailibe)
Diese Änderung gilt auch für einige PostCSS-Funktionen mit ähnlicher Syntax.
/* Input */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
/* Prettier 2.5 */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
/* Prettier 2.6 */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
Korrektur der Kleinschreibung von PostCSS-Werten (#12393 von @niklasvatn)
PostCSS-Werte können mit Ziffern beginnen. Prettier interpretiert dies im folgenden Beispiel als Zahl gefolgt von einer Einheit.
// Input
@value 4XLarge 28/36px;
.test {
font: 4XLarge Helvetica;
}
// Prettier 2.5
@value 4XLarge 28/36px;
.test {
font: 4xlarge Helvetica;
}
// Prettier 2.6
@value 4XLarge 28/36px;
.test {
font: 4XLarge Helvetica;
}
SCSS
Korrektur von Kommentaren innerhalb von Maps (#11920 von @fisker)
// Input
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null, // TODO some comment
)
);
}
// Prettier 2.5
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
r: null, // TODO som
)
);
}
// Prettier 2.6
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
// TODO some comment
)
);
}
Korrektur der Parameterausgabe bei Mixins namens selector() (#12213 von @duailibe)
/* Input */
@mixin selector($param: 'value') {
}
/* Prettier 2.5 */
@mixin selector($param: 'value) {
}
/* Prettier 2.6 */
@mixin selector($param: 'value') {
}
Vue
Behebung von Hängern bei ungültigem v-for (#12113 von @fisker)
// Input
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>
// Prettier 2.5
// Hangs
// Prettier 2.6
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>;
Leeres lang-Attribut für <template> erlauben (#12394 von @HallvardMM)
Das Template-Tag sollte leere Zeichenketten lang="" oder undefinierte lang-Werte akzeptieren.
<!-- Input -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<!-- Prettier 2.5 -->
SyntaxError: Unexpected closing tag "v-menu". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (5:5)
[error] 3 | <v-menu offset-y>
[error] 4 | <template></template>
[error] > 5 | </v-menu>
[error] | ^^^^^^^^^
[error] 6 | </v-app-bar>
[error] 7 | </template>
<!-- Prettier 2.6 -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
Ember / Handlebars
Korrekte Identifizierung der von Glimmer entfernten Backslashes (#12302 von @MattTheNub)
Dies verursachte, dass Prettier bei jeder Formatierung unnötigerweise Backslashes hinzufügte.
{{! Input }}
<p>\</p>
<p>\\</p>
<p>\\\</p>
{{! Prettier 2.5 }}
<p>\\</p>
<p>\\\</p>
<p>\\\\</p>
{{! Prettier 2.6 }}
<p>\</p>
<p>\\</p>
<p>\\\</p>
GraphQL
Ausgabe von Beschreibungen bei GraphQL-Schemadefinitionsknoten (#11901 von @trevor-scheer)
# Input
"""SchemaDefinition description is lost"""
schema {
query: Query
}
# Prettier 2.5
schema {
query: Query
}
# Prettier 2.6
"""
SchemaDefinition description is lost
"""
schema {
query: Query
}
YAML
Behebung unerwarteter Löschung von Blockliteral-Zeilen mit U+3000-Start (#12305 von @Quramy)
# Input
block_with_ideographic_space: |
line-content # This line starts with U+3000
# Prettier 2.5
block_with_ideographic_space: |
// Prettier 2.6
block_with_ideographic_space: |
line-content # This line starts with U+3000
CLI
Option --no-plugin-search hinzugefügt, um Plugin-Autoloading zu deaktivieren (#10274 von @fisker)
Um Plugin-Autoloading zu deaktivieren, verwenden Sie --no-plugin-search mit der Prettier-CLI oder fügen Sie { pluginSearchDirs: false } zu den Optionen in prettier.format() oder zur Konfigurationsdatei hinzu.
// Prettier 2.5
$ prettier . --plugin-search-dir=a-dir-without-plugins
// Prettier 2.6
$ prettier . --no-plugin-search
Parserinferenz für .swcrc (#12320 von @sosukesuzuki)
Formatieren der .swcrc-Datei als JSON-Datei.
Verschiedenes
Wechsel zu esbuild (#12055 von @fisker)
Wir haben unseren Build-Prozess von Rollup zu esbuild umgestellt. esbuild ist viel schneller und hat unsere Entwicklungserfahrung verbessert. Dies ist eine interne Änderung und sollte keine Auswirkungen auf Benutzer haben. Wenn nach dem Upgrade etwas bei Ihnen nicht funktioniert, melden Sie bitte ein Issue!
