Prettier 2.0「2020」

2020年3月21日 · 1分で読める

非公式ベータ版翻訳

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

より優れたデフォルト設定、改良されたCLI、高度なヒューリスティック。そしてTypeScript 3.8もサポート。

長期にわたる慎重な検討を経て、trailingComma、arrowParens、endOfLineオプションのデフォルト値を変更することを決定しました。CLIをより直感的に改善し、ついにNode 10未満のバージョンサポートを終了しました。これらは大きなメンテナンス負担となり、コントリビューターにとって障害となっていたためです。詳細は以下をご覧ください。

主な変更点

JavaScript

メソッドチェーン改行ヒューリスティックの改善 (#6685 by @mmkal)

以前は、3つ以上の長さを持つメソッド呼び出しチェーンは自動的に複数行に分割されていました。新しいヒューリスティックでは、チェーンの長さだけでなく、呼び出し引数の複雑さに基づいて判断します。チェーン内のメソッド呼び出しに（関数や深くネストされたオブジェクトなど）一目で理解しにくい引数がある場合、チェーンは分割されます。それ以外の場合は1行に収めることが許可されます。背景と具体例については、過去のIssue #3197、#4765、#1565、#4125を参照してください。

最適な結果を得るには、printWidthオプションの値を高く設定しすぎないようにしてください。

// Prettier 1.19
if (
  foo
    .one()
    .two()
    .three() ===
  bar
    .four()
    .five()
    .six()
) {
  // ...
}

// Prettier 2.0
if (foo.one().two().three() === bar.four().five().six()) {
  // ...
}

Closureスタイル型キャストの根本的修正 (#7791 by @thorn0, #7011 by @evilebottnawi)

Prettierはv1.6.0以降、これらのJSDoc型アサーションを破壊しないように試みてきましたが、結果は一貫していませんでした。JSDocベースの型チェックが一般的になるにつれ、この構文に関する新たなバグ報告が増加。式を囲む必須の括弧がASTの一部ではなかったため、Prettierはその存在を検出する適切な方法を持たず、バグ修正が困難でした。

最終的に、BabelパーサーのcreateParenthesizedExpressionsオプションを使用し、非標準ノードで括弧をAST内に表現することで、報告されたすべてのバグを修正できました。

これにより、flowまたはtypescriptパーサーを使用する場合、PrettierはJSDoc型キャストを認識しなくなりますが、この構文はFlowやTypeScriptファイルではほとんど意味を持たないため妥当な対応です。

// Input
const nestedAssertions = /** @type {MyType} */
  (/** @type {unknown} */
      (x));

// Prettier 1.19
const nestedAssertions /** @type {MyType} */ /** @type {unknown} */ = x;

// Prettier 2.0
const nestedAssertions = /** @type {MyType} */ (/** @type {unknown} */ (x));

この構文の参考資料: Closure Compiler, TypeScript (--checkJs使用時).

TypeScript

TypeScript 3.8のサポート (#7631 by @thorn0, #7764 by @sosukesuzuki, #7804 by @sosukesuzuki)

PrettierはTypeScript 3.8で追加された新構文をサポートします:

CLI

渡されたglobをglobとして扱う前に既存ファイル名か検証するよう変更 (#7587 by @fisker)

Linuxではファイル名にほとんどの文字が使用可能なため、foo*.js や [bar].css のような文字列も有効なファイル名となり得ます。以前は [bar].css というファイルをフォーマットする場合、globエスケープ構文（例: prettier "\[bar].css" - ただしWindowsではバックスラッシュがパス区切り文字として扱われるため非対応）や prettier "[[]bar].css" を使用する必要がありました。この制約により、lint-staged のように絶対パスを渡すツールではエスケープ構文が適用できないといった問題が発生していました。現在ではPrettier CLIはglobを受け取ると、まずリテラルのファイル名として解決を試みます。

ディレクトリ展開機能の強化（`.` を含む） (#7660 by @thorn0)

prettier --write . を実行してカレントディレクトリとサブディレクトリの全対応ファイルをフォーマットできるようになりました。ディレクトリ名はファイル名やglobパターンと混合可能です（例: prettier src "test/*.spec.js" foo.js）。

ファイル処理順序も変更されました。以前は全ファイルがアルファベット順にソートされてからフォーマットされていましたが、現在では指定パスの順序に従って処理されます。各パスで解決されたファイルリストはソートされますが、全ファイルの結合リストの完全ソートは行われなくなりました。

パターンがファイルにマッチしない場合のエラー報告方法にも変更があります。以前は全パターンでマッチするファイルが存在しない場合にのみ「No matching files」エラーが出力されていましたが、Prettier 2.0では個々のパターンごとにエラーが報告されます。

破壊的変更

API

設定オーバーライドのパターンマッチングでドットファイルを含めるよう修正 (#5813 by @chrisblossom)

以前は設定オーバーライドがドットで始まるファイル名に適用されませんでした。

Node 10未満のバージョンサポート終了 (#6908 by @fisker)

現在の最小必須Nodeバージョンは10.13.0です。これによりコントリビューターはNode 4でテストを通すための複雑な作業から解放されます。

`trailingComma` のデフォルト値を `es5` に変更 (#6963 by @fisker)

バージョン2.0以前では、Prettierは可能な限り末尾カンマを避けるデフォルト動作でした。これによりIE8などの古い環境との互換性は維持されましたが、マルチライン記述における機会損失が発生していました。

Prettierでは初期の頃から末尾カンマを設定するオプションが提供されており、デフォルト値の変更提案は3年以上前から存在していました。ついにPrettier v2.0ではデフォルト値がnoneからes5に変更されました。

従来の動作を維持したい場合は、Prettierを{ "trailingComma": "none" }で設定してください。JavaScriptエコシステムがさらに成熟するにつれ、将来のメジャーバージョンではデフォルト値がall（つまりさらに多くの末尾カンマ）に変更される可能性があります。

Plugin API: `prettier.util`の変更点 (#6993 by @fisker)

prettier.util.mapDocは削除されました。
代わりにprettier.doc.utils.mapDocを使用してください。
prettier.util.isNextLineEmptyが更新されました。
isNextLineEmpty(text, node, options)の代わりにisNextLineEmpty(text, node, locEnd)を使用してください。
prettier.util.isPreviousLineEmptyが更新されました。
isPreviousLineEmpty(text, node, options)の代わりにisPreviousLineEmpty(text, node, locStart)を使用してください。
prettier.util.getNextNonSpaceNonCommentCharacterIndexが更新されました。
getNextNonSpaceNonCommentCharacterIndex(text, node, options)の代わりにgetNextNonSpaceNonCommentCharacterIndex(text, node, locEnd)を使用してください。

`arrowParens`のデフォルト値を`always`に変更 (#7430 by @kachkaev)

バージョン1.9以降、Prettierにはアロー関数の引数を常に括弧で囲むオプションがありました。バージョン2.0ではこの動作がデフォルトになりました。

// Input
const fn = (x) => y => x + y;

// Prettier 1.19
const fn = x => y => x + y;

// Prettier 2.0
const fn = (x) => (y) => x + y;

一見すると、上記の単独例では括弧を省略した方が視覚的ノイズが少なく優れた選択に見えるかもしれません。しかしPrettierが括弧を削除すると、型注釈の追加や引数の追加、デフォルト値の設定、あるいはその他様々な操作が難しくなります。実際のコードベース編集時の開発者体験向上のため、括弧の一貫した使用がこの変更を正当化します。

新しいデフォルト値の使用を推奨しますが、従来の動作を維持したい場合はPrettierを{ "arrowParens": "avoid" }で設定してください。

`endOfLine`のデフォルト値を`lf`に変更 (#7435 by @kachkaev)

Prettierの初期バージョンでは全てのファイルを改行コードの*nixスタイル（\n、LFとも呼ばれる）でフォーマットしていました。この動作は#472で変更され、Windowsの改行コード（\r\n、CRLFとも呼ばれる）を維持できるようになりました。

Prettier バージョン 1.15 以降、改行コードの種類は endOfLine オプションで設定可能になりました。デフォルト値は後方互換性のため auto に設定されており、Prettier は各ファイルに既に存在する改行コードを維持することを意味していました。

これは Prettier が1つのファイル内で混在した改行コードを最初の行の末尾にある形式に変換することを意味していました。ただし、別々のファイル間では改行コードが一貫しないままになる可能性がありました。さらに、異なるOS環境のコントリビューターが既存ファイルの改行コードを誤って変更しても Prettier は問題としませんでした。こうした変更により大きな git diff が発生し、ファイルの行単位履歴(git blame)の追跡が困難になることがありました。

新しい endOfLine のデフォルト値は lf になりましたので、こちらを活用することを推奨します。オプションのドキュメントを確認し、プロジェクトリポジトリが正しく設定されているか確認する価値があります。これによりリポジトリ内での改行コードの混在や git blame の機能不全を防げます。旧来の動作を維持したい場合は、Prettier を { "endOfLine": "auto" } で設定してください。

Travis CI をご利用の場合は、.travis.yml の autocrlf オプションにご注意ください。

プラグイン検索結果のキャッシュ化 (#7485 by @fisker)

以前は Prettier が prettier.format 呼び出しのたびにファイルシステムからプラグインを検索していました。現在では検索結果がキャッシュされます。キャッシュは prettier.clearConfigCache() を呼び出すことでクリア可能です。

非推奨オプションとオプション値の削除 (#6993, #7511, #7533, #7535, #7536 by @fisker)

オプション:
- useFlowParser (CLI では --flow-parser) は v0.0.10 以降非推奨でした
オプション値:
- parser: babylon (v1.16.0 で babel に名称変更), postcss (v1.7.1 で css に名称変更), typescript-eslint (typescript の旧称)
- proseWrap: true (v1.9.0 で always に名称変更), false (v1.9.0 で never に名称変更)
- trailingComma: true (v0.19.0 で es5 に名称変更), false (v0.19.0 で none に名称変更)

`prettier.getSupportInfo` の `version` パラメーター削除 (#7620 by @thorn0)

Prettier 1.8.0 以降、prettier.getSupportInfo にバージョン番号を渡すことで過去バージョンでサポートされていた言語やオプションなどの情報を取得できました。この興味深いAPIは有用性が低く判明した上にメンテナンス上の問題を継続的に引き起こしていたため、Prettier 2.0.0 で削除されました。

その他の変更点

JavaScript

`function`キーワードの後には常にスペースを追加 (#3903 by @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 by @bakkot)

以前は、関数宣言ではfunctionキーワードの後にスペースが追加されていましたが、関数式では追加されませんでした。一貫性を保つため、functionキーワードの後には常にスペースを追加するようになりました。唯一の例外はジェネレーター宣言で、function*は一つの単語として扱われます。

// Prettier 1.19
const identity = function(value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function<T>(value: T) {};
const g = function*() {};

// Prettier 2.0
const identity = function (value) {
  return value;
};
function identity(value) {
  return value;
}
const f = function <T>(value: T) {};
const g = function* () {};

コメント付きラベル付きステートメントの不安定なフォーマットを修正 (#6984 by @clement26695)

// Input
loop1:
//test
const i = 3;

// Prettier 1.19 (first output)
loop1: //test
const i = 3;

// Prettier 1.19 (second output)
//test
loop1: const i = 3;

// Prettier 2.0 (first and second outputs)
//test
loop1: const i = 3;

テンプレートリテラル内の論理式・二項式・シーケンス式のフォーマットを修正 (#7010 by @evilebottnawi)

// Input
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo || bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo | bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo, bar)}`;

// Prettier 1.19
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo ||
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${foo |
  bar}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${(foo,
bar)}`;

// Prettier 2.0
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo || bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  foo | bar
}`;
`111111111 222222222 333333333 444444444 555555555 666666666 777777777 ${
  (foo, bar)
}`;

論理式の不安定なフォーマットを修正 (#7026 by @thorn0)

// Input
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  (askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3);

// Prettier 1.19 (first output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 || glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 1.19 (second output)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

// Prettier 2.0 (first and second outputs)
const averredBathersBoxroomBuggyNurl =
  bifornCringerMoshedPerplexSawder === 1 ||
  askTrovenaBeenaDependsRowans === 2 ||
  glimseGlyphsHazardNoopsTieTie === 3;

`throw`を`return`と同様にフォーマット (#7070 by @sosukesuzuki)

// Input
function foo() {
  throw this.hasPlugin("dynamicImports") && this.lookahead().type === tt.parenLeft.right;
}

// Prettier 1.19
function foo() {
  throw this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right;
}


// Prettier 2.0
function foo() {
  throw (
    this.hasPlugin("dynamicImports") &&
    this.lookahead().type === tt.parenLeft.right
  );
}

他の三項演算子の条件内にネストされた三項演算子のインデントを修正 (#7087 by @thorn0)

// Input
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20) ?
kochabCooieGameOnOboleUnweave : annularCooeedSplicesWalksWayWay)
? anodyneCondosMalateOverateRetinol : averredBathersBoxroomBuggyNurl;

// Prettier 1.19
const foo = (number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
? kochabCooieGameOnOboleUnweave
: annularCooeedSplicesWalksWayWay)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

// Prettier 2.0
const foo = (
  number % 10 >= 2 && (number % 100 < 10 || number % 100 >= 20)
    ? kochabCooieGameOnOboleUnweave
    : annularCooeedSplicesWalksWayWay
)
  ? anodyneCondosMalateOverateRetinol
  : averredBathersBoxroomBuggyNurl;

デコレーター用の関数合成ロジックを調整 (#7138 by @brainkim)

デコレーターは次の行を変更するため、デコレーター呼び出しの引数を複数行に分割すると、デコレーターとその対象との関係が不明確になり、コードの可読性が低下します。そのため、#6033で導入された関数合成ロジックは、デコレーター呼び出しを除外するように変更されました。

// Input
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

// Prettier 1.19
export class Item {
  @OneToOne(
    () => Thing,
    x => x.item,
  )
  thing!: Thing;
}

// Prettier 2.0
export class Item {
  @OneToOne(() => Thing, x => x.item)
  thing!: Thing;
}

コメント付き空の`return`ステートメントにおけるセミコロンの配置を修正 (#7140 by @sosukesuzuki)

// Input
return // comment
;

// Prettier 1.19
return // comment;

// Prettier 2.0
return; // comment

HTMLテンプレートリテラル内の空白の重要性を尊重 (#7208 by @saschanaz)

Prettierはこれまで全てのHTMLテンプレート文字列に改行を追加していましたが、これによりレンダリングされるHTMLに予期せぬ空白が生じる可能性がありました。 --html-whitespace-sensitivity ignoreオプションが指定されていない限り、この現象は発生しなくなりました。

// Input
html`<div>`;
html`  <span>TEXT</span>  `;

// Prettier 1.19
html`
  <div></div>
`;
html`
  <span>TEXT</span>
`;

// Prettier 2.0
html`<div></div>`;
html` <span>TEXT</span> `;

JSXをyieldする際の不要な括弧を削除 (#7367 by @cola119)

// Input
function* f() {
  yield <div>generator</div>;
}

// Prettier 1.19
function* f() {
  yield (<div>generator</div>);
}

// Prettier 2.0
function* f() {
  yield <div>generator</div>;
}

デフォルトエクスポート宣言内のカンマ式の周囲の括弧を保持 (#7491 by @fisker)

これらの括弧を省略するとコードが無効になります。

// Input
export default (1, 2);

// Prettier 1.19
export default 1, 2;

// Prettier 2.0
export default (1, 2);

オプショナルチェイニング周囲の括弧に関するエッジケースを修正 (#7500 by @thorn0)

// Input
(foo?.bar)();
new (foo?.bar)();

// Prettier 1.19
foo?.bar();
new foo?.bar();

// Prettier 2.0
(foo?.bar)();
new (foo?.bar)();

JSX内の条件式で`undefined`を括弧で囲まないように変更 (#7504 by @fisker)

従来はnull以外のあらゆる式を括弧で囲んでいましたが、今回からundefinedも対象外となりました。

// Input
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
undefined
foo ? <span>loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx</span> :
null

// Prettier 1.19
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : (
  undefined
);
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

// Prettier 2.0
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : undefined;
foo ? (
  <span>
    loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong jsx
  </span>
) : null;

代入式/変数宣言におけるコメントの位置を保持 (#7709 by @sosukesuzuki)

// Input
const foo = /* comments */
  bar;

// Prettier 1.19
const foo /* comments */ = bar;

// Prettier 2.0
const foo = /* comments */ bar;

TypeScript

TypeScript用代替パーサーとしてBabelをサポート (#6400 by @JounQin & @thorn0)

parserオプションに新たな値babel-tsが追加されました。これはBabelのTypeScriptプラグインを利用するものです。babel-tsパーサーはTypeScriptでまだサポートされていないJavaScript機能（ECMAScript提案、例：プライベートメソッドとアクセサ）をサポートしますが、エラー回復の許容度が低く、typescriptパーサーに比べて実戦経験が浅いです。BabelのTypeScriptプラグインは成熟していますが、両パーサーが生成するASTは100%互換性があるわけではありません。相違点を考慮して実装していますが、コードの整形結果が異なる場合や不正確になるケースが残っている可能性があります。ユーザーの皆様には、そのようなケースを発見した際にissueを報告していただけると助かります。長期的には、この取り組みがASTフォーマットの統一に貢献し、より堅牢なJavaScriptパーサーエコシステムの構築につながります。

アロー関数の戻り値型注釈における複雑な型の整形を修正 (#6901 by @sosukesuzuki)

// Input
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

// Prettier 1.19
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<Collections.Parts.PrintedCircuitBoardAssembly["attributes"] &
  undefined> => {};

// Prettier 2.0
export const getVehicleDescriptor = async (
  vehicleId: string
): Promise<
  Collections.Parts.PrintedCircuitBoardAssembly["attributes"] & undefined
> => {};

JSDoc専用の型をエラー送出せずそのまま出力 (#7020 by @thorn0)

エラー回復に関する別の修正。FlowからTypeScriptへの移行を進めている方に有用です。

// Input
function fromFlow(arg: ?Maybe) {}

// Prettier 1.19
Error: unknown type: "TSJSDocNullableType"

// Prettier 2.0
function fromFlow(arg: ?Maybe) {}

タプル型の残余要素後にトレイルングカンマを出力しないように変更 (#7075 by @thorn0)

残余要素は常にタプル型の最後の要素です。その後には何も追加できません。
TypeScriptはこのカンマを許容しますが、Babelはパースできません
関数パラメータや配列の分割代入では、このようなカンマは構文エラーとなります。タプル型で保持することは一貫性がありません。

// Input
type ValidateArgs = [
	{
		[key: string]: any;
	},
	string,
	...string[],
];

// Prettier 1.19
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[],
];

// Prettier 2.0
type ValidateArgs = [
  {
    [key: string]: any;
  },
  string,
  ...string[]
];

コメントが続く変数宣言内のアロー関数のインデントを修正 (#7094 by @sosukesuzuki)

ASI（自動セミコロン挿入）問題を避けるためにセミコロンで始まる文が変数宣言の後に続く場合、セミコロン不使用スタイルのコードで発生する可能性がありました。

// Input
const foo = () => {
  return
}

// foo
;[1,2,3].forEach(bar)

// Prettier 1.19
const foo = () => {
    return;
  };

  // foo
[1, 2, 3].forEach(bar);

// Prettier 2.0
const foo = () => {
  return;
};

// foo
[1, 2, 3].forEach(bar);

関数型におけるコメントの出力を修正 (#7104 by @thorn0)

// Input
type f1 = (
  currentRequest: {a: number},
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

// Prettier 1.19
type f1 = (currentRequest: {
  a: number;
}) => // TODO this is a very very very very long comment that makes it go > 80 columns
number;

// Prettier 2.0
type f1 = (
  currentRequest: { a: number }
  // TODO this is a very very very very long comment that makes it go > 80 columns
) => number;

関数風ノードのコメント整形を修正 (#7144 by @armano2)

// Input
interface foo1 {
  bar1/* foo */ (/* baz */) // bat
  bar2/* foo */ ? /* bar */ (/* baz */) /* bat */;
  bar3/* foo */ (/* baz */) /* bat */
  bar4/* foo */ ? /* bar */ (bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new /* bar */  (a: /* baz */ string): /* bat */ string
  /* foo */ new /* bar */ (/* baz */): /* bat */ string
}

type foo7 = /* foo */ (/* bar */) /* baz */ => void
type foo8 = /* foo */ (a: /* bar */ string) /* baz */ => void
let foo9: new /* foo */ (/* bar */) /* baz */ => string;
let foo10: new /* foo */ (a: /* bar */ string) /* baz */ => string;

// Prettier 1.19
interface foo1 {
  bar1 /* foo */ /* baz */(); // bat
  bar2 /* foo */ /* bar */ /* baz */ /* bat */?();
  bar3 /* foo */ /* baz */() /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (): /* bar */ /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (): /* bar */ /* baz */ /* bat */ string;
}

type foo7 = /* foo */ () => /* bar */ /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new () => /* foo */ /* bar */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Prettier 2.0
interface foo1 {
  bar1 /* foo */(/* baz */); // bat
  bar2 /* foo */ /* bar */?(/* baz */) /* bat */;
  bar3 /* foo */(/* baz */) /* bat */;
  bar4 /* foo */?(/* bar */ bar: /* baz */ string): /* bat */ string;
  /* foo */ (/* bar */): /* baz */ string;
  /* foo */ (bar: /* bar */ string): /* baz */ string;
  /* foo */ new (/* bar */ a: /* baz */ string): /* bat */ string;
  /* foo */ new (/* baz */): /* bar */ /* bat */ string;
}

type foo7 = /* foo */ (/* bar */) => /* baz */ void;
type foo8 = /* foo */ (a: /* bar */ string) => /* baz */ void;
let foo9: new (/* bar */) => /* foo */ /* baz */ string;
let foo10: new (/* foo */ a: /* bar */ string) => /* baz */ string;

// Input
abstract class Test {
  abstract foo12 /* foo */ (a: /* bar */ string): /* baz */ void
  abstract foo13 /* foo */ (/* bar */) /* baz */
}

// Prettier 1.19
Error: Comment "foo" was not printed. Please report this error!

// Prettier 2.0
abstract class Test {
  abstract foo12 /* foo */(a: /* bar */ string): /* baz */ void;
  abstract foo13 /* foo */(/* bar */); /* baz */
}

テンプレート型が省略されたマップ型の出力を修正 (#7221 by @cola119)

// Input
type A = { [key in B] };

// Prettier 1.19
type A = { [key in B]: };

// Prettier 2.0
type A = { [key in B] };

インデックスシグネチャの印刷に関するエッジケースの修正 (#7228 by @cola119)

型注釈がないインデックスシグネチャや複数パラメータを含むインデックスシグネチャはTypeScriptとして有効ではありませんが、TypeScriptパーサーはこの構文をサポートしています。以前のエラー回復の取り組みに沿って、Prettierはこれらのケースでも出力が解析可能なコードとなることを保証するようになりました。以前のバージョンでは解析不可能なコードが生成されていました。

// Input
type A = { [key: string] };
type B = { [a: string, b: string]: string; };

// Prettier 1.19
type A = { [key: string]:  };
type B = { [a: stringb: string]: string };

// Prettier 2.0
type A = { [key: string] };
type B = { [a: string, b: string]: string };

空の型パラメータ内コメントの印刷を修正 (#7729 by @sosukesuzuki)

// Input
const a: T</* comment */> = 1;

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

// Prettier 2.0
const a: T</* comment */> = 1;

Flow

`symbol`のサポートを追加 (#7472 by @fisker)

flow@0.114.0で導入された新しいASTノードタイプを認識するようになりました。

// Input
const x: symbol = Symbol();

// Prettier after updating Flow, but without this fix
Error: unknown type: "SymbolTypeAnnotation"

// Prettier 2.0
const x: symbol = Symbol();

デコレータのサポートを追加 (#7482 by @fisker)

// Input
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

// Prettier 1.19
SyntaxError: Unexpected token `@`, expected the token `class` (2:1)

// Prettier 2.0
/* @flow */
@decorator4
class Foo {
  @decorator1
  method1() {}

  @decorator2
  @decorator3
  method2() {}
}

プライベートクラスフィールド宣言を修正 (#7484 by @fisker)

// Input
class Foo {
  #privateProp: number;
}

// Prettier 1.19
class Foo {
  privateProp: number;
}

// Prettier 2.0
class Foo {
  #privateProp: number;
}

CSS

CSSセレクタの要素名を小文字化しない (#6947 by @ark120202)

以前は、Prettierは未知の要素名の大文字小文字を保持していましたが、HTML要素の名前は小文字化していました。この動作は、CSSが大文字小文字を区別するドキュメントに適用される場合や、NativeScriptのようにHTMLと同じ名前の要素が存在する場合に問題を引き起こしていました。Prettierは現在、常に元の大文字小文字を保持します。

/* Input */
Label {
}

/* Prettier 1.19 */
label {
}

/* Prettier 2.0 */
Label {
}

SCSS

マップ内の最終コメント後に余分なカンマを追加しない (#6918 by @fisker)

以前は、trailingCommaがes5に設定されている場合、SCSSマップの最終コメントの後に余分なカンマが追加されていました。

// Input
$my-map: (
  'foo': 1, // Comment
  'bar': 2, // Comment
);

// Prettier 1.19
$my-map: (
  "foo": 1,
  // Comment
    "bar": 2,
  // Comment,
);

// Prettier 2.0
$my-map: (
  "foo": 1,
  // Comment
    "bar": 2,
  // Comment
);

SCSS連結における空白処理を修正 (#7211 by @sasurau4)

// Input
a {
  background-image: url($test-path + 'static/test.jpg');
}

// Prettier 1.19
a {
  background-image: url($test-path+"static/test.jpg");
}

// Prettier 2.0
a {
  background-image: url($test-path + "static/test.jpg");
}

Less

`postcss-less`の更新により複数の長期課題を修正 (#6981 by @fisker, #7021 by @evilebottnawi, @thorn0)

eachがサポートされました (#5653)。
mixin呼び出しパラメータ内の!importantが外部に移動される問題を修正 (#3544)。
mixin呼び出しに渡されるルールセット内のコメントが余分なセミコロンを生成する問題を修正 (#3096)。
mixin呼び出しパラメータ内の::beforeが正しく処理されない問題を修正 (#5791)。

HTML

`pre`タグ内のコメントが後続の閉じタグの不正なフォーマットを引き起こす問題を修正 (#5959 by @selvazhagan)

<!-- Input -->
<details>
<pre>
    <!-- TEST -->
  </pre></details>

<!-- Prettier 1.19 -->
<details>
  <pre>
    <!-- TEST -->
  </pre></details</details
>

<!-- Prettier 2.0 -->
<details>
  <pre>
    <!-- TEST -->
  </pre>
</details>

タグ名のコロンを名前空間プレフィックスの区切り文字として扱わないように変更 (#7273 by @fisker)

HTML5では、タグ名のコロンに特別な意味はありません。以前のPrettierはXML方式でこれらを名前空間プレフィックスの区切り文字として扱っていましたが、その動作を変更しました。実際には、祖先タグ名にコロンを含むタグが通常のHTMLタグとして扱われるようになったことを意味します。標準タグと認識される場合、その名前は小文字化され、空白の扱いについての仮定が適用されます。Prettierが未知のカスタム要素は名前の大文字小文字を保持し、--html-whitespace-sensitivityがcssに設定されている場合はインライン要素として扱われます。

<!-- Input -->
<with:colon>
<div> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block </div>
<DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div><div> block </div>
<pre> pre pr
e</pre>
<textarea> pre-wrap pr
e-wrap </textarea>
<span> looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline </span>
<span> inline </span><span> inline </span> <span> inline </span><span> inline </span>
</with:colon>

<!-- Prettier 1.19 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <DIV> block </DIV><DIV> block </DIV> <DIV> block </DIV><div> block </div
  ><div> block </div>
  <pre> pre pr e</pre>
  <textarea> pre-wrap pr e-wrap </textarea>
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

<!-- Prettier 2.0 -->
<with:colon>
  <div>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog block
  </div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <div>block</div>
  <pre>
 pre pr
e</pre
  >
  <textarea>
 pre-wrap pr
e-wrap </textarea
  >
  <span>
    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog inline
  </span>
  <span> inline </span><span> inline </span> <span> inline </span
  ><span> inline </span>
</with:colon>

壊れたHTMLでもエラーをスローしないように変更 (#7293 by @fisker)

<!-- Input -->
<div><span>
<

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<div><span> < </span></div>

srcsetのパースエラーを修正 (#7295 by @fisker)

<!-- Input -->
<img

srcset="
             /media/examples/surfer-240-200.jpg
">

<!-- Prettier 1.19 -->
Error: Mixed descriptor in srcset is not supported

<!-- Prettier 2.0 -->
<img srcset="/media/examples/surfer-240-200.jpg" />

`pre`タグ内の閉じられていないタグでスローされていたエラーを修正 (#7392 by @fisker)

<!-- Input -->
<pre><br /></pre>
<pre><hr></pre>

<!-- Prettier 1.19 -->
TypeError: Cannot read property 'start' of null

<!-- Prettier 2.0 -->
<pre><br /></pre>
<pre><hr /></pre>

空要素タグのフォーマットが一貫しない問題を修正 (#7395 by @fisker)

<!-- Input -->
<span><input type="checkbox"/> </span>
<span><span><input type="checkbox"/></span></span>
<span><input type="checkbox"/></span>

<!-- Prettier 1.19 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox"/></span
></span>
<span><input type="checkbox"/></span>

<!-- Prettier 2.0 -->
<span><input type="checkbox" /> </span>
<span
  ><span><input type="checkbox" /></span
></span>
<span><input type="checkbox" /></span>

`table`タグの後に予期せず空行が追加される問題を修正 (#7461 by @ikatyang)

<!-- Input -->
<table><tr>
</tr>
</table><div>Should not insert empty line before this div</div>

<!-- Prettier 1.19 -->
<table>
  <tr></tr>
</table>

<div>Should not insert empty line before this div</div>

<!-- Prettier 2.0 -->
<table>
  <tr></tr>
</table>
<div>Should not insert empty line before this div</div>

HTMLの`class`属性の値をフォーマットするように変更 (#7555 by @fisker)

<!-- Input -->
<div class="  foo
bar baz"></div>
<div class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"></div>

<!-- Prettier 1.19 -->
<div
  class="  foo
bar baz"
></div>
<div
  class="
another element with so many classes
even can not fit one line
really a lot and lot of classes
"
></div>

<!-- Prettier 2.0 -->
<div class="foo bar baz"></div>
<div
  class="another element with so many classes even can not fit one line really a lot and lot of classes"
></div>

HTMLの`style`属性の値をフォーマットするように変更 (#7556 by @fisker)

<!-- Input -->
<div style="   color : red;
            display    :inline ">
  </div>
<div style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; ">
  </div>

<!-- Prettier 1.19 -->
<div
  style="   color : red;
            display    :inline "
></div>
<div
  style="   color : red;
            display    :inline; height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; "
></div>


<!-- Prettier 2.0 -->
<div style="color: red; display: inline;"></div>
<div
  style="
    color: red;
    display: inline;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  "
></div>

テキストに対する``をサポート (#7654 by @graemeworthy)

以前はタグのみで機能していました。これにより、様々なマクロやプリプロセッサコマンドがフォーマットによって破損されるのを防ぐのに役立ちます。

<!-- Input -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably
generated by some script.

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
A super long string that has been marked as ignore because it was probably generated by some script.

<!-- Input -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

<!-- Prettier 1.19 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats |
Tigers | | ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- |
---- | ------ | | 1 | 1 | 0 | 0 | 1 | 1 | 5 | 16 | 4 | 0 |

<!-- Prettier 2.0 -->
<!-- prettier-ignore -->
| Dogs | Cats | Weasels | Bats | Pigs | Mice | Hedgehogs | Capybaras | Rats | Tigers |
| ---- | ---- | ------- | ---- | ---- | ---- | --------- | --------- | ---- | ------ |
|    1 |    1 |       0 |    0 |    1 |    1 |         5 |        16 |    4 |      0 |

Vue

JSXスクリプトを含むVue単一ファイルコンポーネントのフォーマットをサポート (#7180 by @sosukesuzuki)

<!-- Input -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 1.19 -->
<script lang="jsx">
export default {
  data: () => ({
    message: 'hello with jsx'
  }),
  render(h) {



    return <div>{this.message}</div>
  }
}
</script>

<!-- Prettier 2.0 -->
<script lang="jsx">
export default {
  data: () => ({
    message: "hello with jsx"
  }),
  render(h) {
    return <div>{this.message}</div>;
  }
};
</script>

属性内の単一の文字列リテラルを改行して出力しないように変更 (#7479 by @fisker)

<!-- Input -->
<template>
<MyComponent
  :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
  :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    :attr1="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`
    "
    :attr2="
      'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    :attr1="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong ${template} literal value`"
    :attr2="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong string literal value'"
  />
</template>

Vue式のインデントを修正 (#7781 by @fisker)

<!-- Input -->
<template>
<MyComponent v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>

<!-- Prettier 1.19 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
        long_long_long_long_long_long_long_condition_2 &&
        long_long_long_long_long_long_long_condition_3 &&
        long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
        `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

<!-- Prettier 2.0 -->
<template>
  <MyComponent
    v-if="
      long_long_long_long_long_long_long_condition_1 &&
      long_long_long_long_long_long_long_condition_2 &&
      long_long_long_long_long_long_long_condition_3 &&
      long_long_long_long_long_long_long_condition_4
    "
    :attr="
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
      `loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
    "
  />
</template>

Angular

AngularJS 1.xで最も使用されるディレクティブの一部について非公式の基本的なサポートを追加 (#6869 by @thorn0)

古いAngularJSと新しいAngularの式言語には構文の非互換性（ワンタイムバインディングや | の優先順位など）が一部存在しますが、全体的には互換性が十分に高く、レガシーやハイブリッドなAngularJSベースのプロジェクトでもPrettierの利用による恩恵を得られます。以前、PrettierがAngularパーサーを使用してAngularJSテンプレートをフォーマットする際、式は補間（interpolation）内でのみフォーマットされていました。現在では、最も頻繁に使用されるAngularJSディレクティブもフォーマット対象となりました。具体的には ng-if、ng-show、ng-hide、ng-class、ng-style です。

<!-- Input -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 1.19 -->
<div ng-if="$ctrl .shouldShowWarning&&!$ctrl.loading  ">Warning!</div>

<!-- Prettier 2.0 -->
<div ng-if="$ctrl.shouldShowWarning && !$ctrl.loading">Warning!</div>

i18n属性のフォーマット修正 (#7371 by @thorn0)

Prettier 1.19でi18n属性のフォーマットサポートが追加されましたが、閉じ引用符を新しい行に配置するとカスタムIDが正しく機能しない問題がありました。これは現在修正されています。

<!-- Input -->
<div i18n-prop="Special-property|This is a special property with much important information@@MyTextId"
prop="My Text"></div>

<!-- Prettier 1.19 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId
  "
  prop="My Text"
></div>

<!-- Prettier 2.0 -->
<div
  i18n-prop="
    Special-property|This is a special property with much important
    information@@MyTextId"
  prop="My Text"
></div>

Handlebars (アルファ版)

`ConcatStatement` における不要な改行の修正 (#7051 by @dcyriller)

{{!-- Input --}}
<a href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars">Link</a>

{{!-- Prettier 1.19 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform
    {{id}}
    longer-than-eighty-chars"
>
  Link
</a>

{{!-- Prettier 2.0 --}}
<a
  href="a-very-long-href-from-a-third-party-marketing-platform{{id}}longer-than-eighty-chars"
>
  Link
</a>

となり、

{{!-- Input --}}
<div class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if goodbye false}} {{if goodbye true}}">
  Hello
</div>

{{!-- Prettier 1.19 --}}
<div
  class="hello
    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}

    {{if goodbye false}}

    {{if goodbye true}}"
>
  Hello
</div>

{{!-- Prettier 2.0 --}}
<div
  class="hello {{if goodbye true}} {{if goodbye false}} {{if goodbye true}} {{if
      goodbye
      false
    }} {{if goodbye true}}"
>
  Hello
</div>

マスタッシュの不具合修正 (#7052 by @dcyriller)

{{!-- Input --}}
<GlimmerComponent @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}} />

{{!-- Prettier 1.19 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue
  }}
/>

{{!-- Prettier 2.0 --}}
<GlimmerComponent
  @progress={{aPropertyEndingAfterEightiethColumnToHighlightAWeirdClosingParenIssue}}
/>

`MustacheStatement` の出力改善 (#7157 by @dcyriller)

{{!-- Input --}}
<p>Hi here is your name, as it will be displayed  {{firstName}}  {{lastName}}   , welcome!</p>

{{!-- Prettier 1.19 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{lastName
  }} , welcome!
</p>

{{!-- Prettier 2.0 --}}
<p>
  Hi here is your name, as it will be displayed {{firstName}} {{
    lastName
  }} , welcome!
</p>

`prettier-ignore` のサポート追加 (#7275 by @chadian)

{{! Input }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component    isRestoredTo   = "order"    }}
  <ThisWillBeNormal backTo    =   "normal" />
{{/a-normal-component}}

{{! Prettier 1.19 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component "shall" be="preserved"}}
    <This is="preserved" />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo="order"}}
  <ThisWillBeNormal backTo="normal" />
{{/a-normal-component}}

{{! Prettier 2.0 }}
{{! prettier-ignore }}
<div>
  "hello! my parent was ignored"
  {{#my-crazy-component     "shall"     be="preserved"}}
    <This

      is="preserved"
    />
  {{/my-crazy-component}}
</div>

{{#a-normal-component isRestoredTo='order'}}
  <ThisWillBeNormal backTo='normal' />
{{/a-normal-component}}

HTML内インラインHandlebarsの出力サポート (#7306 by @dcyriller)

<!-- Input -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 1.19 -->
<script type="text/x-handlebars-template">
  {{component arg1='hey' arg2=(helper this.arg7 this.arg4) arg3=anotherone arg6=this.arg8}}
</script>

<!-- Prettier 2.0 -->
<script type="text/x-handlebars-template">
  {{component
    arg1='hey'
    arg2=(helper this.arg7 this.arg4)
    arg3=anotherone
    arg6=this.arg8
  }}
</script>

AttrNode からの値の欠落修正 (#7552 by @bantic)

{{!-- Input --}}
<ul class="abc
       def">
</ul>

{{!-- Prettier 1.19 --}}
<ul class></ul>

{{!-- Prettier 2.0 --}}
<ul class="abc
       def">
</ul>

空白制御文字の維持 (#7575 by @mahirshah)

{{!-- Input --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

{{!-- Prettier 1.19 --}}
{{#if bar}}
  if1
{{else}}
  else
{{/if}}

{{!-- Prettier 2.0 --}}
{{~#if bar}}
  if1
{{~else~}}
  else
{{~/if~}}

GraphQL

インターフェース間の区切り文字検出の改善 (#7305 by @fisker)

複数の実装インターフェースを区切るためにカンマを使用する構文は非推奨ですが、レガシーなユースケースをサポートするため、Prettierは元の区切り文字を保持し、意図的にカンマをアンパサンドに置き換えません。しかし以前はこのロジックに不具合があり、出力に誤った区切り文字が含まれる可能性がありました。これは現在修正されています。

# Input
type Type1 implements A, B
# { &  <-- Removing this comment changes the separator in 1.19
{a: a}

type Type2 implements A, B & C{a: a}

# Prettier 1.19
type Type1 implements A & B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A & B & C {
  a: a
}

# Prettier 2.0
type Type1 implements A, B {
  # { &  <-- Removing this comment changes the separator in 1.19
  a: a
}

type Type2 implements A, B & C {
  a: a
}

Markdown

ゼロベースリストの正しい処理 (#6852 by @evilebottnawi)

<!-- Input -->
List
List
List

<!-- Prettier 1.19 -->
List
List
List

<!-- Prettier 2.0 -->
List
List
List

リスト項目直後の開始タグにおけるHTMLフォーマットの修正 (#7181 および #7220 by @sasurau4)

以前、Prettierがリスト項目直後に配置されたHTMLタグをフォーマットする際、インデントを挿入することで開始タグと終了タグの関係性が損なわれていました。現在、Prettierは何も変更しなくなりました。

<!-- Input -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 1.19 -->
- A list item.

  <details><summary>Summary</summary>
  <p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

<!-- Prettier 2.0 -->
- A list item.
<details><summary>Summary</summary>
<p>

- A list item.

</p>
</details>

- A list item
  <blockquote>asdf</blockquote>

複数行の脚注のフォーマットを修正 (#7203 by @sasurau4)

<!-- Input -->
Here's a statement[^footnote].

[^footnote]:
    Here's a multi-line footnote walking back the above statement, and showing
    how it's all totally bollocks.

<!-- Prettier 1.19 -->
Here's a statement[^footnote].

[^footnote]:

  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

<!-- Prettier 2.0 -->
Here's a statement[^footnote].

[^footnote]:
  Here's a multi-line footnote walking back the above statement, and showing
  how it's all totally bollocks.

MDX

JSXフラグメントのサポートを追加 (#6398 by @JounQin)

<!-- Input -->
<>
    test   <World        />   test
</>       123

<!-- Prettier 1.19 -->
<>
test <World        /> test
</> 123

<!-- Prettier 2.0 -->
<>
  test <World /> test
</> 123

Prettier 1.19で導入されたJSXパースのバグを修正 (#6949 by @Tigge & @thorn0)

HTMLとして解析できないJSX要素（例: <Tag value={{a: 'b'}}>test</Tag>）が含まれる場合に、 MDXのJSXパースが失敗する問題を修正しました

<!-- Input -->

<Tag  value={ {a :  'b'   } }>test</ Tag>

<Foo bg={ 'red' } >
   <div  style={{   display:   'block'}   }>
      <Bar    >hi    </Bar>
       {  hello       }
         {     /* another comment */}
            </div>
</Foo>

<!-- Prettier 1.19 -->

SyntaxError: Unexpected closing tag "Tag". 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 (1:35)
> 1 | <Tag  value={ {a :  'b'   } }>test</ Tag>

<!-- Prettier 2.0 -->

<Tag value={{ a: "b" }}>test</Tag>

<Foo bg={"red"}>
  <div style={{ display: "block" }}>
    <Bar>hi </Bar>
    {hello}
    {/* another comment */}
  </div>
</Foo>

CLI

ファイル拡張子 `.cjs` と `.yaml.sed` をサポート (#7210 by @sosukesuzuki)

# Prettier 1.19
$ prettier test.cjs
test.cjs[error] No parser could be inferred for file: test.cjs

# Prettier 2.0
$ prettier test.cjs
"use strict";
console.log("Hello, World!");

サブディレクトリからPrettierを実行する際に `--ignore-path` を尊重するように変更 (#7588 by @heylookltsme)

無視するファイルのフィルタリングに使用するファイル名を、カレントワーキングディレクトリではなく、 --ignore-path が存在する場合はそれに対する相対パスに変更しました

`--stdin` オプションの削除 (#7668 by @thorn0)

このCLIフラグは適切に文書化されていませんでしたが、Prettier CLIに標準入力から入力を読み取らせることを意図していました。ただしPrettier CLIはファイルパスやグロブパターンが指定されない場合、自動的に標準入力から読み取るため、このフラグは冗長でした。削除後もこのフラグを使用すると警告「Ignored unknown option」が表示されますが、これは情報提供のみを目的としたもので、コマンドの本来の動作や終了コードには影響しません。

主な変更点​

JavaScript​

メソッドチェーン改行ヒューリスティックの改善 (#6685 by @mmkal)​

Closureスタイル型キャストの根本的修正 (#7791 by @thorn0, #7011 by @evilebottnawi)​

TypeScript​

TypeScript 3.8のサポート (#7631 by @thorn0, #7764 by @sosukesuzuki, #7804 by @sosukesuzuki)​

CLI​

渡されたglobをglobとして扱う前に既存ファイル名か検証するよう変更 (#7587 by @fisker)​

ディレクトリ展開機能の強化（. を含む） (#7660 by @thorn0)​

破壊的変更​

API​

設定オーバーライドのパターンマッチングでドットファイルを含めるよう修正 (#5813 by @chrisblossom)​

Node 10未満のバージョンサポート終了 (#6908 by @fisker)​

trailingComma のデフォルト値を es5 に変更 (#6963 by @fisker)​

Plugin API: prettier.utilの変更点 (#6993 by @fisker)​

arrowParensのデフォルト値をalwaysに変更 (#7430 by @kachkaev)​

endOfLineのデフォルト値をlfに変更 (#7435 by @kachkaev)​

プラグイン検索結果のキャッシュ化 (#7485 by @fisker)​

非推奨オプションとオプション値の削除 (#6993, #7511, #7533, #7535, #7536 by @fisker)​

prettier.getSupportInfo の version パラメーター削除 (#7620 by @thorn0)​

その他の変更点​

JavaScript​

functionキーワードの後には常にスペースを追加 (#3903 by @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 by @bakkot)​

コメント付きラベル付きステートメントの不安定なフォーマットを修正 (#6984 by @clement26695)​

テンプレートリテラル内の論理式・二項式・シーケンス式のフォーマットを修正 (#7010 by @evilebottnawi)​

論理式の不安定なフォーマットを修正 (#7026 by @thorn0)​

throwをreturnと同様にフォーマット (#7070 by @sosukesuzuki)​

他の三項演算子の条件内にネストされた三項演算子のインデントを修正 (#7087 by @thorn0)​

デコレーター用の関数合成ロジックを調整 (#7138 by @brainkim)​

コメント付き空のreturnステートメントにおけるセミコロンの配置を修正 (#7140 by @sosukesuzuki)​

HTMLテンプレートリテラル内の空白の重要性を尊重 (#7208 by @saschanaz)​

JSXをyieldする際の不要な括弧を削除 (#7367 by @cola119)​

デフォルトエクスポート宣言内のカンマ式の周囲の括弧を保持 (#7491 by @fisker)​

オプショナルチェイニング周囲の括弧に関するエッジケースを修正 (#7500 by @thorn0)​

JSX内の条件式でundefinedを括弧で囲まないように変更 (#7504 by @fisker)​

代入式/変数宣言におけるコメントの位置を保持 (#7709 by @sosukesuzuki)​

TypeScript​

TypeScript用代替パーサーとしてBabelをサポート (#6400 by @JounQin & @thorn0)​

アロー関数の戻り値型注釈における複雑な型の整形を修正 (#6901 by @sosukesuzuki)​

JSDoc専用の型をエラー送出せずそのまま出力 (#7020 by @thorn0)​

タプル型の残余要素後にトレイルングカンマを出力しないように変更 (#7075 by @thorn0)​

コメントが続く変数宣言内のアロー関数のインデントを修正 (#7094 by @sosukesuzuki)​

関数型におけるコメントの出力を修正 (#7104 by @thorn0)​

関数風ノードのコメント整形を修正 (#7144 by @armano2)​

テンプレート型が省略されたマップ型の出力を修正 (#7221 by @cola119)​

インデックスシグネチャの印刷に関するエッジケースの修正 (#7228 by @cola119)​

空の型パラメータ内コメントの印刷を修正 (#7729 by @sosukesuzuki)​

Flow​

symbolのサポートを追加 (#7472 by @fisker)​

デコレータのサポートを追加 (#7482 by @fisker)​

プライベートクラスフィールド宣言を修正 (#7484 by @fisker)​

CSS​

CSSセレクタの要素名を小文字化しない (#6947 by @ark120202)​

SCSS​

マップ内の最終コメント後に余分なカンマを追加しない (#6918 by @fisker)​

SCSS連結における空白処理を修正 (#7211 by @sasurau4)​

Less​

postcss-lessの更新により複数の長期課題を修正 (#6981 by @fisker, #7021 by @evilebottnawi, @thorn0)​

HTML​

preタグ内のコメントが後続の閉じタグの不正なフォーマットを引き起こす問題を修正 (#5959 by @selvazhagan)​

タグ名のコロンを名前空間プレフィックスの区切り文字として扱わないように変更 (#7273 by @fisker)​

壊れたHTMLでもエラーをスローしないように変更 (#7293 by @fisker)​

srcsetのパースエラーを修正 (#7295 by @fisker)​

preタグ内の閉じられていないタグでスローされていたエラーを修正 (#7392 by @fisker)​

空要素タグのフォーマットが一貫しない問題を修正 (#7395 by @fisker)​

tableタグの後に予期せず空行が追加される問題を修正 (#7461 by @ikatyang)​

HTMLのclass属性の値をフォーマットするように変更 (#7555 by @fisker)​

HTMLのstyle属性の値をフォーマットするように変更 (#7556 by @fisker)​

テキストに対するをサポート (#7654 by @graemeworthy)​

Vue​

JSXスクリプトを含むVue単一ファイルコンポーネントのフォーマットをサポート (#7180 by @sosukesuzuki)​

属性内の単一の文字列リテラルを改行して出力しないように変更 (#7479 by @fisker)​

Vue式のインデントを修正 (#7781 by @fisker)​

Angular​

AngularJS 1.xで最も使用されるディレクティブの一部について非公式の基本的なサポートを追加 (#6869 by @thorn0)​

i18n属性のフォーマット修正 (#7371 by @thorn0)​

Handlebars (アルファ版)​

ConcatStatement における不要な改行の修正 (#7051 by @dcyriller)​

マスタッシュの不具合修正 (#7052 by @dcyriller)​

MustacheStatement の出力改善 (#7157 by @dcyriller)​

主な変更点

JavaScript

メソッドチェーン改行ヒューリスティックの改善 (#6685 by @mmkal)

Closureスタイル型キャストの根本的修正 (#7791 by @thorn0, #7011 by @evilebottnawi)

TypeScript

TypeScript 3.8のサポート (#7631 by @thorn0, #7764 by @sosukesuzuki, #7804 by @sosukesuzuki)

CLI

渡されたglobをglobとして扱う前に既存ファイル名か検証するよう変更 (#7587 by @fisker)

ディレクトリ展開機能の強化（`.` を含む） (#7660 by @thorn0)

破壊的変更

API

設定オーバーライドのパターンマッチングでドットファイルを含めるよう修正 (#5813 by @chrisblossom)

Node 10未満のバージョンサポート終了 (#6908 by @fisker)

`trailingComma` のデフォルト値を `es5` に変更 (#6963 by @fisker)

Plugin API: `prettier.util`の変更点 (#6993 by @fisker)

`arrowParens`のデフォルト値を`always`に変更 (#7430 by @kachkaev)

`endOfLine`のデフォルト値を`lf`に変更 (#7435 by @kachkaev)

プラグイン検索結果のキャッシュ化 (#7485 by @fisker)

非推奨オプションとオプション値の削除 (#6993, #7511, #7533, #7535, #7536 by @fisker)

`prettier.getSupportInfo` の `version` パラメーター削除 (#7620 by @thorn0)

その他の変更点

JavaScript

`function`キーワードの後には常にスペースを追加 (#3903 by @j-f1, @josephfrazier, @sosukesuzuki, @thorn0; #7516 by @bakkot)

コメント付きラベル付きステートメントの不安定なフォーマットを修正 (#6984 by @clement26695)

テンプレートリテラル内の論理式・二項式・シーケンス式のフォーマットを修正 (#7010 by @evilebottnawi)

論理式の不安定なフォーマットを修正 (#7026 by @thorn0)

`throw`を`return`と同様にフォーマット (#7070 by @sosukesuzuki)

他の三項演算子の条件内にネストされた三項演算子のインデントを修正 (#7087 by @thorn0)

デコレーター用の関数合成ロジックを調整 (#7138 by @brainkim)

コメント付き空の`return`ステートメントにおけるセミコロンの配置を修正 (#7140 by @sosukesuzuki)

HTMLテンプレートリテラル内の空白の重要性を尊重 (#7208 by @saschanaz)

JSXをyieldする際の不要な括弧を削除 (#7367 by @cola119)

デフォルトエクスポート宣言内のカンマ式の周囲の括弧を保持 (#7491 by @fisker)

オプショナルチェイニング周囲の括弧に関するエッジケースを修正 (#7500 by @thorn0)

JSX内の条件式で`undefined`を括弧で囲まないように変更 (#7504 by @fisker)

代入式/変数宣言におけるコメントの位置を保持 (#7709 by @sosukesuzuki)

TypeScript

TypeScript用代替パーサーとしてBabelをサポート (#6400 by @JounQin & @thorn0)

アロー関数の戻り値型注釈における複雑な型の整形を修正 (#6901 by @sosukesuzuki)

JSDoc専用の型をエラー送出せずそのまま出力 (#7020 by @thorn0)

タプル型の残余要素後にトレイルングカンマを出力しないように変更 (#7075 by @thorn0)

コメントが続く変数宣言内のアロー関数のインデントを修正 (#7094 by @sosukesuzuki)

関数型におけるコメントの出力を修正 (#7104 by @thorn0)

関数風ノードのコメント整形を修正 (#7144 by @armano2)

テンプレート型が省略されたマップ型の出力を修正 (#7221 by @cola119)

インデックスシグネチャの印刷に関するエッジケースの修正 (#7228 by @cola119)

空の型パラメータ内コメントの印刷を修正 (#7729 by @sosukesuzuki)

Flow

`symbol`のサポートを追加 (#7472 by @fisker)

デコレータのサポートを追加 (#7482 by @fisker)

プライベートクラスフィールド宣言を修正 (#7484 by @fisker)

CSS

CSSセレクタの要素名を小文字化しない (#6947 by @ark120202)

SCSS

マップ内の最終コメント後に余分なカンマを追加しない (#6918 by @fisker)

SCSS連結における空白処理を修正 (#7211 by @sasurau4)

Less

`postcss-less`の更新により複数の長期課題を修正 (#6981 by @fisker, #7021 by @evilebottnawi, @thorn0)

HTML

`pre`タグ内のコメントが後続の閉じタグの不正なフォーマットを引き起こす問題を修正 (#5959 by @selvazhagan)

タグ名のコロンを名前空間プレフィックスの区切り文字として扱わないように変更 (#7273 by @fisker)

壊れたHTMLでもエラーをスローしないように変更 (#7293 by @fisker)

srcsetのパースエラーを修正 (#7295 by @fisker)

`pre`タグ内の閉じられていないタグでスローされていたエラーを修正 (#7392 by @fisker)

空要素タグのフォーマットが一貫しない問題を修正 (#7395 by @fisker)

`table`タグの後に予期せず空行が追加される問題を修正 (#7461 by @ikatyang)

HTMLの`class`属性の値をフォーマットするように変更 (#7555 by @fisker)

HTMLの`style`属性の値をフォーマットするように変更 (#7556 by @fisker)

テキストに対する``をサポート (#7654 by @graemeworthy)

Vue

JSXスクリプトを含むVue単一ファイルコンポーネントのフォーマットをサポート (#7180 by @sosukesuzuki)

属性内の単一の文字列リテラルを改行して出力しないように変更 (#7479 by @fisker)

Vue式のインデントを修正 (#7781 by @fisker)

Angular

AngularJS 1.xで最も使用されるディレクティブの一部について非公式の基本的なサポートを追加 (#6869 by @thorn0)

i18n属性のフォーマット修正 (#7371 by @thorn0)

Handlebars (アルファ版)

`ConcatStatement` における不要な改行の修正 (#7051 by @dcyriller)

マスタッシュの不具合修正 (#7052 by @dcyriller)

`MustacheStatement` の出力改善 (#7157 by @dcyriller)