跳至主内容区

Prettier 2.8：改进 --cache CLI 选项并支持 TypeScript 4.9 satisfies 运算符！

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

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

本次发布改进了 2.7 版本中引入的 --cache 选项。我们新增了 --cache-location 选项，并修复了未指定 --write 时仍会保存缓存的错误。

我们还新增了对 TypeScript 4.9 satisfies 运算符的支持！

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

Prettier 团队计划在未来几个月内发布 3.0 版本。如果您是插件开发者，请开始准备迁移事宜。请查阅 迁移指南 和 issue #13606 获取详细信息。

重要更新​

TypeScript​

支持 TypeScript 4.9 satisfies 运算符 (#13764, #13783, #13872 by @sosukesuzuki)​

const palette = {
  red: [255, 0, 0],
  green: "#00ff00",
  blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;

类中的自动访问器 将在后续的 2.8 补丁版本中支持。为了优先发布 satisfies 运算符，我们暂时调整了开发计划。

CLI​

未指定 --write 选项时不保存缓存 (#13016 by @Milly)​

# Prettier 2.7
$ prettier --cache foo.js
# This shows formatted contents of `foo.js`.
# Then cache is created and `foo.js` is flagged as already formatted.

$ prettier --cache --write foo.js
foo.js 2ms (cached)
# "... (cached)" means the file is already formatted, so nothing is done this time.

# Prettier 2.8
$ prettier --cache foo.js
# Show formatted contents of `foo.js`.

$ prettier --cache --write foo.js
foo.js 2ms
# `foo.js` is formatted now.

新增 --cache-location 选项 (#13019 by @sosukesuzuki)​

默认情况下，Prettier CLI 将 --cache 选项的缓存文件保存在 ./node_modules/.cache/prettier/.prettier-cache。现在可通过新选项自定义路径：

prettier --write --cache --cache-location=my_cache_file src

其他变更​

JavaScript​

修复文档块解析问题 (#13054 by @fisker)​

// With `--insert-pragma` flag

// Input
/* comment */
foo()

// Prettier 2.7
/**
 * /* comment
 *
 * @format
 */

foo();

// Prettier 2.8
/**
 * comment
 *
 * @format
 */

foo();

修复函数体的范围格式化 (#13173 by @thorn0)​

// Input
let fn = (() => {
  return; //
//^^^^^^^^^^ - range
});

// Prettier 2.7
let fn = (() => {
  return; //
};);

// Prettier 2.8
let fn = (() => {
  return; //
});

修复多行字符串的格式不一致问题 (#13274 by @GlebDolzhikov)​

// Input
const loremIpsumFooBazBar1 = 'Multiline string\
         Multiline string\
'

const loremIpsumFooBazBar2 = 'Multiline string\
         Multiline string\
         Multiline string'

// Prettier 2.7
const loremIpsumFooBazBar1 = "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

// Prettier 2.8
const loremIpsumFooBazBar1 =
  "Multiline string\
         Multiline string\
";

const loremIpsumFooBazBar2 =
  "Multiline string\
         Multiline string\
         Multiline string";

TypeScript​

修复带 extends 的推断函数返回类型中的括号问题 (#13289 by @GlebDolzhikov)​

// Input
type Foo<T> = T extends (...a: any[]) => (infer R extends string) ? R : never;

// Prettier 2.7
type Foo<T> = T extends (...a: any[]) => infer R extends string ? R : never;

// Prettier 2.8
type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;

CSS​

修复长 :is、:where 和 :not 选择器的格式化问题 (#13577 by @j-f1)​

:is、:where 和 :not 等伪选择器现在可以像其他语言中的函数调用一样格式化。这些选择器能接受多个选择器作为参数，其参数间的逗号现在会被特殊处理，解决了之前令人困惑的换行行为。此功能仍有改进空间——如果您发现不符合预期的格式化效果，请提供示例代码并创建 issue。

/* Input */
:where(
  label > input:valid,
  label > textarea:not(:empty),
  label > button[disabled]
) ~ .errors > .error { display: none; }

/* Prettier 2.7 */
:where(label > input:valid, label > textarea:not(:empty), label
    > button[disabled])
  ~ .errors
  > .error {
  display: none;
}

/* Prettier 2.8 */
:where(
    label > input:valid,
    label > textarea:not(:empty),
    label > button[disabled]
  )
  ~ .errors
  > .error {
  display: none;
}

SCSS​

修复：'#' 和 '{' 之间的多余空格问题 (#13286 by @jspereiramoura)​

// Input
padding: var(--spacer#{(1) + 2});

// Prettier 2.7
padding: var(--spacer# {(1) + 2});

// Prettier 2.8
padding: var(--spacer#{(1) + 2});

Angular​

在管道符周围添加空格 (#13100 by @sosukesuzuki)​

<!-- Input -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

<!-- Prettier 2.7 -->
<tui-line-chart
  [value]="chart | tuiFilter: filter:range | tuiMapper: toNumbers:range"
></tui-line-chart>

<!-- Prettier 2.8 -->
<tui-line-chart
  [value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>

Ember / Handlebars​

正确格式化自定义 "else if" 代码块 (#13507 by @jamescdavis)​

模板转换可用于创建行为类似 if 的自定义块关键字。本次更新使 printer-glimmer 能正确识别当 "if" 是自定义关键字时的 "else if" 情况并进行格式化。

{{! Input }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier 2.7 }}
{{#when isAtWork}}
  Ship that code!
{{else}}{{#when isReading}}
    You can finish War and Peace eventually...
  {{else}}
    Go to bed!
  {{/when}}{{/when}}

{{! Prettier 2.8 }}
{{#when isAtWork}}
  Ship that code!
{{else when isReading}}
  You can finish War and Peace eventually...
{{else}}
  Go to bed!
{{/when}}

Markdown​

当使用 --prose-wrap=preserve 时保留内联代码的换行 (#11373 by @andersk)​

<!-- Input -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.7 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor incididunt` ut labore et dolore magna aliqua.

<!-- Prettier 2.8 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.

MDX​

增强 MDX 范围忽略功能支持 (#12208 by @nickrttn)​

新增支持在 MDX 中使用 JSX 注释实现 Markdown 的范围忽略指令。

// Input
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

// Prettier 2.7 (throws an error)
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 2.8
{/* prettier-ignore-start */}

export const Hello = () => {
  return (<p>
  Hello</p>)
}

{/* prettier-ignore-end */}

API​

Playground 的 "文档探索器" 模式 (#10183 by @thorn0)​

将 parser 选项切换为特殊的 doc-explorer 值，即可操作 Prettier 的中间表示形式，并查看不同选项下的打印效果。

修复在 group 中使用 ifBreak 时的文档打印问题 (#12362 by @fisker)​

// Input
//                                                                              |80
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

// Prettier 2.7
for (const number of [
  123_123_123, 123_123_123, 123_123_123, 123_123_123, 12,
]) {
}

// Prettier 2.8
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}

Playground 新增 "重新抛出嵌入错误" 复选框 (#13227 by @thorn0)​

此前 Playground 与本地 Prettier 的行为存在不一致：它会显示嵌入式语言的解析错误用于调试，造成理解混淆。现在该行为通过复选框控制，默认处于关闭状态。

CLI​

为 .lintstagedrc 文件自动推断解析器 (#13081 by @OrRosenblatt)​

无扩展名的 .lintstagedrc 文件将使用 json 和 yaml 解析器处理。