跳至主内容区

Prettier 1.9：JSX 片段、EditorConfig 与箭头函数括号

· 1 分钟阅读
Lucas Duailibe
Lucas Duailibe
非官方测试版翻译

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

本次更新新增了箭头函数参数的括号选项，支持新的 JSX 片段语法 (<>)，支持 .editorconfig 文件，并对 GraphQL 和 Markdown 支持进行了重要增强。

重要更新​

JavaScript​

新增箭头函数参数括号选项 (#3324) by @rattrayalex and @suchipi​

此前在格式化箭头函数时，Prettier 会在参数非必需时省略括号，例如：

// no parens
foo => {};

// parens
(foo: Number) => {};

// parens
({ foo }) => {}

// parens
(foo = 5) => {}

这导致我们 issue 追踪器中评论最多的讨论。现在 Prettier 新增了 --arrow-parens 选项（配置中为 arrowParens），支持两种取值：

  • "avoid" -（默认值）保持省略非必需括号的行为

  • "always" - 始终保留括号

JSX 片段语法支持 (#3237) by @duailibe​

Prettier 现在可以识别并格式化使用新片段语法的 JSX 代码，示例如下：

function MyComponent() {
  return (
    <>
      <Children1 />
      <Children2 />
      <Children3 />
    </>
  );
}

修复 JSX 长文本格式化性能问题 (#3268, #3273) by @duailibe​

我们收到反馈称，格式化包含超长文本（约 1000 行）的 JSX 文件时性能低下。经排查发现，负责文本换行的 fill 基础函数存在两处性能瓶颈。

Markdown​

新增保留文本换行的选项 (#3340) by @ikatyang​

Markdown 功能发布后，我们收到反馈：为遵守打印宽度而断行可能影响某些对换行敏感的渲染器。在 1.8.2 版本中，我们新增了 proseWrap: false 选项（将段落输出为单行），用户可依赖编辑器的"软换行"功能。

在 1.9 版本中，我们新增了 proseWrap: "preserve" 选项，该选项将保留文本原始换行符，让用户自行决定文本断行位置。

[警告] 布尔值的 proseWrap 选项已弃用，请改用 "always"、"never" 或 "preserve"。

[重大变更] 因部分渲染器对换行敏感，proseWrap 选项现默认设为 "preserve"。

GraphQL​

支持顶级插值语法 (#3370) by @lydell​

GraphQL 支持发布时，Prettier 尚未支持插值功能，因此遇到任何插值都会跳过格式化——因为插值会让格式化变得非常复杂。虽然这在大多数情况下可行，但 Apollo Client 用户有时会错过 Prettier 的 GraphQL 支持，因为 Apollo Client 使用插值在查询间共享片段。好消息是：仅允许顶级插值，这在 Prettier 中添加支持要容易得多。

在 1.9 版本中，我们支持带顶级插值的 GraphQL 查询格式化：

gql`
  query User {
    user(id: "Bob") {
      ...UserDetails
    }
  }

  ${UserDetailsFragment}
`

（如果插值出现在查询或变更等内部，Prettier 仍会跳过格式化。）

保留 GraphQL 中的有意换行 (#3252) by @duailibe​

Prettier 现在会保留 GraphQL 查询中有意添加的换行（但限制为最多一个空行），此前版本会直接移除这些换行。

query User {
  name

  age
}

CSS​

不再将选择器中的元素名和属性名转为小写 (#3317) by @lydell​

CSS 基本不区分大小写，因此 Prettier 长期采用小写格式以保持一致性。但事实证明我们忽略了 CSS 规范中的一个细节：选择器中的元素名和属性名取决于标记语言——HTML 中不区分大小写，但 SVG (XML) 中区分大小写。此前 Prettier 会错误地将元素名和属性名转为小写，新版已修正此问题。

配置​

新增 EditorConfig 支持 (#3255) by @josephfrazier​

虽然耗时较长，但 Prettier 终于支持读取您的 .editorconfig 文件，具体包含：

  • indent_style（缩进风格）

  • indent_size/tab_width（缩进大小/制表符宽度）

  • max_line_length（最大行宽）

prettier CLI 默认启用 .editorconfig 支持，可通过 --no-editorconfig 禁用。但 API 默认不启用 .editorconfig 支持，以避免潜在的编辑器集成问题（详见此处）。如需启用，请在 prettier.resolveConfig 选项中添加 editorconfig: true。

其他变更​

JavaScript​

不再拆分 JSX 中的简单元素 (#3250) by @duailibe​

Prettier 不再拆分无属性的元素，保持 <br /> 等元素为独立单元。

不再拆分模板字面量表达式内的标识符 (#3299) by @duailibe​

上一版本中，我们尝试通过拆分含表达式的模板字面量来适应打印宽度。反馈表明：某些情况下用户更希望保持单行而非强制换行。

今后，包含单个标识符的模板字面量表达式将不再换行：

const foo = `Hello ${username}. Today is ${month} ${day}. You have ${newMessages} new messages`.

修复箭头函数内部注释的格式化问题 (#3334) by @jackyho112​

修复了 Prettier 移动注释导致 Webpack 等工具异常的边界情况：

const API = {
  loader: () => import('./test' /* webpackChunkName: "test" */),
};

// would get formatted to

const API = {
  loader: (/* webpackChunkName: "test" */) => import("./test")
};

修复装饰器与类属性周围注释的打印问题 (#3382) by @azz​

修复了装饰器与类属性之间的注释被移动到无效位置的问题。

// Before
class Something {
  @decorator
  static // comment
  property = 1;
}

// After
class Something {
  @decorator
  // comment
  static property = 1;
}

Flow​

不再对空类型参数进行换行 (#3281) by @Vjeux​

不再对空类型参数（如 foo: Type<>）进行换行处理。

为 babylon 解析器添加 Flow mixins 支持 (#3391) by @bakkot​

修复了 Flow mixins 被意外丢弃的问题，目前仅支持 babylon 解析器。

// Before
class Foo extends Bar {}

// After
class Foo extends Bar mixins Baz {}

TypeScript​

对象展开运算符后不再打印尾部逗号 (#3313) by @duailibe​

此行为现与 JavaScript 和 Flow 保持一致，使用 TypeScript 解析器时不会在以下情况打印尾部逗号：

const {
  bar,
  baz,
  ...rest
} = foo;

装饰器中的类型断言添加括号 (#3329) by @azz​

修复了装饰器内部类型断言省略括号的问题：

@(bind as ClassDecorator)
class Decorated {}

Markdown​

不换行 inlineCode 内容 (#3230) by @ikatyang​

Prettier 现在不会在 inlineCode 内部换行，仅在其外部进行换行处理。

消除非 CJK 字符与 CJK 标点间的多余空格 (#3244, #3249) by @ikatyang​

修复了 Prettier 在以下情况错误添加多余空格的问题：

扩展运算符（spread ）是三个点（`...`）。

This is an english paragraph with a CJK quote " 中文 ".

转义所有类强调文本 (#3246) by @ikatyang​

修复了 \_\_text\_\_ 被错误格式化为 __text__ 的问题。

支持 Unicode 标点符号 (#3254) by @ikatyang​

Prettier 现在不仅处理 ASCII 标点符号，同时支持 Unicode 标点符号。

支持 TOML 格式的 front matter (#3290) by @ikatyang​

Markdown 文件已支持 YAML front matter，现新增 TOML 格式支持，以满足部分静态站点生成器的需求。

+++
date: '2017-10-10T22:49:47.369Z'
title: 'My Post Title'
categories: ['foo', 'bar']
+++

This is the markdown body of my post.

复选框列表项中仅缩进首个非列表节点 (#3297) by @ikatyang​

修复了错误缩进列表后内容的问题：

* parent list item

     * child list item

* [x] parent task list item

     * [x] child task list item

原本应显示为：

* parent list item

  * child list item

* [x] parent task list item

      * [x] child task list item

保留非断行空格 (#3327) by @ikatyang​

非断行空格在保持特定词组（如数字与单位或多词产品名称）位于同一行时非常实用。此前 Prettier 会错误地将其转换为普通空格。

避免在特殊前缀前断行 (#3347) by @ikatyang​

修复了当文本在数字后紧接 . 符号处超出打印宽度时，Prettier 可能错误断行导致被解析为有序列表的问题：

She grew up in an isolated village in the 19th century and met her father aged
29. Oh no, why are we in a numbered list now?

简化 JSX 表达式省略分号 (#3330) by @sapegin​

当代码示例中是简单 JSX 表达式时，Prettier 将省略其前后的分号：

No semi:

<!-- prettier-ignore -->
```jsx
<div>Example</div>
```