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

Prettier 1.16: HTMLの改善とCRLF処理の強化

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

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

今回のリリースではHTMLフォーマットが改善され、CRLF処理の強化、新たな構文機能の追加、複数のバグ修正が行われています。

主な変更点​

HTML​

周囲の改行を尊重するように (#5596 by @ikatyang)​

以前のPrettierは、printWidthを超えない場合、常に要素を1行にまとめていました。しかしこの方法は、if-elseブロックとして使用される要素や複数のアイテムを含むことを意図した要素には適していませんでした。この問題を解決するため、これらの使用方法を確実に判別する方法がないため、すべての要素で周囲の改行を尊重するように変更しました。

<!-- Input -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

<!-- Output (Prettier 1.15) -->
<div class="list"><div class="item">Jan</div></div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)"> {{ i }} </a>
<span v-else> <slot name="ellipsis">&hellip;</slot> </span>

<!-- Output (Prettier 1.16) -->
<div class="list">
  <div class="item">Jan</div>
</div>
<a v-if="i !== -1" href="#" @click.prevent="select(i)">
  {{ i }}
</a>
<span v-else>
  <slot name="ellipsis">&hellip;</slot>
</span>

全般​

CRLF処理の改善 (#5494 by @ikatyang)​

Windows環境でのみ発生する奇妙なフォーマット問題に気づいた方もいるでしょう。これらの問題の多くはCR-LF改行コードの処理に起因していました。今回のリリースでは、フォーマット前後で改行コードを正規化することでこれらの問題を解決しました。

JavaScript​

Reactフックで使用されるパターンの改善 (#5608 by @j-f1)​

// Input
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value])
}

// Output (Prettier 1.15)
function helloWorld() {
  useEffect(
    () => {
      // do something
    },
    [props.value]
  );
}

// Output (Prettier 1.16)
function helloWorld() {
  useEffect(() => {
    // do something
  }, [props.value]);
}

babylonパーサーをbabelに名称変更 (#5647 by @wuweiweiwu)​

BabelのパーサーbabylonはBabel 7で@babel/parserに名称変更されました。混乱を避けるため、当プロジェクトでもbabylonパーサーをbabelに名称変更します。

babylonパーサー名は非推奨となりましたが、引き続き機能します。

この変更により設定を変更する必要がある場合は、parserオプションに関するドキュメント（特に下部の注記）をぜひご一読ください。

Flow​

babel-flowパーサーの追加 (#5685 by @ikatyang)​

babelとflowパーサーはデフォルトでFlow構文をサポートしていますが、Flow構文が曖昧になるエッジケースがいくつか存在します。デフォルトでは、BabelのFlowパーサーは曖昧なコードを通常のJSとして解析しますが、ネイティブのFlowパーサーはFlow構文として解析します。この問題に対処するため、Babelのパーサーを使用しながら曖昧なケースではFlow構文を優先するbabel-flowパーサーオプションを追加しました。

// Input
const Theme = React.createContext<"light" | "dark">("light");

// Output (Prettier 1.15, --parser babylon)
const Theme = (React.createContext < "light") | ("dark" > "light");

// Output (Prettier 1.16, --parser babel-flow)
const Theme = React.createContext<"light" | "dark">("light");

CLI​

--checkフラグの追加 (#5629 by @kachkaev)​

prettierCLIコマンドに--list-differentを渡すと、Prettierでフォーマットされていないファイルが1つ以上ある場合にエラーコードで終了します。これは効果的ですが、適切にフォーマットされていないファイル名以外の情報を出力に含みません。これは新規コントリビューターや一般的なユーザーにとってあまり親切ではないため、より人間に優しい出力を生成する--checkオプションを追加しました。

# Prettier 1.15
$ prettier *.js --list-different
unformatted.js

# Prettier 1.16
$ prettier *.js --check
Checking formatting...
unformatted.js
Code style issues found in the above file(s). Forgot to run Prettier?

その他の変更点​

全般​

範囲指定フォーマットによる予期せぬフォーマットを修正 (#5632 by @lhchavez)​

// Input
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

// Output (Prettier 1.15, --range-start 100 --range-end 120)
something("something", () => {
  const something = { something: [{ long1: "longlonglonglonglonglonglonglonglonglonglonglong", long2: "longlonglonglonglonglonglonglonglonglonglonglong" }] };
});

// Output (Prettier 1.16, --range-start 100 --range-end 120)
something("something", () => {
  const something = {
    something: [
      {
        long1: "longlonglonglonglonglonglonglonglonglonglonglong",
        long2: "longlonglonglonglonglonglonglonglonglonglonglong",
      }
    ]
  };
});

API​

フォーマットオプションのpluginsフィールドでプラグインインスタンスの受け渡しを許可 (#5763 by @Kingwl)​

以前はプラグインインスタンスが何らかの理由でフォーマットオプションのpluginsフィールドに渡せませんでしたが、これは許可されるべきものです。Prettier 1.16でこの問題を修正しました。

const prettier = require("prettier");
const fooPlugin = require("./path/to/foo-plugin");
const formatted = prettier.format("foo-code", {
  plugins: [fooPlugin],
  parser: "foo-parser",
});
// Prettier 1.15: Error
// Prettier 1.16: No error

スタンドアロン​

スタンドアロンバンドルから動的require()呼び出しを削除 (#5612 by @j-f1)​

これまで、ブラウザ向けに設計されたstandalone.jsファイルには動的なrequire()呼び出しが含まれていました。実際には呼び出されない状態でしたが、webpackなどのツールが警告を出す原因となっていました。Prettier 1.16ではビルドスクリプトを調整し、スタンドアロンバンドルからこのrequire()呼び出しを削除しました。

TypeScript​

TSXにおける//の正しい処理 (#5728 by @JamesHenry)​

これまでTypeScriptのJSX要素の子要素として//を配置すると、コメントとして解釈されてエラーが発生していました。Prettier 1.16でこの問題を修正しました。

// Input
const link = <a href="example.com">http://example.com</a>

// Output (Prettier 1.15)
// Error: Comment location overlaps with node location

// Output (Prettier 1.16)
const link = <a href="example.com">http://example.com</a>;

型注釈周囲の余分な括弧を削除 (#5724 by @flurmbo)​

// Input
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.15)
class Foo {
  bar: (() => boolean);
}

// Output (Prettier 1.16)
class Foo {
  bar: () => boolean;
}

JavaScript​

something.connect()を関数合成として扱わない (#5739 by @makepost)​

以前のバージョンでReduxのフォーマット改善のためにconnect()呼び出しの特殊なフォーマットを導入しましたが、connectという名前の関数にはその方法でフォーマットすべきでない多くのユースケースが存在します。ほとんどのケースでconnectメソッドが使用されていることから、foo.connect()呼び出しを関数合成として扱わないように変更しました。

// Input
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.15)
app.connect(
  "activate",
  async () => {
    await data.load();
    win.show_all();
  }
);
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

// Output (Prettier 1.16)
app.connect("activate", async () => {
  await data.load();
  win.show_all();
});
const ConnectedComponent = connect(
  bar,
  baz
)(foo);

クラスのプライベートメソッドのサポート追加 (#5637 by @existentialism)​

// Input
class Hello {
  #world() {}
}

// Output (Prettier 1.15)
// SyntaxError

// Output (Prettier 1.16)
class Hello {
  #world() {}
}

ルートテンプレート内の式のインデント修正 (#5607 by @ikatyang)​

// Input
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

// Output (Prettier 1.15)
if (a) {
  return `
hello
${foo({
    bar,
    baz
  })}
world
`;
}

// Output (Prettier 1.16)
if (a) {
  return `
hello
${foo({
  bar,
  baz
})}
world
`;
}

HTMLテンプレートリテラルから不要な改行を削除 (#5771 by @ikatyang)​

// Input
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(bar => html`
       <p>${bar}</p>
    `)}
  `;
}

// Output (Prettier 1.15)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${
      bars.map(
        bar => html`
          <p>${bar}</p>
        `
      )
    }
  `;
}

// Output (Prettier 1.16)
function HelloWorld() {
  return html`
    <h3>Bar List</h3>
    ${bars.map(
      bar => html`
        <p>${bar}</p>
      `
    )}
  `;
}

TypeScript/Flow​

/* HTML */テンプレートの正しい認識 (#5658 by @ikatyang)​

Prettier 1.15で/* HTML */疑似タグを使用したHTMLテンプレートリテラルのフォーマットサポートを追加しましたが、バグによりJavaScriptコードでのみ機能していました。Prettier 1.16でこの問題を修正しました。

CSS​

コメントによるリスト出力の崩れを修正 (#5710 by @jsnajdr)​

// Input
$my-list2:
  a // a
  b
  c;

// Output (Prettier 1.15)
$my-list2: a// a
  bc;

// Output (Prettier 1.16)
$my-list2: a // a
  b c;

バックスラッシュの正しい処理 (#5597 by @sh7dm)​

// Input
.figcaption {
    .margin-top-1\/2;
    .large\:none;
}

// Output (Prettier 1.15)
.figcaption {
  .margin-top-1\ / 2;
  .large\: none;
}

// Output (Prettier 1.16)
.figcaption {
  .margin-top-1\/2;
  .large\: none;
}

MDX​

インラインHTMLの正しい処理 (#5704 by @ikatyang)​

<!-- Input -->
| Column 1 | Column 2 |
|---|---|
| Text | <Hello>Text</Hello> |

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
| Column 1 | Column 2            |
| -------- | ------------------- |
| Text     | <Hello>Text</Hello> |

HTML​

"application/ld+json"タイプのスクリプトをフォーマット (#5642 by @ikatyang)​

<!-- Input -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.15) -->
<script type="application/ld+json">
  {   "json":true  }
</script>

<!-- Output (Prettier 1.16) -->
<script type="application/ld+json">
  { "json": true }
</script>

.mjmlファイルをHTMLとして扱う (#5505 by @n1ru4l)​

MJMLはHTMLと同じ構文を使用するマークアップ言語です。.mjmlファイル拡張子をHTMLとして認識される拡張子リストに追加したため、Prettierがフォーマットするようになりました。

属性値のスマートクォート化 (#5590 by @ikatyang)​

これまでHTML属性値のクォートは常にダブルクォートで出力されていました。可読性向上のため、他の文字列と同様に文字列内のエスケープ文字が少なくなるクォートタイプを選択して出力するよう変更しました。

<!-- Input -->
<div x='123"456'></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.15) -->
<div x="123&quot;456"></div>
<div x="123'456"></div>

<!-- Output (Prettier 1.16) -->
<div x='123"456'></div>
<div x="123'456"></div>

Vue​

タグ名の大文字小文字を区別 (#5606 by @ikatyang)​

これまでパース時にタグ定義を検索する前にタグ名を小文字化していたため、<Input>コンポーネントがネイティブの<input>と認識されていました。<input>はvoid要素であり閉じタグを持てないため、</Input>が出現すると構文エラーが発生していました。この問題を1.16で修正しました。

<!-- Input -->
<template>
  <Input></Input>
</template>

<!-- Output (Prettier 1.15) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16) -->
<template>
  <Input></Input>
</template>

Vue/Angular​

補間処理で予期せぬ}}が発生しないよう括弧を追加 (#5657 by @ikatyang)​

}}は埋め込み式の終了記号と認識されるため、式内で使用できません。Prettier 1.15ではこのルールに違反するコードを出力することがありましたが、Prettier 1.16では}}が埋め込み式内に出現しないよう括弧を追加するようになりました。

<!-- Input -->
<p>{{ foo({ bar: {} }) }}</p>

<!-- First Output (Prettier 1.15, --no-bracket-spacing) -->
<p>{{ foo({bar: {}}) }}</p>

<!-- Second Output (Prettier 1.15, --no-bracket-spacing) -->
<!-- SyntaxError -->

<!-- Output (Prettier 1.16, --no-bracket-spacing) -->
<p>{{ foo({bar: ({})}) }}</p>