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

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）が実装され、以下の2つの値を指定できます：

  • "avoid" - （デフォルト）可能な場合に括弧を省略する従来の動作を維持

  • "always" - 常に括弧を含める

JSXフラグメント構文のサポート (#3237) by @duailibe​

Prettierは新しいフラグメント構文を使用したJSXを認識・フォーマットできるようになりました：

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

長いテキストを含むJSXのフォーマット速度改善 (#3268, #3273) by @duailibe​

非常に長いテキスト（約1000行）を含むJSXファイルのフォーマットが極めて遅いというフィードバックを受け、行幅に達するまでテキストを出力し改行を挿入するfillプリミティブに2つのパフォーマンスボトルネックがあることを特定しました。

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サポートを利用できないことがありました。良いニュースは、許可されるのはトップレベルのインターポレーションのみであり、Prettierでのサポート追加が比較的容易だったことです。

バージョン1.9では、トップレベルインターポレーションを含むGraphQLクエリをフォーマットします：

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

  ${UserDetailsFragment}
`

（クエリやミューテーション内部にインターポレーションがある場合、Prettierは引き続きフォーマットをスキップします）

GraphQLで意図的な改行を保持 (#3252) by @duailibe​

PrettierはこれまでGraphQLクエリ内の意図的な改行を削除していましたが、今後は改行を保持するようになります（ただし最大1行に制限）。

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

prettierCLIはデフォルトで.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<>）で改行が発生しなくなりました。

Flow mixinのサポート追加（babylon使用時）(#3391) by @bakkot​

Flow mixinが誤って除去される問題を修正しました。ただし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__とフォーマットされる問題を修正。

句読点バリアントの扱いを改善 (#3254) by @ikatyang​

PrettierがASCII句読点だけでなくUnicode句読点も考慮するようになりました。

TOMLフロントマターのサポート追加 (#3290) by @ikatyang​

MarkdownファイルのフロントマターでYAMLを既にサポートしていましたが、一部の静的サイトジェネレータで使用される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>
```