Skip to main content

Prettier 3.3: New Flow features and a lot of bug fixes

· 7 min read
Sosuke Suzuki
Sosuke Suzuki

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!

Highlights​

Flow​

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;
}

Component syntax printing support (#16191 by @SamChou19815)​

// 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);
}

Support big int Enums (#16268 by @gkz)​

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,
}

Support inexact tuple types (#16271 by @gkz)​

Adds support for Flow's inexact tuple types.

// Input
type T = [number, ...];

// Prettier 3.2
type T = [number];

// Prettier 3.3
type T = [number, ...];

Support 'implies' type guard variant (#16272 by @gkz)​

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;

Other Changes​

JavaScript​

Unquote keys in import attributes (#15888 by @sosukesuzuki)​

// 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" };

Fix unstable object print (#16058 by @fisker)​

// 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 };

Format embedded GQL in template literal statements (#16064 by @keithlayne)​

// Input
/* GraphQL */ `
  query foo { id }
`;

// Prettier 3.2
/* GraphQL */ `
  query foo { id }
`;

// Prettier 3.3
/* GraphQL */ `
  query foo {
    id
  }
`;

Improve formatting of React 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 */
}, []);

Allow linebreaks in member expressions in template interpolations (#16116 by @bakkot)​

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
}`;

Fix dynamic import when the module source is a template string (#16267 by @fisker)​

// 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");
`);

TypeScript​

Add missing parentheses to 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;

Throw errors for duplicated accessibility modifiers (#16040 by @fisker, @auvred)​

// 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 | }

Respect --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 necessary parentheses to yield expressions (#16194 by @kirkwaiblinger)​

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);
}

Markdown​

Improve wrapping for code block in markdown and jsx in mdx (#15993 by @seiyab)​

<!-- 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

Add newline between markdown footnote definitions (#16063 by @Atema)​

<!-- 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

Improve wrapping for markdown / mdx (#16158 by @seiyab)​

{ "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

API​

Add support for package.yaml config (#16157 by @danielbayley)​

Enable support for reading prettier configuration from package.yaml.

# package.yaml
prettier:
  semi: false
  singleQuote: true