This release includes support for new Flow features such as component and hook declarations. All of these features were implemented by the engineers on the Flow team, thank you.
If you appreciate Prettier and would like to support our work, please consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, such as typescript-eslint, remark, and Babel. Thank you for your continued support!
declare namespace printing support (#16066 by @SamChou19815)// Input
declare namespace foo {
declare var bar: string;
}
// Prettier 3.2
// does not parse
// Prettier 3.3
declare namespace foo {
declare var bar: string;
}
// Input
component MyComponent(a: string, b: number) renders SomeComponent {
return <OtherComponent />;
}
hook useMyHook(a: string) {
return useState(a);
}
// Prettier 3.2
// does not parse
// Prettier 3.3
component MyComponent(a: string, b: number) renders SomeComponent {
return <OtherComponent />;
}
hook useMyHook(a: string) {
return useState(a);
}
Adds support for big int Flow Enums.
// Input
enum E {
A = 0n,
B = 1n,
}
// Prettier 3.2
// error
// Prettier 3.3
enum E {
A = 0n,
B = 1n,
}
Adds support for Flow's inexact tuple types.
// Input
type T = [number, ...];
// Prettier 3.2
type T = [number];
// Prettier 3.3
type T = [number, ...];
Adds support for Flow's implies type guard variant. Also updates the flow-parser dependency.
// Input
declare function f(x: mixed): implies x is T;
// Prettier 3.2
// error
// Prettier 3.3
declare function f(x: mixed): implies x is T;
// Input
import json from "./mod.json" with { "type": "json" };
// Prettier 3.2
import json from "./mod.json" with { "type": "json" };
// Prettier 3.3
import json from "./mod.json" with { type: "json" };
// Input
a = {"\a": 1, "b": 2}
// Prettier 3.2 (--quote-props consistent)
a = { "a": 1, "b": 2 };
// Prettier 3.2 (--quote-props as-needed)
a = { "a": 1, b: 2 };
// Prettier 3.3
a = { a: 1, b: 2 };
// Input
/* GraphQL */ `
query foo { id }
`;
// Prettier 3.2
/* GraphQL */ `
query foo { id }
`;
// Prettier 3.3
/* GraphQL */ `
query foo {
id
}
`;
useImperativeHandle hook (#16070 by @Jaswanth-Sriram-Veturi)// Input
useImperativeHandle(ref, () => {
/* Function body */
}, []);
// Prettier 3.2
useImperativeHandle(
ref,
() => {
/* Function body */
},
[],
);
// Prettier 3.3
useImperativeHandle(ref, () => {
/* Function body */
}, []);
When there is already a linebreak in a template interpolation, allow it to stay there even if it is a member expression. Note that (as of #15209) Prettier will not insert a linebreak inside an interpolation when one is not already present.
// Input
`template with ${
very.very.very.very.very.very.very.very.very.very.very.long.chain
}`;
// Prettier 3.2
`template with ${very.very.very.very.very.very.very.very.very.very.very.long.chain}`;
// Prettier 3.3
`template with ${
very.very.very.very.very.very.very.very.very.very.very.long.chain
}`;
// Input
const module = await import(`data:text/javascript,
console.log("RUN");
`);
// Prettier 3.2
const module = await (`data:text/javascript,
console.log("RUN");
`);
// Prettier 3.3
const module = await import(`data:text/javascript,
console.log("RUN");
`);
TSInferType (#16031 by @fisker)// Input
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
? U
: never;
// Prettier 3.2
type Foo<T> = T extends infer U extends number | { a: infer U extends number }
? U
: never;
// Prettier 3.3
type Foo<T> = T extends (infer U extends number) | { a: infer U extends number }
? U
: never;
// Input
class Foo {
public public bar() {};
}
// Prettier 3.2
class Foo {
public bar() {}
}
// Prettier 3.3
SyntaxError: Accessibility modifier already seen. (2:10)
1 | class Foo {
> 2 | public public bar() {};
| ^^^^^^
3 | }
--no-semi for readonly class field (#16133 by @sxzz)// Input
class A {
field
readonly [expr] = true
}
// Prettier 3.2
class A {
field;
readonly [expr] = true
}
// Prettier 3.3
class A {
field
readonly [expr] = true
}
Add parentheses around yield expressions if parent is an angle-bracket type assertion.
// Input
function* g() {
const y = <T>(yield x);
}
// Prettier 3.2
function* g() {
const y = <T>yield x;
}
// Prettier 3.3
function* g() {
const y = <T>(yield x);
}
<!-- Input -->
```css
img {
filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
-2px -2px 0 hsl(210deg 100% 50%)
)
drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
-2px -2px 0 hsl(30deg 100% 50%)
);
}
```
<!-- Prettier 3.2 -->
```css
img {
filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%)) drop-shadow(
-2px -2px 0 hsl(210deg 100% 50%)
)
drop-shadow(2px 2px 0 hsl(120deg 100% 50%)) drop-shadow(
-2px -2px 0 hsl(30deg 100% 50%)
);
}
```
<!-- Prettier 3.3 -->
```css
img {
filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
}
```
<!-- Input -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
<!-- Prettier 3.2 -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
<!-- Prettier 3.3 -->
<ExternalLink href="http://example.com">Prettier</ExternalLink> is an
opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-editors
<!-- Input -->
[^a]: Footnote A
[^b]: Footnote B
<!-- Prettier 3.2 -->
[^a]: Footnote A
[^b]: Footnote B
<!-- Prettier 3.3 -->
[^a]: Footnote A
[^b]: Footnote B
{ "proseWrap": "always" }
<!-- Input -->
\
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word
<!-- Prettier 3.2 -->
\
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word
<!-- Prettier 3.3 -->
\
word very-very-very-very-very-very-very-very-very-very-long-word
very-very-very-very-very-very-very-very-very-very-long-word
package.yaml config (#16157 by @danielbayley)Enable support for reading prettier configuration from package.yaml.
# package.yaml
prettier:
semi: false
singleQuote: true
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。