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

Prettier の TypeScript 3.7 対応について

Prettier の TypeScript 3.7 対応について

2019年10月29日の nihonbashi.js での登壇です。
10月上旬に公開された TypeScript 3.7 のベータ版の Prettier のサポート状況についてお話しました。

208355d7af69fa84a78048f78077048a?s=128

sosukesuzuki

October 29, 2019
Tweet

More Decks by sosukesuzuki

Other Decks in Programming

Transcript

  1. Prettier の TypeScript 3.7 対応について nihonbashi.js 2019/10/29

  2. 自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier

    メンテナ - 筑波大学情報科学類
  3. None
  4. Prettier とは

  5. Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML /

    CSS / YAML / GraphQL などに 対応
  6. フォーマット

  7. TypeScript 3.7 とは

  8. TypeScript 3.7 - 10月に入ってベータ版が公開されたまだ正式リリースされてない最新版の TypeScript - 4つの新構文が追加される - (このLTではこれらの機能自体には詳しく触れません) -

    https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/
  9. TypeScript 3.7 - Optional Chaining - 現在 ECMAScript Stage 3

    のプロポーザル - Babel にはすでに入っている
  10. TypeScript 3.7 - Nullish Coalescing Operator - 現在 ECMAScript Stage

    3 のプロポーザル - Babel にはすでに入っている
  11. TypeScript 3.7 - Assertion Functions - 型に関する機能なので ECMAScript のプロポーザルとかではない -

    返り値に `asserts hoge is string` みたいなのを書いて型のアサートができる
  12. TypeScript 3.7 - Class field “declare” keyword - ベータ版のアナウンスには含まれていなかった -

    class field の declare キーワードをつけられる
  13. これらに対して Prettier 側が すべき対応は大きく分けて2つ

  14. ①依存しているパーサーの更新

  15. Prettier のしくみ(めっちゃ簡潔に) もとのテキスト AST(抽象構文木) フォーマットされたテ キスト パース プリント

  16. Prettier は外部のパーサーを使っている - TS: typescript-eslint/typescript-estree - JS: babel/parser - まずパーサー側が対応するのを待つ必要がある

  17. パーサー側の TS 3.7 対応が終わったら 依存しているバージョンをあげる

  18. ②プリントの処理を書く

  19. ASTから実際にコードを フォーマットする処理を書く (このLTではここの詳細には触れません)

  20. 雑に一部抜粋(do 式と break のフォーマット)

  21. プリントの処理を書くのは(比較的)簡単 - もともと Babel の Optional Chaining と Nullish Coalescing

    には対応していた - Assertion Functions も class フィールドの declare キーワードも似たような構文が あったのでそんなに考えることはなさそうだった
  22. 今回困難だったのは 「①依存しているパーサーの更新」

  23. Node バージョン問題

  24. Prettier のサポートしている Node のバージョン - GitHub からの直接インストール - package.json に

    “prettier/prettier” を指定することでインストールできる - これは 1.18.2 では Node 6 までサポートしている - バージョン指定してインストール(トランスパイル済み) - 1.18.2 現在で Node 4 までサポートしている
  25. typescript-estree の対応 Node バージョン - "^8.10.0 || ^10.13.0 || >=11.10.1"

  26. Node 6 はサポートされてない (個人的にはそろそろ Prettier が Node 6 のサポートを切るべきだと思いますが)

  27. 普通に更新してみたら Node 6 で テストコケた!

  28. 切りたいけどメジャーバージョンを あげないと Node 6 のサポートを切れない!

  29. 大きく分けて2つの対策が考えられる

  30. ① babel-ts パーサーの導入

  31. babel-ts パーサー - Babel の TypeScript パーサーを使おうという話 - TS 3.7

    が公開される前から babel-ts パーサーを入れる PR は出ていた - Babel にはもともと Optional Chaining と Nullish Coalescing は入っているのでい けるのでは? - (1.19には入らなさそう) - Assertion Functions と class フィールドの declare キーワードはまだ babel/parser が対応してないので使えない - なのであくまで回避策
  32. ② typescript-estree をなんとかする

  33. 案1: フォークしてNode6をサポートする - typescript-estree を Prettier 側でフォークして Node 6 をサポートできるように修

    正して使おうという案 - 「メンテコストがしんどそう...」「もしやるなら 2.0 のリリースを急がないと...」
  34. 案2: GitHub インストールの Node 6 をドロップする - GitHub からの直接インストールの Node

    6 をドロップする - バージョン指定インストールの場合トランスパイルして Node 6 をサポートし続けら れる - 「メジャーバージョンあげずに Node 6 を切っていいの?Semver は?」
  35. 案2について 「よく考えたら GitHub から直接 インストールするものに対しては我々は Semver を約束してない」

  36. バージョン指定してインストールする ものに関してはトランスパイルして Node 6 をサポートするので Semver は守れる

  37. 投票の結果...

  38. レビューを経て...

  39. Merged!!

  40. 1.19.0 に入ります (今も多分 prettier/prettier でインストールすれば使えます)