Prettier 1.19: Länge efterlängtad Vue-option, TypeScript 3.7 och nya JavaScript-funktioner
Denna sida har översatts av PageTurner AI (beta). Inte officiellt godkänd av projektet. Hittade du ett fel? Rapportera problem →
Den här releasen innehåller den länge efterlängtatade --vue-indent-script-and-style-flaggan, stöd för TypeScript 3.7 och ny JavaScript-syntax i framkant. För att inte tala om en massa buggfixar och förbättringar!
Höjdpunkter
Vue
Tillagd --vue-indent-script-and-style (#6157 by @kamilic)
Den nya flaggan --vue-indent-script-and-style styr om koden inuti <script>- och <style>-taggarna i Vue-filer ska indenteras. Vissa (som Vues skapare) indenterar inte för att spara en indentationsnivå, men detta kan bryta kodvikning i din editor. Detta löser vårt mest kommenterade ärende hittills och kommer förbättra många Vue-utvecklares redigeringsupplevelse!
TypeScript
Stöd för TypeScript 3.7 (#6657 by @cryrivers)
Prettier 1.19 lägger till stöd för funktioner i den kommande TypeScript 3.7 som introducerar ny syntax:
(Obs: En beroendeuppgradering för TypeScript 3.7 ledde till att stöd för Node.js 6 togs bort vid direktinstallation från GitHub. Prettier installerad via npm behåller kompatibilitet med Node.js 4.)
Optional Chaining
// Input
const longChain = obj?.a?.b?.c?.d?.e?.f?.g;
const longChainCallExpression = obj.a?.(a,b,c).b?.(a,b,c).c?.(a,b,c).d?.(a,b,c).e?.(a,b,c).f?.(a,b,c)
// Prettier 1.19
const longChain = obj?.a?.b?.c?.d?.e?.f?.g;
const longChainCallExpression = obj
.a?.(a, b, c)
.b?.(a, b, c)
.c?.(a, b, c)
.d?.(a, b, c)
.e?.(a, b, c)
.f?.(a, b, c);
Nullish Coalescing
// Input
const cond = null;
const result = cond??'a';
const longChain = cond??cond??cond??'b';
// Prettier 1.19
const cond = null;
const result = cond ?? "a";
const longChain = cond ?? cond ?? cond ?? "b";
Assertion Functions
// Input
function assertsString(x: any): asserts x {console.assert(typeof x === 'string');}
function assertsStringWithGuard(x: any): asserts x is string {console.assert(typeof x === 'string');}
// Prettier 1.19
function assertsString(x: any): asserts x {
console.assert(typeof x === "string");
}
function assertsStringWithGuard(x: any): asserts x is string {
console.assert(typeof x === "string");
}
declare-modifierare på klassfält
// Input
class B {p: number;}
class C extends B {declare p: 256 | 1000;}
// Prettier 1.19
class B {
p: number;
}
class C extends B {
declare p: 256 | 1000;
}
JavaScript
Stöd för partial application syntax (#6397 by @JounQin)
// Input
const addOne = add(1, ?); // apply from the left
addOne(2); // 3
const addTen = add(?, 10); // apply from the right
addTen(2); // 12
// with pipeline
let newScore = player.score
|> add(7, ?)
|> clamp(0, 100, ?); // shallow stack, the pipe to `clamp` is the same frame as the pipe to `add`.
// Prettier 1.18
SyntaxError: Unexpected token (1:23)
> 1 | const addOne = add(1, ?); // apply from the left
| ^
2 | addOne(2); // 3
3 |
4 | const addTen = add(?, 10); // apply from the right
// Prettier 1.19
const addOne = add(1, ?); // apply from the left
addOne(2); // 3
const addTen = add(?, 10); // apply from the right
addTen(2); // 12
// with pipeline
let newScore = player.score |> add(7, ?) |> clamp(0, 100, ?); // shallow stack, the pipe to \`clamp\` is the same frame as the pipe to \`add\`.
Använd funktionsliteraler i argument för att upptäcka funktionskomposition (#6033 by @brainkim)
Tidigare använde vi en uppsättning hårdkodade namn relaterade till funktionell programmering (compose, flow, pipe etc.) för att upptäcka funktionskomposition och kedjemönster i kod. Detta gjordes så att Prettier inte skulle placera kod som följande anrop till pipe på samma rad även om den fick plats inom den tilldelade kolumnbudgeten:
source$
.pipe(
filter(x => x % 2 === 0),
map(x => x + x),
scan((acc, x) => acc + x, 0),
)
.subscribe(x => console.log(x));
Denna heuristik ledde dock till klagomål på grund av falska positiva träffar där anrop till funktioner eller metoder som matchade de hårdkodade namnen alltid delades upp på flera rader, även när anropen inte innehöll funktionsargument (#5769, #5969). För många var detta generella beslut att dela upp funktioner baserat på namn både överraskande och suboptimalt.
Vi använder nu en förfinad heuristik som använder förekomsten av funktionsliteraler för att upptäcka funktionskomposition. Denna heuristik behåller radbrytningsbeteendet ovan och eliminerar många om inte alla falska positiva träffar från den äldre heuristiken.
Prova denna funktion och ge gärna feedback!
// Input
eventStore.update(id, _.flow(updater, incrementVersion));
// Prettier 1.18
eventStore.update(
id,
_.flow(
updater,
incrementVersion
)
);
// Prettier 1.19
eventStore.update(id, _.flow(updater, incrementVersion));
Möjliggör formatering även när parse-fel förekommer i vissa fall (#6816 by @thorn0 och Babel-teamet)
Vi uppdaterade Babel-parsern till senaste versionen och fick en fantastisk funktion på köpet. Prettier kan nu formatera din kod även när den är ogiltig i vissa fall, vilket gör din kodupplevelse smidigare. Detta kommer förbättras ytterligare när Babel utvecklar sitt felåterhämtningsläge för parsning. Läs mer i Babel 7.7.0-blogginlägget!
// Input
let a = {
__proto__ : x,
__proto__ : y
}
let a = 2
// Prettier 1.18
SyntaxError: Redefinition of __proto__ property (3:3)
1 | let a = {
2 | __proto__ : x,
> 3 | __proto__ : y
| ^
4 | }
5 | let a = 2
// Prettier 1.19
let a = {
__proto__: x,
__proto__: y
};
let a = 2;
Andra ändringar
TypeScript
Åtgärda valfria beräknade klassfält och metoder (#6657 av @cryrivers, #6673 av @thorn0)
Detta är fortfarande trasigt om nyckeln är ett komplext uttryck, men har åtgärdats i dessa fall:
// Input
class Foo {
[bar]?: number;
protected [s]?() {}
}
// Prettier 1.18
class Foo {
[bar]: number;
protected [s?]() {};
}
// Prettier 1.19
class Foo {
[bar]?: number;
protected [s]?() {}
}
Kommentarer efter JSX-elementnamn med typargument försvann (#6209 av @duailibe)
// Input
const comp = (
<Foo<number>
// This comment goes missing
value={4}
>
Test
</Foo>
);
// Prettier 1.18
const comp = <Foo<number> value={4}>Test</Foo>;
// Prettier 1.19
const comp = (
<Foo<number>
// This comment goes missing
value={4}
>
Test
</Foo>
);
Åtgärda kraschar vid användning av // i JSX-text (#6289 av @duailibe)
Denna version uppdaterar TypeScript-parsern för att korrekt hantera JSX-text med dubbelsnedstreck (//). I tidigare versioner kunde detta få Prettier att krascha.
Formatera långa enrads mappade typer korrekt i ett steg (#6420 av @sosukesuzuki)
Tidigare, när Prettier formaterade långa enrads mappade typer, bröts raden men semikolon lades inte till förrän man körde Prettier igen, vilket bröt mot idempotensregeln. Nu lägger Prettier till semikolonet direkt i första körningen.
// Input
type FooBar<T> = { [P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P] }
// Prettier 1.18
type FooBar<T> = {
[P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P]
};
// Prettier 1.19
type FooBar<T> = {
[P in keyof T]: T[P] extends Something ? Something<T[P]> : T[P];
};
Behåll typparametrar inline för typannoteringar i variabeldeklarationer (#6467 av @sosukesuzuki)
// Input
const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
// Prettier 1.18
const fooooooooooooooo: SomeThing<
boolean
> = looooooooooooooooooooooooooooooongNameFunc();
// Prettier 1.19
const fooooooooooooooo: SomeThing<boolean> = looooooooooooooooooooooooooooooongNameFunc();
Dubbla parenteser runt typer togs ibland bort felaktigt (#6604 av @sosukesuzuki)
// Input
type A = 0 extends ((1 extends 2 ? 3 : 4)) ? 5 : 6;
type B = ((0 extends 1 ? 2 : 3)) extends 4 ? 5 : 6;
type C = ((number | string))["toString"];
type D = ((keyof T1))["foo"];
// Prettier 1.18
type A = 0 extends 1 extends 2 ? 3 : 4 ? 5 : 6;
type B = 0 extends 1 ? 2 : 3 extends 4 ? 5 : 6;
type C = number | string["toString"];
type D = keyof T1["foo"];
// Prettier 1.19
type A = 0 extends (1 extends 2 ? 3 : 4) ? 5 : 6;
type B = (0 extends 1 ? 2 : 3) extends 4 ? 5 : 6;
type C = (number | string)["toString"];
type D = (keyof T1)["foo"];
Behåll parenteser runt JSX vid behov för att undvika syntaxfel (#6640 av @sosukesuzuki)
// Input
(<a />).toString();
// Prettier 1.18
<a />.toString():
// Prettier 1.19
(<a />).toString();
Behåll semikolon för klassegenskap före indexsignatur när no-semi är aktiverat (#6728 av @sosukesuzuki)
Att försöka formatera Prettiers utdata igen kunde tidigare resultera i syntaxfel.
// Input
export class User {
id: number = 2;
[key: string]: any
}
// Prettier 1.18
export class User {
id: number = 2
[key: string]: any
}
// Prettier 1.19
export class User {
id: number = 2;
[key: string]: any
}
Förbättra argumentexpansion med as-typuttryck (#6471 av @mattleff)
Tidigare bröt Prettier raden vid formatering av anropsuttryck med as-typ eller typassertion. Nu använder Prettier det underliggande uttrycket i as-typen eller typassertionen för att bestämma radbrytningar.
// Input
const bar = [1,2,3].reduce((carry, value) => {
return [...carry, value];
}, ([] as unknown) as number[]);
// Prettier 1.18
const bar = [1, 2, 3].reduce(
(carry, value) => {
return [...carry, value];
},
([] as unknown) as number[]
);
// Prettier 1.19
const bar = [1,2,3].reduce((carry, value) => {
return [...carry, value];
}, ([] as unknown) as number[]);
TypeScript/Flow
Korrigera indrag för unionstyper inuti tupler (#6381 av @squidfunk, #6605 av @thorn0)
// Input
type A = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
type B = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD,
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
type C = [
| [AAAAAAAAAAAAAAAAAAAAAA | BBBBBBBBBBBBBBBBBBBBBB | CCCCCCCCCCCCCCCCCCCCCC | DDDDDDDDDDDDDDDDDDDDDD]
| [AAAAAAAAAAAAAAAAAAAAAA | BBBBBBBBBBBBBBBBBBBBBB | CCCCCCCCCCCCCCCCCCCCCC | DDDDDDDDDDDDDDDDDDDDDD]
]
// Prettier 1.18
type A = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
];
type B = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD,
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
];
type C = [
| [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
| [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
];
// Prettier 1.19
type A = [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
];
type B = [
(
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
),
(
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
)
];
type C = [
| [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
| [
| AAAAAAAAAAAAAAAAAAAAAA
| BBBBBBBBBBBBBBBBBBBBBB
| CCCCCCCCCCCCCCCCCCCCCC
| DDDDDDDDDDDDDDDDDDDDDD
]
];
Korrigera flyttning av kommentarer i funktionsanrop som useEffect (#6270 av @sosukesuzuki)
Detta åtgärdar en bugg som påverkade funktionsanrop med pilfunktion som första argument och arrayuttryck som andra argument (t.ex. Reacts useEffect). Om en kommentar placerades före andra argumentet flyttades den felaktigt och förstörde indenteringen.
Buggen fanns endast vid användning av Flow- och TypeScript-parsrar.
// Input
useEffect(
() => {
console.log("some code", props.foo);
},
// eslint-disable-line react-hooks/exhaustive-deps
[]
);
// Prettier 1.18
useEffect(() => {
console.log("some code", props.foo);
}, // eslint-disable-line react-hooks/exhaustive-deps
[]);
// Prettier 1.19
useEffect(
() => {
console.log("some code", props.foo);
},
// eslint-disable-line react-hooks/exhaustive-deps
[]
);
Placera avslutande parentes på ny rad efter unionstyper (#6307 av @sosukesuzuki)
// Input
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
| string
| undefined
)[];
// Prettier 1.18
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
| string
| undefined)[];
// Prettier 1.19
const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
| string
| undefined
)[];
Flow
Lägg till stöd för enum (#6833 av @gkz)
// Input
enum E of string {
A = "a",
B = "b",
}
// Prettier 1.19
enum E of string {
A = "a",
B = "b",
}
Parenteser runt returtyper för pilfunktioner med FunctionTypeAnnotation inuti ObjectTypeAnnotation (#6717 av @sosukesuzuki)
Detta är en tillfällig lösning för en bugg i Flow-parsern. Utan parenteserna ger parsern syntaxfel.
// Input
const example1 = (): { p: (string => string) } => (0: any);
// Prettier 1.18
const example1 = (): { p: string => string } => (0: any);
// Prettier 1.19
const example1 = (): ({ p: string => string }) => (0: any);
JavaScript
Bryt arrayer av arrayer/objekt om varje element har flera element/egenskaper (#6694 av @sosukesuzuki)
Detta bör formatera dina new Map och Jest test.each-anrop snyggare.
// Input
test.each([
{ a: "1", b: 1 },
{ a: "2", b: 2 },
{ a: "3", b: 3 }
])("test", ({ a, b }) => {
expect(Number(a)).toBe(b);
});
[[0, 1, 2], [0, 1, 2]];
new Map([
[A, B],
[C, D],
[E, F],
[G, H],
[I, J],
[K, L],
[M, N]
]);
// Prettier 1.18
test.each([{ a: "1", b: 1 }, { a: "2", b: 2 }, { a: "3", b: 3 }])(
"test",
({ a, b }) => {
expect(Number(a)).toBe(b);
}
);
[[0, 1, 2], [0, 1, 2]]
new Map([[A, B], [C, D], [E, F], [G, H], [I, J], [K, L], [M, N]]);
// Prettier 1.19
test.each([
{ a: "1", b: 1 },
{ a: "2", b: 2 },
{ a: "3", b: 3 }
])("test", ({ a, b }) => {
expect(Number(a)).toBe(b);
});
[
[0, 1, 2],
[0, 1, 2]
];
new Map([
[A, B],
[C, D],
[E, F],
[G, H],
[I, J],
[K, L],
[M, N]
]);
Uppdatera ??-precedensen för att matcha stage 3-förslaget (#6404 av @vjeux, #6863 av @jridgewell)
Vi har uppdaterat Prettiers stöd för nullish coalescing-operatorn för att matcha en specifikationsuppdatering som inte längre tillåter att den omedelbart omges av, eller omger ett && eller ||-uttryck.
// Input
(foo ?? bar) || baz;
(foo || bar) ?? baz;
// Prettier 1.18
foo ?? bar || baz;
foo || bar ?? baz;
// Prettier 1.19
(foo ?? bar) || baz;
(foo || bar) ?? baz;
Observera att eftersom vi uppdaterat våra parsers med versioner som stöder denna specifikationsuppdatering, kommer kod utan parenteser nu att ge ett parse-fel.
Kräv inte parenteser för logiska uttryck med samma operator (#6864 av @jridgewell)
// Input
foo && (bar && baz);
foo || (bar || baz);
foo ?? (bar ?? baz);
// Prettier 1.18
foo && (bar && baz);
foo || (bar || baz);
foo ?? (bar ?? baz);
// Prettier 1.19
foo && bar && baz;
foo || bar || baz;
foo ?? bar ?? baz;
Mer läsbara parenteser för new-anrop (#6412 av @bakkot)
// Input
var a = new (x().y)();
var a = new (x().y.z)();
var a = new (x().y().z)();
// Prettier 1.18
var a = new (x()).y();
var a = new (x()).y.z();
var a = new (x().y()).z();
// Prettier 1.19
var a = new (x().y)();
var a = new (x().y.z)();
var a = new (x().y().z)();
Behåll parenteser med kommentarer i unära uttryck (#6217 av @sosukesuzuki)
// Input
!(
/* foo */
foo
);
!(
foo // foo
);
// Prettier 1.18
!/* foo */
foo;
!foo; // foo
// Prettier 1.19
!(/* foo */ foo);
!(
foo // foo
);
Sluta flytta kommentarer inuti taggade malliteraler (#6236 av @sosukesuzuki)
// Input
foo //comment
`
`;
// Prettier 1.18
foo` // comment
`;
// Prettier 1.19
foo // comment
`
`;
Tomma rader i destrukturerade arrowfunktionsparametrar kunde bryta indentering och idempotens (#6301 & #6382 av @sosukesuzuki)
Tidigare kunde Prettier indatera koden konstigt när en arrowfunktion vars parametrar inkluderade ett objektmönster skickades till ett funktionsanrop som argument. Det bröt också idempotensen. Se #6294 för detaljer.
// Input
foo(
({
a,
b
}) => {}
);
// Prettier 1.18
foo(({ a,
b }) => {});
// Prettier 1.19
foo(
({
a,
b
}) => {}
);
Fixa formatering av objektdestrukturering med parameterdekoratörer (#6411 av @sosukesuzuki)
// Input
class Class {
method(
@decorator
{ foo }
) {}
}
// Prettier 1.18
class Class {
method(@decorator
{
foo
}) {}
}
// Prettier 1.19
class Class {
method(
@decorator
{ foo }
) {}
}
Hantera tomma objektmönster med typannotationer i funktionsparametrar (#6438 av @bakkot)
// Input
const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({}: Foo) {}
// Prettier 1.18
const f = ({
,
}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({ }: Foo) {}
// Prettier 1.19
const f = ({}: MyVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryVeryLongType) => {};
function g({}: Foo) {}
Placera avslutande parentes på ny rad efter binära uttryck inom funktionsanrop (#6441 av @sosukesuzuki)
// Input
(
aaaaaaaaaaaaaaaaaaaaaaaaa &&
bbbbbbbbbbbbbbbbbbbbbbbbb &&
ccccccccccccccccccccccccc &&
ddddddddddddddddddddddddd &&
eeeeeeeeeeeeeeeeeeeeeeeee
)();
// Prettier 1.18
(aaaaaaaaaaaaaaaaaaaaaaaaa &&
bbbbbbbbbbbbbbbbbbbbbbbbb &&
ccccccccccccccccccccccccc &&
ddddddddddddddddddddddddd &&
eeeeeeeeeeeeeeeeeeeeeeeee)();
// Prettier 1.19
(
aaaaaaaaaaaaaaaaaaaaaaaaa &&
bbbbbbbbbbbbbbbbbbbbbbbbb &&
ccccccccccccccccccccccccc &&
ddddddddddddddddddddddddd &&
eeeeeeeeeeeeeeeeeeeeeeeee
)();
Fixa formatering av långa namnexporter (#6446 av @sosukesuzuki)
Nu formaterar Prettier namnexporter på samma sätt som namnimporter.
// Input
export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo";
// Prettier 1.18
export {
fooooooooooooooooooooooooooooooooooooooooooooooooo
} from "fooooooooooooooooooooooooooooo";
// Prettier 1.19
export { fooooooooooooooooooooooooooooooooooooooooooooooooo } from "fooooooooooooooooooooooooooooo";
Fixa dålig formatering för flerradig optional chaining med kommentarer (#6506 av @sosukesuzuki)
// Input
return a
.b()
.c()
// Comment
?.d()
// Prettier 1.18
return a
.b()
.c()
?.// Comment
d();
// Prettier 1.19
return (
a
.b()
.c()
// Comment
?.d()
);
Fixa inkonsekvent indentering i switch-satser (#6514 av @sosukesuzuki)
// Input
switch ($veryLongAndVeryVerboseVariableName && $anotherVeryLongAndVeryVerboseVariableName) {
}
switch ($longButSlightlyShorterVariableName && $anotherSlightlyShorterVariableName) {
}
// Prettier 1.18
switch (
$veryLongAndVeryVerboseVariableName &&
$anotherVeryLongAndVeryVerboseVariableName
) {
}
switch (
$longButSlightlyShorterVariableName && $anotherSlightlyShorterVariableName
) {
}
// Prettier 1.19
switch (
$veryLongAndVeryVerboseVariableName &&
$anotherVeryLongAndVeryVerboseVariableName
) {
}
switch (
$longButSlightlyShorterVariableName &&
$anotherSlightlyShorterVariableName
) {
}
Stöd formatering av kod med V8-intrinsics (#6496 av @rreverser)
// Input
function doSmth() {
%DebugPrint
(
foo )
}
// Prettier 1.18
SyntaxError: Unexpected token (2:13)
1 | function doSmth() {
> 2 | %DebugPrint
| ^
// Prettier 1.19
function doSmth() {
%DebugPrint(foo);
}
Objektdestrukturering i metodparametrar bröts alltid upp i flera rader (#6646 av @ericsakmar)
// Input
const obj = {
func(id, { blog: { title } }) {
return id + title;
},
};
class A {
func(id, { blog: { title } }) {
return id + title;
}
#func(id, { blog: { title } }) {
return id + title;
}
}
// Prettier 1.18
const obj = {
func(
id,
{
blog: { title }
}
) {
return id + title;
}
};
class A {
func(
id,
{
blog: { title }
}
) {
return id + title;
}
#func(
id,
{
blog: { title }
}
) {
return id + title;
}
}
// Prettier 1.19
const obj = {
func(id, { blog: { title } }) {
return id + title;
},
};
class A {
func(id, { blog: { title } }) {
return id + title;
}
#func(id, { blog: { title } }) {
return id + title;
}
}
Numeriska separatorer togs bort från BigInt-literaler (#6796 av @thorn0)
// Input
const bigints = [200_000n, 0x0000_000An, 0b0111_1111n];
// Prettier 1.18
const bigints = [200000n, 0x0000000an, 0b01111111n];
// Prettier 1.19
const bigints = [200_000n, 0x0000_000an, 0b0111_1111n];
Bättre formatering för inline await-uttryck nästade i anrop (#6856 av @thorn0)
// Input
async function f() {
const admins = (await(db.select('*').from('admins').leftJoin('bla').where('id', 'in', [1,2,3,4]))).map(({id, name})=>({id, name}))
}
// Prettier 1.18
async function f() {
const admins = (await db
.select("*")
.from("admins")
.leftJoin("bla")
.where("id", "in", [1, 2, 3, 4])).map(({ id, name }) => ({ id, name }));
}
// Prettier 1.19
async function f() {
const admins = (
await db
.select("*")
.from("admins")
.leftJoin("bla")
.where("id", "in", [1, 2, 3, 4])
).map(({ id, name }) => ({ id, name }));
}
HTML
Bryt inte upp template-element på rader kortare än printWidth (#6284 av @sosukesuzuki)
Tidigare bröt Prettier upp rader med template-element även när radlängden var kortare än printWidth.
<!-- Input -->
<template>
<template>foo</template>
</template>
<!-- Prettier 1.18 -->
<template>
<template
>foo</template
>
</template>
<!-- Prettier 1.19 -->
<template>
<template>foo</template>
</template>
Skripttagg behandlas nu som block för formateringsändamål (#6423 av @thorn0)
Tidigare formaterades de som inline-element i whitespace-känsligt läge.
<!-- Input -->
<script
async
src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script><script></script>
<!-- Prettier 1.18 -->
<script
async
src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script
><script></script>
<!-- Prettier 1.19 -->
<script
async
src="/_next/static/development/pages/_app.js?ts=1565732195968"
></script>
<script></script>
Lägg till stöd för ! och andra entiteter (#6785 av @lydell och @ikatyang)
Tidigare stödde Prettier bara vanliga HTML-entiteter som och ". Nu stöder Prettier alla HTML-entiteter i HTML-specen, inklusive ! och ⋔.
<!-- Input -->
<p>Hi!</p>
<!-- Prettier 1.18
[error] stdin: SyntaxError: Unknown entity "excl" - use the ";" or "<hex>;" syntax (1:6)
[error] > 1 | <p>Hi!</p>
[error] | ^
[error] 2 |
-->
<!-- Prettier 1.19 -->
<p>Hi!</p>
Lägg till JSON-skripttyper (#6293 av @ascorbic)
<!-- Input -->
<script type="application/json">
{ "json":true }
</script>
<script type="importmap">
{ "json":true }
{ "json":true }
</script>
</script>
<script type="systemjs-importmap">
{ "json":true }
</script>
<!-- Prettier 1.18 -->
<script type="application/json">
{ "json":true }
</script>
<script type="importmap">
{ "json":true }
{ "json":true }
</script>
</script>
<script type="systemjs-importmap">
{ "json":true }
</script>
<!-- Prettier 1.19 -->
<script type="application/json">
{ "json": true }
</script>
<script type="importmap">
{ "json": true }
</script>
<script type="systemjs-importmap">
{ "json": true }
</script>
Angular
Placera avslutande parentes på ny rad efter ternärer som skickas till pipes (#5682 av @selvazhagan)
<!-- Input -->
{{ (isCustomDiscount ? 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT' : 'DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT') | translate }}
<!-- Prettier 1.18 -->
{{
(isCustomDiscount
? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT"
: "DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT") | translate
}}
<!-- Prettier 1.19 -->
{{
(isCustomDiscount
? "DISCOUNTS__DISCOUNT_TRAINING_HEADER__CUSTOM_DISCOUNT"
: "DISCOUNTS__DISCOUNT_TRAINING_HEADER__DISCOUNT"
) | translate
}}
Lägg till formatering för i18n-attribut (#6695 av @voithos)
Prettier kommer automatiskt att bryta innehållet i i18n-attribut när de överskrider radlängden.
<!-- Input -->
<h1 i18n="This is a very long internationalization description text, exceeding the configured print width">
Hello!
</h1>
<!-- Prettier 1.18 -->
<h1
i18n="This is a very long internationalization description text, exceeding the configured print width"
>
Hello!
</h1>
<!-- Prettier 1.19 -->
<h1
i18n="
This is a very long internationalization description text, exceeding the
configured print width
"
>
Hello!
</h1>
Handlebars
Fixa hantering av blanksteg och radbrytningar (#6354 av @chadian)
Detta löser flera problem med blanksteg och radbrytningar i Handlebars- och Glimmer-mallar.
<!-- Input -->
<SomeComponent />{{name}}
Some sentence with {{dynamic}} expressions.
sometimes{{nogaps}}areimportant<Hello></Hello>
{{name}} is your name
<!-- Prettier 1.18 -->
<SomeComponent />
{{name}}
Some sentence with
{{dynamic}}
expressions.
sometimes
{{nogaps}}
areimportant
<Hello />
{{name}}
is your name
<!-- Prettier 1.19 -->
<SomeComponent />{{name}}
Some sentence with {{dynamic}} expressions.
sometimes{{nogaps}}areimportant
<Hello />
{{name}} is your name
Undvik oönskade radbrytningar mellan text och mustaches (#6186 av @gavinjoyce)
Tidigare lade Prettier till radbrytningar mellan text och mustaches vilket skapade oönskade blanksteg i renderat innehåll.
<!-- Input -->
<p>Your username is @{{name}}</p>
<p>Hi {{firstName}} {{lastName}}</p>
<!-- Prettier 1.18 -->
<p>
Your username is @
{{name}}
</p>
<p>
Hi
{{firstName}}
{{lastName}}
</p>
<!-- Prettier 1.19 -->
<p>
Your username is @{{name}}
</p>
<p>
Hi {{firstName}} {{lastName}}
</p>
Förbättra kommentarsformatering (#6206 av @gavinjoyce)
<!-- Input -->
<div>
{{! Foo }}
{{#if @foo}}
Foo
{{/if}}
{{! Bar }}
{{#if @bar}}
Bar
{{/if}}
</div>
<!-- Prettier 1.18 -->
<div>
{{! Foo }}
{{#if @foo}}
Foo
{{/if}}{{! Bar }}{{#if @bar}}
Bar
{{/if}}
</div>
<!-- Prettier 1.19 -->
<div>
{{! Foo }}
{{#if @foo}}
Foo
{{/if}}
{{! Bar }}
{{#if @bar}}
Bar
{{/if}}
</div>
Bevara HTML-entiteter (#6234 av @gavinjoyce)
<!-- Input -->
<p>
Some escaped characters: < > &
</p>
<!-- Prettier 1.18 -->
<p>
Some escaped characters: < > &
</p>
<!-- Prettier 1.19 -->
<p>
Some escaped characters: < > &
</p>
Fixa --single-quote-flaggan för HTML-attribut (#6377 av @dcyriller)
Tidigare tillämpades inte flaggan på HTML-attribut.
<!-- Input -->
<div class="a-class-name"></div>
<!-- Prettier 1.18, with the option --single-quote -->
<div class="a-class-name"></div>
<!-- Prettier 1.19, with the option --single-quote -->
<div class='a-class-name'></div>
Bryt långa interpolationer (#6249 av @jjaffeux)
<!-- Input -->
{{my-component foo="bar" bar="baz" action=(action "almostTheMaximumLengthxxxx")
}}
<!-- Prettier 1.18 -->
{{my-component foo="bar" bar="baz" action=(action "almostTheMaximumLengthxxxx")
}}
<!-- Prettier 1.19 -->
{{my-component
foo="bar"
bar="baz"
action=(action "almostTheMaximumLengthxxxx")
}}
MDX
Text efter JSX klipptes av felaktigt (#6340 av @JounQin)
<!-- Input -->
<Hello>
test <World /> test
</Hello> 123
<!-- Prettier 1.18 -->
<Hello>
test <World /> test
</Hello>123
<!-- Prettier 1.19 -->
<Hello>
test <World /> test
</Hello> 123
Intilliggande JSX-element ska tillåtas (#6332 av @JounQin)
// Input
<Hello>
test <World /> test
</Hello>123
// Prettier 1.18
SyntaxError: Unexpected token (3:9)
1 | <Hello>
2 | test <World /> test
> 3 | </Hello>123
| ^
// Prettier 1.19
<Hello>
test <World /> test
</Hello>123
// Input
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
// Prettier 1.18
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (4:1)
2 | test <World /> test
3 | </Hello>
> 4 | <Hello>
| ^
5 | test <World /> test
6 | </Hello>123
// Prettier 1.19
<Hello>
test <World /> test
</Hello>
<Hello>
test <World /> test
</Hello>123
Vue
Formatera style[lang="css"] (#6875 av @fisker)
Tidigare formaterades inte <style>-element med lang="css", medan element utan attribut eller med andra värden fungerade. Detta har nu åtgärdats.
<!-- Input -->
<style lang="css">
a {
color: #F00
}</style>
<!-- Output (Prettier stable) -->
<style lang="css">
a {
color: #F00
}
</style>
<!-- Output (Prettier master) -->
<style lang="css">
a {
color: #f00;
}
</style>
Less
Använd inte gemener för variabelnamn och ta bort blanksteg mellan variabel och kolon (#6778 av @fisker)
// Input
@FoO : bar;
// Prettier 1.18
@foo : bar;
// Prettier 1.19
@FoO: bar;
API
Lägg till resolveConfig-alternativ i getFileInfo() (#6666 av @kaicataldo)
Lägger till ett resolveConfig: boolean-alternativ i prettier.getFileInfo() som, när satt till true, löser konfigurationen för given filsökväg. Möjliggör hantering av åsidosatta parsers.
CLI
Hantera fel vid läsning av stdin (#6708 av @andersk och @lydell)
Om det fanns fel i din .prettierrc kraschade Prettier tidigare vid formatering från stdin. Sådana fel hanteras nu korrekt.
# Prettier 1.18
$ prettier --parser babel < test.js
(node:21531) UnhandledPromiseRejectionWarning: Error: Invalid printWidth value. Expected an integer, but received "nope".
at _loop (/home/you/project/node_modules/prettier/bin-prettier.js:7887:63)
at Normalizer._applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:8000:13)
at applyNormalization (/home/you/project/node_modules/prettier/bin-prettier.js:7817:49)
at Normalizer.normalize (/home/you/project/node_modules/prettier/bin-prettier.js:7823:9)
at normalizeOptions$1 (/home/you/project/node_modules/prettier/bin-prettier.js:8760:31)
at Object.normalizeApiOptions (/home/you/project/node_modules/prettier/bin-prettier.js:8918:10)
at getOptionsForFile (/home/you/project/node_modules/prettier/bin-prettier.js:44160:69)
at /home/you/project/node_modules/prettier/bin-prettier.js:44214:22
at process._tickCallback (internal/process/next_tick.js:68:7)
(node:21531) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:21531) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
# Prettier 1.19
$ prettier --parser babel < test.js
[error] Invalid printWidth value. Expected an integer, but received "nope".
Hantera icke-existerande sökvägar i --stdin-filepath graciöst (#6687 av @voithos och @lydell)
Tidigare kastade Prettier ett fel om en icke-existerande undermapp angavs i --stdin-filepath. Nu hanteras detta smidigt.
# Prettier 1.18
$ prettier --stdin-filepath does/not/exist.js < test.js
[error] Invalid configuration file: ENOENT: no such file or directory, scandir '/home/you/project/does/not'
# Prettier 1.19
$ prettier --stdin-filepath does/not/exist.js < test.js
test;
Konfiguration ska inte utvärderas för ignorerade filer (#6233 av @jamesreggio)
Innan denna ändring skulle CLI lösa konfigurationen för en fil innan ignoreringskontroll. Ogiltig konfiguration ledde då till felmeddelande.
Ändringen flyttar konfigurationslösning till efter ignoreringskontroll.
Visa ogiltigt konfigurationsfilnamn i felmeddelande (#6865 av @fisker)
# Input
$ prettier filename.js --config .invalid-config
# Prettier 1.18
Invalid configuration file: ...
# Prettier 1.19
Invalid configuration file `.invalid-config`: ...
Övrigt
Tack till @fisker för uppdateringar av många Prettier-beroenden!
VS Code: lägg till stöd för .mongo-filer (#6848 av @aymericbouzy)
När du använder Azure Cosmos DB-tillägget för VS Code kan du skapa .mongo-filer för att skriva MongoDB-frågor som använder JavaScript-syntax. Den här ändringen gör att VS Code kan formatera din fil med Prettier.
db.users.find({ someField: { $exists: true } });
