Prettier 1.12: 修正、新機能、そしてフォーマット改善の数々！

2018年4月11日 · 1分で読める

Lily Skye

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

皆さん、Prettier 1.12.0のリリースをお届けします！このリリースには多くのバグ修正、フォーマット調整、プラグインAPIの新機能、そしてMarkdownの新機能が含まれています。

主な変更点

JavaScript

ネストされた三項演算子の改行処理 (#4120 by @duailibe)

三項演算子がネストされている場合、印刷幅やインデントレベルによっては、外側の三項演算子が複数行に分割される一方で、内側の三項演算子が1行に収まってしまうことがありました：

// 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と開始波括弧の間にコメントが存在する場合に限り、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のasyncテストと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にRange Ignoreと呼ばれる新しいタイプの無視コメントを追加しました：

<!-- 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 by @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 by @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を受け取る2つの関数の位置が入れ替わっている点に注意してください。

このバグは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.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

フロントマターの不要な空行を削除 (#4280 by @ikatyang)

Prettier 1.11.1では、空のyaml/tomlフロントマターを含むMarkdown文書をフォーマットする際に不要な空行が出力されていました。この行は出力されなくなりました：

入力：

---
---

Hello

フォーマット後 (Prettier 1.11.1):

---

---

Hello

フォーマット後 (Prettier 1.12.0):

---
---

Hello

属性付きのフェンスドコードブロック言語指定をサポート (#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>

改行にhardlineではなくliterallineを出力 (#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 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)

Prettier 1.11.0は、SCSSリストやマップ内にインラインコメントが現れた場合にコードを壊す問題がありました。この問題は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モジュールからエクスポートされる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で自己終了スタイルタグを修正 (#4108 by @duailibe)

Prettier 1.11.1ではVueファイル内の自己終了スタイルタグやスクリプトタグを正しく処理できておらず、予期しない方法で出力されていました。この問題は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を指定できるようになりました。これはエディタでの選択範囲フォーマットに関連するバグ報告プロセスを効率化し、Prettierコミュニティに貢献します。

--debug-checkでの無視ファイル出力を修正 (#4066 by @duailibe)

Prettier 1.11.1では--debug-checkフラグ使用時に無視ファイルの内容を誤って出力していました。Prettier 1.12.0では無視ファイルの内容が標準出力に書き出されなくなりました。

Prettierの素晴らしいユーザー、コントリビューター、メンテナーの皆様、ありがとうございます！これは私たちが共に築くことしかできないものです ❤️

主な変更点​

JavaScript​

ネストされた三項演算子の改行処理 (#4120 by @duailibe)​

else前のコメント処理 (#4264 by @duailibe)​

入力：​

フォーマット後 (Prettier 1.11.1):​

フォーマット後 (Prettier 1.12.0):​

AngularのasyncテストとbeforeEachなどのインライン化 (#4241 by @ad1992)​

ネストされたObjectPatternを含むObjectPatternの改行処理 (#4267 by @duailibe)​

Markdown​

hasPragma/insertPragmaのサポート (#4275 by @ikatyang)​

トップレベルのprettier-ignore-start/prettier-ignore-endサポート (#4202 by @ikatyang)​

GraphQL​

GraphQLの新しいインターフェーススタイルを許可 (#4012 by @ruiaraujo)​

プラグインAPI (ベータ)​

プラグマ検出/挿入機能をプラグインに移行 (#3685 by @duailibe)​

プラグイン固有のコメント機能を有効化 (#4182 by @mgrip)​

その他の変更​

JavaScript​

Flowを0.69にアップグレードし?.をサポート (#4296 by @vjeux)​

名前付きエクスポートの全コメントを先行コメントとしてマークするのを停止 (#4292 by @duailibe)​

ContinueStatementとBreakStatementのコメントを処理 (#4279 by @duailibe)​

バッククォートを含むJS内の埋め込みGraphQLを修正 (#4265 by @duailibe, #4278 by @duailibe)​

テンプレートリテラル内でprettier-ignore使用時の式の混在を防止 (#4220 by @evilebottnawi)​

クラスプロパティ値の「過剰インデント」を防止 (#4085 by @duailibe)​

switch文のフォーマット改善 (#4165 by @evilebottnawi)​

TypeScript​

export default interface Foo {}の後にセミコロンを出力しない (#4128 by @j-f1)​

"UpdateExpression"内の"TSAsExpression"を括弧で囲むよう要求 (#4183 by @UselessPickles)​

Markdown​

フロントマターの不要な空行を削除 (#4280 by @ikatyang)​

入力：​

フォーマット後 (Prettier 1.11.1):​

フォーマット後 (Prettier 1.12.0):​

属性付きのフェンスドコードブロック言語指定をサポート (#4153 by @ikatyang)​

ネストされたHTMLのインデントを修正 (#4115 by @ikatyang)​

改行にhardlineではなくliterallineを出力 (#4083 by @ikatyang)​

CSS/SCSS/Less​

カスタムセレクタの変数名を小文字化しない #4254 (#4255 by @Coobaha)​

インラインURLを含むvalueプロパティを改行しない (#4236 by @evilebottnawi)​

リストとマップ内のインラインコメントを修正 (#4205 by @evilebottnawi)​

CSSモジュールのエクスポート変数を小文字化しない (#4152 by @evilebottnawi)​

unicode-rangeを処理 (#4117 by @evilebottnawi)​

HTML/Handlebars/Vue​

HTMLドキュメント先頭のコメントをサポート (#4141 by @evilebottnawi)​

Handlebarsのelse ifを修正 (#4256 by @n8n8baby)​

Vueで自己終了スタイルタグを修正 (#4108 by @duailibe)​

その他​

Playground: rangeStartとrangeEndのサポートを追加 (#4216 by @JamesHenry)​

--debug-checkでの無視ファイル出力を修正 (#4066 by @duailibe)​

主な変更点

JavaScript

ネストされた三項演算子の改行処理 (#4120 by @duailibe)

`else`前のコメント処理 (#4264 by @duailibe)

入力：

フォーマット後 (Prettier 1.11.1):

フォーマット後 (Prettier 1.12.0):

AngularのasyncテストとbeforeEachなどのインライン化 (#4241 by @ad1992)

ネストされた`ObjectPattern`を含む`ObjectPattern`の改行処理 (#4267 by @duailibe)

Markdown

hasPragma/insertPragmaのサポート (#4275 by @ikatyang)

トップレベルの`prettier-ignore-start`/`prettier-ignore-end`サポート (#4202 by @ikatyang)

GraphQL

GraphQLの新しいインターフェーススタイルを許可 (#4012 by @ruiaraujo)

プラグインAPI (ベータ)

プラグマ検出/挿入機能をプラグインに移行 (#3685 by @duailibe)

プラグイン固有のコメント機能を有効化 (#4182 by @mgrip)

その他の変更

JavaScript

Flowを0.69にアップグレードし?.をサポート (#4296 by @vjeux)

名前付きエクスポートの全コメントを先行コメントとしてマークするのを停止 (#4292 by @duailibe)

ContinueStatementとBreakStatementのコメントを処理 (#4279 by @duailibe)

バッククォートを含むJS内の埋め込みGraphQLを修正 (#4265 by @duailibe, #4278 by @duailibe)

テンプレートリテラル内で`prettier-ignore`使用時の式の混在を防止 (#4220 by @evilebottnawi)

クラスプロパティ値の「過剰インデント」を防止 (#4085 by @duailibe)

switch文のフォーマット改善 (#4165 by @evilebottnawi)

TypeScript

`export default interface Foo {}`の後にセミコロンを出力しない (#4128 by @j-f1)

"UpdateExpression"内の"TSAsExpression"を括弧で囲むよう要求 (#4183 by @UselessPickles)

Markdown

フロントマターの不要な空行を削除 (#4280 by @ikatyang)

入力：

フォーマット後 (Prettier 1.11.1):

フォーマット後 (Prettier 1.12.0):

属性付きのフェンスドコードブロック言語指定をサポート (#4153 by @ikatyang)

ネストされたHTMLのインデントを修正 (#4115 by @ikatyang)

改行にhardlineではなくliterallineを出力 (#4083 by @ikatyang)

CSS/SCSS/Less

カスタムセレクタの変数名を小文字化しない #4254 (#4255 by @Coobaha)

インラインURLを含むvalueプロパティを改行しない (#4236 by @evilebottnawi)

リストとマップ内のインラインコメントを修正 (#4205 by @evilebottnawi)

CSSモジュールのエクスポート変数を小文字化しない (#4152 by @evilebottnawi)

`unicode-range`を処理 (#4117 by @evilebottnawi)

HTML/Handlebars/Vue

HTMLドキュメント先頭のコメントをサポート (#4141 by @evilebottnawi)

Handlebarsの`else if`を修正 (#4256 by @n8n8baby)

Vueで自己終了スタイルタグを修正 (#4108 by @duailibe)

その他

Playground: rangeStartとrangeEndのサポートを追加 (#4216 by @JamesHenry)

--debug-checkでの無視ファイル出力を修正 (#4066 by @duailibe)