Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prettier 2.0

sosukesuzuki
February 05, 2020

Prettier 2.0

sosukesuzuki

February 05, 2020
Tweet

More Decks by sosukesuzuki

Other Decks in Programming

Transcript

  1. Prettier - JavaScript で書かれたコードフォーマッター - Node.js / ブラウザで動く - JS

    / TS / HTML / CSS / YAML / GraphQL などに 対応 - 現在 1.19.1(master) - 2.0 が開発中(next)
  2. 経緯 - 1.19 のときに、Node のバージョン周りで面倒だった - TypeScript 3.7 をサポートするためには、依存している @typescript-eslint/typescript-estree

    の バージョンをあげる必要があったけど、 typescript-estree と Prettier でサポートしている Node の バージョンが違かった。
  3. 経緯 - 今まで Node 4 までサポートしていた - いくつかの構文は Babel を使って対応していたがトランスパイル後のサイズなどを

    考えて使えなかった構文がある。 - 例えば class は使わずに function で書いていた。 - スプレッド構文も使えないので Object.assign がいっぱいある。
  4. 経緯 - 当初予定していた 2.0 の機能の多くを延期 - それらは 3.0 として将来的に実装される予定 -

    Node 8 以下のドロップを最優先とした 2.0 の開発がはじまった! - https://github.com/prettier/prettier/issues/6888
  5. デフォルトオプションの変更- trailingComma - trailincComma オプションには all・none・es5 の3つがある - all はつけられる箇所すべてに末尾カンマをつける

    - none は全部つけない - es5 は ES5 でバリッドになるようにつける - 関数の引数リストの末尾カンマはつかない
  6. デフォルトオプションの変更- endOfLine - https://github.com/prettier/prettier/pull/7435 - 改行コードを決める - endOfLine オプションがデフォルトで lf

    になる - これまでは auto だった - (そのファイル内の他の改行コードに合わせ、もし混在している場合は、最初に使われている改行 コードで全部合わせる )
  7. デフォルトオプションの変更- arrowParens - アロー関数の単一の引数にカッコをつけるかを決める - デフォルトで always になる - 今までは

    avoid だった always(2.0からデフォルトになる) avoid(今のデフォルト) 引数にカッコをつける 引数にカッコをつけない
  8. 大きめのフォーマットの変更- 関数式の空白 - generator の * の扱いも少し変わるかもしれない - https://github.com/prettier/prettier/issues/7028 -

    キーワードじゃなくて名前の方に * がつく - 現在議論中なので変更されるかも 1.19.1 2.0
  9. まとめ - デフォルトオプションの変更 - 影響の大きいフォーマットの変更 - Node 8 以下のサポート終了 -

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