Prettier 2.4：新增 bracketSameLine 选项与 TypeScript 4.4 支持！

非官方测试版翻译

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

本次发布将 jsxBracketSameLine 选项重命名为 bracketSameLine，新选项除支持 JSX 外还兼容 HTML、Vue 和 Angular。旧选项名称已被弃用。

我们还新增了对 TypeScript 4.4 的支持，包括 类static块 等新语法特性。

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

重要更新

TypeScript

支持 TypeScript 4.4 (#11426 by @sosukesuzuki)

现已支持 TypeScript 4.4！

类中的 static 代码块

类静态块语法是 ECMAScript Stage 4 提案。详见 https://github.com/tc39/proposal-class-static-block。

// Input
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

// Prettier 2.3
SyntaxError: Declaration expected. (5:9)
  3 |
  4 |   // This is a static block:
> 5 |   static {
    |         ^
  6 |     if (someCondition()) {
  7 |       Foo.count++;
  8 |     }

// Prettier 2.4
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

HTML

使用 bracketSameLine 选项替代 jsxBracketSameLine (#11006 by @kurtztech)

弃用 jsxBracketSameLine 选项，改用新的 bracketSameLine 选项，该选项将适用于 HTML、Angular、Vue 和 JSX。

<!-- Input -->
<div id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">lorem ipsum dolor sit amet</div>

<!-- Prettier 2.3 -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz"
>
  lorem ipsum dolor sit amet
</div>

<!-- Prettier 2.4 -->
<!-- Options: `{bracketSameLine: true}` -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">
  lorem ipsum dolor sit amet
</div>

其他变更

JavaScript

支持样式化组件的带括号标签模板 (#11246 by @sosukesuzuki)

// Input
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.3
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.4
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position: fixed;
    color: red;
  `;

正确统计方法链参数中的正则表达式字面量 (#11299 by @sosukesuzuki)

// Input
foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.3
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.4
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/)
  .foo2(bar)
  .foo3(baz);

支持 Hack 风格管道提案 (#11335 by @sosukesuzuki)

Prettier 现已支持 Hack 风格管道语法 提案。根据官方说明文档，我们使用 % 作为主题标记符——随着提案进展，该符号可能在后续版本中变更。

作为本次变更的一部分，“智能”管道语法 的支持已被移除。关于此决策的缘由，请参阅 我们对非标准语法的政策说明。

// Input
const foo = fn() |> fn1(%) |> fn2(%);

// Prettier 2.3
SyntaxError: Unexpected token (1:25)
> 1 | const foo = fn() |> fn1(%) |> fn2(%);
    |                         ^
  2 |

// Prettier 2.4
const foo = fn() |> fn1(%) |> fn(%);

TypeScript

修复包含映射类型的交叉类型格式化问题 (#11247 by @sosukesuzuki)

// Input
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

// Prettier 2.3
type Example = {
  [A in B]: T;
} &
  {
    [A in B]: T;
  };

// Prettier 2.4
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

Flow

始终在 Flow 方差符号前添加分号 (#11398 by @noppa)

// Input
class A {
  +one = function() {};
  -two = val();
  +#privOne = val();
  static +#privTwo = val();
}
// Prettier 2.3
class A {
  +one = function() {}
  -two = val()
  +#privOne = val()
  static +#privTwo = val()
}
// Prettier 2.4
class A {
  +one = function() {};
  -two = val();
  +#privOne = val()
  static +#privTwo = val()
}

SCSS

统一为 Sass 模块字符串添加引号 (#11461 by @niksy)

// Input
@use "sass:math";
@forward "list";

// Prettier 2.3
@use "sass:math";
@forward "list";

// Prettier 2.4
@use 'sass:math';
@forward 'list';

CLI

为 .stylelintrc 自动推断解析器 (#10924 by @SevenOutman)

无扩展名的 .stylelintrc 文件现在会使用 json 和 yaml 解析器进行处理。