跳至主内容区

Prettier 2.5：支持 TypeScript 4.5 和 MDX v2 注释语法！

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

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

本次更新新增了对 TypeScript 4.5 新语法以及 MDX v2 注释语法的支持！

如果您喜欢 Prettier 并希望支持我们的工作，欢迎通过 我们的 OpenCollective 直接赞助，或赞助我们依赖的项目，包括 typescript-eslint、remark 和 Babel。

重要更新​

TypeScript​

避免长类型箭头函数体产生额外缩进偏移 (#11515 由 @kachkaev 和 @thorn0 贡献)​

自 Prettier 2.3.0 起，箭头函数中的类型声明可能影响函数体缩进。类型注解长度的变化会产生大量差异(diffs)，从而增加 git 冲突的可能性。为避免此问题，函数体偏移量现已稳定化处理。
注意：此项变更可能影响您代码库中的大量代码行。

// Input
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.2 and below
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> = ({
  x,
  y,
}) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

// Prettier 2.4
const MyComponentWithLongName: React.VoidFunctionComponent<MyComponentWithLongNameProps> =
  ({ x, y }) => {
    const a = useA();
    return <div>{x + y + a}</div>;
  };

// Prettier 2.5
const MyComponentWithLongName: React.VoidFunctionComponent<
  MyComponentWithLongNameProps
> = ({ x, y }) => {
  const a = useA();
  return <div>{x + y + a}</div>;
};

支持 TypeScript 4.5 (#11721, #11723, #11813 由 @sosukesuzuki 贡献)​

我们已添加对 TypeScript 4.5 新语法特性的支持：

type 修饰符在导入名称中的应用​
// Example
import { type A } from "mod";

私有字段存在性检查​
// Example
class Foo {
  #prop1;
  method() {
    return #prop1 in this;
  }
}

导入断言​
// Example
import obj from "./something.json" assert { type: "json" };

支持 .mts 和 .cts 文件扩展名​

Prettier 现在会将 .mts 和 .cts 扩展名的文件识别为 TypeScript 进行格式化。

HTML​

将 HTML class 属性折叠为单行显示 (#11827 由 @jlongster 贡献)​

此项更新撤销了 #7865 的改动。

虽然此功能旨在帮助使用 Tailwind 等 CSS 库的用户（这些库通常会导致元素上存在大量类名），但我们发现用于判断何时将类列表拆分为多行的启发式规则无法持续产出理想结果。我们仍在探索更优的 HTML 多类名格式化方案——欢迎参与讨论。

<!-- Input -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

<!-- Prettier 2.4 -->
<div
  class="
    SomeComponent__heading-row
    d-flex
    flex-column flex-lg-row
    justify-content-start justify-content-lg-between
    align-items-start align-items-lg-center
  "
></div>

<!-- Prettier 2.5 -->
<div
  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
></div>

MDX​

新增对 MDX v2 注释语法的支持 (#11563 由 @wooorm 贡献)​

在现有 MDX v1 注释语法（HTML 风格）支持的基础上，新增了对 MDX v2 注释语法（JavaScript 风格）的基础支持。

注意：当前 Prettier 仅支持新的单行注释语法（以便使用 {/* prettier-ignore */}），暂不支持 MDX v2 的其他特性。

Input:
{/*A comment*/}

Prettier 2.4:
{/_A comment_/}

Prettier 2.5:
{/*A comment*/}

其他变更​

JavaScript​

修复箭头链函数体中序列表达式的括号问题（#11593 by @bakkot）​

现在，当序列表达式作为箭头函数体时，其必需的括号在箭头链中会被保留。此前 Prettier 会移除这些括号，导致语法无效。

// Input
const f = () => () => (0, 1);

// Prettier 2.4
const f = () => () => 0, 1;

// Prettier 2.5
const f = () => () => (0, 1);

忽略非严格模式语法错误（#11750 by @fisker, #11778 by @sosukesuzuki）​

JavaScript 的严格模式会添加若干错误提示以防止错误。其中部分错误属于解析阶段的语法错误。由于 Prettier 的目标是格式化所有语法有效的 JavaScript 代码（无论其能否实际运行），我们选择将这类错误检查交由 linter、编译器和运行时环境处理。

// Input
function foo() { var bar = 1; delete bar; }

// Prettier 2.4
SyntaxError: Deleting local variable in strict mode. (1:31)
> 1 | function foo() { var bar = 1; delete bar; }
    |                               ^

// Prettier 2.5
function foo() {
  var bar = 1;
  delete bar;
}

修复嵌入式 CSS 中表达式与括号间的空格问题（#11800 by @sosukesuzuki）​

// Input
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.4
const paragraph2 = css`
  transform1: ${expr} (30px);
  transform2: ${expr} (30px);
`;

// Prettier 2.5
const paragraph2 = css`
  transform1: ${expr}(30px);
  transform2: ${expr} (30px);
`;

支持 espree 解析器中的 ES2022 类私有字段 in 语法（#11835 by @fisker）​

// Example
class Foo {
  #brand;
  static isC(obj) {
    return #brand in Foo;
  }
}

TypeScript​

移除装饰器中的不必要括号（#11717, #11849 by @sosukesuzuki）​

// Input
class Test {
  @foo`bar`
  test1: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

// Prettier 2.4
class Test {
  @(foo`bar`)
  test: string = "test"

  @(test().x("global").y())
  test2: string = "test";
}

// Prettier 2.5
class Test {
  @foo`bar`
  test: string = "test"

  @test().x("global").y()
  test2: string = "test";
}

SCSS​

改进 @use with 的格式化 (#11637 由 @sosukesuzuki)​

// Input
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

// Prettier 2.4
@use "library" with
  ($black: #222, $border-radius: 0.1rem, $font-family: "Helvetica, sans-serif");

// Prettier 2.5
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem,
  $font-family: 'Helvetica, sans-serif'
);

修复 @forward with 的格式化错误（#11683 by @sriramarul, @sosukesuzuki)​

// Input
@forward 'foo.scss' with ($components: red);

// Prettier 2.4
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.5
@forward "foo.scss" with (
  $components: red
);

Ember / Handlebars​

在属性中的 mustache 语句内，引号使用相反的引号类型 (#11524 由 @bmaehr)​

{{!-- Input --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.5 --}}
<div title="{{t 'login.username.description'}}" />

{{!-- Prettier 2.4 --}}
<div title="{{t "login.username.description"}}" />

Markdown​

在嵌入的 TSX 中保留类型参数的尾部逗号 (#11685 由 @sosukesuzuki)​

尾逗号是必要的，用于防止 TypeScript 将 <T> 视为 JSX 表达式的开始。

<!-- Input  -->
```tsx
const test = <T,>(value: T) => {};
```

<!-- Prettier 2.4 -->
```tsx
const test = <T>(value: T) => {};
```

<!-- Prettier 2.5 -->
```tsx
const test = <T,>(value: T) => {};
```