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

Prettier 2.4: 新しい bracketSameLine オプションと TypeScript 4.4 サポート！

· 1分で読める
Sosuke Suzuki
Sosuke Suzuki
非公式ベータ版翻訳

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

このリリースでは、jsxBracketSameLineオプションをbracketSameLineに名称変更しました。この新しいオプションはJSXに加え、HTML、Vue、Angularもサポートします。旧名称は非推奨となりました。

また、class static blocksなどの新構文を含むTypeScript 4.4のサポートを追加しました。

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

主な変更点​

TypeScript​

TypeScript 4.4 のサポート (#11426 by @sosukesuzuki)​

TypeScript 4.4をサポートしました！

クラス内のstaticブロック​

Class Static Blocks構文はECMAScriptのStage 4提案です。詳細は https://github.com/tc39/proposal-class-static-block をご覧ください。

// Input
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

// Prettier 2.3
SyntaxError: Declaration expected. (5:9)
  3 |
  4 |   // This is a static block:
> 5 |   static {
    |         ^
  6 |     if (someCondition()) {
  7 |       Foo.count++;
  8 |     }

// Prettier 2.4
class Foo {
  static count = 0;

  // This is a static block:
  static {
    if (someCondition()) {
      Foo.count++;
    }
  }
}

HTML​

jsxBracketSameLineオプションからbracketSameLineオプションへの置き換え (#11006 by @kurtztech)​

jsxBracketSameLineオプションを非推奨とし、HTML、Angular、Vue、JSXで動作する新しいbracketSameLineオプションを導入しました。

<!-- Input -->
<div id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">lorem ipsum dolor sit amet</div>

<!-- Prettier 2.3 -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz"
>
  lorem ipsum dolor sit amet
</div>

<!-- Prettier 2.4 -->
<!-- Options: `{bracketSameLine: true}` -->
<div
  id="foo-bar-baz"
  class="bar-foo-baz"
  title="a sample title"
  data-foo="bar"
  data-bar="baz">
  lorem ipsum dolor sit amet
</div>

その他の変更​

JavaScript​

スタイルコンポーネント向け括弧付きタグ付きテンプレートリテラルのサポート (#11246 by @sosukesuzuki)​

// Input
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.3
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position:   fixed;
  color: red;
  `;

// Prettier 2.4
const StyledComponent =
  /** @type {import('styled-components').ThemedStyledFunction<'div',null,{overlap: boolean}>} */
  (styled.div)`
    position: fixed;
    color: red;
  `;

メソッドチェーン引数内の正規表現リテラルを正しくカウント (#11299 by @sosukesuzuki)​

// Input
foo1(/𠮟𠮟𠮟/).foo2(bar).foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.3
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/).foo2(bar).foo3(baz);

// Prettier 2.4
foo1(/𠮟𠮟𠮟/)
  .foo2(bar)
  .foo3(baz);

foo1(/叱叱叱/)
  .foo2(bar)
  .foo3(baz);

Hackスタイルパイプライン提案のサポート (#11335 by @sosukesuzuki)​

提案中のhack-style pipeline構文をPrettierがサポートしました。公式説明に従い%をトピックトークンとして使用していますが、提案が進展するにつれ将来のリリースで変更される可能性があります。

この変更の一環として、"smart" pipeline構文のサポートを削除しました。この決定の背景にある考え方は非標準構文に関する方針をご参照ください。

// Input
const foo = fn() |> fn1(%) |> fn2(%);

// Prettier 2.3
SyntaxError: Unexpected token (1:25)
> 1 | const foo = fn() |> fn1(%) |> fn2(%);
    |                         ^
  2 |

// Prettier 2.4
const foo = fn() |> fn1(%) |> fn(%);

TypeScript​

マップ型を含む交差型のフォーマット修正 (#11247 by @sosukesuzuki)​

// Input
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

// Prettier 2.3
type Example = {
  [A in B]: T;
} &
  {
    [A in B]: T;
  };

// Prettier 2.4
type Example = {
  [A in B]: T;
} & {
  [A in B]: T;
};

Flow​

Flow分散シグイルの前に常にセミコロンを配置 (#11398 by @noppa)​

// Input
class A {
  +one = function() {};
  -two = val();
  +#privOne = val();
  static +#privTwo = val();
}
// Prettier 2.3
class A {
  +one = function() {}
  -two = val()
  +#privOne = val()
  static +#privTwo = val()
}
// Prettier 2.4
class A {
  +one = function() {};
  -two = val();
  +#privOne = val()
  static +#privTwo = val()
}

SCSS​

Sassモジュール文字列の一貫したクォート (#11461 by @niksy)​

// Input
@use "sass:math";
@forward "list";

// Prettier 2.3
@use "sass:math";
@forward "list";

// Prettier 2.4
@use 'sass:math';
@forward 'list';

CLI​

.stylelintrcのパーサー推論 (#10924 by @SevenOutman)​

拡張子のない.stylelintrcファイルはjsonとyamlパーサーを使用して処理されます。