Prettier 2.0 “2020”

21 mars 2020 · 35 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 →

Bättre standardvärden, ett förbättrat CLI och smartare heuristik. Och förresten, TypeScript 3.8.

Efter lång och noggrann övervägande har vi beslutat att ändra standardvärdena för alternativen trailingComma, arrowParens och endOfLine. Vi har gjort CLI:t mer intuitivt. Och äntligen har vi tagit bort stödet för Node-versioner äldre än 10, vilket hade blivit ett stort underhållsbesvär och ett hinder för bidragsgivare. Läs mer i detalj nedan.

Höjdpunkter

JavaScript

Förbättrad heuristik för metodkedjebrytning (#6685 av @mmkal)

Tidigare bröts alla metodanropskedjor med tre eller fler länkar automatiskt upp på flera rader. Den nya heuristiken baseras på komplexiteten hos anropsargumenten i kedjan, snarare än enbart på kedjans längd. Nu bryts kedjan om kedjade metodanrop har argument som inte är lätta att förstå vid första anblick (t.ex. funktioner eller djupt nästlade objekt). Annars får de stå kvar på en rad. Se tidigare ärenden #3197, #4765, #1565 och #4125 för bakgrund och exempel.

För bästa resultat, se till att ditt värde för alternativet printWidth inte är för högt.

// Prettier 1.19
if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

Slutgiltig fix för Closure-typomgjutningar (#7791 av @thorn0, #7011 av @evilebottnawi)

Prettier har försökt undvika att korrumpera dessa JSDoc-typassertioner sedan v1.6.0, med varierande resultat. När typkontroll via JSDoc blivit allt vanligare har vi fått fler felrapporter om denna syntax. Buggarna var knepiga eftersom de nödvändiga parenteserna runt uttrycket inte ingick i AST-trädet, så Prettier hade inget bra sätt att upptäcka när de fanns.

Till slut använde vi Babel-parserns alternativ createParenthesizedExpressions för att representera parenteser i AST-trädet via icke-standardnoder. Detta löste alla rapporterade buggar.

Följaktligen kommer Prettier inte att känna igen JSDoc-typomgjutningar om parsern flow eller typescript används, vilket är rimligt eftersom denna syntax är meningslös i Flow- och TypeScript-filer.

// Input
const nestedAssertions = /** @type {MyType} */
  (/** @type {unknown} */
      (x));

// Prettier 1.19
const nestedAssertions /** @type {MyType} */ /** @type {unknown} */ = x;

// Prettier 2.0
const nestedAssertions = /** @type {MyType} */ (/** @type {unknown} */ (x));

Referensdokumentation för denna syntax: Closure Compiler, TypeScript (med --checkJs).

TypeScript

TypeScript 3.8 (#7631 av @thorn0, #7764 av @sosukesuzuki, #7804 av @sosukesuzuki)

Prettier stöder nu den nya syntaxen i TypeScript 3.8:

CLI

Testa om angivna globs är existerande filnamn innan de behandlas som globs (#7587 by @fisker)

Eftersom filnamn i Linux kan innehålla nästan vilka tecken som helst är strängar som foo*.js och [bar].css giltiga filnamn. Tidigare behövde användare använda glob-escape-syntax för att formatera en fil som heter [bar].css: prettier "\[bar].css" (fungerar inte på Windows) eller prettier "[[]bar].css". Detta bröt viktiga användningsfall, t.ex. när lint-staged skickar absoluta sökvägar utan kunskap om escape-syntax. Nu testar Prettier CLI först om en glob matchar ett existerande filnamn.

Expandera kataloger, inklusive `.` (#7660 by @thorn0)

Nu kan du äntligen köra prettier --write . för att formatera alla filer i aktuell katalog och underkataloger. Katalognamn kan blandas med filnamn och glob-mönster (t.ex. prettier src "test/*.spec.js" foo.js).

Ordningen för filbearbetning har också ändrats. Tidigare sorterades alla filer alfabetiskt före formatering. Nu motsvarar ordningen angivna sökvägars ordning. För varje sökväg sorteras matchande filer, men den fullständiga sorteringen av den sammanslagna listan utförs inte längre.

Prettier CLI rapporterar nu fel annorlunda om sökvägar inte matchar några filer. Tidigare skrev CLI ut ett "No matching files"-fel om inga filer hittades för alla mönster tillsammans. I Prettier 2.0 skrivs sådana fel ut även för individuella mönster.

Brytande ändringar

API

Förbättra mönstermatchning för konfigurationsöverstyrningar att inkludera punktfiler (#5813 by @chrisblossom)

Tidigare applicerades inte konfigurationsöverstyrningar på filer vars namn börjar med en punkt.

Sluta stödja Node-versioner äldre än 10 (#6908 by @fisker)

Minsta krävda Node-version är nu 10.13.0. För bidragsgivare innebär detta att man inte längre behöver anpassa tester för Node 4.

Ändra standardvärde för `trailingComma` till `es5` (#6963 by @fisker)

Före version 2.0 undvek Prettier efterföljande kommatecken som standard. Detta gjorde JavaScript-kompatibel med gamla miljöer som IE8, men innebar missade möjligheter.

Prettier har erbjudit en inställning för att konfigurera avslutande kommatecken sedan tidiga dagar, och ett initiativ att ändra standardvärdet har funnits i över tre år. Äntligen blir standardvärdet es5 istället för none i Prettier v2.0.

Om du fortfarande föredrar det gamla beteendet, konfigurera Prettier med { "trailingComma": "none" }. Det finns en möjlighet att standardvärdet kommer att ändras till all (som betyder ännu fler avslutande kommatecken) i en framtida huvudversion av Prettier när JavaScript-ekosystemet mognar ytterligare.

Plugin-API: ändringar i `prettier.util` (#6993 av @fisker)

prettier.util.mapDoc har tagits bort.
Använd prettier.doc.utils.mapDoc istället.
prettier.util.isNextLineEmpty har uppdaterats.
Använd isNextLineEmpty(text, node, locEnd) istället för isNextLineEmpty(text, node, options).
prettier.util.isPreviousLineEmpty har uppdaterats.
Använd isPreviousLineEmpty(text, node, locStart) istället för isPreviousLineEmpty(text, node, options).
prettier.util.getNextNonSpaceNonCommentCharacterIndex har uppdaterats.
Använd getNextNonSpaceNonCommentCharacterIndex(text, node, locEnd) istället för getNextNonSpaceNonCommentCharacterIndex(text, node, options).

Ändra standardvärdet för `arrowParens` till `always` (#7430 av @kachkaev)

Sedan version 1.9 har Prettier haft en inställning att alltid sätta parenteser runt argument i pilfunktioner. I version 2.0 har detta beteende blivit standard.

// Input
const fn = (x) => y => x + y;

// Prettier 1.19
const fn = x => y => x + y;

// Prettier 2.0
const fn = (x) => (y) => x + y;

Vid första anblick kan det verka bättre att undvika parenteser i det isolerade exemplet ovan eftersom det ger mindre visuell rörelse. Men när Prettier tar bort parenteser blir det svårare att lägga till typannoteringar, extra argument, standardvärden eller en rad andra saker. Konsekvent användning av parenteser ger en bättre utvecklarupplevelse vid redigering av riktiga kodbaser, vilket motiverar ändringen.

Vi rekommenderar det nya standardvärdet, men om du fortfarande föredrar det gamla beteendet, konfigurera Prettier med { "arrowParens": "avoid" }.

Ändra standardvärdet för `endOfLine` till `lf` (#7435 av @kachkaev)

Tidiga versioner av Prettier formaterade alla filer med *nix-versionen av radslut (\n, även kallat LF). Detta beteende ändrades i #472, vilket tillät bevarande av Windows-radslut (\r\n, även kallat CRLF).

Sedan Prettier version 1.15 har radslutstypen varit konfigurerbar via alternativet endOfLine. Standardvärdet sattes till auto för bakåtkompatibilitet, vilket innebar att Prettier behöll den radslutstyp som redan fanns i en given fil.

Det innebar att Prettier konverterade blandade radslut inom en fil till det som hittades i slutet av första raden. Men radslut i separata filer kunde fortfarande förbli inkonsekventa. Dessutom kunde bidragsgivare på olika operativsystem oavsiktligt ändra radslut i tidigare incheckade filer, och detta var acceptabelt för Prettier. Detta skulle skapa en stor git diff och därmed göra rad-för-rad-historiken för en fil (git blame) svårare att utforska.

Du uppmuntras att använda det nya standardvärdet för endOfLine, som nu är lf. Det kan också vara värt att kolla alternativdokumentationen för att säkerställa att ditt projektarkiv är korrekt konfigurerat. Detta hjälper dig att undvika en blandning av radslut i repot och en trasig git blame. Om det gamla beteendet fortfarande föredras, konfigurera Prettier med { "endOfLine": "auto" }.

Om du använder Travis CI, var medveten om autocrlf-alternativet i .travis.yml.

Cachelagra pluginsökresultat (#7485 av @fisker)

Tidigare sökte Prettier filsystemet efter plugins vid varje prettier.format-anrop. Nu cachelagras sökresultaten. Cachen kan töras genom att anropa prettier.clearConfigCache().

Ta bort föråldrade alternativ och alternativvärden (#6993, #7511, #7533, #7535, #7536 av @fisker)

Alternativ:
- useFlowParser (--flow-parser i CLI) har varit föråldrat sedan v0.0.10.
Alternativvärden:
- parser: babylon (bytt namn till babel i v1.16.0), postcss (bytt namn till css i v1.7.1), typescript-eslint (gammalt alias för typescript)
- proseWrap: true (bytt namn till always i v1.9.0), false (bytt namn till never i v1.9.0)
- trailingComma: true (bytt namn till es5 i v0.19.0), false (bytt namn till none i v0.19.0)

Ta bort `version`-parametern i `prettier.getSupportInfo` (#7620 av @thorn0)

Sedan Prettier 1.8.0 gick det att skicka ett versionsnummer till prettier.getSupportInfo för att få information om språk, alternativ, etc. som stöddes i tidigare versioner. Detta intressanta men tydligen inte särskilt användbara API orsakade ständigt underhållsproblem och har tagits bort i Prettier 2.0.0.

Andra ändringar

JavaScript

Lägg alltid till ett mellanslag efter `function`-nyckelordet (#3903 av @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 av @bakkot)

Tidigare lades ett mellanslag till efter function-nyckelordet i funktionsdeklarationer, men inte i funktionsuttryck. Nu läggs för konsekvensens skull alltid till ett mellanslag efter function-nyckelordet. Enda undantaget är generator-deklarationer där function* behandlas som ett helt ord.

// Prettier 1.19
const identity = function(value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function<T>(value: T) {};
const g = function*() {};

// Prettier 2.0
const identity = function (value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function <T>(value: T) {};
const g = function* () {};

Fixa instabil formatering av märkta uttryck med kommentarer (#6984 av @clement26695)

// Input
loop1:
//test
const i = 3;

// Prettier 1.19 (first output)
loop1: //test
const i = 3;

// Prettier 1.19 (second output)
//test
loop1: const i = 3;

// Prettier 2.0 (first and second outputs)
//test
loop1: const i = 3;

Fixa formatering av logiska, binära och sekvensuttryck i malliteraler (#7010 av @evilebottnawi)

// Input
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo || bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo | bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo, bar)}`;

// Prettier 1.19
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo ||
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo |
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo,
bar)}`;

// Prettier 2.0
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo || bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo | bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  (foo, bar)
}`;

Fixa instabil formatering av logiska uttryck (#7026 av @thorn0)

// Input
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  (askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3);

// Prettier 1.19 (first output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 1.19 (second output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 2.0 (first and second outputs)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

Formatera `throw` som `return` (#7070 av @sosukesuzuki)

// Input
function foo() {
  throw this.hasPlugin("dynamicImports") && this.lookahead().type === tt.parenLeft.right;
}

// Prettier 1.19
function foo() {
  throw this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right;
}


// Prettier 2.0
function foo() {
  throw (
    this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right
  );
}

Fixa indrag i ternärer nästlade i villkor av andra ternärer (#7087 av @thorn0)

// Input
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20) ?
kochabCooieGameOnOboleUnweave : annularCooeedSplicesWalksWayWay)
? anodyneCondosMalateOverateRetinol : averredBathersBoxroomBuggyNurl;

// Prettier 1.19
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
? kochabCooieGameOnOboleUnweave
: annularCooeedSplicesWalksWayWay)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

// Prettier 2.0
const foo = (
  number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
    ? kochabCooieGameOnOboleUnweave
    : annularCooeedSplicesWalksWayWay
)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

Finjustera funktionskompositionslogik för dekoratörer (#7138 av @brainkim)

Eftersom dekoratörer modifierar följande rad kan uppdelning av ett dekoratörans argument över flera rader dölja sambandet mellan dekoratören och dess avsedda mål, vilket ger mindre läsbar kod. Därför har funktionskompositionslogiken introducerad i #6033 ändrats för att utesluta dekoratörer.

// Input
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

// Prettier 1.19
export class Item {
  @OneToOne(
    () => Thing,
    x => x.item,
  )
  thing!: Thing;
}

// Prettier 2.0
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

Korrekt semikolonplacering i tomma `return`-uttryck med kommentarer (#7140 av @sosukesuzuki)

// Input
return // comment
;

// Prettier 1.19
return // comment;

// Prettier 2.0
return; // comment

Respektera blankteckens betydelse i HTML-malliteraler (#7208 av @saschanaz)

Prettier hade tidigare lagt till radbrytningar för varje HTML-mallsträng, vilket kunde leda till oväntade blanktecken i renderad HTML. Detta händer inte längre om inte alternativet --html-whitespace-sensitivity ignore anges.

// Input
html`<div>`;
html`  <span>TEXT</span>  `;

// Prettier 1.19
html`
  <div></div>
`;
html`
  <span>TEXT</span>
`;

// Prettier 2.0
html`<div></div>`;
html` <span>TEXT</span> `;

Ta bort onödiga parenteser vid användning av yield med JSX (#7367 av @cola119)

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

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

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

Behåll parenteser runt kommauttryck i standardexportdeklarationer (#7491 av @fisker)

Att utelämna dessa parenteser gör koden ogiltig.

// Input
export default (1, 2);

// Prettier 1.19
export default 1, 2;

// Prettier 2.0
export default (1, 2);

Fixa kantfall med parenteser runt optional chaining (#7500 av @thorn0)

// Input
(foo?.bar)();
new (foo?.bar)();

// Prettier 1.19
foo?.bar();
new foo?.bar();

// Prettier 2.0
(foo?.bar)();
new (foo?.bar)();

Lägg inte in parenteser kring `undefined` i villkorsuttryck inom JSX (#7504 av @fisker)

Tidigare lades parenteser till runt alla uttryck utom null. Nu undantas även undefined.

// Input
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
undefined
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
null

// Prettier 1.19
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : (
  undefined
);
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

// Prettier 2.0
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : undefined;
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

Behåll kommentarers position för tilldelningar/variabler (#7709 av @sosukesuzuki)

// Input
const foo = /* comments */
  bar;

// Prettier 1.19
const foo /* comments */ = bar;

// Prettier 2.0
const foo = /* comments */ bar;

TypeScript

Babel som alternativ parser för TypeScript (#6400 av @JounQin & @thorn0)

Ett nytt värde för alternativet parser har lagts till: babel-ts, som använder Babels TypeScript-plugin. babel-ts-parsern stöder JavaScript-funktioner som ännu inte stöds av TypeScript (ECMAScript-förslag, t.ex. privata metoder och accessorer), men är mindre tolerant vid felhantering och mindre beprövad än typescript-parsern. Även om Babels TypeScript-plugin är ganska mogen så är AST:n från de två parsrarna inte 100% kompatibla. Vi har försökt ta hänsyn till avvikelserna, men det finns troligen fortfarande fall där kod formateras annorlunda eller till och med felaktigt. Vi ber er, våra användare, att hjälpa oss hitta sådana fall. Om ni stöter på dem, vänligen rapportera ärenden. Långsiktigt kommer detta hjälpa till med att enhetliggöra AST-formatet i framtida parser-versioner och därmed bidra till ett bättre, mer robust JavaScript-parser-ekosystem.

Åtgärda formatering av komplexa typer i returtypannoteringar för pilfunktioner (#6901 av @sosukesuzuki)

// Input
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

// Prettier 1.19
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<Collections.Parts.PrintedCircuitBoardAssembly["attributes"] &
  undefined> => {};

// Prettier 2.0
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

Skriv ut JSDoc-typer som de är istället för att kasta fel (#7020 av @thorn0)

Ytterligare en fix relaterad till felåterställning. Kommer vara användbar för dem som migrerar från Flow till TypeScript.

// Input
function fromFlow(arg: ?Maybe) {}

// Prettier 1.19
Error: unknown type: "TSJSDocNullableType"

// Prettier 2.0
function fromFlow(arg: ?Maybe) {}

Skriv inte ut avslutande kommatecken efter restelement i tupler (#7075 av @thorn0)

Ett restelement är alltid det sista elementet i en tupeltyp. Inget kan läggas till efter det.
Även om TS accepterar detta kommatecken tolkar inte Babel det
I funktionsparametrar och array-destrukturering är ett sådant kommatecken ett syntaxfel. Att behålla det i tupler är inkonsekvent.

// Input
type ValidateArgs = [
	{
		[key: string]: any;
	},
	string,
	...string[],
];

// Prettier 1.19
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[],
];

// Prettier 2.0
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[]
];

Åtgärda indentering av pilfunktioner i variabeldeklarationer följda av kommentarer (#7094 av @sosukesuzuki)

Detta kunde inträffa med kod skriven i semikolonfri stil om satsen efter variabeldeklarationen hade ett inledande semikolon för att undvika ASI-problem.

// Input
const foo = () => {
  return
}

// foo
;[1,2,3].forEach(bar)

// Prettier 1.19
const foo = () => {
    return;
  };

  // foo
[1, 2, 3].forEach(bar);

// Prettier 2.0
const foo = () => {
  return;
};

// foo
[1, 2, 3].forEach(bar);

Åtgärda utskrift av kommentarer i funktionstyper (#7104 av @thorn0)

// Input
type f1 = (
  currentRequest: {a: number},
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

// Prettier 1.19
type f1 = (currentRequest: {
  a: number;
}) => // TODO this is a very very very very long comment that makes it go > 80 columns
number;

// Prettier 2.0
type f1 = (
  currentRequest: { a: number }
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

Åtgärda formatering av kommentarer för funktionsliknande noder (#7144 av @armano2)

// Input
interface foo1 {
  bar1/* foo */ (/* baz */) // bat
  bar2/* foo */ ? /* bar */ (/* baz */) /* bat */;
  bar3/* foo */ (/* baz */) /* bat */
  bar4/* foo */ ? /* bar */ (bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new /* bar */  (a: /* baz */ string): /* bat */ string
  /* foo */ new /* bar */ (/* baz */): /* bat */ string
}

type foo7 = /* foo */ (/* bar */) /* baz */ => void
type foo8 = /* foo */ (a: /* bar */ string) /* baz */ => void
let foo9: new /* foo */ (/* bar */) /* baz */ => string;
let foo10: new /* foo */ (a: /* bar */ string) /* baz */ => string;

// Prettier 1.19
interface foo1 {
  bar1 /* foo */ /* baz */(); // bat
  bar2 /* foo */ /* bar */ /* baz */ /* bat */?();
  bar3 /* foo */ /* baz */() /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (): /* bar */ /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (): /* bar */ /* baz */ /* bat */ string;
}

type foo7 = /* foo */ () => /* bar */ /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new () => /* foo */ /* bar */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Prettier 2.0
interface foo1 {
  bar1 /* foo */(/* baz */); // bat
  bar2 /* foo */ /* bar */?(/* baz */) /* bat */;
  bar3 /* foo */(/* baz */) /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (/* baz */): /* bar */ /* bat */ string;
}

type foo7 = /* foo */ (/* bar */) => /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new (/* bar */) => /* foo */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Input
abstract class Test {
  abstract foo12 /* foo */ (a: /* bar */ string): /* baz */ void
  abstract foo13 /* foo */ (/* bar */) /* baz */
}

// Prettier 1.19
Error: Comment "foo" was not printed. Please report this error!

// Prettier 2.0
abstract class Test {
  abstract foo12 /* foo */(a: /* bar */ string): /* baz */ void;
  abstract foo13 /* foo */(/* bar */); /* baz */
}

Åtgärda utskrift av mappade typer med utelämnad malltyp (#7221 av @cola119)

// Input
type A = { [key in B] };

// Prettier 1.19
type A = { [key in B]: };

// Prettier 2.0
type A = { [key in B] };

Åtgärda edge cases vid utskrift av indexsignaturer (#7228 by @cola119)

Även om indexsignaturer utan typannoteringar eller med flera parametrar inte är giltig TypeScript, stöder TypeScript-parsern denna syntax. I enlighet med tidigare ansträngningar för felåterhämtning säkerställer Prettier nu att dess utdata fortfarande kan parsas i dessa fall. Tidigare versioner producerade okod som inte kunde tolkas.

// Input
type A = { [key: string] };
type B = { [a: string, b: string]: string; };

// Prettier 1.19
type A = { [key: string]:  };
type B = { [a: stringb: string]: string };

// Prettier 2.0
type A = { [key: string] };
type B = { [a: string, b: string]: string };

Åtgärda utskrift av kommentarer i tomma typparametrar (#7729 by @sosukesuzuki)

// Input
const a: T</* comment */> = 1;

// Prettier 1.19
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.0
const a: T</* comment */> = 1;

Flow

Lägg till stöd för `symbol` (#7472 by @fisker)

En ny AST-nodtyp introducerades i flow@0.114.0 och stöds nu.

// Input
const x: symbol = Symbol();

// Prettier after updating Flow, but without this fix
Error: unknown type: "SymbolTypeAnnotation"

// Prettier 2.0
const x: symbol = Symbol();

Lägg till stöd för dekoratorer (#7482 by @fisker)

// Input
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

// Prettier 1.19
SyntaxError: Unexpected token `@`, expected the token `class` (2:1)

// Prettier 2.0
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

Åtgärda deklarationer av privata klassfält (#7484 by @fisker)

// Input
class Foo {
  #privateProp: number;
}

// Prettier 1.19
class Foo {
  privateProp: number;
}

// Prettier 2.0
class Foo {
  #privateProp: number;
}

CSS

Använd inte gemener för elementnamn i CSS-selektorer (#6947 by @ark120202)

Tidigare bevarade Prettier versaler/gemener för okända elementnamn, men använde gemener för HTML-element.
Detta orsakade problem när CSS applicerades på ett skiftlägeskänsligt dokument och det fanns ett element med samma namn som i HTML, vilket är fallet i NativeScript.
Prettier bevarar nu alltid ursprunglig skiftlägeshantering.

/* Input */
Label {
}

/* Prettier 1.19 */
label {
}

/* Prettier 2.0 */
Label {
}

SCSS

Lägg inte till extra kommatecken efter sista kommentaren i map (#6918 by @fisker)

Tidigare lades ett extra kommatecken till efter sista kommentaren i en SCSS-map när trailingComma var satt till es5.

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

// Prettier 1.19
$my-map: (
  "foo": 1,
  // Comment
    "bar": 2,
  // Comment,
);

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

Åtgärda blanksteg vid konkatenering i SCSS (#7211 by @sasurau4)

// Input
a {
  background-image: url($test-path + 'static/test.jpg');
}

// Prettier 1.19
a {
  background-image: url($test-path+"static/test.jpg");
}

// Prettier 2.0
a {
  background-image: url($test-path + "static/test.jpg");
}

Less

Åtgärda flera långvariga problem genom uppdatering av `postcss-less` (#6981 by @fisker, #7021 by @evilebottnawi, @thorn0)

each stöds nu (#5653).
!important flyttades ut ur parametrar för mixin-anrop (#3544).
Kommentarer i rulesets som skickades till mixin-anrop orsakade dubbla semikolon (#3096).
::before var trasigt i parametrar för mixin-anrop (#5791).

HTML

Kommentarer i `pre`-taggar orsakade felformatering av efterföljande stängningstag (#5959 by @selvazhagan)

<!-- Input -->
<details>
<pre>
    <!-- TEST -->
  </pre></details>

<!-- Prettier 1.19 -->
<details>
  <pre>
    <!-- TEST -->
  </pre></details</details
>

<!-- Prettier 2.0 -->
<details>
  <pre>
    <!-- TEST -->
  </pre>
</details>

Behandla inte kolon som avgränsare för namnrymdsprefix i tagnamn (#7273 by @fisker)

I HTML5 har kolon ingen speciell betydelse i tagnamn. Tidigare behandlade Prettier dem på XML-sättet som avgränsare för namnrymdsprefix, men inte längre. I praktiken innebär detta att taggar vars förfäder har kolon i sina namn nu behandlas som vanliga HTML-taggar: om de är kända standardtaggar kan deras namn göras med gemener och antaganden kan göras om deras blankstegskänslighet; anpassade element vars namn är okända för Prettier behåller versaliseringen av sina namn och behandlas som inline om --html-whitespace-sensitivity är inställd på css.

<!-- Input -->
<with:colon>
<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
<DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div><div> block </div>
<pre> pre pr
e</pre>
<textarea> pre-wrap pr
e-wrap </textarea>
<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
</with:colon>

<!-- Prettier 1.19 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div
  ><div> block </div>
  <pre> pre pr e</pre>
  <textarea> pre-wrap pr e-wrap </textarea>
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

<!-- Prettier 2.0 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <pre>
 pre pr
e</pre
  >
  <textarea>
 pre-wrap pr
e-wrap </textarea
  >
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

Kastar inte längre fel vid trasig HTML (#7293 by @fisker)

<!-- Input -->
<div><span>
<

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<div><span> < </span></div>

Åtgärdat tolkningsfel för srcset (#7295 by @fisker)

<!-- Input -->
<img

srcset="
             /media/examples/surfer-240-200.jpg
">

<!-- Prettier 1.19 -->
Error: Mixed descriptor in srcset is not supported

<!-- Prettier 2.0 -->
<img srcset="/media/examples/surfer-240-200.jpg" />

Åtgärdat fel vid oavslutad tagg i `pre`-tagg (#7392 by @fisker)

<!-- Input -->
<pre><br /></pre>
<pre><hr></pre>

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<pre><br /></pre>
<pre><hr /></pre>

Åtgärdat inkonsekvent formatering av självstängande taggar (#7395 by @fisker)

<!-- Input -->
<span><input type="checkbox"/> </span>
<span><span><input type="checkbox"/></span></span>
<span><input type="checkbox"/></span>

<!-- Prettier 1.19 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox"/></span
></span>
<span><input type="checkbox"/></span>

<!-- Prettier 2.0 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox" /></span
></span>
<span><input type="checkbox" /></span>

Åtgärdat oväntat tillagda tomma rader efter `table`-taggar (#7461 by @ikatyang)

<!-- Input -->
<table><tr>
</tr>
</table><div>Should not insert empty line before this div</div>

<!-- Prettier 1.19 -->
<table>
  <tr></tr>
</table>

<div>Should not insert empty line before this div</div>

<!-- Prettier 2.0 -->
<table>
  <tr></tr>
</table>
<div>Should not insert empty line before this div</div>

Formatera värde för HTML-attributet `class` (#7555 by @fisker)

<!-- Input -->
<div class="  foo
bar baz"></div>
<div class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"></div>

<!-- Prettier 1.19 -->
<div
  class="  foo
bar baz"
></div>
<div
  class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"
></div>

<!-- Prettier 2.0 -->
<div class="foo bar baz"></div>
<div
  class="another element with so many classes even can not fit one line really a lot and lot of classes"
></div>

Formatera värde för HTML-attributet `style` (#7556 by @fisker)

<!-- Input -->
<div style="   color : red;
            display    :inline ">
  </div>
<div style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; ">
  </div>

<!-- Prettier 1.19 -->
<div
  style="   color : red;
            display    :inline "
></div>
<div
  style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; "
></div>


<!-- Prettier 2.0 -->
<div style="color: red; display: inline;"></div>
<div
  style="
    color: red;
    display: inline;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  "
></div>

Stöd för `` för text (#7654 by @graemeworthy)

Tidigare fungerade detta endast för taggar. Användbart för att skydda olika makron och förprocessorkommandon från att korrumperas av formatering.

<!-- Input -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably
generated by some script.

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Input -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats |
Tigers | | ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- |
---- | ------ | | 1 | 1 | 0 | 0 | 1 | 1 | 5 | 16 | 4 | 0 |

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

Vue

Formatera Vue SFC som innehåller JSX-skript (#7180 by @sosukesuzuki)

<!-- Input -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 1.19 -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 2.0 -->
<script lang="jsx">
export default {
  data: () => ({
    message: "hello with jsx"
  }),
  render(h) {
    return <div>{this.message}</div>;
  }
};
</script>

Skriv inte enstaka strängliteraler i attribut på ny rad (#7479 by @fisker)

<!-- Input -->
<template>
<MyComponent
  :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
  :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    :attr1="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`
    "
    :attr2="
      'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
    :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"
  />
</template>

Åtgärdat indrag för Vue-uttryck (#7781 by @fisker)

<!-- Input -->
<template>
<MyComponent v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
        long_long_long_long_long_long_long_condition_2 &&
        long_long_long_long_long_long_long_condition_3 &&
        long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
        `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
      long_long_long_long_long_long_long_condition_2 &&
      long_long_long_long_long_long_long_condition_3 &&
      long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

Angular

Inofficiellt rudimentärt stöd för några av de mest använda direktiven i AngularJS 1.x (#6869 by @thorn0)

Även om det finns vissa syntaxinkompatibiliteter (engångsbindningar och prioriteten för |) mellan uttrycksspråken i gamla AngularJS och nya Angular, är de två språken överlag tillräckligt kompatibla för att legacy- och hybridprojekt baserade på AngularJS ska kunna dra nytta av Prettier. Tidigare, när Prettier formaterade AngularJS-mallar med Angular-parsern, formaterades endast uttryck i interpoleringar. Nu formateras även några av de mest använda AngularJS-direktiven, nämligen: ng-if, ng-show, ng-hide, ng-class, ng-style.

<!-- Input -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 1.19 -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 2.0 -->
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>

Rättar formateringen av i18n-attribut (#7371 av @thorn0)

Prettier 1.19 lade till stöd för formatering av i18n-attribut, men att placera avslutande citattecken på en ny rad bröt anpassade ID:n. Detta är nu åtgärdat.

<!-- Input -->
<div i18n-prop="Special-property|This is a special property with much important information@@MyTextId"
prop="My Text"></div>

<!-- Prettier 1.19 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId
  "
  prop="My Text"
></div>

<!-- Prettier 2.0 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId"
  prop="My Text"
></div>

Handlebars (alfa)

Rättar överflödiga radbrytningar i `ConcatStatement` (#7051 av @dcyriller)

{{!-- Input --}}
<a href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars">Link</a>

{{!-- Prettier 1.19 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform
    {{id}}
    longer-than-eighty-chars"
>
  Link
</a>

{{!-- Prettier 2.0 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars"
>
  Link
</a>

och

{{!-- Input --}}
<div class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if goodbye false}} {{if goodbye true}}">
  Hello
</div>

{{!-- Prettier 1.19 --}}
<div
  class="hello
    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}"
>
  Hello
</div>

{{!-- Prettier 2.0 --}}
<div
  class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if
      goodbye
      false
    }} {{if goodbye true}}"
>
  Hello
</div>

Rättar problem med fallande mustacher (#7052 av @dcyriller)

{{!-- Input --}}
<GlimmerComponent @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}} />

{{!-- Prettier 1.19 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue
  }}
/>

{{!-- Prettier 2.0 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

Förbättrad utskrift av `MustacheStatement` (#7157 av @dcyriller)

{{!-- Input --}}
<p>Hi here is your name, as it will be displayed  {{firstName}}  {{lastName}}   , welcome!</p>

{{!-- Prettier 1.19 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{lastName
  }} , welcome!
</p>

{{!-- Prettier 2.0 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{
    lastName
  }} , welcome!
</p>

Stöd för `prettier-ignore` (#7275 av @chadian)

{{! Input }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component    isRestoredTo   = "order"    }}
  <ThisWillBeNormal backTo    =   "normal" />
{{/a-normal-component}}

{{! Prettier 1.19 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component "shall" be="preserved"}}
    <This is="preserved" />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo="order"}}
  <ThisWillBeNormal backTo="normal" />
{{/a-normal-component}}

{{! Prettier 2.0 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo='order'}}
  <ThisWillBeNormal backTo='normal' />
{{/a-normal-component}}

Stöd för att skriva inline-Handlebars i HTML (#7306 av @dcyriller)

<!-- Input -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 1.19 -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 2.0 -->
<script type="text/x-handlebars-template">
  {{component
    arg1='hey'
    arg2=(helper this.arg7 this.arg4)
    arg3=anotherone
    arg6=this.arg8
  }}
</script>

Rättar borttaget värde från AttrNode (#7552 av @bantic)

{{!-- Input --}}
<ul class="abc
       def">
</ul>

{{!-- Prettier 1.19 --}}
<ul class></ul>

{{!-- Prettier 2.0 --}}
<ul class="abc
       def">
</ul>

Bevara blankstegskontrolltecken (#7575 av @mahirshah)

{{!-- Input --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

{{!-- Prettier 1.19 --}}
{{#if bar}}
  if1
{{else}}
  else
{{/if}}

{{!-- Prettier 2.0 --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

GraphQL

Förbättrad detektering av separator mellan gränssnitt (#7305 av @fisker)

Även om användning av kommatecken för att separera flera implementerade gränssnitt är föråldrad syntax, behåller Prettier originalseparatorn för att stödja äldre användningsfall och ersätter inte medvetet kommatecken med et-tecken. Tidigare innehöll denna logik dock en bugg, vilket kunde resultera i fel separator i utdata. Detta är nu åtgärdat.

# Input
type Type1 implements A, B
# { &  <-- Removing this comment changes the separator in 1.19
{a: a}

type Type2 implements A, B & C{a: a}

# Prettier 1.19
type Type1 implements A & B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A & B & C {
  a: a
}

# Prettier 2.0
type Type1 implements A, B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A, B & C {
  a: a
}

Markdown

Hantera nollbaserade listor korrekt (#6852 av @evilebottnawi)

<!-- Input -->
List
List
List

<!-- Prettier 1.19 -->
List
List
List

<!-- Prettier 2.0 -->
List
List
List

Rättar HTML-formatering som bröts om starttaggen började efter en listpost (#7181 och #7220 av @sasurau4)

Tidigare, när Prettier formaterade en HTML-tagg placerad precis efter en listpost, lade den till indrag och bröt relationen mellan öppnings- och stängningstagg. Nu ändrar Prettier ingenting.

<!-- Input -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 1.19 -->
- A list item.

  <details><summary>Summary</summary>
  <p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 2.0 -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

Fixa formatering av flerradig fotnot (#7203 by @sasurau4)

<!-- Input -->
Here's a statement[^footnote].

[^footnote]:
    Here's a multi-line footnote walking back the above statement, and showing
    how it's all totally bollocks.

<!-- Prettier 1.19 -->
Here's a statement[^footnote].

[^footnote]:

  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

<!-- Prettier 2.0 -->
Here's a statement[^footnote].

[^footnote]:
  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

MDX

Lägg till stöd för JSX-fragment (#6398 by @JounQin)

<!-- Input -->
<>
    test   <World        />   test
</>       123

<!-- Prettier 1.19 -->
<>
test <World        /> test
</> 123

<!-- Prettier 2.0 -->
<>
  test <World /> test
</> 123

Fixa JSX-tolkningsbuggar introducerade i Prettier 1.19 (#6949 by @Tigge & @thorn0)

MDX-tolkning för JSX misslyckades när den stötte på JSX-element som inte kunde tolkas som HTML, till exempel <Tag value={{a: 'b'}}>test</Tag>

<!-- Input -->

<Tag  value={ {a :  'b'   } }>test</ Tag>

<Foo bg={ 'red' } >
   <div  style={{   display:   'block'}   }>
      <Bar    >hi    </Bar>
       {  hello       }
         {     /* another comment */}
            </div>
</Foo>

<!-- Prettier 1.19 -->

SyntaxError: Unexpected closing tag "Tag". 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 (1:35)
> 1 | <Tag  value={ {a :  'b'   } }>test</ Tag>

<!-- Prettier 2.0 -->

<Tag value={{ a: "b" }}>test</Tag>

<Foo bg={"red"}>
  <div style={{ display: "block" }}>
    <Bar>hi </Bar>
    {hello}
    {/* another comment */}
  </div>
</Foo>

CLI

Stöd för filändelserna `.cjs` och `.yaml.sed` (#7210 by @sosukesuzuki)

# Prettier 1.19
$ prettier test.cjs
test.cjs[error] No parser could be inferred for file: test.cjs

# Prettier 2.0
$ prettier test.cjs
"use strict";
console.log("Hello, World!");

Respektera `--ignore-path` när prettier körs från en underkatalog (#7588 by @heylookltsme)

Ändrar filnamnet som används vid filtrering av ignorerade filer så att det blir relativt till --ignore-path (om det finns) istället för den aktuella arbetskatalogen.

Ta bort `--stdin` (#7668 by @thorn0)

Denna CLI-flagga, som aldrig dokumenterades ordentligt, var tänkt att få Prettier CLI att läsa indata från stdin, men Prettier CLI gör detta ändå när inga filsökvägar eller glob-mönster anges. Flaggan var därför överflödig. Nu när den har tagits bort, om du använder denna flagga i dina kommandon, visas en varning: "Ignored unknown option". Denna varning är endast informativ. Den förhindrar inte kommandot från att utföra sin funktion och påverkar inte avslutningskoden.

Höjdpunkter​

JavaScript​

Förbättrad heuristik för metodkedjebrytning (#6685 av @mmkal)​

Slutgiltig fix för Closure-typomgjutningar (#7791 av @thorn0, #7011 av @evilebottnawi)​

TypeScript​

TypeScript 3.8 (#7631 av @thorn0, #7764 av @sosukesuzuki, #7804 av @sosukesuzuki)​

CLI​

Testa om angivna globs är existerande filnamn innan de behandlas som globs (#7587 by @fisker)​

Expandera kataloger, inklusive . (#7660 by @thorn0)​

Brytande ändringar​

API​

Förbättra mönstermatchning för konfigurationsöverstyrningar att inkludera punktfiler (#5813 by @chrisblossom)​

Sluta stödja Node-versioner äldre än 10 (#6908 by @fisker)​

Ändra standardvärde för trailingComma till es5 (#6963 by @fisker)​

Plugin-API: ändringar i prettier.util (#6993 av @fisker)​

Ändra standardvärdet för arrowParens till always (#7430 av @kachkaev)​

Ändra standardvärdet för endOfLine till lf (#7435 av @kachkaev)​

Cachelagra pluginsökresultat (#7485 av @fisker)​

Ta bort föråldrade alternativ och alternativvärden (#6993, #7511, #7533, #7535, #7536 av @fisker)​

Ta bort version-parametern i prettier.getSupportInfo (#7620 av @thorn0)​

Andra ändringar​

JavaScript​

Lägg alltid till ett mellanslag efter function-nyckelordet (#3903 av @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 av @bakkot)​

Fixa instabil formatering av märkta uttryck med kommentarer (#6984 av @clement26695)​

Fixa formatering av logiska, binära och sekvensuttryck i malliteraler (#7010 av @evilebottnawi)​

Fixa instabil formatering av logiska uttryck (#7026 av @thorn0)​

Formatera throw som return (#7070 av @sosukesuzuki)​

Fixa indrag i ternärer nästlade i villkor av andra ternärer (#7087 av @thorn0)​

Finjustera funktionskompositionslogik för dekoratörer (#7138 av @brainkim)​

Korrekt semikolonplacering i tomma return-uttryck med kommentarer (#7140 av @sosukesuzuki)​

Respektera blankteckens betydelse i HTML-malliteraler (#7208 av @saschanaz)​

Ta bort onödiga parenteser vid användning av yield med JSX (#7367 av @cola119)​

Behåll parenteser runt kommauttryck i standardexportdeklarationer (#7491 av @fisker)​

Fixa kantfall med parenteser runt optional chaining (#7500 av @thorn0)​

Lägg inte in parenteser kring undefined i villkorsuttryck inom JSX (#7504 av @fisker)​

Behåll kommentarers position för tilldelningar/variabler (#7709 av @sosukesuzuki)​

TypeScript​

Babel som alternativ parser för TypeScript (#6400 av @JounQin & @thorn0)​

Åtgärda formatering av komplexa typer i returtypannoteringar för pilfunktioner (#6901 av @sosukesuzuki)​

Skriv ut JSDoc-typer som de är istället för att kasta fel (#7020 av @thorn0)​

Skriv inte ut avslutande kommatecken efter restelement i tupler (#7075 av @thorn0)​

Åtgärda indentering av pilfunktioner i variabeldeklarationer följda av kommentarer (#7094 av @sosukesuzuki)​

Åtgärda utskrift av kommentarer i funktionstyper (#7104 av @thorn0)​

Åtgärda formatering av kommentarer för funktionsliknande noder (#7144 av @armano2)​

Åtgärda utskrift av mappade typer med utelämnad malltyp (#7221 av @cola119)​

Åtgärda edge cases vid utskrift av indexsignaturer (#7228 by @cola119)​

Åtgärda utskrift av kommentarer i tomma typparametrar (#7729 by @sosukesuzuki)​

Flow​

Lägg till stöd för symbol (#7472 by @fisker)​

Lägg till stöd för dekoratorer (#7482 by @fisker)​

Åtgärda deklarationer av privata klassfält (#7484 by @fisker)​

CSS​

Använd inte gemener för elementnamn i CSS-selektorer (#6947 by @ark120202)​

SCSS​

Lägg inte till extra kommatecken efter sista kommentaren i map (#6918 by @fisker)​

Åtgärda blanksteg vid konkatenering i SCSS (#7211 by @sasurau4)​

Less​

Åtgärda flera långvariga problem genom uppdatering av postcss-less (#6981 by @fisker, #7021 by @evilebottnawi, @thorn0)​

HTML​

Kommentarer i pre-taggar orsakade felformatering av efterföljande stängningstag (#5959 by @selvazhagan)​

Behandla inte kolon som avgränsare för namnrymdsprefix i tagnamn (#7273 by @fisker)​

Kastar inte längre fel vid trasig HTML (#7293 by @fisker)​

Åtgärdat tolkningsfel för srcset (#7295 by @fisker)​

Åtgärdat fel vid oavslutad tagg i pre-tagg (#7392 by @fisker)​

Åtgärdat inkonsekvent formatering av självstängande taggar (#7395 by @fisker)​

Åtgärdat oväntat tillagda tomma rader efter table-taggar (#7461 by @ikatyang)​

Formatera värde för HTML-attributet class (#7555 by @fisker)​

Formatera värde för HTML-attributet style (#7556 by @fisker)​

Stöd för  för text (#7654 by @graemeworthy)​

Vue​

Formatera Vue SFC som innehåller JSX-skript (#7180 by @sosukesuzuki)​

Skriv inte enstaka strängliteraler i attribut på ny rad (#7479 by @fisker)​

Åtgärdat indrag för Vue-uttryck (#7781 by @fisker)​

Angular​

Inofficiellt rudimentärt stöd för några av de mest använda direktiven i AngularJS 1.x (#6869 by @thorn0)​

Rättar formateringen av i18n-attribut (#7371 av @thorn0)​

Handlebars (alfa)​

Rättar överflödiga radbrytningar i ConcatStatement (#7051 av @dcyriller)​

Rättar problem med fallande mustacher (#7052 av @dcyriller)​

Förbättrad utskrift av MustacheStatement (#7157 av @dcyriller)​

Höjdpunkter

JavaScript

Förbättrad heuristik för metodkedjebrytning (#6685 av @mmkal)

Slutgiltig fix för Closure-typomgjutningar (#7791 av @thorn0, #7011 av @evilebottnawi)

TypeScript

TypeScript 3.8 (#7631 av @thorn0, #7764 av @sosukesuzuki, #7804 av @sosukesuzuki)

CLI

Testa om angivna globs är existerande filnamn innan de behandlas som globs (#7587 by @fisker)

Expandera kataloger, inklusive `.` (#7660 by @thorn0)

Brytande ändringar

API

Förbättra mönstermatchning för konfigurationsöverstyrningar att inkludera punktfiler (#5813 by @chrisblossom)

Sluta stödja Node-versioner äldre än 10 (#6908 by @fisker)

Ändra standardvärde för `trailingComma` till `es5` (#6963 by @fisker)

Plugin-API: ändringar i `prettier.util` (#6993 av @fisker)

Ändra standardvärdet för `arrowParens` till `always` (#7430 av @kachkaev)

Ändra standardvärdet för `endOfLine` till `lf` (#7435 av @kachkaev)

Cachelagra pluginsökresultat (#7485 av @fisker)

Ta bort föråldrade alternativ och alternativvärden (#6993, #7511, #7533, #7535, #7536 av @fisker)

Ta bort `version`-parametern i `prettier.getSupportInfo` (#7620 av @thorn0)

Andra ändringar

JavaScript

Lägg alltid till ett mellanslag efter `function`-nyckelordet (#3903 av @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 av @bakkot)

Fixa instabil formatering av märkta uttryck med kommentarer (#6984 av @clement26695)

Fixa formatering av logiska, binära och sekvensuttryck i malliteraler (#7010 av @evilebottnawi)

Fixa instabil formatering av logiska uttryck (#7026 av @thorn0)

Formatera `throw` som `return` (#7070 av @sosukesuzuki)

Fixa indrag i ternärer nästlade i villkor av andra ternärer (#7087 av @thorn0)

Finjustera funktionskompositionslogik för dekoratörer (#7138 av @brainkim)

Korrekt semikolonplacering i tomma `return`-uttryck med kommentarer (#7140 av @sosukesuzuki)

Respektera blankteckens betydelse i HTML-malliteraler (#7208 av @saschanaz)

Ta bort onödiga parenteser vid användning av yield med JSX (#7367 av @cola119)

Behåll parenteser runt kommauttryck i standardexportdeklarationer (#7491 av @fisker)

Fixa kantfall med parenteser runt optional chaining (#7500 av @thorn0)

Lägg inte in parenteser kring `undefined` i villkorsuttryck inom JSX (#7504 av @fisker)

Behåll kommentarers position för tilldelningar/variabler (#7709 av @sosukesuzuki)

TypeScript

Babel som alternativ parser för TypeScript (#6400 av @JounQin & @thorn0)

Åtgärda formatering av komplexa typer i returtypannoteringar för pilfunktioner (#6901 av @sosukesuzuki)

Skriv ut JSDoc-typer som de är istället för att kasta fel (#7020 av @thorn0)

Skriv inte ut avslutande kommatecken efter restelement i tupler (#7075 av @thorn0)

Åtgärda indentering av pilfunktioner i variabeldeklarationer följda av kommentarer (#7094 av @sosukesuzuki)

Åtgärda utskrift av kommentarer i funktionstyper (#7104 av @thorn0)

Åtgärda formatering av kommentarer för funktionsliknande noder (#7144 av @armano2)

Åtgärda utskrift av mappade typer med utelämnad malltyp (#7221 av @cola119)

Åtgärda edge cases vid utskrift av indexsignaturer (#7228 by @cola119)

Åtgärda utskrift av kommentarer i tomma typparametrar (#7729 by @sosukesuzuki)

Flow

Lägg till stöd för `symbol` (#7472 by @fisker)

Lägg till stöd för dekoratorer (#7482 by @fisker)

Åtgärda deklarationer av privata klassfält (#7484 by @fisker)

CSS

Använd inte gemener för elementnamn i CSS-selektorer (#6947 by @ark120202)

SCSS

Lägg inte till extra kommatecken efter sista kommentaren i map (#6918 by @fisker)

Åtgärda blanksteg vid konkatenering i SCSS (#7211 by @sasurau4)

Less

Åtgärda flera långvariga problem genom uppdatering av `postcss-less` (#6981 by @fisker, #7021 by @evilebottnawi, @thorn0)

HTML

Kommentarer i `pre`-taggar orsakade felformatering av efterföljande stängningstag (#5959 by @selvazhagan)

Behandla inte kolon som avgränsare för namnrymdsprefix i tagnamn (#7273 by @fisker)

Kastar inte längre fel vid trasig HTML (#7293 by @fisker)

Åtgärdat tolkningsfel för srcset (#7295 by @fisker)

Åtgärdat fel vid oavslutad tagg i `pre`-tagg (#7392 by @fisker)

Åtgärdat inkonsekvent formatering av självstängande taggar (#7395 by @fisker)

Åtgärdat oväntat tillagda tomma rader efter `table`-taggar (#7461 by @ikatyang)

Formatera värde för HTML-attributet `class` (#7555 by @fisker)

Formatera värde för HTML-attributet `style` (#7556 by @fisker)

Stöd för `` för text (#7654 by @graemeworthy)

Vue

Formatera Vue SFC som innehåller JSX-skript (#7180 by @sosukesuzuki)

Skriv inte enstaka strängliteraler i attribut på ny rad (#7479 by @fisker)

Åtgärdat indrag för Vue-uttryck (#7781 by @fisker)

Angular

Inofficiellt rudimentärt stöd för några av de mest använda direktiven i AngularJS 1.x (#6869 by @thorn0)

Rättar formateringen av i18n-attribut (#7371 av @thorn0)

Handlebars (alfa)

Rättar överflödiga radbrytningar i `ConcatStatement` (#7051 av @dcyriller)

Rättar problem med fallande mustacher (#7052 av @dcyriller)

Förbättrad utskrift av `MustacheStatement` (#7157 av @dcyriller)