跳至主内容区

Prettier 1.12：修复、功能与格式化，惊喜连连！

· 1 分钟阅读
Lily Skye
Lily Skye
非官方测试版翻译

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

大家好，欢迎来到 Prettier 1.12.0！本次更新包含大量错误修复、格式化优化、插件 API 新功能以及 Markdown 特性增强。

重要更新​

JavaScript​

嵌套三元表达式换行优化 (#4120 by @duailibe)​

当三元表达式嵌套时，根据打印宽度和缩进层级，外层三元表达式有时会被拆分为多行，而内层却保留在单行：

// Input:
const platformString = Platform.OS == "ios" ? "iOS"
  : Platform.OS == "android" ? "Android" : "unknown";

// Formatted (Prettier 1.11.1):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android" ? "Android" : "unknown";

这种格式略显突兀。为提升可读性，现在只要任意嵌套的三元表达式变为多行，所有相关嵌套都将采用多行格式：

// Formatted (Prettier 1.12.0):
const platformString =
  Platform.OS == "ios"
    ? "iOS"
    : Platform.OS == "android"
      ? "Android"
      : "unknown";

处理 else 前注释 (#4264 by @duailibe)​

一个长期存在的缺陷涉及 else 关键字前注释的处理问题。else 关键字前的注释会被移至 else 代码块内部，但当注释是解释条件而非代码块时会造成困惑。此外，在注释掉 if/else 链的某部分时也会带来干扰。

输入：​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log('2');
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log('4');
}
Prettier 1.11.1 格式化结果：​
if (obj.foo) {
  return foo;
} else if (obj.bar) {
  // Use bar as a fallback
  return bar;
}

if (a == 2) {
  console.log("2");
} else if (a == 4) {
  // else if (a == 3) {
  //   console.log('3');
  // }
  console.log("4");
}

注释被移动确实令人困扰，但我们此前难以处理，因为我们希望统一保持 } else { 的格式风格。

在此版本中，我们决定对常规格式化规则进行例外处理：仅当注释出现在 else 和左大括号之间时，采用不同的 else 格式化方案。这似乎是最佳解决方案：

Prettier 1.12.0 格式化结果：​
if (obj.foo) {
  return foo;
}
// Use bar as a fallback
else if (obj.bar) {
  return bar;
}

if (a == 2) {
  console.log("2");
}
// else if (a == 3) {
//   console.log('3');
// }
else if (a == 4) {
  console.log("4");
}

内联 Angular 异步测试与 beforeEach 等 (#4241 by @ad1992)​

在 Prettier 1.11.1 中，使用 async 测试辅助函数的 Angular 测试会产生不必要的换行。我们已进行调整，使被此辅助函数包裹的方法保持内联格式，避免多余换行。

// Input:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

// Formatted (Prettier 1.11.1):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [AppComponent]
      }).compileComponents();
    })
  );
  it(
    "should create the app",
    async(() => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
    })
  );
});

// Formatted (Prettier 1.12.0):
import { TestBed, async } from "@angular/core/testing";
import { AppComponent } from "./app.component";

describe("AppComponent", () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  }));
  it("should create the app", async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

对含有嵌套 ObjectPattern 的 ObjectPattern 进行换行处理 (#4267 by @duailibe)​

我们收到大量社区反馈，对象和数组解构语法有时格式化效果不佳。作为改进的第一步，现在只要解构模式中任何父级对象/数组模式采用多行格式，其嵌套的非叶节点对象/数组模式都将自动换行：

// Input:
const {
  name: {
    first,
    last,
  },
  organisation: {
    address: {
      street: orgStreetAddress,
      postcode: orgPostcode,
    },
  },
} = user;

// Formatted (Prettier 1.11.1):
const {
  name: { first, last },
  organisation: { address: { street: orgStreetAddress, postcode: orgPostcode } }
} = user;

// Formatted (Prettier 1.12.0):
const {
  name: { first, last },
  organisation: {
    address: { street: orgStreetAddress, postcode: orgPostcode }
  }
} = user;

Markdown​

支持 hasPragma/insertPragma (#4275 by @ikatyang)​

Prettier 1.7.0 和 1.8.0 引入了 --require-pragma 和 --insert-pragma 两个新选项，但这些选项此前仅支持 JavaScript。现在 Markdown 文件也可以使用这些选项了！

<!-- @prettier -->

# My Markdown Document

A long time ago, in my hometown of Ericsburgh...

支持顶层 prettier-ignore-start/prettier-ignore-end (#4202 by @ikatyang)​

当使用诸如 all-contributors 或 markdown-toc 等工具时，用户经常会遇到自动生成的 Markdown 内容被 Prettier 格式化得比较奇怪的情况，或者 Prettier 的 --list-different 模式会标记出用户并不关心的自动生成内容。

为了解决这些问题，我们为 Markdown 添加了一种新型的忽略注释，称为范围忽略：

<!-- prettier-ignore-start -->
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
| [<img src="https://avatars1.githubusercontent.com/u/12345?v=4" width="100px;"/><br /><sub><b>Alice</b></sub>](https://github.com/example-alice)<br /> [💻](https://github.com/my/repo/commits?author=example-alice "Code") [📖](https://github.com/my/repo/commits?author=example-alice "Documentation") [⚠️](https://github.com/my/repo/commits?author=example-alice "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12346?v=4" width="100px;"/><br /><sub><b>Bob</b></sub>](https://github.com/example-bob)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-bob "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/123457?v=4" width="100px;"/><br /><sub><b>Jeffrey</b></sub>](https://github.com/example-jeffrey)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-jeffrey "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/123458?v=4" width="100px;"/><br /><sub><b>Sarah</b></sub>](https://github.com/example-sarah)<br /> [🐛](https://github.com/my/repo/issues?q=author%3Aexample-sarah "Bug reports") |
| :---: | :---: | :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->
<!-- prettier-ignore-end -->

您可以在自动生成的内容周围添加 prettier-ignore-start 和 prettier-ignore-end 注释，Prettier 将忽略两者之间的所有内容。请注意，此功能目前仅适用于 Markdown，且只能在顶层使用。

GraphQL​

支持 GraphQL 的新接口风格 (#4012 by @ruiaraujo)​

GraphQL 模式定义语言最近更改了多重继承接口的语法，使用 & 替代了 ,：

// Old style
type Foo implements Bar, Baz { field: Type }

// New style
type Foo implements Bar & Baz { field: Type }

Prettier 1.11.1 无法解析新语法；现在我们已经支持这两种风格。

插件 API（测试版）​

将编译指示检测/插入功能移至插件 (#3685 by @duailibe)​

Prettier 插件现在可以在其解析器中包含 hasPragma 函数，并在其打印机中包含 insertPragma 函数，以选择启用 --insert-pragma 和 --require-pragma 支持。以下是它们的签名：

function hasPragma(text: string): boolean;
function insertPragma(text: string): string;

启用插件特定的注释功能 (#4182 by @mgrip)​

插件现在可以按情况覆盖 Prettier 内置的注释打印算法，以更好地支持其语言的注释格式化。此 API 尚未正式文档化，但您可以在最近发布的 Prettier PHP 插件中查看此功能的使用方式：此处和此处。

其他变更​

JavaScript​

升级 Flow 至 0.69 并启用 ?. 支持 (#4296 by @vjeux)​

使用 flow 解析器时，现在支持可选链式调用（?.）：

const name = this.model?.user?.firstName || "No Name Set"

停止将所有命名导出中的注释标记为前置注释 (#4292 由 @duailibe)​

此项变更修复了一个错误：在具名导出中，被忽略的注释会在每次格式化时重复出现：

// Input:

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.11.1):

// prettier-ignore
// comment
// comment
export {
  foo, // comment
  bar, // comment
}

// Formatted (Prettier 1.12.0):

// prettier-ignore
export {
  foo, // comment
  bar, // comment
}

处理 ContinueStatement 和 BreakStatement 的注释(#4279 由 @duailibe)​

Prettier 此前错误地未打印 continue 和 break 关键字附近的某些注释。此问题现已修复：

// Input:
for (let i = 0; i < 5; i++) {
  continue /* Comment */;
}

for (let i = 0; i < 10; i++) {
  break /* Comment */;
}

// Output (Prettier 1.11.1):
/*
  Error: Comment "Comment" was not printed. Please report this error!
    at https://prettier.io/lib/index.js:2312:75
    at Array.forEach (<anonymous>)
    at ensureAllCommentsPrinted (https://prettier.io/lib/index.js:2312:22)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:949)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at formatRange (https://prettier.io/lib/index.js:2331:215)
    at _formatWithCursor (https://prettier.io/lib/index.js:2313:288)
    at _format (https://prettier.io/lib/index.js:2314:239)
    at Object.format (https://prettier.io/lib/index.js:2333:277)
    at formatCode (https://prettier.io/worker.js:130:21)
    at self.onmessage (https://prettier.io/worker.js:80:19)
*/

// Formatted (Prettier 1.12.0):
for (let i = 0; i < 5; i++) {
  continue; /* Comment */
}

for (let i = 0; i < 10; i++) {
  break; /* Comment */
}

修复 JS 中带反引号的嵌入式 GraphQL 问题 (#4265 by @duailibe, #4278 by @duailibe)​

在 Prettier 1.11.1 中，存在一个导致包含转义反引号字符串的 GraphQL 无法格式化的错误。该问题已在 Prettier 1.12.0 中修复：

// Input:
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`

// Formatted (Prettier 1.11.1):
gql`
  "\`foo\` mutation payload."
  type FooPayload { bar: String
  }
`;

// Formatted (Prettier 1.12.0):
gql`
  "\`foo\` mutation payload."
  type FooPayload {
    bar: String
  }
`;

修复模板字面量内使用 prettier-ignore 时的表达式错位问题 (#4220 by @evilebottnawi)​

Prettier 1.11.1 中存在一个错误，当在模板字面量内使用 prettier-ignore 注释时，特定条件下会导致嵌套表达式位置错乱：

// Input:
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => props.small ? 'font-size: 0.8em;' : ''};
`

// Formatted (Prettier 1.11.1):
styled.div`
  color: ${props => (props.small ? "font-size: 0.8em;" : "")};
  /* prettier-ignore */
  ${props => props.theme.colors.paragraph};
`;

注意两个接收 props 的函数位置发生了互换。

此错误已在 Prettier 1.12.0 中修复：

// Formatted (Prettier 1.12.0):
styled.div`
  color: ${props => props.theme.colors.paragraph};
  /* prettier-ignore */
  ${props => (props.small ? "font-size: 0.8em;" : "")};
`;

修复类属性值的"过度缩进"问题 (#4085 by @duailibe)​

在 Prettier 1.11.1 中，当二进制表达式（如 2 + 2、4 * 4 等）在特定条件下换行时，缩进层级会逐行递增。该问题已在 Prettier 1.12.0 中修复：

// Input:
class EnterpriseQualityClass {
	foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    (this.bar * 90) * (this.foo + 2)
}

// Formatted (Prettier 1.11.1):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
      // then add bar and multiply by 90 time foo plus 2
      this.bar * 90 * (this.foo + 2);
}

// Formatted (Prettier 1.12.0):
class EnterpriseQualityClass {
  foobar =
    // we get foo and multiply by 3
    this.foo * 3 +
    // then add bar and multiply by 90 time foo plus 2
    this.bar * 90 * (this.foo + 2);
}

改进 switch 语句的格式化效果 (#4165 by @evilebottnawi)​

当 switch 语句的判断条件过长时，Prettier 1.11.1 的格式化效果欠佳。此问题已在 Prettier 1.12.0 中优化：

// Input:
switch (longLongLongLongLongLongLongVariable &&
    longLongLongLongLongLongLongVariable) {
  case (1): {
    console.log("hi");
  }
}

// Formatted (Prettier 1.11.1):
switch (longLongLongLongLongLongLongVariable &&
  longLongLongLongLongLongLongVariable) {
  case 1: {
    console.log("hi");
  }
}

// Formatted (Prettier 1.12.0):
switch (
  longLongLongLongLongLongLongVariable && longLongLongLongLongLongLongVariable
) {
  case 1: {
    console.log("hi");
  }
}

TypeScript​

禁止在 export default interface Foo {} 后打印分号 (#4128 by @j-f1)​

在 Prettier 1.11.1 中，会错误地在默认导出的接口后打印分号。该问题已在 Prettier 1.12.0 中解决：

// Input:
export default interface Foo {
  readonly bar?: string;
}

// Formatted (Prettier 1.11.1):
export default interface Foo {
  readonly bar?: string;
};

// Formatted (Prettier 1.12.0):
export default interface Foo {
  readonly bar?: string;
}

在 UpdateExpression 内部强制为 TSAsExpression 添加括号 (#4183 by @UselessPickles)​

Prettier 1.11.1 错误地移除了类型转换更新表达式周围的括号，导致语法错误。该问题已在 Prettier 1.12.0 中修复：

// Input:
(obj.value as any)++

// Formatted (Prettier 1.11.1):
obj.value as any++;

// Formatted (Prettier 1.12.0):
(obj.value as any)++;

Markdown​

移除 front matter 前多余的空行 (#4280 by @ikatyang)​

当格式化包含空 yaml/toml front matter 的 markdown 文档时，Prettier 1.11.1 会输出多余的空行；该空行现已被移除：

输入：​
---
---

Hello
Prettier 1.11.1 格式化结果：​
---

---

Hello
Prettier 1.12.0 格式化结果：​
---
---

Hello

支持带属性的 fenced codeblock 语言标识 (#4153 by @ikatyang)​

某些 Markdown 文档会在语言名称后添加属性以实现特殊功能；例如 markdown-preview-enhanced 就利用这些属性来修改显示选项并指定代码执行参数。

代码块的语言属性示例如下：

```js {cmd=node .line-numbers}
console.log("hello world");
```

此前 Prettier 不会格式化这些 Markdown 代码块的内容，因为当存在属性时无法检测代码块的语言。现在 Prettier 已能正确识别语言。

修复嵌套 HTML 的缩进问题 (#4115 by @ikatyang)​

在 Prettier 1.11.1 中，列表项下嵌套的 HTML 格式不正确：每次重新格式化代码时缩进层级都会改变。该问题现已被修复。

<!-- Input: -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

<!-- Output (Prettier 1.11.1): -->
1.  A list item

    <table class="table table-striped">
<tr>
<th>Test</th>
<th>Table</th>
</tr>
<tbody>
    <tr>
    <td>Test</td>
    <td>Data</td>
    </tr>
</tbody>
</table>

<!-- Output (Prettier 1.12.0): -->
1.  A list item

    <table class="table table-striped">
    <tr>
    <th>Test</th>
    <th>Table</th>
    </tr>
    <tbody>
        <tr>
        <td>Test</td>
        <td>Data</td>
        </tr>
    </tbody>
    </table>

为换行符打印字面行而非硬换行 (#4083 by @ikatyang)​

在 Prettier 1.11.1 中，当 Markdown 中嵌入 CSS 或 JSX 时，某些情况下块注释的缩进层级设置不正确。该问题已在 Prettier 1.12.0 中修复：

<!-- Input: -->
```pcss
.Avatar {
    @container (width > 100px) {
      /*
      Change some styles on the image element when the container is
      wider than 100px
      */
    }
}
```

<!-- Formatted (Prettier 1.11.1): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
          Change some styles on the image element when the container is
          wider than 100px
          */
  }
}
```

<!-- Formatted (Prettier 1.12.0): -->
```pcss
.Avatar {
  @container (width > 100px) {
    /*
      Change some styles on the image element when the container is
      wider than 100px
      */
  }
}
```

CSS/SCSS/Less​

不再将自定义选择器的变量名转为小写 #4254 (#4255 by @Coobaha)​

Prettier 1.11.1 曾错误地将自定义选择器的变量名转为小写。该问题已在 Prettier 1.12.0 中修复：

/* Input: */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
 color: red;
}

/* Formatted (Prettier 1.11.1): */
@custom-selector :--camelCase .my-css-selector;

:--camelcase {
  color: red;
}

/* Formatted (Prettier 1.12.0): */
@custom-selector :--camelCase .my-css-selector;

:--camelCase {
  color: red;
}

修复内联 URL 导致 value 属性换行的问题 (#4236 by @evilebottnawi)​

在 Prettier 1.11.1 中，当简写属性中出现 url() 时，Prettier 会错误地打印它们。该问题已在 Prettier 1.12.0 中修复。

/* Input: */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K) center center no-repeat;
}

/* Formatted (Prettier 1.11.1): */
.search-icon {
  background: url(
      data:image/svg+xml;base64,
      PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K
    )
    center center no-repeat;
}

/* Formatted (Prettier 1.12.0): */
.search-icon {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTMuNzQzIDEyLjU3NEw5LjkxIDguNzRhNS40MjUgNS40MjUgMCAwIDAgMS4wNS0zLjIzMkE1LjUzMiA1LjUzMiAwIDAgMCA1LjQ2IDAgNS40MzYgNS40MzYgMCAwIDAgMCA1LjQ2OGE1LjUzMiA1LjUzMiAwIDAgMCA1LjUgNS41MDggNS40MDggNS40MDggMCAwIDAgMy4yNDItMS4wNjFsLjAwNC0uMDAzIDMuODMgMy44MzFhLjgyNi44MjYgMCAxIDAgMS4xNjctMS4xNjl6TTUuNDk2IDkuODc4YTQuNDI2IDQuNDI2IDAgMCAxLTQuNC00LjQwNiA0LjM1IDQuMzUgMCAwIDEgNC4zNjgtNC4zNzQgNC40MjUgNC40MjUgMCAwIDEgNC40IDQuNDA2IDQuMzUgNC4zNSAwIDAgMS00LjM2OCA0LjM3NHoiCiAgICAgICAgZmlsbD0iIzhFOEU5MyIgZmlsbC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K)
    center center no-repeat;
}

修复列表和映射中的内联注释问题 (#4205 by @evilebottnawi)​

当 SCSS 列表或映射中出现内联注释时，Prettier 1.11.0 会破坏代码格式。该问题已在 Prettier 1.12.0 中修复。注意：当前格式化效果仍不理想，但此修复解决了代码破坏问题。

// Input:
$my-list:
  'foo', // Foo
  'bar'; // Bar

$my-map: (
  'foo': 1, // Foo
  'bar': 2, // Bar
);

// Formatted (Prettier 1.11.1):
$my-list: "foo", / / Foo "bar"; // Bar

$my-map: (
  "foo": 1,
  / / Foo "bar": 2,
  / / Bar
);

// Formatted (Prettier 1.12.0):
$my-list: "foo",
  // Foo
    "bar"; // Bar

$my-map: (
  "foo": 1,
  // Foo
    "bar": 2,
  // Bar
);

不再将 CSS 模块中导出的变量转为小写 (#4152 by @evilebottnawi)​

Prettier 1.11.1 曾错误地将 CSS 模块导出的变量名转为小写，这会导致在 JavaScript 端导入模块变量时出现问题。

/* Input: */
:export {
  myColor: red;
}

/* Formatted (Prettier 1.11.1): */
:export {
  mycolor: red;
}

该问题已在 Prettier 1.12.0 中修复：

/* Formatted (Prettier 1.12.0): */
:export {
  myColor: red;
}

处理 unicode-range 规则 (#4117 by @evilebottnawi)​

Prettier 1.11.1 曾错误地打印 unicode-range 规则。该问题已在 Prettier 1.12.0 中修复。

/* Input: */
@font-face {
  unicode-range: U+00-FF;
}

/* Formatted (Prettier 1.11.1): */
@font-face {
  unicode-range: U + 00-FF;
}

/* Formatted (Prettier 1.12.0): */
@font-face {
  unicode-range: U+00-FF;
}

HTML/Handlebars/Vue​

支持在 HTML 文档顶部添加注释 (#4141 by @evilebottnawi)​

Prettier 团队正在持续改进我们尚未正式发布的 HTML 格式化功能。本次更新修复了当文档顶部存在注释（例如 htmlhint 注释）时导致格式异常的问题。

修复 Handlebars 的 else if 语句 (#4256 by @n8n8baby)​

我们的 Handlebars 格式化功能也尚未正式发布，但本次更新修复了 else if 语句的打印问题。Prettier 1.11.1 错误地将其转换为 if 语句。

修复 vue 中自闭合 style 标签 (#4108 by @duailibe)​

Prettier 1.11.1 在 vue 文件中未能正确处理自闭合的 style 或 script 标签，导致输出结果异常。该问题已在 Prettier 1.12.0 中修复。

<!-- Input: -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.11.1): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />
<template><span : class= "$style.root" ><slot / ></span> </template> <style src=
  "./style.css" module / >;
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

<!-- Formatted (Prettier 1.12.0): -->
<template>
  <span :class="$style.root"><slot /></span>
</template>

<style src="./style.css" module />

其他改进​

Playground：支持 rangeStart 和 rangeEnd (#4216 by @JamesHenry)​

感谢 @JamesHenry 的工作，现在 Playground 支持指定 --range-start 和 --range-end 参数。这将优化编辑器中选择范围格式化的错误报告流程。

修复使用 --debug-check 时忽略文件的打印问题 (#4066 by @duailibe)​

Prettier 1.11.1 在使用 --debug-check 参数时会错误输出被忽略文件的内容。Prettier 1.12.0 已停止将被忽略文件内容输出至 stdout。

致 Prettier 出色的用户、贡献者和维护者社区：感谢你们！只有通过共同协作，我们才能成就这样的成果 ❤️