跳至主内容区

Prettier 2.7：新增 --cache CLI 选项与 TypeScript 4.7 语法支持！

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

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

本次发布包含全新的 --cache CLI 选项。启用此选项后，系统将使用特定属性作为缓存密钥，仅当文件发生更改时才会重新格式化。这将显著提升 CLI 性能。

我们还新增了对 TypeScript 4.7 语法的格式化支持！

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

重要更新​

TypeScript​

支持 TypeScript 4.7 (#12896, #12897, #12898, #12900, #12921, #12924, #12959 by @sosukesuzuki)​

支持 TypeScript 4.7 的新特性！

实例化表达式​
interface Box<T> {
  value: T;
}
function makeBox<T>(value: T) {
  return { value };
}
const makeHammerBox = makeBox<Hammer>;
const makeWrenchBox = makeBox<Wrench>;
可选的型变注解​
interface Animal {
  animalStuff: any;
}
interface Dog extends Animal {
  dogStuff: any;
}
type Getter<out T> = () => T;
type Setter<in T> = (value: T) => void;
infer 的 extends 约束​
type FirstString<T> = T extends [infer S extends string, ...unknown[]]
  ? S
  : never;

CLI​

新增 --cache 与 --cache-strategy CLI 选项 (#12800 by @sosukesuzuki)​

新增两个 CLI 选项用于实现类似 ESLint 的缓存系统。

详见文档说明。

--cache​

启用此选项后，以下值将作为缓存密钥，仅当其中任一值发生变更时才会重新格式化文件：

  • Prettier 版本

  • 配置选项

  • Node.js 版本

  • (当 --cache-strategy 为 content 时) 文件内容

  • (当 --cache-strategy 为 metadata 时) 文件元数据（如时间戳）

prettier --write --cache src
--cache-strategy​

缓存检测文件变更的策略，可选 metadata 或 content。若未指定策略，默认使用 content。

prettier --write --cache --cache-strategy metadata src

其他变更​

JavaScript​

保留导出标识符间的空行 (#12746 by @sosukesuzuki)​

// Input
export {
  // a
  foo1,

  // b
  bar1,
  baz1,
} from "mod";

// Prettier 2.6
export {
  // a
  foo1,
  // b
  bar1,
  baz1,
} from "mod";

// Prettier 2.7
export {
  // a
  foo1,

  // b
  bar1,
  baz1,
} from "mod";

识别更多测试调用模式 (#12779 by @HosokawaR)​

支持识别类似 Playwright test.describe 的测试调用模式。

// Input
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.only("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel.only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});

test.describe.serial("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.serial.only("does something really long and complicated so I have to write a very long name for the test", () => {});

// Prettier 2.6
test.step(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.only(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.parallel(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.parallel.only(
  "does something really long and complicated so I have to write a very long name for the testThis is a very",
  () => {}
);

test.describe.serial(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

test.describe.serial.only(
  "does something really long and complicated so I have to write a very long name for the test",
  () => {}
);

// Prettier 2.7
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe
  .only("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe
  .parallel("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.parallel
  .only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});

test.describe
  .serial("does something really long and complicated so I have to write a very long name for the test", () => {});

test.describe.serial
  .only("does something really long and complicated so I have to write a very long name for the test", () => {});

修复注释格式化问题 (#12860 by @HosokawaR)​

此变更修复了 exports 中的注释格式，使其与 import 中的注释格式保持一致。

虽然此变更不影响 import 中的注释格式，但为便于参考，变更日志中仍包含 import 注释格式的示例。

// Input
export {
  foo,

  bar as  // comment
		 baz,
}

import {
  foo,

  bar as  // comment
		 baz,
} from 'foo'

// Prettier 2.6
export {
  foo,
  bar as baz, // comment
};

import {
  foo,
  // comment
  bar as baz,
} from "foo";

// Prettier 2.7
export {
  foo,
  // comment
  bar as baz,
};

import {
  foo,
  // comment
  bar as baz,
} from "foo";

TypeScript​

在 babel-ts 解析器中输出 as 而非 : (#12706 by @HosokawaR)​

// Input
[x as any] = x;

// Prettier 2.6
[x: any] = x;

// Prettier 2.7
[x as any] = x;

修复含计算成员的 TypeScript Enum 格式化问题 (#12930 by @HosokawaR)​

// Input
enum A {
  [i++],
}

// Prettier 2.6
enum A {
  i++,
}

// Prettier 2.7
enum A {
  [i++],
}

停止解析无效代码 (#12982 by @fisker)​

// Input
const object = ({ methodName() });

// Prettier 2.6
const object = { methodName(); };

// Prettier 2.7
SyntaxError: Unexpected token. (1:29)
> 1 | const object = ({ methodName() });
    |                             ^^

HTML​

支持 HTML 中的 Speculation Rules API 格式化 (#12882 by @sosukesuzuki)​

有关 Speculation Rules API 的详细信息，请参阅 https://web.dev/speculative-prerendering/。

<!-- Input -->
<script type="speculationrules">
  {
   "prerender": [
  {"source": "list", "urls": ["https://a.test/foo"]}
  ]
  }
</script>


<!-- Prettier 2.6 -->
<script type="speculationrules">
  {
   "prerender": [
  {"source": "list", "urls": ["https://a.test/foo"]}
  ]
  }
</script>

<!-- Prettier 2.7 -->
<script type="speculationrules">
  {
    "prerender": [{ "source": "list", "urls": ["https://a.test/foo"] }]
  }
</script>

Vue​

支持格式化 Vue 模板中的 TypeScript 表达式 (#12584 by @sosukesuzuki)​

<!-- input -->
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.6 -->
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  {{ (x      as      number).toFixed(2) }}
</template>

<!-- Prettier 2.7 -->
<script setup lang="ts">
let x: string | number = 1;
</script>

<template>
  {{ (x as number).toFixed(2) }}
</template>

自动推断 Vue SFC 样式块的 Stylus 解析器 (#12707 by @lsdsjy)​

Vue SFC 中的 <style lang="stylus"> 块可通过相应插件进行处理。

避免在 Vue SFC 块中每行打印单个属性 (#12895 by @sosukesuzuki)​

<!-- Input (singleAttributePerLine: true) -->
<script lang="ts" setup>
</script>

<!-- Prettier 2.6 -->
<script
 lang="ts"
 setup
>
</script>

<!-- Prettier 2.7 -->
<script lang="ts" setup>
</script>

Angular​

修复简写属性格式化问题 (#12993 by @sosukesuzuki, @fisker)​

<!-- Input -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>

<!-- Prettier 2.6 -->
<ng-container
  *ngTemplateOutlet="someTmpl; context: { app: this.app }"
></ng-container>

<!-- Prettier 2.7 -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>

GraphQL​

支持输出 SchemaExtension 节点 (#12519 by @trevor-scheer)​

# Input
extend schema { subscription: Subscription }
extend schema @directive

# Prettier 2.6
N/A - throws error

# Prettier 2.7
extend schema {
  subscription: Subscription
}
extend schema @directive

修复单行描述和空描述格式化问题 (#12608 by @chimurai, @fisker)​

# Input
""" Customer """
type Person {
  name: String
}

""""""
type Person {
  name: String
}

# Prettier 2.6.2
"""
 Customer
"""
type Person {
  name: String
}

"""

"""
type Person {
  name: String
}

# Prettier 2.6.2 (second format)
"""
Customer
"""
type Person {
  name: String
}

"""

"""
type Person {
  name: String
}

# Prettier 2.7
"""
Customer
"""
type Person {
  name: String
}

"""
"""
type Person {
  name: String
}

CLI​

显示需要更改的文件数量 (#12561 by @Harry-Hopkinson)​

# Prettier 2.6
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?

# Prettier 2.7
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] src/fileB.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?

$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file. Forgot to run Prettier?

推断 .importmap 文件的解析器 (#12603 by @fisker)​

将 .importmap 文件格式化为 JSON 文件。

简化性能测试 (#12682, #12698 by @fisker)​

当传递 --debug-benchmark 或 --debug-repeat 参数时：

  1. CLI 会跳过屏幕打印代码和文件写入操作

  2. 自动将日志级别设置为 debug