Prettier 1.13：征服 Web 世界！

2018年5月27日 · 1 分钟阅读

Lucas Duailibe

非官方测试版翻译

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

本次版本新增了对多项新语法特性的支持，修复了格式化问题，并提供了在浏览器中运行的一流支持。

重要更新

API/CLI

Prettier 现可在浏览器中运行！

这一功能是团队和用户长久以来的期待，我们终于宣布 Prettier 1.13 提供了在浏览器中运行的一流支持。过去这需要复杂的变通方案，而现在您只需加载核心包及所需的解析器即可直接使用。

<script src="https://unpkg.com/prettier@1.13.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-babylon.js"></script>
<script src="https://unpkg.com/prettier@1.13.0/parser-graphql.js"></script>
<script type="text/javascript">
var formatButton = document.querySelector("#format");
var textInput = document.querySelector("#input");
formatButton.addEventListener("click", function() {
  var value = textInput.value;
  textInput.value = prettier.format(value, {
    parser: "babylon",
    plugins: prettierPlugins
  });
});</script>

请查阅文档了解更多，或在此JS Bin上实际体验。

不再默认使用 JavaScript 解析器 (#4528 by @duailibe)

在 Prettier 1.12 及更早版本中，当处理无扩展名的文件时，Prettier 会默认假定其为 JavaScript 文件。这导致了几个令人困惑的问题：

若对 .git 目录运行 Prettier，它会重新格式化文件导致 git 仓库损坏
若尝试格式化 HTML 文件，有时会报错，有时却会将 HTML 误判为 JSX 进行格式化（这通常存在安全隐患）

Prettier 1.13 已改变此行为：当无法通过扩展名确定文件语言类型，且用户未手动指定解析器时，Prettier 将跳过该文件。

如需格式化非常规扩展名的文件，可通过 --parser 选项指定解析器。若通过管道输入文件内容到 stdin，请务必添加 --stdin-filepath 参数，以便 Prettier 根据文件扩展名判断语言类型。

使用 JavaScript API 时，若调用 prettier.format 或 prettier.formatWithCursor 时未在参数中包含 parser 或 filepath，将抛出错误。同样地，若包含 filepath 但未指定 parser，且无法从文件路径推断出正确解析器时也会报错。

新增 `prettier.getFileInfo()` 方法及 `--file-info` CLI 选项 (#4341 by @kachkaev)

此前通过 API 调用 Prettier 时，无法判断文件是否应被忽略（基于 .prettierignore），编辑器插件需自行实现此逻辑。同时因无法预判文件是否受支持，用户只能直接调用格式化。1.13 版本新增了在调用 format 前确认解析器推断结果（及类型）和文件忽略状态的能力。

详见文档。

支持全局安装的 Prettier 及插件 (#4192 by @kachkaev)

全局安装 Prettier 及插件时，原先因仅在最近层 package.json 中搜索导致插件无法自动加载。现在 Prettier 会检查自身安装目录下的 node_modules。此外针对特殊环境无法自动发现插件的情况，新增了 --plugin-search-dir 选项用于指定插件搜索路径。

详见插件文档。

改进光标偏移跟踪 (#4397 by @ds300)

Prettier 1.13 大幅优化了光标偏移追踪功能，修复了多个因 Prettier 输出错误位置导致编辑器集成将光标移至不正确位置的问题。

JavaScript

在数学表达式中插入更多括号 (#4413 和 #4407 由 @duailibe 贡献)

现在当模运算位于加法运算内部，或混合使用两种不同乘法运算时，Prettier 会为其添加括号（即使并非必需），以帮助更快理解代码片段。

// Input
a % 10 - 5;
2 / 3 * 10 / 2 + 2;

// Output with Prettier 1.13
(a % 10) - 5;
((2 / 3) * 10) / 2 + 2;

内联处理使用 `inject` 的 AngularJS 测试 (#4495 由 @thorn0 贡献)

现在 Prettier 会将使用依赖注入的 AngularJS 测试保持为单行格式，与处理其他测试的方式保持一致。

// Input:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

// Output with Prettier 1.12.1:
it(
  "has calculated the answer correctly",
  inject(function(DeepThought) {
    expect(DeepThought.answer).toBe(42);
  })
);

// Output with Prettier 1.13:
it("has calculated the answer correctly", inject(function(DeepThought) {
  expect(DeepThought.answer).toBe(42);
}));

优化 D3 的换行处理 (#4285 由 @1wheel 贡献, #4505 由 @duailibe 贡献)

在 Prettier 1.12 及更早版本中，以 d3 等短名称开头的链式调用会在第一个 . 前换行。在 Prettier 1.13 中，若名称长度小于缩进宽度，将不再在名称后添加换行。

// Input
d3.select('body')
  .append('circle')
  .at({ width: 30, fill: '#f0f' })
  .st({ fontWeight: 600 })

// Output with Prettier 1.12.1:
d3
  .select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

// Output with Prettier 1.13:
d3.select("body")
  .append("circle")
  .at({ width: 30, fill: "#f0f" })
  .st({ fontWeight: 600 });

支持 Jest 23 新增的 `describe.each` 表格格式 (#4423 由 @ikatyang 贡献)

Jest 23 引入了名为数据驱动测试的新特性，允许在表格中描述测试用例。Prettier 1.13 支持此特性，并在使用数据驱动测试时自动缩进表格。

// Input
describe.each`
a|b|expected
${11   } | ${  1  }|${222}
${1-1}|${2+2}|${ 3333}
${2+1+2}|${1111}|${3}
`('$a + $b', ({a, b, expected}) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

// Output with Prettier 1.13
describe.each`
  a            | b        | expected
  ${11}        | ${1}     | ${222}
  ${1 - 1}     | ${2 + 2} | ${3333}
  ${2 + 1 + 2} | ${1111}  | ${3}
`("$a + $b", ({ a, b, expected }) => {
  test(`returns ${expected}`, () => {
    expect(a + b).toBe(expected);
  });

  test(`returned value not be greater than ${expected}`, () => {
    expect(a + b).not.toBeGreaterThan(expected);
  });

  test(`returned value not be less than ${expected}`, () => {
    expect(a + b).not.toBeLessThan(expected);
  });
});

优化函数组合的格式化效果 (#4431 由 @suchipi 贡献)

函数组合格式化是 Prettier 最受期待的改进之一。这种模式在 RxJS、Redux、Lodash 和 Ramda 等函数式编程库中十分常见。1.13 版本中，Prettier 通过启发式规则检测此类函数组合，将组合函数逐行格式化，显著提升了使用 pipe、compose、flowRight 等函数时的可读性。

// Input
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

// Output with Prettier 1.12.1
compose(sortBy(x => x), flatten, map(x => [x, x * 2]));

pipe(filter(x => x % 2 === 0), map(x => x + x), scan((acc, x) => acc + x, 0));

// Output with Prettier 1.13
compose(
  sortBy(x => x),
  flatten,
  map(x => [x, x * 2])
);

pipe(
  filter(x => x % 2 === 0),
  map(x => x + x),
  scan((acc, x) => acc + x, 0)
);

保留必要的 `do` 表达式括号并优化格式 (#4479 由 @existentialism 贡献)

在 Prettier 1.12 及更早版本中，存在不安全移除 do 表达式括号导致代码无效的情况。1.13 版本已修复此问题，同时全面优化了 do 表达式的格式化效果。

// Input
(do {});
(do {} + 1);
(1 + do {});

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

// Output with Prettier 1.12
do {
};
do {
} + 1;
1 +
  do {
  };

() =>
  do {
    var obj = { foo: "bar", bar: "foo" };
    for (var key in obj) {
      obj[key];
    }
  };

// Output with Prettier 1.13
(do {});
(do {} + 1);
1 + do {};

() => do {
  var obj = { foo: "bar", bar: "foo" };
  for (var key in obj) {
    obj[key];
  }
};

Flow

正确打印类的 mixins 和 implements 声明 (#4326 由 @existentialism 贡献)

1.12 及更早版本中，Prettier 会错误移除 flow libdef 类中的 mixins 和 implements 声明（导致代码语义改变）。该问题已在 1.13 修复。

// Input
declare class A implements B {}
declare class C mixins D {}

// Output with Prettier 1.12
declare class A {}
declare class C {}

// Output with Prettier 1.13
declare class A implements B {}
declare class C mixins D {}

支持空值合并运算符和数字分隔符 (#4536 由 @vjeux 贡献)

这些 JavaScript 特性在使用默认 Babylon 解析器时已受支持，而 Prettier 1.13 在使用 Flow 解析器时也添加了对它们的支持。

支持 Flow 新增语法特性 (#4543, #4540 和 #4551 由 @existentialism 贡献)

Prettier 现已支持 Flow 新增的以下特性：

内联接口
```
type A = interface { p: string};
```
显式类型参数
```
fnCall<string>("name");
```
proto 修饰符语法
```
declare class A { proto: T }
```

TypeScript

新增对 TypeScript 导入类型的支持 (#4429 和 #4438 by @ikatyang)

这是 TypeScript 2.9 新增的功能，用于描述动态导入模块的结构。

// Input
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: typeof import("./foo2") = { Bar: Bar2 };

// Output with Prettier 1.13
export const x: import("./foo") = { x: 0, y: 0 };

export let y: import("./foo2").Bar.I = { a: "", b: 0 };

export let shim: import("./foo2") = { Bar: Bar2 };

新增对 TypeScript 中泛型 JSX 元素的支持 (#4268 by @ikatyang)

TypeScript 2.9 添加的另一项功能是支持 JSX 元素中的泛型，Prettier 1.13 现已能格式化这类语法。

// Example:
<MyComponent<number> data={12} />

新增对带类型参数的模板标签表达式的支持 (#4353 by @ikatyang)

同样在 TypeScript 2.9 中加入，现在可以向模板标签传递类型参数。

// Example:
export const RedBox = styled.div<{ foo: string }>`
  background: red;
  ${props => props.foo};
`;

改进带泛型和联合类型的类型转换格式 (#4219 by @kpdonn)

// Input
const finalConfiguration =
  <Immutable.Map<string, any>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.12
const finalConfiguration = <Immutable.Map<
  string,
  any
>>someExistingConfigMap.mergeDeep(fallbackOpts);

// Output with Prettier 1.13
const finalConfiguration = <Immutable.Map<string, any>>(
  someExistingConfigMap.mergeDeep(fallbackOpts)
);

JSON

拆分 JSON 和 JSON5 解析器 (#4367 和 #4371 by @ikatyang, #4333 by @duailibe)

JSON5 是 JSON 的超集，支持注释、尾随逗号和未加引号的属性键。某些文件（如 .babelrc）使用 JSON5 格式，因此允许这些特性；而其他文件（如 package.json）不使用 JSON5，故不允许这些特性。此前 Prettier 使用单一解析器 JSON 处理两者，但维护时引发了若干微妙错误（特别是围绕 /* @prettier */ 编译指示注释的检测和插入）。拆分后这些错误已修复，Prettier 更加健壮。

新增 `json-stringify` 解析器，实现类似 `JSON.stringify` 的格式化 (#4450 by @ikatyang)

用户常反馈 Prettier 格式化 package.json 和 package-lock.json 的方式与 npm 和 yarn 不同，导致执行 npm 或 yarn 命令后出现格式冲突，手动编辑 package.json 时添加的换行符也会在下次执行 npm 或 yarn 命令时被移除。这产生了大量冗余 diff 噪音，影响使用体验。Prettier 1.13 新增的 json-stringify 解析器行为与 JSON.stringify 一致，可避免 Prettier 与 npm/yarn 交替修改导致的格式反复变动。该解析器现已成为 package.json 和 package-lock.json 的默认处理器，升级后无需额外配置即可消除这些干扰性 diff。

CSS/Less/SCSS

改进 SCSS 映射表的格式化 (#4487 by @evilebottnawi)

/* Output with Prettier 1.12 */
a {
  @include section-type-1(
    $header: (margin: 0 0 $margin-base, text-align: left),
    $decoration:
      (
        type: base,
        margin: 0 auto -1px 0,
        primary-color: $brand-primary,
        secondary-color: $gray-light
      ),
    $title:
      (
        margin: 0 0 $margin-small,
        color: false,
        font-size: $font-size-h3,
        font-weight: false,
        line-height: $line-height-h3
      )
  );
}

/* Output with Prettier 1.13 */
a {
  @include section-type-1(
    $header: (
      margin: 0 0 $margin-base,
      text-align: left
    ),
    $decoration: (
      type: base,
      margin: 0 auto -1px 0,
      primary-color: $brand-primary,
      secondary-color: $gray-light
    ),
    $title: (
      margin: 0 0 $margin-small,
      color: false,
      font-size: $font-size-h3,
      font-weight: false,
      line-height: $line-height-h3
    )
  );
}

改进 `@support` 规则集的格式化 (#4372 by @evilebottnawi)

/* Input */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}

/* Output with Prettier 1.12 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

/* Output with Prettier 1.13 */
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
  (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {
}

Markdown

将无序列表符号改为连字符 (#4440 by @ikatyang)

Prettier 最初支持 Markdown 时，通过 GitHub BigQuery 数据发现无序列表符号 * 的使用率略高于 -。但后续收到大量社区反馈表明 - 更受青睐。Prettier 1.13 将统一使用 - 格式化无序列表。

<!-- Input -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.12.1 -->
* Top level list item 1
* Top level list item 2
  * Nested List item 1
  * Nested List item 2
    * Sub-Nested List item 1
    * Sub-Nested List item 2

<!-- Output with Prettier 1.13 -->
- Top level list item 1
- Top level list item 2
  - Nested List item 1
  - Nested List item 2
    - Sub-Nested List item 1
    - Sub-Nested List item 2

保留 Liquid 标签内容 (#4484 by @duailibe)

Liquid 是静态站点生成器（如 Jekyll）常用的模板语言。此前版本中，Prettier 将 Markdown 中的 Liquid 标签视为普通文本处理，可能意外修改标签内容导致语义变化。Prettier 1.13 现已识别 Liquid 标签并保持其内容不变。

<!-- Input -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

<!-- Output with Prettier 1.12 -->
{% include_relative \_installations/tarball.md %}

{% cloudinary nice*prefix*-\_for_the_filename.jpg %}

<!-- Output with Prettier 1.13 -->
{% include_relative _installations/tarball.md %}

{% cloudinary nice_prefix_-_for_the_filename.jpg %}

在需要时将链接定义拆分为多行（由 @j-f1 提交的 #3531）

当链接定义与 --prose-wrap always 同时使用且超出打印宽度时，链接定义将被拆分为多行。

<!-- Input -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."

[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.12 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]: https://example.com "a long, long title. It's really really long. Here have words."
[long]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]: https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx "look a title!"

<!-- Output with Prettier 1.13 -->
[just-url]: https://example.com
[url-with-short-title]: https://example.com "title"
[url-with-long-title]:
  https://example.com
  "a long, long title. It's really really long. Here have words."
[long]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
[long-with-title]:
  https://example.com/a-long-url/another-segment/yet-another-segment/a-really-long-file-name.php.aspx
  "look a title!"

GraphQL

仅在原始源码存在时在顶级定义后添加空行（由 @ad1992 提交的 #4512）

在 Prettier 1.12 及更早版本中，我们始终在顶级定义之间打印空行。在 1.13 版本中，仅当原始代码存在空行时才会输出空行。此行为与 Prettier 格式化 JavaScript 的方式类似。

# Input
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.12.1
type TypeA {
  fieldA: string
}

type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

# Output with Prettier 1.13
type TypeA {
  fieldA: string
}
type TypeB {
  fieldB: string
}

type TypeC {
  fieldC: string
}

其他变更

API/CLI

当文件中缺少必要编译指示时不再格式化范围（由 @josephfrazier 提交的 #3996）

在 Prettier 1.12 及更早版本中，如果文件没有 /** @prettier */ 编译指示且使用 --require-pragma 仅调用部分范围格式化时，仍会进行格式化。现在即使只格式化部分范围，Prettier 也会检查文件是否包含该编译指示。

改进路径不以 `./` 开头时的插件解析（由 @kachkaev 提交的 #4451）

当传递 --plugin=path/to/plugin 参数时，Prettier 1.12 及更早版本会崩溃，因为它在 node_modules 文件夹中查找 path/to/plugin。Prettier 1.13 将优先在当前目录查找，查找失败后再尝试在 node_modules 中查找。

为 isBlockComment 添加插件接口（由 @mgrip 提交的 #4347）

块注释是指可与代码内联打印的注释（对于 JS 是 /* comment */）。由于 Prettier 负责打印注释，我们需要让插件确定某个注释是否为块注释。详见我们的文档。

JavaScript

在函数中对 catch 参数应用解构规则（由 @duailibe 提交的 #4385）

在 1.12 版本中，我们将 catch 参数中的解构格式化为类似赋值解构的形式。但将其视为函数参数解构时代码更美观，因此我们做了如下变更：

// Input
try {
  doSomething();
} catch ({data: {message}}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({data: {message: {errors}}}) {
  handleError(errors);
}

// Output with Prettier 1.12.1
try {
  doSomething();
} catch ({
  data: { message }
}) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

// Output with Prettier 1.13
try {
  doSomething();
} catch ({ data: { message } }) {
  handleError(message.errors);
}

try {
  doSomething();
} catch ({
  data: {
    message: { errors }
  }
}) {
  handleError(errors);
}

正确转义 JS 中 Markdown 的反斜杠（由 @ikatyang 提交的 #4381）

Prettier 1.12 及更早版本在某些情况下会错误地移除 Markdown 模板字面量中的反斜杠。Prettier 1.13 将正确打印这些字符。

// Input
markdown`
  const cssString = css\`
    background-color: \$\{color('base')\}
  \`;
`
// Output with Prettier 1.12.1
markdown`
  const cssString = css\`background-color: ${color('base')}\`;
`;

// Output with Prettier 1.13
markdown`
  const cssString = css\`background-color: \$\{color('base')\}\`;
`;

支持 styled-components 的 Foo.extend.attrs()`` 语法（由 @duailibe 提交的 #4434）

在 Prettier 1.12.1 中，无法检测到传递给 styled-components 函数 Foo.extends.attrs() 的模板字面量是 CSS。在 1.13 版本中，Prettier 现在支持此语法并将模板字面量内容格式化为 CSS。

// Input
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.12
Button.extend.attrs({})`
border-color : black;
`;

// Output with Prettier 1.13
Button.extend.attrs({})`
  border-color: black;
`;

新增对 GraphQL 注释标签的支持（由 @tjallingt 提交的 #4395）

我们会对带标签的模板字面量中的 GraphQL 进行格式化，但有些 GraphQL 库使用无标签模板字面量。许多 GraphQL 编辑器插件已约定在无标签模板字面量前使用 /* GraphQL */ 注释来检测 GraphQL。在 1.13 版本中，Prettier 现在也能识别该注释并格式化 GraphQL 代码。

// Input
const query = /* GraphQL */`
      {
    user(   id :   5  )  {
      firstName
      lastName
    }
  }
`;

// Output with Prettier 1.13
const query = /* GraphQL */ `
  {
    user(id: 5) {
      firstName
      lastName
    }
  }
`;

格式化 Angular 组件样式（由 @JamesHenry 提交的 #4361）

Prettier 1.13 可格式化 Angular 组件的内联样式。

// Input
@Component({
       selector: 'app-test',
  styles: [   `

 :host {
   color: red;
 }
 div { background: blue
 }
`

]
})
class     TestComponent {}

// Output with Prettier 1.13
@Component({
  selector: "app-test",
  styles: [
    `
      :host {
        color: red;
      }
      div {
        background: blue;
      }
    `,
  ],
})
class TestComponent {

正确换行类属性初始化器（由 @nicolo-ribaudo 提交的 #4442）

Prettier 1.12 在换行类属性初始化器时未对后续行进行缩进。此问题已在 1.13 版本修复。

// Input
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

// Output with Prettier 1.12
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  this.props.barbarbarbar;
}

// Output with Prettier 1.13
class Something {
  someInstanceProperty = this.props.foofoofoofoofoofoo &&
  	this.props.barbarbarbar;
}

修复绑定表达式中的长方法名问题（#4447 by @misoguy）

Prettier 1.13 改进了绑定表达式中长成员表达式链的格式化效果。

// Input
function Foo() {
	const longVariableName = ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

// Output with Prettier 1.12
function Foo() {
  const longVariableName = ::veryLongObjectName.veryLongObjectChain
    .veryLongObjectProperty;
}

// Output with Prettier 1.13
function Foo() {
  const longVariableName =
    ::veryLongObjectName.veryLongObjectChain.veryLongObjectProperty;
}

停止为 `?.` 运算符移除括号（#4542 by @duailibe）

可选链提案中存在一个边界情况：使用括号包裹会在运行时产生行为差异。Prettier 1.12 及更早版本会移除这些括号，该问题已在 1.13 中修复。

// Input
(a?.b).c

// Output with Prettier 1.12
a?.b.c

// Output with Prettier 1.13
(a?.b).c

Flow

在必要时为 `?() => T` 添加括号（#4475 by @nicolo-ribaudo）

由于运算符优先级问题，Prettier 1.12 及更早版本在使用可空运算符时会意外改变类型含义。该问题已在 Prettier 1.13 中修复。

// Input
type Foo = { arg: ?(() => void) | string };

// Output with Prettier 1.12
type Foo = { arg: ?() => void | string };
// which is equivalent to:
type Foo = { arg: ?() => (void | string) };

// Output with Prettier 1.13
type Foo = { arg: ?(() => void) | string };

TypeScript

保留带引号的类属性（#4517 by @ikatyang）

TypeScript 中的严格属性初始化检查不适用于带引号的类属性。在 Prettier 1.13 中，若代码原本存在引号，我们将予以保留。

// Input
class Username {
  age: number;
  "username": string;
}

// Output with Prettier 1.12
class Username {
  age: number;
  username: string;
}

// Output with Prettier 1.13
class Username {
  age: number;
  "username": string;
}

Markdown

修复空 `.md` 文件中的换行符问题（#4388 by @huyvohcmc）

Prettier 1.12.1 在格式化空 Markdown 文件时会添加换行符。该问题已在 1.13 中修复。

使用 `--prose-wrap preserve` 时禁止合并连续中日韩文本（#4504 by @ikatyang）

当启用 --prose-wrap preserve 选项时，Prettier 将不再合并跨越多行的连续中日韩文本。

<!-- Input -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.12 -->
::: warning 注意该网站在国外无法访问，故以下演示无效
:::

<!-- Output with Prettier 1.13 -->
::: warning 注意
该网站在国外无法访问，故以下演示无效
:::

CSS/SCSS/Less

在 SCSS 列表和映射中输出尾部逗号（#4317 by @ad1992）

当 trailingComma 选项非 "none" 且列表/映射跨越多行时，Prettier 将在 SCSS 列表和映射中输出尾部逗号。

/* Input */
$list: (a);
$colors: (
  "red",
  "blue"
);
$map: (
  'medium': (min-width: 800px),
  'large': (min-width: 1000px),
  'huge': (min-width: 1200px),
);

/* Output with Prettier 1.13 */
$list: (a);
$colors: (
  "red",
  "blue",
);
$map: (
  "medium": (min-width: 800px),
  "large": (min-width: 1000px),
  "huge": (min-width: 1200px),
);

修复空 front-matter 问题（#4392 和 #4457 by @eliasmeire）

Prettier 1.12 版本支持 CSS/SCSS/Less 文件中的 front-matter 块，但会错误移除空块（或仅含注释的块）。该问题已在 1.13 中修复。

不再格式化 SCSS 字符串插值（#4490 by @evilebottnawi）

在某些情况下，Prettier 格式化含插值的字符串时会破坏 SCSS 代码。Prettier 1.13 将保留原始代码格式。

/* Input
a {
 content: "#{my-fn("_")}";
}

/* Output with Prettier 1.12 */
a {
 content: "#{my-fn(" _ ")}";
}

/* Output with Prettier 1.13 */
a {
 content: "#{my-fn("_")}";
}

正确转义字符（#4472 by @evilebottnawi）

Prettier 1.12 在某些场景下无法正确转义字符。

/* Input */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

/* Output with Prettier 1.12 */
@media only screen and (max-width: 767px) {
  @include widths(2 3 4, \ @small);
}

$widths-breakpoint-separator: \ @small;

/* Output with Prettier 1.13 */
@media only screen and (max-width: 767px) {
    @include widths(2 3 4, \@small);
}

$widths-breakpoint-separator: \@small;

修复 CSS 变量中的 SCSS 插值问题（#4471 by @evilebottnawi）

/* Input */
a {
  --bg: var(--#{$type});
}

/* Output with Prettier 1.12 */
a {
  --bg: var(-- #{$type});
}

/* Output with Prettier 1.13 */
a {
  --bg: var(--#{$type});
}

修复 PostCSS 计算变量的间距问题（#4408 by @ad1992）

/* Input */
background-color: $$(style)Color;

/* Output with Prettier 1.12 */
background-color: $$(style) Color;

/* Output with Prettier 1.13 */
background-color: $$(style)Color;

重要更新​

API/CLI​

Prettier 现可在浏览器中运行！​

不再默认使用 JavaScript 解析器 (#4528 by @duailibe)​

新增 prettier.getFileInfo() 方法及 --file-info CLI 选项 (#4341 by @kachkaev)​

支持全局安装的 Prettier 及插件 (#4192 by @kachkaev)​

改进光标偏移跟踪 (#4397 by @ds300)​

JavaScript​

在数学表达式中插入更多括号 (#4413 和 #4407 由 @duailibe 贡献)​

内联处理使用 inject 的 AngularJS 测试 (#4495 由 @thorn0 贡献)​

优化 D3 的换行处理 (#4285 由 @1wheel 贡献, #4505 由 @duailibe 贡献)​

支持 Jest 23 新增的 describe.each 表格格式 (#4423 由 @ikatyang 贡献)​

优化函数组合的格式化效果 (#4431 由 @suchipi 贡献)​

保留必要的 do 表达式括号并优化格式 (#4479 由 @existentialism 贡献)​

Flow​

正确打印类的 mixins 和 implements 声明 (#4326 由 @existentialism 贡献)​

支持空值合并运算符和数字分隔符 (#4536 由 @vjeux 贡献)​

支持 Flow 新增语法特性 (#4543, #4540 和 #4551 由 @existentialism 贡献)​

TypeScript​

新增对 TypeScript 导入类型的支持 (#4429 和 #4438 by @ikatyang)​

新增对 TypeScript 中泛型 JSX 元素的支持 (#4268 by @ikatyang)​

新增对带类型参数的模板标签表达式的支持 (#4353 by @ikatyang)​

改进带泛型和联合类型的类型转换格式 (#4219 by @kpdonn)​

JSON​

拆分 JSON 和 JSON5 解析器 (#4367 和 #4371 by @ikatyang, #4333 by @duailibe)​

新增 json-stringify 解析器，实现类似 JSON.stringify 的格式化 (#4450 by @ikatyang)​

CSS/Less/SCSS​

改进 SCSS 映射表的格式化 (#4487 by @evilebottnawi)​

改进 @support 规则集的格式化 (#4372 by @evilebottnawi)​

Markdown​

将无序列表符号改为连字符 (#4440 by @ikatyang)​

保留 Liquid 标签内容 (#4484 by @duailibe)​

在需要时将链接定义拆分为多行（由 @j-f1 提交的 #3531）​

GraphQL​

仅在原始源码存在时在顶级定义后添加空行（由 @ad1992 提交的 #4512）​

其他变更​

API/CLI​

当文件中缺少必要编译指示时不再格式化范围（由 @josephfrazier 提交的 #3996）​

改进路径不以 ./ 开头时的插件解析（由 @kachkaev 提交的 #4451）​

为 isBlockComment 添加插件接口（由 @mgrip 提交的 #4347）​

JavaScript​

在函数中对 catch 参数应用解构规则（由 @duailibe 提交的 #4385）​

正确转义 JS 中 Markdown 的反斜杠（由 @ikatyang 提交的 #4381）​

支持 styled-components 的 Foo.extend.attrs()`` 语法（由 @duailibe 提交的 #4434）​

新增对 GraphQL 注释标签的支持（由 @tjallingt 提交的 #4395）​

格式化 Angular 组件样式（由 @JamesHenry 提交的 #4361）​

正确换行类属性初始化器（由 @nicolo-ribaudo 提交的 #4442）​

修复绑定表达式中的长方法名问题（#4447 by @misoguy）​

停止为 ?. 运算符移除括号（#4542 by @duailibe）​

Flow​

在必要时为 ?() => T 添加括号（#4475 by @nicolo-ribaudo）​

TypeScript​

保留带引号的类属性（#4517 by @ikatyang）​

Markdown​

修复空 .md 文件中的换行符问题（#4388 by @huyvohcmc）​

使用 --prose-wrap preserve 时禁止合并连续中日韩文本（#4504 by @ikatyang）​

CSS/SCSS/Less​

在 SCSS 列表和映射中输出尾部逗号（#4317 by @ad1992）​

修复空 front-matter 问题（#4392 和 #4457 by @eliasmeire）​

不再格式化 SCSS 字符串插值（#4490 by @evilebottnawi）​

正确转义字符（#4472 by @evilebottnawi）​

修复 CSS 变量中的 SCSS 插值问题（#4471 by @evilebottnawi）​

修复 PostCSS 计算变量的间距问题（#4408 by @ad1992）​

重要更新

API/CLI

Prettier 现可在浏览器中运行！

不再默认使用 JavaScript 解析器 (#4528 by @duailibe)

新增 `prettier.getFileInfo()` 方法及 `--file-info` CLI 选项 (#4341 by @kachkaev)

支持全局安装的 Prettier 及插件 (#4192 by @kachkaev)

改进光标偏移跟踪 (#4397 by @ds300)

JavaScript

在数学表达式中插入更多括号 (#4413 和 #4407 由 @duailibe 贡献)

内联处理使用 `inject` 的 AngularJS 测试 (#4495 由 @thorn0 贡献)

优化 D3 的换行处理 (#4285 由 @1wheel 贡献, #4505 由 @duailibe 贡献)

支持 Jest 23 新增的 `describe.each` 表格格式 (#4423 由 @ikatyang 贡献)

优化函数组合的格式化效果 (#4431 由 @suchipi 贡献)

保留必要的 `do` 表达式括号并优化格式 (#4479 由 @existentialism 贡献)

Flow

正确打印类的 mixins 和 implements 声明 (#4326 由 @existentialism 贡献)

支持空值合并运算符和数字分隔符 (#4536 由 @vjeux 贡献)

支持 Flow 新增语法特性 (#4543, #4540 和 #4551 由 @existentialism 贡献)

TypeScript

新增对 TypeScript 导入类型的支持 (#4429 和 #4438 by @ikatyang)

新增对 TypeScript 中泛型 JSX 元素的支持 (#4268 by @ikatyang)

新增对带类型参数的模板标签表达式的支持 (#4353 by @ikatyang)

改进带泛型和联合类型的类型转换格式 (#4219 by @kpdonn)

JSON

拆分 JSON 和 JSON5 解析器 (#4367 和 #4371 by @ikatyang, #4333 by @duailibe)

新增 `json-stringify` 解析器，实现类似 `JSON.stringify` 的格式化 (#4450 by @ikatyang)

CSS/Less/SCSS

改进 SCSS 映射表的格式化 (#4487 by @evilebottnawi)

改进 `@support` 规则集的格式化 (#4372 by @evilebottnawi)

Markdown

将无序列表符号改为连字符 (#4440 by @ikatyang)

保留 Liquid 标签内容 (#4484 by @duailibe)

在需要时将链接定义拆分为多行（由 @j-f1 提交的 #3531）

GraphQL

仅在原始源码存在时在顶级定义后添加空行（由 @ad1992 提交的 #4512）

其他变更

API/CLI

当文件中缺少必要编译指示时不再格式化范围（由 @josephfrazier 提交的 #3996）

改进路径不以 `./` 开头时的插件解析（由 @kachkaev 提交的 #4451）

为 isBlockComment 添加插件接口（由 @mgrip 提交的 #4347）

JavaScript

在函数中对 catch 参数应用解构规则（由 @duailibe 提交的 #4385）

正确转义 JS 中 Markdown 的反斜杠（由 @ikatyang 提交的 #4381）

支持 styled-components 的 Foo.extend.attrs()`` 语法（由 @duailibe 提交的 #4434）

新增对 GraphQL 注释标签的支持（由 @tjallingt 提交的 #4395）

格式化 Angular 组件样式（由 @JamesHenry 提交的 #4361）

正确换行类属性初始化器（由 @nicolo-ribaudo 提交的 #4442）

修复绑定表达式中的长方法名问题（#4447 by @misoguy）

停止为 `?.` 运算符移除括号（#4542 by @duailibe）

Flow

在必要时为 `?() => T` 添加括号（#4475 by @nicolo-ribaudo）

TypeScript

保留带引号的类属性（#4517 by @ikatyang）

Markdown

修复空 `.md` 文件中的换行符问题（#4388 by @huyvohcmc）

使用 `--prose-wrap preserve` 时禁止合并连续中日韩文本（#4504 by @ikatyang）

CSS/SCSS/Less

在 SCSS 列表和映射中输出尾部逗号（#4317 by @ad1992）

修复空 front-matter 问题（#4392 和 #4457 by @eliasmeire）

不再格式化 SCSS 字符串插值（#4490 by @evilebottnawi）

正确转义字符（#4472 by @evilebottnawi）

修复 CSS 变量中的 SCSS 插值问题（#4471 by @evilebottnawi）

修复 PostCSS 计算变量的间距问题（#4408 by @ad1992）