Prettier 2.6: nytt singleAttributePerLine-alternativ och nya JavaScript-funktioner!
Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →
Den här versionen innehåller ett nytt singleAttributePerLine-alternativ. Detta är ett alternativ för att skriva ut endast ett attribut per rad i Vue SFC-mallar, HTML och JSX. Enligt vår Alternativfilosofi skulle vi helst inte lägga till ett sådant alternativ. Men det finns många användare som vill ha den här funktionen, och stora stilguider som Airbnbs JavaScript-stilguide och Vues stilguide rekommenderar stilen med ett attribut per rad. En PR för att lägga till den här funktionen öppnades i oktober 2019, och både den och det motsvarande issue:t har fått ett betydande stöd från användare. För oss var det ett svårt beslut att lägga till detta alternativ. Vi hoppas att tillägget av detta alternativ kommer att gynna många användare utan att skada våra principer i någon större utsträckning.
Vi har också lagt till stöd för formatering av vissa nya JavaScript-syntaxförslag via Babel.
Tack till våra sponsorer!
Som diskuterades i en bloggpost från tidigare i år har vi börjat betala våra underhållare med medel från våra sponsorer. Vi vill tacka våra många sponsorer som har gjort detta möjligt! Vi är särskilt tacksamma mot följande företag och personer som har donerat över $1,000 till oss:
Om du gillar Prettier och vill stödja vårt arbete, överväg att sponsra oss direkt via vår OpenCollective eller genom att sponsra de projekt vi förlitar oss på, inklusive typescript-eslint, remark och Babel.
Höjdpunkter
TypeScript
Stöd för TypeScript 4.6 (#12400 av @dependabot)
Vi har uppdaterat versionen av TypeScript som vi använder för att tolka TS-kod till TypeScript 4.6. Men ingen ny syntax lades till i den här versionen av TypeScript så vi har inte behövt göra några andra ändringar.
HTML
Tvinga fram ett attribut per rad (#6644 av @kankje)
Lade till alternativet singleAttributePerLine för att specificera om Prettier ska framtvinga ett attribut per rad i HTML, Vue och JSX.
<!-- 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>
Andra ändringar
JavaScript
Erkänn waitForAsync som test-sats i Angular (#11992 av @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");
}));
Bevara radslutskommentarer efter if-satser utan block (#12017 av @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
Skriv ut kommentarer för parentesomslutna TS-nyckelordstyper med babel-ts-parser (#12070 av @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;
Skriv ut radslutskommentarer för continue/break-satser (#12075 av @sosukesuzuki)
// Input
for (;;) continue // comment
;
// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!
// Prettier 2.6
for (;;)
continue; // comment
Infoga await-uttryck inline i JSX (#12088 & #12109 av @j-f1)
await-uttryck i JSX infogas nu inline om deras argument skulle infogas inline.
// 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>
)}
Lägg till acorn-parser (#12172 av @fisker)
Ett nytt värde för parser-alternativet har lagts till: acorn - En liten, snabb, JavaScript-baserad JavaScript-parser.
Behåll kommentarer efter default-fall på samma rad (#12177 av @duailibe)
Behåll kommentarer direkt efter default-fall (i switch-satser) på samma rad när det är möjligt.
// 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();
}
}
Åtgärda felplacerade argumentkommentarer i abstrakta metoder (#12185 av @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
);
}
Åtgärda typomvandling av superklass i klassdeklarationer (#12222 & #12226 av @duailibe)
Detta var en kombination av två separata buggar: flytta kommentarer före superklassen och lägga till multipla parenteser runt superklassen.
// 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) {}
Lägg till stöd för Unicode Set Notation i reguljära uttryck (#12241 av @fisker)
Förslaget i Stage 3 för Unicode Set Notation i reguljära uttryck stöds nu via Babel 7.17.0.
Se Babels versionsblogginlägg för v7.17.0 och README för detta förslag för detaljer. Tänk också på vår policy för icke-standardiserad syntax innan du använder denna föreslagna syntaxfunktion med Prettier.
// 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
Lägg till parenteser runt ClassExpression med dekoratorer (#12260 by @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 {}
);
Förbättra utskrift av kommentarer i typalias i Flow & TS (#12268 by @duailibe)
För Flow kommer kommentarerna nu att stämma bättre överens med hur vi skriver ut kommentarer i tilldelningar där högersidan är ett objektuttryck:
// 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,
};
Denna ändring löser också ett problem där en liknande kommentar i TypeScript flyttades igen efter en andra formateringsoperation:
// 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,
};
Lägg till stöd för destrukturering av privata fält (#12276 by @sosukesuzuki)
TC39-förslaget i steg 2 för destrukturering av privata fält stöds nu via Babel 7.17. Läs vår policy för icke-standardiserad syntax innan du använder denna föreslagna syntaxfunktion med Prettier.
// Example
class Foo {
constructor() {
console.log(this.#x); // => 1
const { #x: x } = this;
console.log(x); // => 1
}
}
Stöd för dekoratorns auto accessors-syntax (#12299 by @sosukesuzuki)
Stöd för auto accessors-syntax som introducerats i nytt dekoratorförslag. Läs vår policy för icke-standardiserad syntax innan du använder denna föreslagna syntaxfunktion med Prettier.
// Example
@defineElement("my-class")
class C extends HTMLElement {
@reactive accessor clicked = false;
}
Åtgärda idempotensproblem orsakade av radkommentarer efter = i tilldelningar (#12349 by @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
Omstrukturera utskrift av definite assignment assertions (#12351 by @thorn0)
Definite assignment assertions skrivs nu ut även när de inte följs av typannotationer. Detta är ett fel i TypeScript, men TS kan fortfarande tolka filen.
// Input
let a!;
// Prettier 2.5
let a;
// Prettier 2.6
let a!;
Skriv ut avslutande kommatecken för restelement i tuppeltyper (#12390 by @sosukesuzuki)
TypeScript har tillåtit restelement i tuppeltyper (...T) att ha vanliga element efter sig sedan TypeScript 4.2.
Prettier skriver nu ut ett avslutande kommatecken för det avslutande restelementet (när avslutande kommatecken är aktiverade) för konsistens och för att minska diffar om du lägger till fler element efter det sista elementet senare.
// { 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
Åtgärda formatering av static indexer i Flows klassdeklarationer (#12009 by @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
Bevara tomma rader i SCSS-kartor (#12210 by @duailibe)
Denna ändring gäller också vissa PostCSS-funktioner med liknande 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
);
Åtgärda omvandling till gemener av postcss-värden (#12393 by @niklasvatn)
PostCSS-värden kan börja med siffror. Prettier tolkar detta som ett tal följt av en enhet i exemplet nedan.
// 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
Åtgärda kommentarer i map (#11920 av @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
)
);
}
Fixar utskrift av parametrar för en mixin som heter selector() (#12213 av @duailibe)
/* Input */
@mixin selector($param: 'value') {
}
/* Prettier 2.5 */
@mixin selector($param: 'value) {
}
/* Prettier 2.6 */
@mixin selector($param: 'value') {
}
Vue
Fixar hängningar vid ogiltig v-for (#12113 av @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>;
Tillåt att lang-attributet för <template> är tomt (#12394 av @HallvardMM)
Malltagg bör tillåta tom sträng lang="" eller odefinierat lang
<!-- 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
Identifiera korrekt vilka backslashes som tas bort av glimmer (#12302 av @MattTheNub)
Detta fick Prettier att onödigtvis lägga till backslashes varje gång en fil formaterades.
{{! 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
Skriv ut beskrivningar på graphql schema definition-noder (#11901 av @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
Förhindra oväntad borttagning av block-literal-rader som börjar med U+3000 (#12305 av @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
Lägg till --no-plugin-search-flagga för att inaktivera plugin-automatisk inläsning (#10274 av @fisker)
För att inaktivera plugin-automatisk inläsning, använd --no-plugin-search med Prettier CLI eller lägg till { pluginSearchDirs: false } i alternativen i prettier.format() eller i konfigurationsfilen.
// Prettier 2.5
$ prettier . --plugin-search-dir=a-dir-without-plugins
// Prettier 2.6
$ prettier . --no-plugin-search
Identifiera parser för .swcrc (#12320 av @sosukesuzuki)
Formatera .swcrc-filen som en JSON-fil.
Diverse
Byt till esbuild (#12055 av @fisker)
Vi har bytt vår byggprocess från Rollup till esbuild. esbuild är mycket snabbare och har förbättrat vår utvecklarupplevelse. Detta är en intern förändring och bör inte påverka användare. Om något inte fungerar för dig efter uppgradering, öppna gärna ett ärende!
