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

Prettier 1.18: 多数の修正とOpenCollective

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

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

今回のリリースには目新しい機能は含まれていませんが、JavaScript（特にJSXとテンプレートリテラル）、TypeScript、Markdownに関する多数の修正が行われています。

また、Prettierが寄付を受け付け開始したことをお知らせする良い機会です！Prettierを気に入っていただき、私たちの活動を支援したい場合は、OpenCollectiveをご覧ください。

主な変更点​

JavaScript​

単純なテンプレートリテラルでの改行を停止 (#5979 by @jwbay)​

テンプレートリテラル内の単純な式の改行は、Prettierに対して多くの変更リクエストが寄せられる部分の一つです。以前は、リテラル全体が印刷幅を超える場合に式を複数行に分割していましたが、式が単純な場合には改行を防止するようになりました。

これは以前の動作からの改善ですが、この領域ではまだ作業が必要です。

// Input
console.log(chalk.white(`Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${coverageSummary.total.lines.pct}%`))

// Output (Prettier stable)
console.log(
  chalk.white(
    `Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${
      coverageSummary.total.lines.pct
    }%`
  )
);

// Output (Prettier master)
console.log(
  chalk.white(
    `Covered Lines below threshold: ${coverageSettings.lines}%. Actual: ${coverageSummary.total.lines.pct}%`
  )
);

空のJSX要素を自己終了要素に変換するのを停止 (#6127 by @duailibe)​

Prettierはこれまで、空のJSX要素（<div></div>）を同等である自己終了要素（<div />）に変換していました。

開発中に開始タグと終了タグを入力して後で子要素を追加したい場合があるものの、Prettierが自己終了要素に変換してしまい、開発者が手動で戻す必要があるというフィードバックを受けました。このリリースでこの動作は変更されました。

// Input
function Foo() {
  return <div></div>;
}

// Output (Prettier stable)
function Foo() {
  return <div />;
}

// Output (Prettier master)
function Foo() {
  return <div></div>;
}

その他の変更点​

JavaScript​

Closure Compilerの型キャストを修正 (#5947 by @jridgewell)​

内側の式で型キャストの直後に閉じ括弧が続く場合、型キャストがその後の括弧まで全体をラップしていました。

// Input
test(/** @type {!Array} */(arrOrString).length);
test(/** @type {!Array} */((arrOrString)).length + 1);
// Output (Prettier stable)
test(/** @type {!Array} */ (arrOrString.length));
test(/** @type {!Array} */ (arrOrString.length + 1));
// Output (Prettier master)
test(/** @type {!Array} */ (arrOrString).length);
test(/** @type {!Array} */ (arrOrString).length + 1);

スペースなしのClosure型キャストを修正 (#6116 by @jridgewell)​

以前は、Closureの型キャストで@typeと開き括弧{の間にスペースが必要でしたが、そうしないと囲み括弧が削除されていました。Closure自体はスペースを必要としません。

// Input
const v = /** @type{string} */(value);

// Output (Prettier stable)
const v = /** @type{string} */ value;

// Output (prettier master)
const v = /** @type{string} */ (value);

--quote-props=consistent使用時に数値や計算式をキーに持つオブジェクトで引用符が追加されるのを防止 (#6119 and #6138 by @duailibe)​

以前は、オブジェクトのキーやクラスのプロパティ・メソッドに、"複雑な"式（例：メンバー式）を持つ計算キーや数値リテラルが少なくとも1つ存在する場合、Prettierが不要な引用符を追加していました。

// Input
const obj = {
  foo: "",
  [foo.bar]: "",
};

const other = {
  foo: "",
  1: ""
};

// Output (Prettier stable)
const obj = {
  "foo": "",
  [foo.bar]: "",
};

const other = {
  "foo": "",
  1: ""
};

// Output (Prettier master)
const obj = {
  foo: "",
  [foo.bar]: "",
};

const other = {
  foo: "",
  1: ""
};

論理式を含むJSXスプレッド要素に括弧を追加 (#6130 by @duailibe)​

以前はJSXスプレッド要素に括弧を追加していませんでした（必須ではないため）が、オブジェクトや配列のスプレッド演算子との一貫性を保つため、JSXにも追加するようになりました。

// Input
<Component {...(props || {})} />;

// Output (Prettier stable)
<Component {...props || {}} />;

// Output (Prettier master)
<Component {...(props || {})} />;

空のアロー関数式内のコメントを正しく処理 (#6086 by @evilebottnawi)​

// Input
const fn = (/*event, data*/) => doSomething(anything);

// Output (Prettier stable)
const fn = () => /*event, data*/ doSomething(anything);

// Output (Prettier master)
const fn = (/*event, data*/) => doSomething(anything);

オブジェクトプロパティ内のシーケンス式を結合しない (#6088 by @evilebottnawi)​

// Input
const a = {
  someKey:
    (longLongLongLongLongLongLongLongLongLongLongLongLongLongName, shortName)
};

// Output (Prettier stable)
const a = {
  someKey: (longLongLongLongLongLongLongLongLongLongLongLongLongLongName,
  shortName)
};

// Output (Prettier master)
const a = {
  someKey:
    (longLongLongLongLongLongLongLongLongLongLongLongLongLongName, shortName)
};

styled-jsxの外部スタイルをサポート (#6089 by @hongrich)​

styled-jsx/cssの2つの外部スタイルタグcss.globalおよびcss.resolveをサポートしました。詳細: https://github.com/zeit/styled-jsx/#external-css-and-styles-outside-of-the-component

cssテンプレートタグは既にPrettierでサポートされています。

// Input
const styles = css.resolve`
.box {background:black;
}`;

// Output (Prettier stable)
const styles = css.resolve`
.box {background:black;
}`;

// Output (prettier master)
const styles = css.resolve`
  .box {
    background: black;
  }
`;

export default宣言内の関数とクラスの周囲の括弧を保持 (#6133 by @duailibe)​

Prettierはexport default内の一部の式から括弧を削除していましたが、functionやclassで始まる複雑な式の場合、括弧は必要です。

TypeScriptに影響する例を含む実用的な例を以下でご覧ください。

// Input
export default (function log() {}).toString();
export default (function log() {} as typeof console.log);

// Output (Prettier stable)
export default function log() {}.toString();
export default function log() {} as typeof console.log; // syntax error

// Output (Prettier master)
export default (function log() {}).toString();
export default (function log() {} as typeof console.log);

呼び出しとnewに関するエッジケースの括弧バグに対処 (#6148 by @bakkot)​

new と関数呼び出しを組み合わせる際に、必要かつ十分な括弧を正しく追加することは複雑な課題です。この変更では、必要な括弧が省略されていた2つのケースと、冗長な括弧が追加されていた1つのケースを修正しました。

// Input
new (x()``.y)();
new (x()!.y)();
new e[f().x].y()

// Output (Prettier stable)
new x()``.y();
new x()!.y();
new e[(f()).x].y();

// Output (Prettier master)
new (x())``.y();
new (x())!.y();
new e[f().x].y();

ネストされた埋め込みの修正（JS内のHTML内のJS） (#6038 by @thorn0)​

以前は、JSコード内のテンプレートリテラルに埋め込まれたHTML（<script>経由）内にテンプレートリテラルを含むJSコードがある場合、内部のJSがフォーマットされませんでした。

// Input
const html = /* HTML */ `<script>var a=\`\`</script>`;

// Output (Prettier stable)
// SyntaxError: Expecting Unicode escape sequence \uXXXX (1:8)

// Output (Prettier master)
const html = /* HTML */ `
  <script>
    var a = \`\`;
  </script>
`;

new 式に渡されるbind式周りの必要な括弧を保持 (#6152 by @sosukesuzuki)​

以前は、new 式に渡されるbind式周りの必要な括弧がPrettierによって削除されていました。

// Input
new (a::b)();

// Output (Prettier stable)
new a::b();

// Output (Prettier master)
new (a::b)();

メンバー式のプロパティ内でbind式周りに不要な括弧を追加しない (#6159 by @duailibe)​

// Input
f[a::b];

// Output (Prettier stable)
f[(a::b)];

// Output (Prettier master);
f[a::b];

TypeScript​

TSX型パラメータ末尾のカンマを保持 (#6115 by @sosukesuzuki)​

以前は、アロー関数の単一型パラメータ後の末尾カンマが削除されていました。フォーマット結果はTypeScriptとして有効ですが、TSXとしては無効です。この問題は1.19で修正されました。

// Input
type G<T> = any;
const myFunc = <T,>(arg1: G<T>) => false;

// Output (Prettier stable)
type G<T> = any;
const myFunc = <T>(arg1: G<T>) => false;

// Output (prettier master)
type G<T> = any;
const myFunc = <T,>(arg1: G<T>) => false;

最後の引数がシンプルな戻り値型を持つアロー関数の場合に呼び出し式を分割しない (#6106 by @brainkim)​

シンプルな戻り値型を持つアロー関数を含む呼び出し式が分割されるエッジケースを修正しました。

app.get("/", (req, res): void => {
  res.send("Hello World!");
});

// Output (Prettier stable)
app.get(
  "/",
  (req, res): void => {
    res.send("Hello World!");
  },
);

// Output (Prettier master)
app.get("/", (req, res): void => {
  res.send("Hello World!");
});

余分な括弧ペアがある場合に必要な括弧ペアを保持 (#6131 by @sosukesuzuki)​

以前はTypeScriptで、不要な括弧を削除しようとする際に必要な括弧まで削除されていました。

// Input
type G = ((keyof T))[];

// Output (Prettier stable)
type G = keyof T[];

// Output (prettier master)
type G = (keyof T)[];

非nullアサーション周りの必要な括弧を保持 (#6136 by @sosukesuzuki, #6140 by @thorn0, #6148 by @bakkot)​

以前は、非nullアサーション式の結果がコンストラクタとして呼び出される場合に、必要な括弧が削除されていました。

// Input
const b = new (c()!)();

// Output (Prettier stable)
const b = new c()!();

// Output (Prettier master)
const b = new (c())!();

マップ型内の改行を保持 (#6146 by @sosukesuzuki)​

以前はPrettierがマップ型内の改行を削除していました。オブジェクトリテラルの扱いと同様に、ソースに改行が存在する場合はそれを保持するように変更しました。

// Input
type A<T> = {
  readonly [P in keyof T]: T[P];
};

// Output (Prettier stable)
type A<T> = { readonly [P in keyof T]: T[P] };

// Output (Prettier master)
type A<T> = {
  readonly [P in keyof T]: T[P];
};

--trailing-comma=all 時にタプル型に末尾カンマを追加 (#6172 by @sosukesuzuki)​

TypeScriptはバージョン3.3以降、タプル型での末尾カンマをサポートしています。

// Input
export type Foo = [
  number,
  number, // comment
];

// Output (Prettier stable)
export type Foo = [
  number,
  number // comment
];

// Output (Prettier master);
export type Foo = [
  number,
  number, // comment
];

Markdown​

インラインコード内のバッククォート数を正しく判定 (#6110 by @belochub)​

CommonMark仕様では、「インラインコードブロック内にn個の連続バッククォートが存在しない場合に、n個のバッククォートをデリミタとして選択する」ことが要求されます。

この変更により、インラインコードブロック内に長さ1のバッククォート文字列がある場合に2つのバッククォートを使用し、それ以外では1つを使用していた従来の方式から、正しいデリミタとして使用可能な最小長のバッククォート文字列を検索する方式に改善されました。

<!-- Input -->
``` 3 ``22`` `1` ```

`` 2 ```123``` `1` ``

<!-- Output (Prettier stable) -->
` 3 ``22`` `1` `

` 2 ```123``` `1` `

<!-- Output (Prettier master) -->
``` 3 ``22`` `1` ```

`` 2 ```123``` `1` ``

Handlebars​

Handlebarsサポートはまだベータ版ですが、@GavinJoyceが安定版リリースに向けた修正を進めています！

コンポーネント後の不要な空白追加を回避 (#6178 by @GavinJoyce)​

以前は、Prettierが行頭にある場合でも /> の前にスペースを追加し、その後で改行していました。この余分なスペースと改行はなくなりました。

// Input
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
  />
</div>

// Output (Prettier stable)
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
   />

</div>

// Output (Prettier master)
<div>
  <UserGreeting
    @aVeryLongArgumentNameThatIsStillGoing={{@alsoAVeryLongArgument}}
  />
</div>

API​

Prettierが再びAtomで動作するように (#6129 by @duailibe)​

Atomにはevalを含むコードの実行を禁止するセキュリティ機能があります。Prettierの依存関係の1つが、バンドラーがデバッグコードを含むのを防ぐためにevalを使用していました。今回、このevalがnpmに配布するコードに含まれないようにしたことで、Prettierが再びAtomで正常に動作するようになりました。