Prettier 2.6: 新オプション singleAttributePerLine と新しいJavaScript機能！

2022年3月16日 · 1分で読める

非公式ベータ版翻訳

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

このリリースでは新しい singleAttributePerLine オプションを追加しました。このオプションはVue SFCテンプレート、HTML、JSXにおいて1行に1属性のみを出力するための設定です。オプション哲学で述べている通り、私たちはこのようなオプションの追加を望んでいませんでした。しかし、この機能を求めるユーザーが多く、AirbnbのJavaScriptスタイルガイドやVueのスタイルガイドといった主要なスタイルガイドが1行1属性のスタイルを推奨しています。この機能追加のPRは2019年10月にオープンされ、関連するissueとともに多くのユーザーからの支持を得ました。このオプションの追加は私たちにとって難しい決断でしたが、この追加が私たちの原則を大きく損なうことなく、多くのユーザーに利益をもたらすことを願っています。

また、Babel経由でいくつかの新しいJavaScript構文提案のフォーマットサポートを追加しました。

スポンサーの皆様へ感謝！

今年初めのブログ記事でお知らせした通り、スポンサーからの資金でメンテナーへの報酬支払いを開始しました。これを可能にしてくださった多くのスポンサーに感謝します！特に1,000ドル以上を寄付してくださった以下の企業と個人に深く感謝いたします：

Prettierをご利用いただき、私たちの活動を支援したい場合は、OpenCollectiveから直接スポンサーになるか、私たちが依存しているtypescript-eslint、remark、Babelなどのプロジェクトを支援することをご検討ください。

主な変更点

TypeScript

TypeScript 4.6のサポート (#12400 by @dependabot)

TypeScriptコードの解析に使用するTypeScriptのバージョンをTypeScript 4.6に更新しました。ただし、今回のTypeScriptリリースでは新しい構文が追加されていないため、その他の変更は必要ありませんでした。

HTML

1行1属性の強制 (#6644 by @kankje)

PrettierがHTML、Vue、JSXで1行に1属性のみを強制するかどうかを指定する singleAttributePerLine オプションを追加しました。

<!-- Input -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.5 -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Prettier 2.6, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
  data-a="1"
  data-b="2"
  data-c="3"
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

その他の変更

JavaScript

AngularでwaitForAsyncをテストステートメントとして認識 (#11992 by @HendrikN)

// Input
test("foo bar", waitForAsync(() => {
  const foo = "bar";
  expect(foo).toEqual("bar")
}));

// Prettier 2.5
test(
  "foo bar",
  waitForAsync(() => {
    const foo = "bar";
    expect(foo).toEqual("bar");
  })
);

// Prettier 2.6
test("foo bar", waitForAsync(() => {
  const foo = "bar";
  expect(foo).toEqual("bar");
}));

ブロックを持たないif文の後の行末コメントを保持 (#12017 by @sosukesuzuki)

// Input
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C

// Prettier 2.5
if (condition1) expression1;
// comment A
else if (condition2) expression2;
// comment B
else expression3; // comment C

// Prettier 2.6
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C

`babel-ts`パーサー使用時に括弧付きTSキーワード型のコメントを出力 (#12070 by @sosukesuzuki)

// Input
let foo: (
   // comment
   never
);

// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.6
let foo: // comment
never;

`continue`/`break`文の行末コメントを出力 (#12075 by @sosukesuzuki)

// Input
for (;;) continue // comment
;

// Prettier 2.5
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.6
for (;;)
  continue; // comment

JSX内の`await`式をインライン化 (#12088 & #12109 by @j-f1)

JSX内のawait式は、引数がインライン化される場合にインライン化されるようになりました。

// Input
{await Promise.all(
  someVeryLongExpression
)}

{await (
  <div>Lorem ipsum ...</div>
)}


// Prettier 2.5
{
  await Promise.all(
    someVeryLongExpression
  )
}

{
  await (
    <div>Lorem ipsum ...</div>
  )
}


// Prettier 2.6
{await Promise.all(
  someVeryLongExpression
)}

{await (
  <div>Lorem ipsum ...</div>
)}

`acorn`パーサーの追加 (#12172 by @fisker)

parserオプションに新しい値acornが追加されました。これはJavaScriptベースの小型で高速なJavaScriptパーサーです。

`default`ケース後のコメントを同じ行に保持 (#12177 by @duailibe)

switch文内のdefaultケース直後のコメントを、可能な場合に同じ行に保持するようになりました。

// Input
function read_statement() {
  switch (peek_keyword()) {
    case Keyword.impl: // impl<T> Growling<T> for Wolf {}
      return ImplDeclaration.read();

    default: // expression;
      return ExpressionStatement.read();
  }
}

// Prettier 2.5
function read_statement() {
  switch (peek_keyword()) {
    case Keyword.impl: // impl<T> Growling<T> for Wolf {}
      return ImplDeclaration.read();

    default:
      // expression;
      return ExpressionStatement.read();
  }
}

// Prettier 2.6
function read_statement() {
  switch (peek_keyword()) {
    case Keyword.impl: // impl<T> Growling<T> for Wolf {}
      return ImplDeclaration.read();

    default: // expression;
      return ExpressionStatement.read();
  }
}

抽象メソッド内の引数コメント位置を修正 (#12185 by @duailibe)

// Input
abstract class Foo {
  abstract bar(
    /** comment explaining userId param */
    userId
  )
}

// Prettier 2.5
abstract class Foo {
  abstract bar(userId);
  /** comment explaining userId param */
}

// Prettier 2.6
abstract class Foo {
  abstract bar(
    /** comment explaining userId param */
    userId
  );
}

クラス宣言内のスーパークラスの型キャストを修正 (#12222 & #12226 by @duailibe)

これは2つの独立したバグの組み合わせでした：スーパークラスの前にコメントが移動される問題と、スーパークラスの周囲に複数の括弧が追加される問題です。

// Input
class Foo extends /** @type {Type} */ (Bar) {}

// Prettier 2.5
class Foo /** @type {Type} */ extends ((Bar)) {}

// Prettier 2.6
class Foo extends /** @type {Type} */ (Bar) {}

正規表現におけるUnicode集合記法のサポート追加 (#12241 by @fisker)

正規表現におけるUnicode集合記法のStage 3提案が、Babel 7.17.0経由でサポートされました。

詳細はBabel v7.17.0のリリースブログとこの提案のREADMEを参照してください。また、Prettierでこの提案中の構文機能を使用する前に、非標準構文に関するポリシーを確認してください。

// Examples

/[\p{Decimal_Number}--[0-9]]/v; // Non-ASCII decimal digits

"Did you see the 👩🏿‍❤️‍💋‍👩🏾 emoji?".match(/\p{RGI_Emoji}/v). // ["👩🏿‍❤️‍💋‍👩🏾"]

/[\r\n\q{\r\n|NEWLINE}]/v; // Matches \r, \n, \r\n or NEWLINE

デコレーター付き`ClassExpression`に括弧を追加 (#12260 by @fisker)

// Input
(@f() class {});

// Prettier 2.5
@f()
class {};

// Prettier 2.5 (Second format)
SyntaxError: A class name is required. (2:7)
  1 | @f()
> 2 | class {};
    |       ^
  3 |

// Prettier 2.6
(
  @f()
  class {}
);

FlowとTypeScriptにおける型エイリアス内コメントの出力改善 (#12268 by @duailibe)

Flowでは、コメントの配置が改善され、右辺がオブジェクト式の代入文におけるコメントの配置方法に合わせて整形されるようになりました：

// Input
type Props = // comment explaining the props
  {
    isPlaying: boolean
  };

// Prettier 2.5
// comment explaining the props
type Props = {
  isPlaying: boolean,
};

// Prettier 2.6
type Props =
  // comment explaining the props
  {
    isPlaying: boolean,
  };

この変更により、TypeScriptで同様の位置に配置されたコメントが2回目のフォーマット操作後に再移動される問題も修正されました：

// Input
type Props = // comment explaining the props
  {
    isPlaying: boolean
  };

// Prettier 2.5
type Props = { // comment explaining the props
  isPlaying: boolean;
};

// Prettier 2.5 (2nd format)
type Props = {
  // comment explaining the props
  isPlaying: boolean;
};

// Prettier 2.6
type Props =
  // comment explaining the props
  {
    isPlaying: boolean,
  };

プライベートフィールドの分割代入をサポート (#12276 by @sosukesuzuki)

Stage 2のTC39提案であるプライベートフィールドの分割代入がBabel 7.17経由でサポートされました。Prettierでこの提案中の構文機能を使用する前に、非標準構文に関するポリシーをお読みください。

// Example
class Foo {
  constructor() {
    console.log(this.#x); // => 1
    const { #x: x } = this;
    console.log(x); // => 1
  }
}

デコレータの自動アクセサ構文をサポート (#12299 by @sosukesuzuki)

新しいデコレータ提案で導入された自動アクセサ構文をサポートします。Prettierでこの提案中の構文機能を使用する前に、非標準構文に関するポリシーをお読みください。

// Example
@defineElement("my-class")
class C extends HTMLElement {
  @reactive accessor clicked = false;
}

代入式の`=`後の行コメントによる冪等性問題を修正 (#12349 by @thorn0)

// Input
const kochabCooieGameOnOboleUnweave = // !!!
  rhubarbRhubarb(annularCooeedSplicesWalksWayWay);

// Prettier 2.5, first format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb( // !!!
  annularCooeedSplicesWalksWayWay
);

// Prettier 2.5, second format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb(
  // !!!
  annularCooeedSplicesWalksWayWay
);

// Prettier 2.6
const kochabCooieGameOnOboleUnweave = // !!!
  rhubarbRhubarb(annularCooeedSplicesWalksWayWay);

TypeScript

definite assignment assertionの出力処理をリファクタリング (#12351 by @thorn0)

definite assignment assertionが型注釈の後ろにない場合でも出力されるようになりました。これはTypeScriptではエラーですが、TSは依然としてファイルをパース可能です。

// Input
let a!;

// Prettier 2.5
let a;

// Prettier 2.6
let a!;

タプル型における残余要素の末尾カンマを出力 (#12390 by @sosukesuzuki)

TypeScriptは4.2以降、タプル型の残余要素（...T）の後に通常の要素を配置できるようになりました。 Prettierでは一貫性を保ち、将来最終要素の後に要素を追加する際の差分を減らすため、末尾の残余要素に対して（末尾カンマが有効な場合）末尾カンマを出力するようになりました。

// { trailingCommma: "all" }

// Input
type Foo = [
  Element,
  Element,
  Element,
  Element,
  Element,
  Element,
  ...RestElement,
];


// Prettier 2.5
type Foo = [
  Element,
  Element,
  Element,
  Element,
  Element,
  Element,
  ...RestElement
];


// Prettier 2.6
type Foo = [
  Element,
  Element,
  Element,
  Element,
  Element,
  Element,
  ...RestElement,
];

Flow

Flowのクラス宣言における`static`インデクサのフォーマットを修正 (#12009 by @gkz)

// Input
declare class A {
  static [string]: boolean;
}

// Prettier 2.5
declare class A {
  [string]: boolean;
}

// Prettier 2.6
declare class A {
  static [string]: boolean;
}

CSS

SCSSマップ内の空白行を保持 (#12210 by @duailibe)

この変更は同様の構文を持つ一部のPostCSS機能にも適用されます。

/* Input */
$colours: (
    "text": $light-100,

    "background-primary": $dark-300,
    "background-secondary": $dark-200,
    "background-tertiary": $dark-100
);

/* Prettier 2.5 */
$colours: (
  "text": $light-100,
  "background-primary": $dark-300,
  "background-secondary": $dark-200,
  "background-tertiary": $dark-100
);

/* Prettier 2.6 */
$colours: (
    "text": $light-100,

    "background-primary": $dark-300,
    "background-secondary": $dark-200,
    "background-tertiary": $dark-100
);

PostCSS値の小文字化処理を修正 (#12393 by @niklasvatn)

PostCSS値は数字で始まる場合があります。Prettierは下記の例でこれを「数値＋単位」として解釈します。

// Input
@value 4XLarge 28/36px;

.test {
  font: 4XLarge Helvetica;
}

// Prettier 2.5
@value 4XLarge 28/36px;

.test {
  font: 4xlarge Helvetica;
}

// Prettier 2.6
@value 4XLarge 28/36px;

.test {
  font: 4XLarge Helvetica;
}

SCSS

マップ内のコメント処理を修正 (#11920 by @fisker)

// Input
.ag-theme-balham {
    @include ag-theme-balham(
        (
            foreground-color: $custom-foreground-color,
            disabled-foreground-color: null, // TODO some comment
        )
    );
}

// Prettier 2.5
.ag-theme-balham {
    @include ag-theme-balham(
        (
            foreground-color: $custom-foreground-color,
            disabled-foreground-color: null,
            r: null, // TODO som
        )
    );
}

// Prettier 2.6
.ag-theme-balham {
  @include ag-theme-balham(
    (
      foreground-color: $custom-foreground-color,
      disabled-foreground-color: null,
      // TODO some comment
    )
  );
}

`selector()` という名前のmixinのパラメータ出力を修正 (#12213 by @duailibe)

/* Input */
@mixin selector($param: 'value') {
}

/* Prettier 2.5 */
@mixin selector($param: 'value) {
}

/* Prettier 2.6 */
@mixin selector($param: 'value') {
}

Vue

無効な `v-for` でハングする問題を修正 (#12113 by @fisker)

// Input
<template>
  <div>
    <div v-for=" a in ">aaaaa</div>
  </div>
</template>

// Prettier 2.5
// Hangs

// Prettier 2.6
<template>
  <div>
    <div v-for=" a in ">aaaaa</div>
  </div>
</template>;

`<template>` の `lang` 属性が空でも許可するように変更 (#12394 by @HallvardMM)

テンプレートタグは空文字列の lang="" や未定義の lang を許可すべき

<!-- Input -->
<template lang="">
  <v-app-bar>
    <v-menu offset-y>
      <template></template>
    </v-menu>
  </v-app-bar>
</template>

<template lang>
  <v-app-bar>
    <v-menu offset-y>
      <template></template>
    </v-menu>
  </v-app-bar>
</template>

<!-- Prettier 2.5 -->
SyntaxError: Unexpected closing tag "v-menu". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (5:5)
[error]   3 |     <v-menu offset-y>
[error]   4 |       <template></template>
[error] > 5 |     </v-menu>
[error]     |     ^^^^^^^^^
[error]   6 |   </v-app-bar>
[error]   7 | </template>

<!-- Prettier 2.6 -->
<template lang="">
  <v-app-bar>
    <v-menu offset-y>
      <template></template>
    </v-menu>
  </v-app-bar>
</template>

<template lang>
  <v-app-bar>
    <v-menu offset-y>
      <template></template>
    </v-menu>
  </v-app-bar>
</template>

Ember / Handlebars

Glimmerによって削除されるバックスラッシュを正しく識別するように修正 (#12302 by @MattTheNub)

この問題により、ファイルがフォーマットされるたびに不要なバックスラッシュが追加されていました。

{{! Input }}
<p>\</p>
<p>\\</p>
<p>\\\</p>

{{! Prettier 2.5 }}
<p>\\</p>
<p>\\\</p>
<p>\\\\</p>

{{! Prettier 2.6 }}
<p>\</p>
<p>\\</p>
<p>\\\</p>

GraphQL

GraphQLスキーマ定義ノードの説明文を出力するように修正 (#11901 by @trevor-scheer)

# Input
"""SchemaDefinition description is lost"""
schema {
  query: Query
}

# Prettier 2.5
schema {
  query: Query
}

# Prettier 2.6
"""
SchemaDefinition description is lost
"""
schema {
  query: Query
}

YAML

U+3000（全角スペース）で始まるブロックリテラル行が誤って削除される問題を修正 (#12305 by @Quramy)

# Input
block_with_ideographic_space: |
  　line-content # This line starts with U+3000

# Prettier 2.5
block_with_ideographic_space: |

// Prettier 2.6
block_with_ideographic_space: |
  　line-content # This line starts with U+3000

CLI

プラグインの自動読み込みを無効化する `--no-plugin-search` オプションを追加 (#10274 by @fisker)

プラグインの自動読み込みを無効化するには、Prettier CLI を使用する場合は --no-plugin-search を指定するか、prettier.format() のオプションや設定ファイルに { pluginSearchDirs: false } を追加してください。

// Prettier 2.5
$ prettier . --plugin-search-dir=a-dir-without-plugins

// Prettier 2.6
$ prettier . --no-plugin-search

`.swcrc` のパーサーを自動推論するように変更 (#12320 by @sosukesuzuki)

.swcrc ファイルをJSONファイルとしてフォーマットするようになりました。

その他の変更

`esbuild` への移行 (#12055 by @fisker)

ビルドプロセスをRollupからesbuildに移行しました。esbuildは非常に高速で、開発者体験が向上しました。これは内部的な変更であり、ユーザーに影響はありません。アップグレード後に問題が発生した場合は、イシューを報告してください！

スポンサーの皆様へ感謝！​

主な変更点​

TypeScript​

TypeScript 4.6のサポート (#12400 by @dependabot)​

HTML​

1行1属性の強制 (#6644 by @kankje)​

その他の変更​

JavaScript​

AngularでwaitForAsyncをテストステートメントとして認識 (#11992 by @HendrikN)​

ブロックを持たないif文の後の行末コメントを保持 (#12017 by @sosukesuzuki)​

babel-tsパーサー使用時に括弧付きTSキーワード型のコメントを出力 (#12070 by @sosukesuzuki)​

continue/break文の行末コメントを出力 (#12075 by @sosukesuzuki)​

JSX内のawait式をインライン化 (#12088 & #12109 by @j-f1)​

acornパーサーの追加 (#12172 by @fisker)​

defaultケース後のコメントを同じ行に保持 (#12177 by @duailibe)​

抽象メソッド内の引数コメント位置を修正 (#12185 by @duailibe)​

クラス宣言内のスーパークラスの型キャストを修正 (#12222 & #12226 by @duailibe)​

正規表現におけるUnicode集合記法のサポート追加 (#12241 by @fisker)​

デコレーター付きClassExpressionに括弧を追加 (#12260 by @fisker)​

FlowとTypeScriptにおける型エイリアス内コメントの出力改善 (#12268 by @duailibe)​

プライベートフィールドの分割代入をサポート (#12276 by @sosukesuzuki)​

デコレータの自動アクセサ構文をサポート (#12299 by @sosukesuzuki)​

代入式の=後の行コメントによる冪等性問題を修正 (#12349 by @thorn0)​

TypeScript​

definite assignment assertionの出力処理をリファクタリング (#12351 by @thorn0)​

タプル型における残余要素の末尾カンマを出力 (#12390 by @sosukesuzuki)​

Flow​

Flowのクラス宣言におけるstaticインデクサのフォーマットを修正 (#12009 by @gkz)​

CSS​

SCSSマップ内の空白行を保持 (#12210 by @duailibe)​

PostCSS値の小文字化処理を修正 (#12393 by @niklasvatn)​

SCSS​

マップ内のコメント処理を修正 (#11920 by @fisker)​

selector() という名前のmixinのパラメータ出力を修正 (#12213 by @duailibe)​

Vue​

無効な v-for でハングする問題を修正 (#12113 by @fisker)​

<template> の lang 属性が空でも許可するように変更 (#12394 by @HallvardMM)​

Ember / Handlebars​

Glimmerによって削除されるバックスラッシュを正しく識別するように修正 (#12302 by @MattTheNub)​

GraphQL​

GraphQLスキーマ定義ノードの説明文を出力するように修正 (#11901 by @trevor-scheer)​

YAML​

U+3000（全角スペース）で始まるブロックリテラル行が誤って削除される問題を修正 (#12305 by @Quramy)​

CLI​

プラグインの自動読み込みを無効化する --no-plugin-search オプションを追加 (#10274 by @fisker)​

.swcrc のパーサーを自動推論するように変更 (#12320 by @sosukesuzuki)​

その他の変更​

esbuild への移行 (#12055 by @fisker)​

スポンサーの皆様へ感謝！

主な変更点

TypeScript

TypeScript 4.6のサポート (#12400 by @dependabot)

HTML

1行1属性の強制 (#6644 by @kankje)

その他の変更

JavaScript

AngularでwaitForAsyncをテストステートメントとして認識 (#11992 by @HendrikN)

ブロックを持たないif文の後の行末コメントを保持 (#12017 by @sosukesuzuki)

`babel-ts`パーサー使用時に括弧付きTSキーワード型のコメントを出力 (#12070 by @sosukesuzuki)

`continue`/`break`文の行末コメントを出力 (#12075 by @sosukesuzuki)

JSX内の`await`式をインライン化 (#12088 & #12109 by @j-f1)

`acorn`パーサーの追加 (#12172 by @fisker)

`default`ケース後のコメントを同じ行に保持 (#12177 by @duailibe)

抽象メソッド内の引数コメント位置を修正 (#12185 by @duailibe)

クラス宣言内のスーパークラスの型キャストを修正 (#12222 & #12226 by @duailibe)

正規表現におけるUnicode集合記法のサポート追加 (#12241 by @fisker)

デコレーター付き`ClassExpression`に括弧を追加 (#12260 by @fisker)

FlowとTypeScriptにおける型エイリアス内コメントの出力改善 (#12268 by @duailibe)

プライベートフィールドの分割代入をサポート (#12276 by @sosukesuzuki)

デコレータの自動アクセサ構文をサポート (#12299 by @sosukesuzuki)

代入式の`=`後の行コメントによる冪等性問題を修正 (#12349 by @thorn0)

TypeScript

definite assignment assertionの出力処理をリファクタリング (#12351 by @thorn0)

タプル型における残余要素の末尾カンマを出力 (#12390 by @sosukesuzuki)

Flow

Flowのクラス宣言における`static`インデクサのフォーマットを修正 (#12009 by @gkz)

CSS

SCSSマップ内の空白行を保持 (#12210 by @duailibe)

PostCSS値の小文字化処理を修正 (#12393 by @niklasvatn)

SCSS

マップ内のコメント処理を修正 (#11920 by @fisker)

`selector()` という名前のmixinのパラメータ出力を修正 (#12213 by @duailibe)

Vue

無効な `v-for` でハングする問題を修正 (#12113 by @fisker)

`<template>` の `lang` 属性が空でも許可するように変更 (#12394 by @HallvardMM)

Ember / Handlebars

Glimmerによって削除されるバックスラッシュを正しく識別するように修正 (#12302 by @MattTheNub)

GraphQL

GraphQLスキーマ定義ノードの説明文を出力するように修正 (#11901 by @trevor-scheer)

YAML

U+3000（全角スペース）で始まるブロックリテラル行が誤って削除される問題を修正 (#12305 by @Quramy)

CLI

プラグインの自動読み込みを無効化する `--no-plugin-search` オプションを追加 (#10274 by @fisker)

`.swcrc` のパーサーを自動推論するように変更 (#12320 by @sosukesuzuki)

その他の変更

`esbuild` への移行 (#12055 by @fisker)