Prettier 2.0 ginza.js 2020/02/05

自己紹介 - 鈴木颯介(すずきそうすけ) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier - 筑波大学情報科学類

Prettier - JavaScript で書かれたコードフォーマッター - Node.js / ブラウザで動く - JS / TS / HTML / CSS / YAML / GraphQL などに 対応 - 現在 1.19.1(master) - 2.0 が開発中(next)

Prettier

注意 - 今日話す内容は、発表時点で next ブランチに実装されているものもしくはメンバー 内で合意がとれているもの - 今後の状況によっては変更される可能性がある

概要 - 全体的に変更は小さめ - デフォルトオプションの変更 - 影響の大きいフォーマットの変更 - Node 8 以下のサポート終了 - など

経緯 - 2018年頃から多くの破壊的変更を含む野心的な 2.0 が計画されていた - しかし実際にはいくつかの大きな変更を含む小さな 2.0 が開発されている

経緯 - 1.19 のときに、Node のバージョン周りで面倒だった - TypeScript 3.7 をサポートするためには、依存している @typescript-eslint/typescript-estree の バージョンをあげる必要があったけど、 typescript-estree と Prettier でサポートしている Node の バージョンが違かった。

経緯 - 今まで Node 4 までサポートしていた - いくつかの構文は Babel を使って対応していたがトランスパイル後のサイズなどを 考えて使えなかった構文がある。 - 例えば class は使わずに function で書いていた。 - スプレッド構文も使えないので Object.assign がいっぱいある。

経緯 - 単純に EOL がきているバージョンをサポートし続けるのはきつい。

経緯 - 当初予定していた 2.0 の機能の多くを延期 - それらは 3.0 として将来的に実装される予定 - Node 8 以下のドロップを最優先とした 2.0 の開発がはじまった！ - https://github.com/prettier/prettier/issues/6888

Node 8 以下のドロップ - Node 8 以下(正確には10.13.0未満)のサポートを終了する

デフォルトオプションの変更 - trailingComma - endOfLine - arrowParens

デフォルトオプションの変更- trailingComma - trailincComma オプションには all・none・es5 の3つがある - all はつけられる箇所すべてに末尾カンマをつける - none は全部つけない - es5 は ES5 でバリッドになるようにつける - 関数の引数リストの末尾カンマはつかない

デフォルトオプションの変更- trailingComma - https://github.com/prettier/prettier/pull/6963 - trailincComma オプションはデフォルトで es5 になる - いままでは none だった - 基本的に末尾カンマがつく

デフォルトオプションの変更- endOfLine - https://github.com/prettier/prettier/pull/7435 - 改行コードを決める - endOfLine オプションがデフォルトで lf になる - これまでは auto だった - (そのファイル内の他の改行コードに合わせ、もし混在している場合は、最初に使われている改行 コードで全部合わせる )

デフォルトオプションの変更- arrowParens - アロー関数の単一の引数にカッコをつけるかを決める - デフォルトで always になる - 今までは avoid だった always(2.0からデフォルトになる) avoid(今のデフォルト) 引数にカッコをつける 引数にカッコをつけない

大きめのフォーマットの変更 - よく使われそうな構文のフォーマットが変わる

大きめのフォーマットの変更- 関数式の空白 - https://github.com/prettier/prettier/pull/3903 - Function Expression の function のあとに空白が入るようになる - Function Declaration との統一のため Function Declaration Function Expression

大きめのフォーマットの変更- 関数式の空白 1.19.1 2.0

大きめのフォーマットの変更- 関数式の空白 - generator の * の扱いも少し変わるかもしれない - https://github.com/prettier/prettier/issues/7028 - キーワードじゃなくて名前の方に * がつく - 現在議論中なので変更されるかも 1.19.1 2.0

リリース時期について - 2020年の2月2日を予定していたが、開発が間に合わず延期になっている - いまのところ未定だができるだけ早くリリースしたい

まとめ - デフォルトオプションの変更 - 影響の大きいフォーマットの変更 - Node 8 以下のサポート終了 - その他細かな変更 - Babel のパーサーを使って TypeScript のフォーマットを行う `parser=babel-ts` - ファイルではなく、ESLint のようにディレクトリを指定できるようにする (WIP) - メソッドチェインのフォーマットの改善 - 多くのフォーマットのバグの修正 - リリース時期は未定だができるだけ早くやりたい