跳至主内容区

Prettier 3.5：新增 objectWrap 选项、experimentalOperatorPosition 选项及 TS 配置文件支持！

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

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

此版本包含大量错误修复及以下新功能：

  • 支持新的 objectWrap 选项

  • 支持新的实验性 experimentalOperatorPosition 选项

  • 支持 TypeScript 配置文件

详情请参阅各章节。

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

为何新增两个选项​

此版本引入了两个新选项。如果您熟悉 Prettier 的选项哲学，可能会疑惑：“为何要新增选项？”请放心，这些并非普通选项，也未违背我们的选项哲学。

顾名思义，experimentalOperatorPosition 是实验性选项。我们制定了实验性选项政策，这意味着它最终会被移除。未来新行为可能成为默认设置，或此选项可能完全弃用。如果您长期关注 Prettier，可能还记得我们曾添加过 experimentalTernaries 选项，此次采用相同的处理方式。

objectWrap 有些特殊。长期以来，我们一直在探索如何格式化多行对象。由于尚未找到完美方案，目前采用半手动处理方式。更多细节请参阅设计理念。当前行为并不理想，因为最终输出会因用户编写代码的方式而异。为提供更一致的格式，我们决定引入 objectWrap 选项。

尽管此版本包含两个新选项，我们要强调，我们并未忘记 Prettier 的选项哲学。这些选项旨在解决长期存在的特定格式化难题，且未违背我们的选项哲学。

重要更新​

JavaScript​

新增实验性选项：在二元运算符前换行 (#7111 by @btmills)​

此功能通过 --experimental-operator-position <start|end> 标志实现。

当二元表达式需要换行时，start 参数会将运算符置于新行行首。将二元运算符置于换行后的行首可使运算符更醒目且更易于扫描。

// Input
var a = Math.random() * (yRange * (1 - minVerticalFraction)) + minVerticalFraction * yRange - offset;

// `experimentalOperatorPosition: end` (default behavior)
var a =
  Math.random() * (yRange * (1 - minVerticalFraction)) +
  minVerticalFraction * yRange -
  offset;

// `experimentalOperatorPosition: start`
var a =
  Math.random() * (yRange * (1 - minVerticalFraction))
  + minVerticalFraction * yRange
  - offset;

实现 objectWrap 配置选项 (#16163 by @pauldraper, @sosukesuzuki)​

Prettier 历史上一直对多行 JavaScript 对象字面量采用半手动格式化方式。

具体而言：若第一个属性前存在换行符，则对象将保持多行格式——即使其可放在单行中。详见多行对象。

此行为仍为默认设置，而 --object-wrap=collapse 则会在格式化对象字面量时忽略空白符。

// Input
const obj1 = {
  name1: "value1", name2: "value2",
};

const obj2 = { name1: "value1",
  name2: "value2",
};

// Prettier 3.4
const obj1 = {
  name1: "value1",
  name2: "value2",
};

const obj2 = { name1: "value1", name2: "value2" };

// Prettier 3.5 (with `--object-wrapping=collapse`)
const obj1 = { name1: "value1", name2: "value2" };

const obj2 = { name1: "value1", name2: "value2" };

API​

新增对 TypeScript 配置文件的支持 (#16828 by @itsyoboieltr & @fisker)​

新增配置文件格式：

  • .prettierrc.ts

  • .prettierrc.mts

  • .prettierrc.cts

  • prettier.config.ts

  • prettier.config.mts

  • prettier.config.cts

注意：

目前 Node.js 对 TypeScript 的支持仍处于实验阶段。

要使用 TypeScript 配置文件，需要 Node.js>=22.6.0，且 Node.js v22 需要 --experimental-strip-types 标志。

你可以这样运行 Prettier：

node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write

或者

NODE_OPTIONS="--experimental-strip-types" prettier . --write

其他 TypeScript 加载器应该也能工作，但未经测试，使用风险自负。

例如，使用 tsx，你可以：

node --import tsx node_modules/prettier/bin/prettier.cjs . --write

或者

tsx node_modules/prettier/bin/prettier.cjs . --write

其他变更​

JavaScript​

改进 JSX 中换行的边界情况处理 (#16700 by @seiyab)​

// Input
br_triggers_expression_break =
  <div><br />
  text text text text text text text text text text text {this.props.type} </div>

// Prettier 3.4
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text {
      this.props.type
    }{" "}
  </div>
);

// Prettier 3.5
br_triggers_expression_break = (
  <div>
    <br />
    text text text text text text text text text text text{" "}
    {this.props.type}{" "}
  </div>
);

Flow​

支持 Flow 中的 const 类型参数 (#16947 by @gkz)​

function f<const T>(): void {}

// Prettier 3.4
// Parse error

// Prettier 3.5
function f<const T>(): void {}

CSS​

在逗号分隔的值之前换行 (#16907 by @seiyab)​

/* Input */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

/* Prettier 3.4 */
a {
  background-image: linear-gradient(
      to bottom,
      rgb(255 255 0 / 50%),
      rgb(0 0 255 / 50%)
    ),
    url("catfront.png");
}

/* Prettier 3.5 */
a {
  background-image:
    linear-gradient(to bottom, rgb(255 255 0 / 50%), rgb(0 0 255 / 50%)),
    url("catfront.png");
}

Vue​

支持 .prop 简写 (#16920 by @fisker)​

.foo 是 v-bind:foo.prop 的简写。详情请参阅 v-bind 内置指令。

<!-- Input -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.4 -->
<template>
  <button .disabled="   a &&b ">Click!</button>
</template>

<!-- Prettier 3.5 -->
<template>
  <button .disabled="a && b">Click!</button>
</template>

Angular​

改进 ICU 块内的换行处理 (#16922 by @fisker)​

<!-- Input -->
<span>The author is {gender, select, male {male} female {female} other {other}}</span>
<span>The author is <span>male consectetur adipiscing elit, sed do eiusmod</span></span>

<!-- Prettier 3.4 -->
<span
  >The author is {gender, select, male {male} female {female} other {other}
}</span>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

<!-- Prettier 3.5 -->
<span
  >The author is
  {gender, select, male {male} female {female} other {other}}</span
>
<span
  >The author is
  <span>male consectetur adipiscing elit, sed do eiusmod</span></span
>

修复 ICU 块内多余的空行 (#16922 by @fisker)​

<!-- Input -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

<!-- Prettier 3.4 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp

  }
}

<!-- Prettier 3.5 -->
{active, select,
  true {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
  false {
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp
  }
}

Ember / Handlebars​

处理 Handlebars/Glimmer 中的 <style> 和 <pre> 标签 (#15087 by @jurgenwerk)​

{{!-- Input --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red { color: red }
  .blue {
    color: red
  }
</style>

{{!-- Prettier 3.4 --}}
<pre>
  cd ~ ls echo "hey"
</pre>
<style>
  .red { color: red } .blue { color: blue }
</style>

{{!-- Prettier 3.5 --}}
<pre>
  cd ~
  ls
  echo "hey"
</pre>
<style>
  .red {
    color: red;
  }
  .blue {
    color: red;
  }
</style>

Markdown​

将 U+FF5E 视为 CJK 标点符号 (#16832 by @tats-u)​

在日文版 Windows 中，U+FF5E 全角波浪号 (～) 常被用作 U+301C 波浪号 (〜) 的替代形式。与其他类型文档（如 Microsoft Office 文档）相比，全角字母在 Markdown 文档中的使用频率较低，而全角波浪号用于此目的的频率又远低于全角字母和数字。因此我们可以推断，实际 Markdown 文档中的全角波浪号是波浪号的替代形式，属于 CJK 标点符号的一部分。

<!-- Input (--prose-wrap=never) -->
a 字 a 字 a 字
60～
100点
60〜
100点

<!-- Prettier 3.4 -->
a 字 a 字 a 字 60～ 100点 60〜10点


<!-- Prettier 3.5 -->
a 字 a 字 a 字 60～10点 60〜100点

上例中介于 60 和 100 之间的第一个符号是 U+FF5E 全角波浪号 (～)，第二个则是 U+301C 波浪号 (〜)。

API​

支持在 Bun 中从 package.json 读取 JSONC 语法配置 (#17041 by @fisker)​

Bun 1.2 在 package.json 中增加了 JSONC 支持，此前 Prettier 会忽略其中的 prettier 配置。从 Prettier 3.5 开始，我们可以无报错地读取其中的 prettier 配置。

但请注意，这只是 Bun 的特性而非 Node.js 原生支持，因此仅在使用 Bun 运行 Prettier 时生效。

重要提示：Prettier 默认使用 json-stringify 解析器格式化 package.json 文件。要支持使用 JSONC 语法格式化 package.json 文件，您需要覆盖解析器选项：

export default {
  overrides: [
    {
      files: ["package.json"],
      options: {
        parser: "jsonc",
      },
    },
  ],
};

若因故无法升级 Prettier，您仍可在 package.json 中使用 JSONC 语法，但请勿在其中放置 prettier 配置，而应使用其他配置文件。

其他改进​

为 require(ESM) 使用 ESM 入口点 (#16958 by @tats-u)​

信息

此项更改已在 v3.5.2 版本撤销，详情参见 #17139。

Node.js 22.12 及以上版本可（实验性）通过 require 函数加载 ESM 模块，无需运行时标志。此项改进使 require 能直接加载 Prettier 的 ESM 入口点，无需依赖 CommonJS 入口点。

通过 require 加载 ES 模块的功能尚未完全稳定，但从 Node.js 22.13 开始，可在不触发 ExperimentalWarning 的情况下使用。