Prettier 2.3. I vilken tilldelningar är konsekventa, korta nycklar bryts inte och Handlebars blir officiell

9 maj 2021 · 32 min att läsa

Inofficiell Beta-översättning

Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →

Den här utgåvan fokuserar på att åtgärda långvariga problem i JavaScript-skrivaren. Var medveten om att tyvärr kan omformatering av ett projekt med den nya versionen resultera i en ganska stor diff. Om du inte använder ignoreRevsFile för att dölja sådana omfattande ändringar från git blame, kan det vara dags att börja.

En anmärkningsvärd milstolpe är den länge väntade lanseringen av Ember / Handlebars-formateraren. Detta tros bli den sista formateraren som inkluderas direkt i kärnbiblioteket. För framtiden, med hållbarhet i åtanke, ska nya språk endast läggas till via plugins.

Vi är tacksamma mot våra finansiella bidragsgivare: Salesforce, Indeed, Frontend Masters, Airbnb, Shogun Labs, Skyscanner, Konstantin Pschera och många fler som hjälper oss att fortsätta. Om du gillar Prettier och vill stödja vårt arbete, besök vår OpenCollective. Tänk även på att stödja projekt som Prettier förlitar sig på, som typescript-eslint, remark och Babel.

De flesta ändringarna i denna utgåva är tack vare det hårda arbetet från Fisker Cheung, Georgii Dolzhykov och Sosuke Suzuki, tillsammans med många andra bidragsgivare.

Och bara en påminnelse: när Prettier installeras eller uppdateras är det starkt rekommenderat att ange exakt version i package.json: "2.3.0", inte "^2.3.0".

Höjdpunkter

JavaScript

Formatera tilldelningar mer konsekvent (#10222, #10643, #10672 av @thorn0; #10158 av @sosukesuzuki)

Tidigare hade Prettier stora problem med att bestämma hur radbrytningar skulle göras i tilldelningar. T.ex. förblev långa högersidor ofta obrutna. Inte längre.

// Prettier 2.2
aParticularlyLongAndObnoxiousNameForIllustrativePurposes = anotherVeryLongNameForIllustrativePurposes;

aParticularlyLongAndObnoxiousNameForIllustrativePurposes = "a very long string for illustrative purposes"
  .length;

someReallyLongThingStoredInAMapWithAReallyBigName[
  pageletID
] = _someVariableThatWeAreCheckingForFalsiness
  ? Date.now() - _someVariableThatWeAreCheckingForFalsiness
  : 0;

class x {
  private readonly rawConfigFromFile$: BehaviorSubject<any> = new BehaviorSubject(
    notRead
  );
}

// Prettier 2.3
aParticularlyLongAndObnoxiousNameForIllustrativePurposes =
  anotherVeryLongNameForIllustrativePurposes;

aParticularlyLongAndObnoxiousNameForIllustrativePurposes =
  "a very long string for illustrative purposes".length;

someReallyLongThingStoredInAMapWithAReallyBigName[pageletID] =
  _someVariableThatWeAreCheckingForFalsiness
    ? Date.now() - _someVariableThatWeAreCheckingForFalsiness
    : 0;

class x {
  private readonly rawConfigFromFile$: BehaviorSubject<any> =
    new BehaviorSubject(notRead);
}

Förhindra radbrytning vid objektproperties med korta nycklar (#10335 av @thorn0)

Radbrytningar efter korta egenskapsnamn i objektliteraler ser ofta onaturliga ut. Även när en sådan radbrytning ger en radlängdsfördel på 1-2 tecken ser det sällan rättfärdigat ut. Prettier 2.3 undviker radbrytningar efter egenskapsnamn kortare än tabWidth + 3 – till exempel 5 tecken i standardkonfigurationen, eller 7 tecken med tabWidth: 4. Denna heuristik kan revideras i framtida versioner.

// Prettier 2.2
const importantLink = {
  url:
    "https://prettier.io/docs/en/rationale.html#what-prettier-is-concerned-about",
  gitHubUrl:
    "https://github.com/prettier/prettier/blob/main/docs/rationale.md#what-prettier-is-concerned-about",
};

// Prettier 2.3
const importantLink = {
  url: "https://prettier.io/docs/en/rationale.html#what-prettier-is-concerned-about",
  gitHubUrl:
    "https://github.com/prettier/prettier/blob/main/docs/rationale.md#what-prettier-is-concerned-about",
};

Ember / Handlebars

Flytta Handlebars-stöd från alfa till release (#10290 av @dcyriller & @thorn0)

Detta började 2017. Handlebars-stöd har funnits i Prettier ett tag, men det släpptes inte officiellt eftersom det inte var riktigt klart. Dess status gick från "alfa" till "experimentellt" till "beta" och sedan, om du kollade äldre versionsfakta, kan du se att efter "beta" var det någon gång "alfa" igen…

Hur som helst, nu händer det äntligen: Prettier kan nu officiellt formatera HTML-mallar med Handlebars! 🎉

Det använder Glimmer, Embers Handlebars-parser, så den borde följa HTML-specifikationen tack vare Ember-teamet.

Alternativet --html-whitespace-sensitivity stöds och är som standard inställt på strict, vilket innebär att Prettier alltid respekterar när blanktecken finns eller saknas runt taggar och anser det osäkert att lägga till blanktecken där det inte fanns några, och vice versa, eftersom detta kan påverka hur dokumentet renderas i webbläsaren. Värdet css stöds inte ännu (behandlas som strict för tillfället).

Funktionen kallas "Ember / Handlebars" och inte bara "Handlebars" eftersom Glimmer inte stöder vissa syntaxer och användningsfall av Handlebars. Detta beror främst på att Handlebars, som är en mallmotor (en förprocessor), inte bryr sig om underliggande syntax för innehållet den bearbetar, medan Glimmer tolkar två syntaxer – HTML och Handlebars – samtidigt och kombinerar resultatet till ett enda träd som Prettier kan skriva ut. Detta innebär att Prettier inte formaterar Handlebars-filer som inte kan tolkas till ett sådant träd, antingen för att underliggande syntax inte är HTML eller för att mall-direktiv och taggar överlappar på ett sätt som inte kan representeras i ett träd (t.ex. {{#if foo}}<div>{{/if}). Trots dessa begränsningar verkar formateraren fortfarande vara tillräckligt användbar för icke-Ember Handlebars-användare. När det gäller syntax som inte stöds av Ember finns det goda chanser att se stöd för det i framtida versioner av Prettier eftersom Glimmer använder en fullfjädrad Handlebars-parser under huven.

Filer med filtilläggen .hbs och .handlebars känns igen som Handlebars som standard. För andra filtillägg måste alternativet --parser med värdet glimmer anges – till exempel via kommandoraden eller, ännu bättre, via [konfigurationsöverskridanden].

Se formateraren i aktion på playground!

Formateringsförbättringar

JavaScript

Förfina formateringen av curryade arrow-funktioner (#9992, #10543 av @sosukesuzuki & @thorn0)

// Prettier 2.2
const currying = (argument1) => (argument2) => (argument3) => (argument4) => (
  argument5
) => (argument6) => foo;

// Prettier 2.3
const currying =
  (argument1) =>
  (argument2) =>
  (argument3) =>
  (argument4) =>
  (argument5) =>
  (argument6) =>
    foo;

Förbättra formateringen för React Hooks-anrop (#10238 av @sosukesuzuki)

// Prettier 2.2
const { firstName, lastName } = useMemo(() => parseFullName(fullName), [
  fullName,
]);

// Prettier 2.3
const { firstName, lastName } = useMemo(
  () => parseFullName(fullName),
  [fullName]
);

Förbättra visuell separation mellan rubrik och kropp i klasser med flerradiga rubriker (#10085 av @sosukesuzuki)

// Prettier 2.2
class loooooooooooooooooooong
  extends looooooooooooooooooong
  implements loooooooooooooooooooong {
  property: string;
}

// Prettier 2.3
class loooooooooooooooooooong
  extends looooooooooooooooooong
  implements loooooooooooooooooooong
{
  property: string;
}

Kortfattad formatering av enbart numeriska arrayer (#10106, #10160 av @thorn0)

Även om Prettier generellt undviker denna typ av formatering eftersom den inte är diff-vänlig, har vi i detta specialfall bedömt att fördelarna överväger riskerna.

Om minst ett element har en efterföljande enradskommentar (// ...) på samma rad tillämpas inte den kortfattade formateringen. Enradskommentarer på separata rader påverkar dock inte och – liksom tomma rader – kan användas för logisk gruppering.

// Input
const lazyCatererNumbers  =  [1, 2, 4, 7, 11, 16, 22, 29, 37, 46,

// n > 10
56, 67, 79, 92, 106, 121, 137, 154, 172, 191, 211, 232, 254, 277, 301, 326, 352, 379, 407, 436, 466,
497, 529, 562, 596, 631, 667, 704, 742, 781,
// n > 40
821, 862, 904, 947, 991, 1036, 1082, 1129, 1177, 1226, 1276, 1327, 1379];

// Prettier 2.2
const lazyCatererNumbers = [
  1,
  2,
  4,
  7,
  11,
  16,
  22,
  29,
  37,
  // ... ✂ 46 lines ✂ ...
  1379,
];

// Prettier 2.3
const lazyCatererNumbers = [
  1, 2, 4, 7, 11, 16, 22, 29, 37, 46,

  // n > 10
  56, 67, 79, 92, 106, 121, 137, 154, 172, 191, 211, 232, 254, 277, 301, 326,
  352, 379, 407, 436, 466, 497, 529, 562, 596, 631, 667, 704, 742, 781,
  // n > 40
  821, 862, 904, 947, 991, 1036, 1082, 1129, 1177, 1226, 1276, 1327, 1379,
];

Förbättra formateringen för nästade await-uttryck i huvuden av medlems- och anropsuttryck (#10342 av @thorn0)

Även om Prettier försöker vara hjälpsam här, skriv inte kod som denna. Ha förbarmande med dina teammedlemmar och använd mellanliggande variabler.

// Input
const getAccountCount = async () =>
  (await
    (await (
      await focusOnSection(BOOKMARKED_PROJECTS_SECTION_NAME)
    ).findItem("My bookmarks")).getChildren()
  ).length

// Prettier 2.2
const getAccountCount = async () =>
  (
    await (
      await (await focusOnSection(BOOKMARKED_PROJECTS_SECTION_NAME)).findItem(
        "My bookmarks"
      )
    ).getChildren()
  ).length;

// Prettier 2.3
const getAccountCount = async () =>
  (
    await (
      await (
        await focusOnSection(BOOKMARKED_PROJECTS_SECTION_NAME)
      ).findItem("My bookmarks")
    ).getChildren()
  ).length;

Förbättra formateringen för `do`-uttryck i funktionsanrop (#10693 av @sosukesuzuki)

"do-uttryck" är ett ECMAScript-förslag i stadium 1.

// Prettier 2.2
expect(
  do {
    var bar = "foo";
    bar;
  }
).toBe("foo");

// Prettier 2.3
expect(do {
  var bar = "foo";
  bar;
}).toBe("foo");

Konsekvent indrag för villkorsoperatorer (#10187, #10266 av @sosukesuzuki)

// Prettier 2.2
const dotNotationMemberExpression = (callNode.parent?.type ===
AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent
).TSESTree.BinaryExpression;

const computedMemberExpression = (callNode.parent?.type ===
AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent)[TSESTree.BinaryExpression];

const callExpressionCallee = (callNode.parent?.type ===
  AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent)(TSESTree.BinaryExpression);

const typeScriptAsExpression = (callNode.parent?.type ===
AST_NODE_TYPES.ChainExpression
  ? callNode.parent.parent
  : callNode.parent) as TSESTree.BinaryExpression;

// Prettier 2.3
const dotNotationMemberExpression = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
).TSESTree.BinaryExpression;

const computedMemberExpression = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
)[TSESTree.BinaryExpression];

const callExpressionCallee = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
)(TSESTree.BinaryExpression);

const typeScriptAsExpression = (
  callNode.parent?.type === AST_NODE_TYPES.ChainExpression
    ? callNode.parent.parent
    : callNode.parent
) as TSESTree.BinaryExpression;

HTML

Prefixbaserad flerradsformatering för `class`-attributet (#7865 av @thorn0)

Formatering av HTML-klassnamn kommer nu att hålla klasserna på en rad tills radlängdsgränsen uppnås. Vid den punkten grupperas efterföljande klasser med samma prefix på varje rad. För layoutramverk som Bootstrap och Tailwind CSS, som lägger till många klasser på ett element, är detta viktigt för läsbarhet och underhållbarhet jämfört med tidigare beteende (att behålla alla klasser på en rad) eller att sätta varje klass på egen rad.

<!-- Prettier 2.2 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.3 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

Andra ändringar

JavaScript

Åtgärda instabila flera kommentarer på samma rad (#9672 av @fisker)

// Input
a;
/*1*//*2*/
/*3*/
b;

// Prettier 2.2
a; /*2*/
/*1*/ /*3*/
b;

// Prettier 2.2 (second format)
a; /*2*/ /*3*/
/*1*/ b;

// Prettier 2.3
a;
/*1*/ /*2*/
/*3*/
b;

Formatera inte noder som slutar precis före `rangeStart` (#9704 av @fisker)

Tidigare, när range-formatering utfördes, ansågs sådana noder vara en del av intervallet. Nu är de undantagna. Detta påverkar andra språk som funktionen för range-formatering stöder, inte bara JavaScript.

// Input
foo = 1.0000;bar = 1.0000;baz=1.0000;
             ^^^^^^^^^^^^^ Range

// Prettier 2.2
foo = 1.0;
bar = 1.0;baz=1.0000;

// Prettier 2.3
foo = 1.0000;bar = 1.0;baz=1.0000;

Åtgärda kommentarer inuti JSX-sluttagg (#9711 av @fisker)

// Input
<a><// comment
/a>;

// Prettier 2.2
<a></// comment
a>;

// Prettier 2.3
<a></
  // comment
  a
>;

Åtgärda inkonsekvent språkkommentarsdetektering (#9743 av @fisker)

En /* HTML */-kommentar ska direkt föregå en malliteral för att den senare ska erkännas som HTML-i-JS. Tidigare kunde kommentaren felaktigt erkännas på andra platser.

// Input
foo /* HTML */ = `<DIV>
</DIV>`;

// Prettier 2.2 (--parser=babel)
foo /* HTML */ = `<div></div>`;

// Prettier 2.2 (--parser=meriyah)
foo /* HTML */ = `<DIV>
</DIV>`;

// Prettier 2.3 (All JavaScript parsers)
foo /* HTML */ = `<DIV>
</DIV>`;

Åtgärda extra semikolon som lades till ignorerade direktiv (#9850 av @fisker)

// Input
// prettier-ignore
'use strict';

function foo() {
// prettier-ignore
"use strict";;
}

// Prettier 2.2
// prettier-ignore
'use strict';;

function foo() {
  // prettier-ignore
  "use strict";;
}

// Prettier 2.3
// prettier-ignore
'use strict';

function foo() {
  // prettier-ignore
  "use strict";
}

Åtgärda instabil JSX-formatering med U+3000 (#9866 av @fisker)

// Input
<p>
  <span />　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>

// Prettier 2.2
<p>
  <span />
  　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>;

// Prettier 2.2 (second format)
<p>
  <span />　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>;

// Prettier 2.3
<p>
  <span />　{this.props.data.title}　<span />
  //----- ^ U+3000 --------------- ^ U+3000
</p>;

Åtgärda fel som kastades på uttryck som `a(b => c => function (){})` (#10278 av @thorn0)

Regression från v2.2.0.

// Input
a(b => c => function (){})

// Prettier 2.2
TypeError: Cannot read property 'length' of undefined

// Prettier 2.3
a((b) => (c) => function () {});

Förbättra formatering för inline-dekoratörer (#10296 av @fisker)

// Input
class Foo {
  @decorator([]) bar() {}
  @decorator(
    []
  ) baz() {}
}

// Prettier 2.2
class Foo {
  @decorator([]) bar() {}
  @decorator([])
  baz() {}
}

// Prettier 2.3
class Foo {
  @decorator([]) bar() {}
  @decorator([]) baz() {}
}

Åtgärda ASI-skydd för privata fält (#10334 av @thorn0)

// Input
class C {
  #field = 'value';
  ["method"]() {}
}

// Prettier 2.2 (with --no-semi)
class C {
  #field = "value"
  ["method"]() {}
}

// Prettier 2.3 (with --no-semi)
class C {
  #field = "value";
  ["method"]() {}
}

Stöd för Module Blocks-förslaget (#10417 av @sosukesuzuki, @thorn0)

Stöd för formatering av Module Blocks Stage 2-förslaget.

// Input
module { export let foo = "foo"; };

// Prettier 2.2
SyntaxError: Unexpected token, expected ";"

// Prettier 2.3
module {
  export let foo = "foo";
};

Åtgärda saknade parenteser för `yield` i en pipeline (#10446 av @fisker)

// Input
function* f() {
  return x |> (yield #);
}

// Prettier 2.2
function* f() {
  return x |> yield #;
}

// Prettier 2.3
function* f() {
  return x |> (yield #);
}

Gör Babels felåterhämtning mer selektiv (#10495 av @fisker, #9787 av @sosukesuzuki, #10065, #10322 av @thorn0)

Tidigare var Babel-parsern, på grund av felåterhämtningen, för tillåtande, vilket ledde till alla möjliga AST-strukturer som Prettier inte kunde skriva ut. Prettier 2.3 låter Babel endast återhämta sig från några få ofarliga feltyper – till exempel flera const-deklarationer med samma namn. Allt annat rapporteras som syntaxfel.

// Input
foo("a", , "b");

// Prettier 2.2
TypeError: Cannot read property 'type' of null

// Prettier 2.3
[error] stdin: SyntaxError: Argument expression expected. (1:10)
[error] > 1 | foo("a", , "b");
[error]     |          ^

// Input
const \u{20} = 1

// Prettier 2.2
const   = 1;

// Prettier 2.3
[error] stdin: SyntaxError: Invalid Unicode escape (1:7)
[error] > 1 | const \u{20} = 1
[error]     |       ^         ^

Undvik att sista argumentet klamrar sig fast vid enbart siffer-arrayer (#10517 av @thorn0)

Ytterligare ett specialfall för enbart siffer-arrayer.

// Input
instantiate(game, [
  transform([-0.7, 0.5, 0]),
  render_colored_diffuse(game.MaterialDiffuse, game.Meshes["monkey_flat"], [1, 1, 0.3, 1]),
]);

// Prettier 2.2
instantiate(game, [
  transform([-0.7, 0.5, 0]),
  render_colored_diffuse(game.MaterialDiffuse, game.Meshes["monkey_flat"], [
    1,
    1,
    0.3,
    1,
  ]),
]);

// Prettier 2.3
instantiate(game, [
  transform([-0.7, 0.5, 0]),
  render_colored_diffuse(
    game.MaterialDiffuse,
    game.Meshes["monkey_flat"],
    [1, 1, 0.3, 1]
  ),
]);

Förbättra identifieringen av AMD `define` (#10528 av @thorn0)

Prettier har specialfall för AMD define-anrop för att undvika oväntade radbrytningar i dem. Vi formaterar nu endast define-anrop om de är på toppnivån i en funktion eller ett program och skickas argument på det sätt som AMD förväntar sig.

// Prettier 2.2
const someVariable = define("some string literal", anotherVariable, yetAnotherVariable);

// Prettier 2.3
const someVariable = define(
  "some string literal",
  anotherVariable,
  yetAnotherVariable
);

Åtgärda duplicerade `prettier-ignore`-kommentarer (#10666 av @fisker)

// Input
foo = a.
  // prettier-ignore
  b;

// Prettier 2.2
foo =
  // prettier-ignore
  a.
  // prettier-ignore
  b;

// Prettier 2.3
foo = a.
  // prettier-ignore
  b;

Bearbeta villkorliga grupper i `mapDoc` (#10695 av @thorn0)

Detta åtgärdar i synnerhet trasiga substitutioner i HTML-in-JS.

// Input
export default function include_photoswipe(
	gallery_selector = ".my-gallery"
): string {
	return /* HTML */ `
		<script>
			window.addEventListener("load", () =>
				initPhotoSwipeFromDOM("${gallery_selector}")
			);
		</script>`;
}

// Prettier 2.2
export default function include_photoswipe(
  gallery_selector = ".my-gallery"
): string {
  return /* HTML */ ` <script>
    window.addEventListener("load", () =>
      initPhotoSwipeFromDOM("PRETTIER_HTML_PLACEHOLDER_0_13_IN_JS")
    );
  </script>`;
}

// Prettier 2.3
export default function include_photoswipe(
  gallery_selector = ".my-gallery"
): string {
  return /* HTML */ ` <script>
    window.addEventListener("load", () =>
      initPhotoSwipeFromDOM("${gallery_selector}")
    );
  </script>`;
}

Undvik argumentexpansion som leder till trasig kod (#10712 av @thorn0)

// Input
glimseGlyphsHazardNoopsTieTie(({ a, b = () => {
  console.log();
}}) => averredBathersBoxroomBuggyNurl());

// Prettier 2.2
glimseGlyphsHazardNoopsTieTie(({ a, b = () => {
    console.log();
  } }) => averredBathersBoxroomBuggyNurl());

// Prettier 2.3
glimseGlyphsHazardNoopsTieTie(
  ({
    a,
    b = () => {
      console.log();
    },
  }) => averredBathersBoxroomBuggyNurl()
);

Åtgärda saknade parenteser runt `async` i `for-of` (#10781 av @fisker)

Se https://github.com/tc39/ecma262/issues/2034

// Input
for ((async) of []);

// Prettier 2.2
for (async of []);

// Prettier 2.2 (second format)
SyntaxError: Unexpected token, expected "=>" (1:15)
> 1 | for (async of []);

// Prettier 2.3
for ((async) of []);

Stöd för förslaget om `async do`-uttryck (#10813 av @sosukesuzuki)

Se https://github.com/tc39/proposal-async-do-expressions

// Input
const x = async do {
  await requestAPI().json();
};

// Prettier 2.2
SyntaxError: Unexpected token, expected ";" (1:17)

// Prettier 2.3
const x = async do {
  await requestAPI().json();
};

TypeScript

Åtgärda saknade kommentarer i `MethodDefinition` (#9872 av @fisker)

Endast typescript-parsern, babel-ts har inte detta problem.

// Input
class Foo {
  bar() /* bat */;
}

// Prettier 2.2
Error: Comment "bat" was not printed. Please report this error!

// Prettier 2.3
class Foo {
  bar /* bat */();
}

Åtgärda onödiga radbrytningar i parametrar för metodtypdeklarationer (#10024 av @sosukesuzuki, #10357 av @thorn0)

// Input
type Foo = {
  method(foo: "foo"): `
  `
};

// Prettier 2.2
type Foo = {
  method(
    foo: "foo"
  ): `
  `;
};

// Prettier 2.3
type Foo = {
  method(foo: "foo"): `
  `;
};

Skriv ut efterföljande kommatecken i typparametrar (#10109 av @sosukesuzuki, #10353 av @thorn0)

TypeScript har stött efterföljande kommatecken i typparametrar sedan TypeScript 2.7 släpptes i januari 2018. Prettier 2.3 skriver ut dem om alternativet trailingComma är satt till all. Behåll detta alternativ på det mer konservativa standardvärdet es5 om kompatibilitet med TypeScript 2.7 eller äldre behövs. Observera att TypeScript fortfarande inte stöder efterföljande kommatecken i typargument (instansieringar av typparametrar).

// Input
export class BaseSingleLevelProfileTargeting<
	T extends ValidSingleLevelProfileNode,
> {
  // ...
}

// Prettier 2.2
export class BaseSingleLevelProfileTargeting<
  T extends ValidSingleLevelProfileNode
> {
  // ...
}

// Prettier 2.3 with --trailling-comma=all
export class BaseSingleLevelProfileTargeting<
  T extends ValidSingleLevelProfileNode,
> {
  // ...
}

Tillåt att argument som är icke-koncisapilfunktioner med returtypannotationer får behålla radbrytning (#10316 av @thorn0)

// Prettier 2.2
users.map(
  (user: User): User => {
    return user;
  }
);

// Prettier 2.3
users.map((user: User): User => {
  return user;
})

Korrigera parenteser för non-null-assertioner (#10337 av @thorn0)

Nödvändiga parenteser skrevs ibland inte ut i uttryck som innehåller non-null-assertioner. Detta har åtgärdats.

// Input
const myFunction2 = (key: string): number =>
  ({
    a: 42,
    b: 42,
  }[key]!)

// Prettier 2.2 (invalid syntax)
const myFunction2 = (key: string): number =>
  {
    a: 42,
    b: 42,
  }[key]!;

// Prettier 2.3
const myFunction2 = (key: string): number =>
  ({
    a: 42,
    b: 42,
  }[key]!);

Indentera typassertioner i huvuden av medlems- och anropsuttryck (#10341 av @thorn0)

// Input
const accountCount = (findItemInSection(BOOKMARKED_PROJECTS_SECTION_NAME,
  "My bookmarks") as TreeItem).getChildren().length;

// Prettier 2.2
const accountCount = (findItemInSection(
  BOOKMARKED_PROJECTS_SECTION_NAME,
  "My bookmarks"
) as TreeItem).getChildren().length;

// Prettier 2.3
const accountCount = (
  findItemInSection(
    BOOKMARKED_PROJECTS_SECTION_NAME,
    "My bookmarks"
  ) as TreeItem
).getChildren().length;

Stöd för intrinsic-nyckelord (#10390 av @sosukesuzuki)

// Input
type Uppercase<S extends string> = intrinsic;

// Prettier 2.2
Error: unknown type: "TSIntrinsicKeyword"

// Prettier 2.3
type Uppercase<S extends string> = intrinsic;

Stöd för TypeScript 4.2 (#10418, #10466, #10546, #10589 av @sosukesuzuki)

`abstract` konstruktorssignaturer

// Input
type T = abstract new () => void;

// Prettier 2.2
SyntaxError: Unexpected token, expected ";" (1:19)

// Prettier 2.3
type T = abstract new () => void;

Typimport i import require-deklaration

// Input
import type A = require("A");

// Prettier 2.2
SyntaxError: Only ECMAScript imports may use 'import type'.

// Prettier 2.3
import type A = require("A");

Fixa felplacerade kommentarer i unioner och snitt (#10457 av @thorn0)

// Input
type Foo = "1" | "2" /* two */ | "3";

// Prettier 2.2
type Foo = "1" | "2" | /* two */ "3";

// Prettier 2.3
type Foo = "1" | "2" /* two */ | "3";

Skriv inte ut parenteser runt nästade typassertioner (#10702 av @thorn0)

// Input
foo as unknown as Bar

// Prettier 2.2
(foo as unknown) as Bar;

// Prettier 2.3
foo as unknown as Bar;

Stöd för TypeScript 4.3 via `babel-ts` (#10811 av @sosukesuzuki)

`override`-modifierare i klasselement

class Foo extends  {
  override method() {}
}

Statiska indexsignaturer (`[key: KeyType]: ValueType`) i klasser

class Foo {
  static [key: string]: Bar;
}

`get` / `set` i typdeklarationer

interface Foo {
  set foo(value);
  get foo(): string;
}

Flow

Åtgärda saknad semikolon i `declare export * from …` (#9767 av @fisker)

// Input
declare export * from "ES6_ExportAllFrom_Source2";

// Prettier 2.2
declare export * from "ES6_ExportAllFrom_Source2"

// Prettier 2.3
declare export * from "ES6_ExportAllFrom_Source2";

Stöd för `this`-typannotation i funktioner via `babel-flow` (#10397 av @sosukesuzuki)

this-typannotation stöds sedan Babel 7.13.

// Input
var foo: (this: boolean) => void;

// Prettier 2.2
SyntaxError: Unexpected token, expected ")" (1:15)

// Prettier 2.3
var foo: (this: boolean) => void;

Åtgärda problem vid formatering av specifika intervall (#10505 av @thorn0)

Prettier hade tidigare problem med att formatera vissa intervall i funktionsdeklarationer. SyntaxError kunde kastas. Prettier 2.3 hanterar dessa fall utan fel. Exempel på problematiska intervall visas nedan:

declare export function graphql<Props, Variables, Component: React$ComponentType<Props>>
  //                            ^^^^^ range 1
  (query: GQLDocument, config?: Config<Props, QueryConfigOptions<Variables>>):
  (Component: Component) => React$ComponentType<$Diff<React$ElementConfig<Component>, {
    data: Object|void,
    //           ^^^^ range 2
    mutate: Function|void
  }>>

Stöd för Flows indextillgångstyp (#10594 av @gkz)

// Input
const x: Obj['foo'] = 1;

// Prettier 2.2
// Error: unsupported node type "IndexedAccessType"

// Prettier 2.3
const x: Obj["foo"] = 1;

Stöd för Flows valfria indextillgångstyp (#10788 av @gkz)

// Input
type T = Obj?.['foo'];

// Prettier 2.2
// Error: unsupported node type "OptionalIndexedAccessType"

// Prettier 2.3
type T = Obj?.['foo'];

JSON

Använd inte smarta citattecken för JSON5 med `--quote-props=preserve` (#10323 av @thorn0)

När alternativet quoteProps är satt till preserve och singleQuotes till false (standard), används alltid dubbelföråd för att skriva ut strängar, inklusive situationer som "bla\"bla". Detta gör det möjligt att använda --parser json5 för "JSON med kommentarer och avslutande kommatecken".

// Input
{
  "char": "\"",
}

// Prettier 2.2
{
  "char": '"',
}

// Prettier 2.3
{
  "char": "\"",
}

Strikare JSON-tolkning (#10346, #10443, #10456, #10434 av @fisker)

Prettier använder internt en JavaScript-uttryckstolkare för att tolka JSON. Därför var json- och json5-tolkarna tidigare mycket toleranta och tillät alla möjliga JavaScript-uttryck. Nu är de betydligt striktare, även om enkelt icke-standardiserat syntax fortfarande tillåts (t.ex. stöds JSON6, utom för flera minustecken: ----123).

// Input
[1, 2, 1 + 2]

// Prettier 2.2
[1, 2, 1 + 2]

// Prettier 2.3
SyntaxError: BinaryExpression is not allowed in JSON. (1:8)
> 1 | [1, 2, 1 + 2]
    |        ^

Förbättra felmeddelanden (#10433 av @fisker)

// Input
{key: "foo" + "bar"}

// Prettier 2.2 (--parser=json-stringify)
SyntaxError: BinaryExpression is not allowed in JSON. (1:7)
> 1 | {key: "foo" + "bar"}
    |       ^

// Prettier 2.3
SyntaxError: BinaryExpression is not allowed in JSON. (1:7)
> 1 | {key: "foo" + "bar"}
    |       ^^^^^^^^^^^^^

Åtgärda syntaxfel vid formatering av JSON-intervall (#10497 av @fisker)

// Input
[{ a: 1.0000}, {"b":   2.0000 }]
//                 ^^^^^^^^^^^ range

// Prettier 2.2
SyntaxError: Unexpected token (1:4)
> 1 | "b":   2.0000
    |    ^

// Prettier 2.3
[{ a: 1.0000}, { "b": 2.0 }]

CSS

Åtgärda absolut sökväg i anpassade CSS `-custom-url()`-anrop (#9966 av @vjeux)

CSS-tolkaren tolkar detta som ["division", "absolute/path"] istället för ett enda "/absolute/path"-token om det inte finns i ett url()-anrop. Eftersom vi lägger till mellanslag efter division blir resultatet en felaktig sökväg. Lösningen var att undvika att skriva ut mellanslag om en division är det första token i ett anrop, vilket förhoppningsvis är säkert.

/* Input */
-custom-url(/absolute/path)

/* Prettier 2.2 */
-custom-url(/ absolute/path)

/* Prettier 2.3 */
-custom-url(/absolute/path)

Exkludera `@keyframes`-parametrar från att tolkas som en Less-variabel (#10773 av @tmazeika)

/* Input */
@keyframes :global(spin) {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Prettier 2.2 */
@keyframes: global(spin){
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
};

/* Prettier 2.3 */
@keyframes :global(spin) {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

SCSS

Åtgärda trasig kommentar inom parenteser (#9710 av @fisker)

// Input
.simplification {
  foo: (
    calc() // not a comment anymore
  );
}

// Prettier 2.2
.simplification {
  foo: (calc() // not a comment anymore);
}

// Prettier 2.3
.simplification {
  foo: (
    calc() // not a comment anymore
  );
}

Åtgärda kartor med nycklar som är listor eller kartor (#10005 av @fisker)

// Input
$map: (
  ('my list'): 'hello world',
);

// Prettier 2.2
TypeError: Cannot read property 'length' of undefined

// Prettier 2.3
$map: (
  ("my list"): "hello world",
);

Ember / Handlebars

Bevara tilde-kommentarer (#9082 av @kangax, @fisker)

{{!-- Input --}}
{{~! Comment }}
{{! Comment ~}}
{{~! Comment ~}}

{{!-- Prettier 2.2 --}}
{{! Comment }}
{{! Comment }}
{{! Comment }}

{{!-- Prettier 2.3 --}}
{{~! Comment }}
{{! Comment ~}}
{{~! Comment ~}}

Lägg till ett blankstegskänsligt läge (#9885 av @dcyriller)

--html-whitespace-sensitivity strict

{{!-- Input --}}
<span>123 {{mustache}}</span>
<span>
123 {{mustache}}</span>
<span>123 {{mustache}}
</span>
<span>
123 {{mustache}}
</span>

{{!-- Prettier 2.2 --}}
<span>
  123 {{mustache}}
</span>
<span>
  123 {{mustache}}
</span>
<span>
  123 {{mustache}}
</span>
<span>
  123 {{mustache}}
</span>

{{!-- Prettier 2.3 --}}
<span>123 {{mustache}}</span>
<span>
  123
  {{mustache}}</span>
<span>123
  {{mustache}}
</span>
<span>
  123
  {{mustache}}
</span>

Skriv ut slutlig `blockParam` på en egen rad (#9978 av @dcyriller)

{{!-- Input --}}
<MyComponent @prop={{true}} @prop2={{true}} @prop3={{true}} @prop4={{true}} as |thing|></MyComponent>
{{#block param hashKey=hashValue hashKey=hashValue hashKey=hashValue as |blockParam|}}
  Hello
{{/block}}

{{!-- Prettier 2.2 --}}
<MyComponent
  @prop={{true}}
  @prop2={{true}}
  @prop3={{true}}
  @prop4={{true}} as |thing|
/>
{{#block
  param
  hashKey=hashValue
  hashKey=hashValue
  hashKey=hashValue as |blockParam|
}}
  Hello
{{/block}}

{{!-- Prettier 2.3 --}}
<MyComponent
  @prop={{true}}
  @prop2={{true}}
  @prop3={{true}}
  @prop4={{true}}
  as |thing|
/>
{{#block
  param
  hashKey=hashValue
  hashKey=hashValue
  hashKey=hashValue
  as |blockParam|
}}
  Hello
{{/block}}

Åtgärda formatering av attribut (#10145 av @thorn0)

åtgärda escapning av {{ i attribut och text
åtgärda valet mellan ' och " för attribut med interpolationer
åtgärda felet där [object Object] skrevs ut i class-attributet
implementera enkel formatering för class-attributet, som Prettier formaterade det i HTML före v2.3.0

{{!-- Input --}}
<div class="
foo"></div>
<div bar='"{{expr}}"'></div>
<div baz="\{{ non-expression }}"></div>

{{!-- Prettier 2.2 --}}
<div class="[object Object],foo"></div>
<div bar=""{{expr}}""></div>
<div baz="{{ non-expression }}"></div>

{{!-- Prettier 2.3 --}}
<div class="foo"></div>
<div bar='"{{expr}}"'></div>
<div baz="\{{ non-expression }}"></div>

Dela upp textinnehåll på flera rader (#10179 av @dcyriller)

{{!-- Input --}}
<div>
  A long enough string to trigger a line break that would prevent wrapping more and more.
</div>

{{!-- Prettier 2.2 --}}
<div>
  A long enough string to trigger a line break that would prevent wrapping more and more.
</div>

{{!-- Prettier 2.3 --}}
<div>
  A long enough string to trigger a line break that would prevent wrapping more
  and more.
</div>

Bevara numeriska teckenreferenser (#10550 av @rwjblue och @thorn0)

{{! Input }}
<span class="stampFont" style="font-family: 'stampfont'">&#xf000;</span>

{{! Prettier 2.2 }}
<span class="stampFont" style="font-family: 'stampfont'"></span>

{{! Prettier 2.3 }}
<span class="stampFont" style="font-family: 'stampfont'">&#xf000;</span>

Bryt inte upp inledande mustasch och sökväg (#10586 av @dcyriller)

{{!-- Input --}}
<GlimmerComponent
  @errors={{or this.aVeryLongProperty (and this.aProperty (v-get bike "number" "message"))}}
  data-test-beneficiary-account-number
/>
<GlimmerComponent
  @progress={{aPropertyEngdingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

{{!-- Prettier 2.2 --}}
<GlimmerComponent
  @errors={{
    or
    this.aVeryLongProperty
    (and this.aProperty (v-get bike "number" "message"))
  }}
  data-test-beneficiary-account-number
/>
<GlimmerComponent
  @progress={{
    aPropertyEngdingAfterEightiethColumnToHighlightAWeirdClosingParenIssue
  }}
/>

{{!-- Prettier 2.3 --}}
<GlimmerComponent
  @errors={{or
    this.aLongProperty
    (and this.aProperty (v-get bike "number" "message"))
  }}
  data-test-beneficiary-account-number
/>
<GlimmerComponent
  @progress={{aPropertyEngdingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

GraphQL

Åtgärda saknat blanktecken efter nyckelord i anonyma operationer (#10689 av @patriscus)

# Input
query ($unnamed: String) {
  id
}

# Prettier 2.2
query($unnamed: String) {
  id
}

# Prettier 2.3
query ($unnamed: String) {
  id
}

Markdown

Åtgärda extra tom rad i slutet av JavaScript-avgränsat kodblock med strängliteral (#9736 av @fisker)

<!-- Input -->
Markdown

```js
"· "
```

<!-- Prettier 2.2 -->
Markdown

```js
"· ";

```

<!-- Prettier 2.3 -->
Markdown

```js
"· ";
```

Åtgärda formatering av tomt front matter (#9791 av @fisker)

<!-- Input -->
---
---

# Title

a|b|c|
|:--|:-:|--:|
|d|e|f|

---

text

<!-- Prettier 2.2 -->
---
---
# Title

a|b|c|
|:--|:-:|--:|
|d|e|f|
---

text

<!-- Prettier 2.3 -->
---
---

# Title

| a   |  b  |   c |
| :-- | :-: | --: |
| d   |  e  |   f |

---

text

Stöd för YAML-dokumentslutmarkör i front matter (#9878 av @michaelbeaumont)

Lägg till möjligheten att avgränsa slutet av front matter med ....

<!-- Input -->
---
title: Hello
slug: home
...

Markdown

<!-- Prettier 2.2 -->
---

title: Hello
slug: home
...

Markdown

<!-- Prettier 2.3 -->
---
title: Hello
slug: home
...

Markdown

YAML

Åtgärda SyntaxError som kastades felaktigt på ankare följt av tomma rader (#10516 av @eemeli & @thorn0)

Prettier kunde inte tolka denna giltiga YAML. Tack till Eemeli Aro för att ha åtgärdat detta fel i den underliggande parsern.

# Input
key1: &default

  subkey1: value1

key2:
  <<: *default

# Prettier 2.2
SyntaxError: Nested mappings are not allowed in compact mappings (1:7)

# Prettier 2.3
key1: &default
  subkey1: value1

key2:
  <<: *default

API

Behandla `.prettierrc` som YAML vid formatering (#8105 av @fisker)

Filen .prettierrc kan skrivas antingen i JSON eller YAML. Tidigare, när Prettier formaterade den, antogs parsern vara json, vilket ledde till att ett SyntaxError kastades om innehållet var YAML. Nu behandlas den som en YAML-fil. Men om den är JSON kommer den att formateras som JSON (inte som JSON-liknande YAML).

Använd arrayer istället för `concat` (#9733 av @fisker, @thorn0)

För att förenkla koden för AST-skrivare har datastrukturen för konkateneringskommandot ändrats från { type: 'concat', parts: Doc[] } till Doc[]. Det gamla formatet är föråldrat, men för kompatibilitet stöder dokumentskrivaren fortfarande det, och doc.builders.concat (samt vissa andra byggarfunktioner) kommer att fortsätta använda det till nästa större version av Prettier.

Om du är plugin-utvecklare berör denna ändring endast dig om din plugin introspekterar eller modifierar sammansatta dokument. Om så är fallet, gör din plugin kompatibel med framtida Prettier-versioner genom att anpassa introspektionskoden för det nya formatet. Det finns också en liten risk att denna ändring kan orsaka problem, nämligen om en plugin anropar en annan plugin för att skriva ut ett inbäddat språk och sedan introspekterar det returnerade dokumentet. Men det verkar inte finnas någon anledning för plugins att göra detta.

För att ersätta concat(…)-anrop i dina plugins kan du prova automatisk fix med denna ESLint-regel prettier-doc/no-concat.

// Prettier 2.2
myDoc = group(concat(["foo", line, "bar"]));

// Prettier 2.3
myDoc = group(["foo", line, "bar"]);

Åtgärda `lineSuffixBoundary` IR-kommando (#10122 av @thorn0)

Det fanns en bugg i implementeringen av lineSuffixBoundary-kommandot som avsevärt begränsade dess användbarhet: skrivaralgoritmen behandlade det inte korrekt som en potentiell radbrytning. Nu när buggen är åtgärdad uppmanar vi plugin-utvecklare att prova detta kommando igen och se om det kan förenkla utskriften av efterföljande kommentarer.

// Input
group([
  "let foo = [",
  indent([
    softline,
    [lineSuffixBoundary, "item1,"],
    line,
    [lineSuffixBoundary, "item2,", lineSuffix(" // comment")],
    line,
    [lineSuffixBoundary, "item3"],
  ]),
  softline,
  "];",
])

// Prettier 2.2
let foo = [item1, item2,  // comment
  item3];

// Prettier 2.3
let foo = [
  item1,
  item2, // comment
  item3
];

Lägg till `indentIfBreak` IR-kommando (#10221 av @thorn)

indentIfBreak(doc, { groupId }) är en optimerad version av ifBreak(indent(doc), doc, { groupId }).

Förenklat `print`-återanrop (#10557 av @fisker)

Det tredje argumentet för print-metoden i plugin-skrivare (print-återanropet) har uppdaterats. Dess första argument kan nu vara en sträng eller en array av strängar.

För att skriva ut den aktuella noden, anropa print utan argument:

 function print(path, options, print) {
   const parts = [];
   path.each((childPath) => {
-    parts.push(print(childPath));
+    parts.push(print());
   }, "children");
   return parts;
 }

För att skriva ut en egenskap för den aktuella noden, använd "property" eller ["property"]:

 function print(path, options, print) {
-  return path.call(print, "property");
+  return print("property");
 }

För att skriva ut en underegenskap för den aktuella noden, använd ["property1", "property2"]:

 function print(path, options, print) {
   // print `node.child.child`
-  return path.call(print, "child", "child");
+  return print(["child", "child"]);
 }

Se även ett exempel i dokumentationen.

CLI

Lägg till CLI-alternativ för att förhindra fel vid omatchat mönster (#10058 av @daronmcintosh)

Prettiers CLI kommer nu inte längre att visa fel när inga filer matchar det globmönster som skickas som indata.

# Prettier 2.2
$ npx prettier --check "prettier/docs/*.yaml"
Checking formatting...
[error] No files matching the pattern were found: "prettier/docs/*.yaml".
All matched files use Prettier code style!

# Prettier 2.3
$ npx prettier --check --no-error-on-unmatched-pattern "prettier/docs/*.yaml"
Checking formatting...
All matched files use Prettier code style!

Lägg till CLI-flagga för felsökning av kommentarsbifogningar (#10124 av @thorn0)

En ny --debug-print-comments CLI-flagga och motsvarande funktionalitet för Playground.

Rundtur-kompatibel `--debug-print-doc` (#10169, #10177 av @thorn0)

Tanken är att göra utdata från --debug-print-doc närmare faktisk kod för att generera dokument (Prettiers mellanrepresentation). Idealet är att den ska fungera utan modifiering efter att ha kopierats in i en JS-fil. Det idealet har förmodligen inte uppnåtts helt i denna PR, men vi är ganska nära. Detta kommer att göra --debug-print-doc och motsvarande del av Playground lite mer användbara.

Skriv ut felmeddelande när `--find-config-path` inte hittar konfigurationsfil (#10208 av @fisker)

# Prettier 2.2
$ prettier --find-config-path /prettier.js
# Silently failed

# Prettier 2.3
$ prettier --find-config-path /prettier.js
[error] Can not find configure file for "/prettier.js"

Rensa utskrivna långa filnamn vid formatering av filer (#10217 av @fisker)

# Prettier 2.2
$ prettier tests/flow-repo/config_module_system_node_resolve_dirname --check
Checking formatting...
tests\flow-repo\config_module_system_node_resolve_dirname\custom_resolve_dir\tes
tests\flow-repo\config_module_system_node_resolve_dirname\custom_resolve_dir\tes
tests\flow-repo\config_module_system_node_resolve_dirname\subdir\custom_resolve_
All matched files use Prettier code style!

# Prettier 2.3
$ prettier tests/flow-repo/config_module_system_node_resolve_dirname --check
Checking formatting...
All matched files use Prettier code style!

Hoppa inte över filvägar som innehåller speciella ord som `constructor` (#10256 av @ashlkv)

Kataloger vars namn råkade sammanfalla med egenskaperna i Object.prototype ignorerades av Prettier CLI på grund av en klassisk bugg (introducerad i Prettier 2.0.0) där objektets egenskaper inte kontrollerades för att vara egna.

# Prettier 2.2
$ prettier "js/constructor/*.js" --write
[error] No matching files. Patterns: js/constructor/*.js

# Prettier 2.3
$ prettier "js/constructor/*.js" --write
js/constructor/test.js 42ms

Höjdpunkter​

JavaScript​

Formatera tilldelningar mer konsekvent (#10222, #10643, #10672 av @thorn0; #10158 av @sosukesuzuki)​

Förhindra radbrytning vid objektproperties med korta nycklar (#10335 av @thorn0)​

Ember / Handlebars​

Flytta Handlebars-stöd från alfa till release (#10290 av @dcyriller & @thorn0)​

Formateringsförbättringar​

JavaScript​

Förfina formateringen av curryade arrow-funktioner (#9992, #10543 av @sosukesuzuki & @thorn0)​

Förbättra formateringen för React Hooks-anrop (#10238 av @sosukesuzuki)​

Förbättra visuell separation mellan rubrik och kropp i klasser med flerradiga rubriker (#10085 av @sosukesuzuki)​

Kortfattad formatering av enbart numeriska arrayer (#10106, #10160 av @thorn0)​

Förbättra formateringen för nästade await-uttryck i huvuden av medlems- och anropsuttryck (#10342 av @thorn0)​

Förbättra formateringen för do-uttryck i funktionsanrop (#10693 av @sosukesuzuki)​

Konsekvent indrag för villkorsoperatorer (#10187, #10266 av @sosukesuzuki)​

HTML​

Prefixbaserad flerradsformatering för class-attributet (#7865 av @thorn0)​

Andra ändringar​

JavaScript​

Åtgärda instabila flera kommentarer på samma rad (#9672 av @fisker)​

Formatera inte noder som slutar precis före rangeStart (#9704 av @fisker)​

Åtgärda kommentarer inuti JSX-sluttagg (#9711 av @fisker)​

Åtgärda inkonsekvent språkkommentarsdetektering (#9743 av @fisker)​

Åtgärda extra semikolon som lades till ignorerade direktiv (#9850 av @fisker)​

Åtgärda instabil JSX-formatering med U+3000 (#9866 av @fisker)​

Åtgärda fel som kastades på uttryck som a(b => c => function (){}) (#10278 av @thorn0)​

Förbättra formatering för inline-dekoratörer (#10296 av @fisker)​

Åtgärda ASI-skydd för privata fält (#10334 av @thorn0)​

Stöd för Module Blocks-förslaget (#10417 av @sosukesuzuki, @thorn0)​

Åtgärda saknade parenteser för yield i en pipeline (#10446 av @fisker)​

Gör Babels felåterhämtning mer selektiv (#10495 av @fisker, #9787 av @sosukesuzuki, #10065, #10322 av @thorn0)​

Undvik att sista argumentet klamrar sig fast vid enbart siffer-arrayer (#10517 av @thorn0)​

Förbättra identifieringen av AMD define (#10528 av @thorn0)​

Åtgärda duplicerade prettier-ignore-kommentarer (#10666 av @fisker)​

Bearbeta villkorliga grupper i mapDoc (#10695 av @thorn0)​

Undvik argumentexpansion som leder till trasig kod (#10712 av @thorn0)​

Åtgärda saknade parenteser runt async i for-of (#10781 av @fisker)​

Stöd för förslaget om async do-uttryck (#10813 av @sosukesuzuki)​

TypeScript​

Åtgärda saknade kommentarer i MethodDefinition (#9872 av @fisker)​

Åtgärda onödiga radbrytningar i parametrar för metodtypdeklarationer (#10024 av @sosukesuzuki, #10357 av @thorn0)​

Skriv ut efterföljande kommatecken i typparametrar (#10109 av @sosukesuzuki, #10353 av @thorn0)​

Tillåt att argument som är icke-koncisapilfunktioner med returtypannotationer får behålla radbrytning (#10316 av @thorn0)​

Korrigera parenteser för non-null-assertioner (#10337 av @thorn0)​

Indentera typassertioner i huvuden av medlems- och anropsuttryck (#10341 av @thorn0)​

Stöd för intrinsic-nyckelord (#10390 av @sosukesuzuki)​

Stöd för TypeScript 4.2 (#10418, #10466, #10546, #10589 av @sosukesuzuki)​

abstract konstruktorssignaturer​

Typimport i import require-deklaration​

Fixa felplacerade kommentarer i unioner och snitt (#10457 av @thorn0)​

Skriv inte ut parenteser runt nästade typassertioner (#10702 av @thorn0)​

Stöd för TypeScript 4.3 via babel-ts (#10811 av @sosukesuzuki)​

override-modifierare i klasselement​

Statiska indexsignaturer ([key: KeyType]: ValueType) i klasser​

get / set i typdeklarationer​

Flow​

Åtgärda saknad semikolon i declare export * from … (#9767 av @fisker)​

Stöd för this-typannotation i funktioner via babel-flow (#10397 av @sosukesuzuki)​

Åtgärda problem vid formatering av specifika intervall (#10505 av @thorn0)​

Stöd för Flows indextillgångstyp (#10594 av @gkz)​

Stöd för Flows valfria indextillgångstyp (#10788 av @gkz)​

JSON​

Använd inte smarta citattecken för JSON5 med --quote-props=preserve (#10323 av @thorn0)​

Strikare JSON-tolkning (#10346, #10443, #10456, #10434 av @fisker)​

Förbättra felmeddelanden (#10433 av @fisker)​

Åtgärda syntaxfel vid formatering av JSON-intervall (#10497 av @fisker)​

CSS​

Åtgärda absolut sökväg i anpassade CSS -custom-url()-anrop (#9966 av @vjeux)​

Exkludera @keyframes-parametrar från att tolkas som en Less-variabel (#10773 av @tmazeika)​

SCSS​

Åtgärda trasig kommentar inom parenteser (#9710 av @fisker)​

Åtgärda kartor med nycklar som är listor eller kartor (#10005 av @fisker)​

Ember / Handlebars​

Bevara tilde-kommentarer (#9082 av @kangax, @fisker)​

Lägg till ett blankstegskänsligt läge (#9885 av @dcyriller)​

Skriv ut slutlig blockParam på en egen rad (#9978 av @dcyriller)​

Åtgärda formatering av attribut (#10145 av @thorn0)​

Dela upp textinnehåll på flera rader (#10179 av @dcyriller)​

Bevara numeriska teckenreferenser (#10550 av @rwjblue och @thorn0)​

Bryt inte upp inledande mustasch och sökväg (#10586 av @dcyriller)​

Höjdpunkter

JavaScript

Formatera tilldelningar mer konsekvent (#10222, #10643, #10672 av @thorn0; #10158 av @sosukesuzuki)

Förhindra radbrytning vid objektproperties med korta nycklar (#10335 av @thorn0)

Ember / Handlebars

Flytta Handlebars-stöd från alfa till release (#10290 av @dcyriller & @thorn0)

Formateringsförbättringar

JavaScript

Förfina formateringen av curryade arrow-funktioner (#9992, #10543 av @sosukesuzuki & @thorn0)

Förbättra formateringen för React Hooks-anrop (#10238 av @sosukesuzuki)

Förbättra visuell separation mellan rubrik och kropp i klasser med flerradiga rubriker (#10085 av @sosukesuzuki)

Kortfattad formatering av enbart numeriska arrayer (#10106, #10160 av @thorn0)

Förbättra formateringen för nästade await-uttryck i huvuden av medlems- och anropsuttryck (#10342 av @thorn0)

Förbättra formateringen för `do`-uttryck i funktionsanrop (#10693 av @sosukesuzuki)

Konsekvent indrag för villkorsoperatorer (#10187, #10266 av @sosukesuzuki)

HTML

Prefixbaserad flerradsformatering för `class`-attributet (#7865 av @thorn0)

Andra ändringar

JavaScript

Åtgärda instabila flera kommentarer på samma rad (#9672 av @fisker)

Formatera inte noder som slutar precis före `rangeStart` (#9704 av @fisker)

Åtgärda kommentarer inuti JSX-sluttagg (#9711 av @fisker)

Åtgärda inkonsekvent språkkommentarsdetektering (#9743 av @fisker)

Åtgärda extra semikolon som lades till ignorerade direktiv (#9850 av @fisker)

Åtgärda instabil JSX-formatering med U+3000 (#9866 av @fisker)

Åtgärda fel som kastades på uttryck som `a(b => c => function (){})` (#10278 av @thorn0)

Förbättra formatering för inline-dekoratörer (#10296 av @fisker)

Åtgärda ASI-skydd för privata fält (#10334 av @thorn0)

Stöd för Module Blocks-förslaget (#10417 av @sosukesuzuki, @thorn0)

Åtgärda saknade parenteser för `yield` i en pipeline (#10446 av @fisker)

Gör Babels felåterhämtning mer selektiv (#10495 av @fisker, #9787 av @sosukesuzuki, #10065, #10322 av @thorn0)

Undvik att sista argumentet klamrar sig fast vid enbart siffer-arrayer (#10517 av @thorn0)

Förbättra identifieringen av AMD `define` (#10528 av @thorn0)

Åtgärda duplicerade `prettier-ignore`-kommentarer (#10666 av @fisker)

Bearbeta villkorliga grupper i `mapDoc` (#10695 av @thorn0)

Undvik argumentexpansion som leder till trasig kod (#10712 av @thorn0)

Åtgärda saknade parenteser runt `async` i `for-of` (#10781 av @fisker)

Stöd för förslaget om `async do`-uttryck (#10813 av @sosukesuzuki)

TypeScript

Åtgärda saknade kommentarer i `MethodDefinition` (#9872 av @fisker)

Åtgärda onödiga radbrytningar i parametrar för metodtypdeklarationer (#10024 av @sosukesuzuki, #10357 av @thorn0)

Skriv ut efterföljande kommatecken i typparametrar (#10109 av @sosukesuzuki, #10353 av @thorn0)

Tillåt att argument som är icke-koncisapilfunktioner med returtypannotationer får behålla radbrytning (#10316 av @thorn0)

Korrigera parenteser för non-null-assertioner (#10337 av @thorn0)

Indentera typassertioner i huvuden av medlems- och anropsuttryck (#10341 av @thorn0)

Stöd för intrinsic-nyckelord (#10390 av @sosukesuzuki)

Stöd för TypeScript 4.2 (#10418, #10466, #10546, #10589 av @sosukesuzuki)

`abstract` konstruktorssignaturer

Typimport i import require-deklaration

Fixa felplacerade kommentarer i unioner och snitt (#10457 av @thorn0)

Skriv inte ut parenteser runt nästade typassertioner (#10702 av @thorn0)

Stöd för TypeScript 4.3 via `babel-ts` (#10811 av @sosukesuzuki)

`override`-modifierare i klasselement

Statiska indexsignaturer (`[key: KeyType]: ValueType`) i klasser

`get` / `set` i typdeklarationer

Flow

Åtgärda saknad semikolon i `declare export * from …` (#9767 av @fisker)

Stöd för `this`-typannotation i funktioner via `babel-flow` (#10397 av @sosukesuzuki)

Åtgärda problem vid formatering av specifika intervall (#10505 av @thorn0)

Stöd för Flows indextillgångstyp (#10594 av @gkz)

Stöd för Flows valfria indextillgångstyp (#10788 av @gkz)

JSON

Använd inte smarta citattecken för JSON5 med `--quote-props=preserve` (#10323 av @thorn0)

Strikare JSON-tolkning (#10346, #10443, #10456, #10434 av @fisker)

Förbättra felmeddelanden (#10433 av @fisker)

Åtgärda syntaxfel vid formatering av JSON-intervall (#10497 av @fisker)

CSS

Åtgärda absolut sökväg i anpassade CSS `-custom-url()`-anrop (#9966 av @vjeux)

Exkludera `@keyframes`-parametrar från att tolkas som en Less-variabel (#10773 av @tmazeika)

SCSS

Åtgärda trasig kommentar inom parenteser (#9710 av @fisker)

Åtgärda kartor med nycklar som är listor eller kartor (#10005 av @fisker)

Ember / Handlebars

Bevara tilde-kommentarer (#9082 av @kangax, @fisker)

Lägg till ett blankstegskänsligt läge (#9885 av @dcyriller)

Skriv ut slutlig `blockParam` på en egen rad (#9978 av @dcyriller)

Åtgärda formatering av attribut (#10145 av @thorn0)

Dela upp textinnehåll på flera rader (#10179 av @dcyriller)

Bevara numeriska teckenreferenser (#10550 av @rwjblue och @thorn0)

Bryt inte upp inledande mustasch och sökväg (#10586 av @dcyriller)