メインコンテンツへスキップ

Prettier 1.13: Webを制覇！

· 1分で読める
Lucas Duailibe
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以前では、拡張子のないファイルに対してJavaScriptが含まれていると想定していました。これにより以下の混乱を招くバグが発生していました：

  • .gitディレクトリでPrettierを実行するとファイルが再フォーマットされ、Gitリポジトリが破損する

  • HTMLファイルでPrettierを実行した場合、エラーが発生する場合と、HTMLをJSXとして解析して（多くの場合安全ではない）JSX形式でフォーマットする場合が混在する

Prettier 1.13ではこの挙動を変更します。拡張子からファイルの言語を判定できず、ユーザーが手動でパーサーを指定していない場合、Prettierはファイルをスキップします。

サポート外または非標準の拡張子を持つファイルをフォーマットする必要がある場合は、--parserオプションで使用するパーサーを指定してください。ファイル内容をstdin経由でパイプする場合は、Prettierが入力の解析言語を検出できるよう、必ず--stdin-filepathを付与してください。

JavaScript APIを使用する場合、prettier.formatとprettier.formatWithCursorは、オプションにparserまたはfilepathのいずれかが含まれていないとエラーをスローします。また、filepathは指定されているがparserがなく、ファイルパスから正しいパーサーが推論できない場合もエラーが発生します。

prettier.getFileInfo()メソッドと--file-info CLIオプション (#4341 by @kachkaev)​

APIからPrettierを呼び出す場合、ファイルが無視されるべきかどうか（.prettierignore向け）を確認する方法がなく、エディター統合プラグインがこのロジックを実装する必要がありました。また、ファイルがPrettierでサポートされているかを確認する方法もなかったため、ユーザーはとにかくPrettierを呼び出す必要がありました。1.13では、実際にformatを呼び出す前に、パーサーが推論されるか（どのパーサーか）、ファイルが無視されるかどうかを確認する方法が追加されました。

詳細はドキュメントをご覧ください。

グローバルPrettierとプラグインのサポート (#4192 by @kachkaev)​

Prettierとプラグインをグローバルインストールした場合、最も近いpackage.jsonを検索するため、Prettierはプラグインを自動的にロードできませんでした。現在ではPrettierは自身がインストールされたnode_modulesディレクトリ内のプラグインを探します。さらに、Prettierがプラグインを自動的に見つけられない場合（まだサポートを追加していない他のセットアップのため）に備え、Prettierがプラグインを検索する場所を指定できる--plugin-search-dirオプションが新たに追加されました。

詳細はプラグインのドキュメントをご覧ください。

カーソルオフセット追跡の改善 (#4397 by @ds300)​

Prettier 1.13では、カーソルオフセットの追跡が大幅に改善され、Prettierが誤った位置を出力していた複数のケースで、エディタ統合がカーソルを不正な位置に移動させる問題が解決されました。

JavaScript​

数式演算でより多くの括弧を挿入 (#4413 および #4407 by @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 by @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 by @1wheel, #4505 by @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 by @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 by @suchipi)​

Prettierで最も要望の多かった変更の1つが関数合成の改善です。RxJS、Redux、Lodash、Ramdaなどの関数型プログラミングライブラリで一般的なこのパターンについて、Prettier 1.13では関数合成を検知するヒューリスティックを導入し、合成された関数を各行に配置するフォーマットを行います。これにより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 by @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​

クラスのmixinとimplementsを正しく出力 (#4326 by @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 {}

Null合体演算子と数値区切りリテラルのサポート追加 (#4536 by @vjeux)​

これらのJavaScript機能はデフォルトのBabylonパーサ使用時には既にサポートされていましたが、Prettier 1.13ではFlowパーサ使用時にも対応しました。

Flowの新構文機能をサポート (#4543, #4540 および #4551 by @existentialism)​

Flowに追加された新機能がPrettierでサポートされました：

  • インラインインターフェース

    type A = interface { p: string};

  • 明示的なタイプ引数

    fnCall<string>("name");

  • proto修飾子の構文

    declare class A { proto: T }

TypeScript​

TypeScriptのimport typeをサポート (#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} />

TaggedTemplateExpressionのtypeParametersサポート追加 (#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 and #4371 by @ikatyang, #4333 by @duailibe)​

JSON5はJSONの上位互換で、コメント、末尾カンマ、引用符なしプロパティキーをサポートします。.babelrcなどのファイルではJSON5が使われるため、これらが許可されます。一方package.jsonなどではJSON5が使われないため許可されません。以前は両方にJSONパーサー/プリンターが使われていましたが、これにより/* @prettier */プラグマコメントの検出・挿入周りで微妙なバグが発生していました。分割によりこれらのバグが修正され、Prettierの堅牢性が向上しました。

JSON.stringifyスタイルのフォーマットのためのjson-stringifyパーサー追加 (#4450 by @ikatyang)​

Prettierに関する一般的な不満点として、package.jsonやpackage-lock.jsonをnpmやyarnとは異なる方法でフォーマットするため、npmまたはyarnコマンド実行時にPrettier違反が発生したり、package.json編集時の改行が次にnpmまたはyarnコマンドを実行した際に削除される問題がありました。これにより不要な差分ノイズが発生しユーザー体験が低下していました。Prettier 1.13ではJSON.stringifyと同様に動作するjson-stringifyパーサー/プリンターを追加。これによりPrettierとnpm/yarn間のフォーマットの不一致が解消されます。またpackage.jsonとpackage-lock.jsonではこれがデフォルトになったため、アップグレードするだけで設定変更なしに差分ノイズが解消されます。

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 1.12以前では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 %}

必要に応じてリンク定義を複数行に分割 (#3531 by @j-f1)​

リンク定義は--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​

元のソースに存在する場合のみトップレベル定義後に空白行を追加 (#4512 by @ad1992)​

Prettier 1.12 以前では、トップレベル定義の間に常に空白行を挿入していました。1.13 では、元のソースに空白行が存在する場合にのみ空白行を出力します。この動作は JavaScript フォーマット時の Prettier の挙動と同様です。

# 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​

ファイルに必須プラグマが存在しない場合、範囲指定フォーマットを実行しない (#3996 by @josephfrazier)​

Prettier 1.12 以前では、ファイルに /** @prettier */ プラグマが存在せず、--require-pragma を指定して範囲のみをフォーマットする場合でも処理を実行していました。現在は範囲指定時にもプラグマの存在をチェックします。

パスが ./ で始まらない場合のプラグイン解決を改善 (#4451 by @kachkaev)​

--plugin=path/to/plugin を指定した場合、Prettier 1.12 以前は node_modules フォルダ内の path/to/plugin を探そうとしてクラッシュしていました。Prettier 1.13 ではまずカレントディレクトリを探索し、見つからない場合のみ node_modules を探索します。

isBlockComment 用プラグインインターフェースを追加 (#4347 by @mgrip)​

ブロックコメント（JS では /* comment */）はコードと共にインラインで出力可能なコメントです。Prettier がコメント出力を担当するため、プラグインがブロックコメントかどうかを判定できるようになりました。詳細はドキュメントをご覧ください。

JavaScript​

関数の分割代入ルールを catch パラメータに適用 (#4385 by @duailibe)​

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 テンプレートのバックスラッシュエスケープを修正 (#4381 by @ikatyang)​

Prettier 1.12 以前では Markdown テンプレートリテラル内のバックスラッシュが誤って削除されるケースがありました。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()`` 構文をサポート (#4434 by @duailibe)​

Prettier 1.12.1 では styled-components の Foo.extends.attrs() に渡されたテンプレートリテラルを CSS と認識できませんでした。1.13 ではこの構文をサポートし、テンプレートリテラルを 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 コメントタグのサポートを追加 (#4395 by @tjallingt)​

これまで Prettier はタグ付きテンプレートリテラルの GraphQL をフォーマットしていましたが、タグなしテンプレートを使用する GraphQL ライブラリも存在します。多くのエディタプラグインが採用している /* GraphQL */ コメントによる検出方法を 1.13 でサポートし、GraphQL コードをフォーマットします。

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

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

Angular コンポーネントスタイルのフォーマットを実装 (#4361 by @JamesHenry)​

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 {

クラスプロパティ初期化子の改行を修正 (#4442 by @nicolo-ribaudo)​

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以前では、演算子の優先順位が原因でnullable演算子を使用した際に型の意味が意図せず変更される問題がありました。この問題は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時の連続CJKテキストのマージを防止 (#4504 by @ikatyang)​

--prose-wrap preserveを使用時、Prettierは複数行にまたがる連続CJKテキストをマージしなくなりました。

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

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

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

CSS/SCSS/Less​

SCSSのリストとマップで末尾カンマを出力 (#4317 by @ad1992)​

PrettierはtrailingCommaが"none"でなく、リストやマップが複数行に分割されている場合、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 and #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;