跳至主内容区

Prettier 3.3：新增 Flow 功能与大量错误修复

· 1 分钟阅读
Sosuke Suzuki
Sosuke Suzuki
非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

本次发布包含对组件和钩子声明等新 Flow 功能的支持。所有功能均由 Flow 团队的工程师实现，在此表示感谢。

如果您认可 Prettier 的价值并希望支持我们的工作，请考虑通过 我们的 OpenCollective 直接赞助，或赞助我们依赖的项目如 typescript-eslint、remark 和 Babel。感谢您持续的支持！

重要更新​

Flow​

支持 declare namespace 打印 (#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;
}

支持组件语法打印 (#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);
}

支持大整数枚举 (#16268 by @gkz)​

新增对Flow 枚举中大整数的支持。

// Input
enum E {
  A = 0n,
  B = 1n,
}

// Prettier 3.2
// error

// Prettier 3.3
enum E {
  A = 0n,
  B = 1n,
}

支持非精确元组类型 (#16271 by @gkz)​

新增对 Flow 非精确元组类型的支持。

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

// Prettier 3.2
type T = [number];

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

支持 'implies' 类型守卫变体 (#16272 by @gkz)​

新增对 Flow implies 类型守卫变体的支持，同时更新了 flow-parser 依赖。

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

其他变更​

JavaScript​

移除导入属性中的键名引号 (#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" };

修复对象打印不稳定问题 (#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 };

格式化模板字符串语句中的嵌入式 GQL (#16064 by @keithlayne)​

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

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

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

改进 React useImperativeHandle 钩子格式化 (#16070 by @Jaswanth-Sriram-Veturi)​

// Input
useImperativeHandle(ref, () => {
  /* Function body */
}, []);

// Prettier 3.2
useImperativeHandle(
  ref,
  () => {
    /* Function body */
  },
  [],
);

// Prettier 3.3
useImperativeHandle(ref, () => {
  /* Function body */
}, []);

允许在模板插值的成员表达式中换行 (#16116 by @bakkot)​

当模板插值中已存在换行时，即使该表达式是成员表达式也允许保留换行。请注意（自#15209起）当插值内不存在换行时，Prettier 不会主动插入换行。

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

修复模块源为模板字符串时的动态导入问题 (#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​

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

对重复的访问修饰符抛出错误 (#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 | }

在只读类字段中遵循 --no-semi 选项 (#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
}

为 yield 表达式添加必要的括号 (#16194 by @kirkwaiblinger)​

当父节点为尖括号类型断言时，为 yield 表达式添加括号。

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

改进 Markdown 中的代码块以及 MDX 中 JSX 的换行处理 (#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

在 Markdown 脚注定义之间添加换行 (#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

改进 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​

添加对 package.yaml 配置的支持 (#16157 by @danielbayley)​

支持从 package.yaml 中读取 prettier 配置。

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