Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier メンテナ - 筑波大学情報科学類

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Prettier とは

Slide 5

Slide 5 text

Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML / CSS / YAML / GraphQL などに 対応

Slide 6

Slide 6 text

フォーマット

Slide 7

Slide 7 text

TypeScript 3.7 とは

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

TypeScript 3.7 - Optional Chaining - 現在 ECMAScript Stage 3 のプロポーザル - Babel にはすでに入っている

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

TypeScript 3.7 - Assertion Functions - 型に関する機能なので ECMAScript のプロポーザルとかではない - 返り値に `asserts hoge is string` みたいなのを書いて型のアサートができる

Slide 12

Slide 12 text

TypeScript 3.7 - Class field “declare” keyword - ベータ版のアナウンスには含まれていなかった - class field の declare キーワードをつけられる

Slide 13

Slide 13 text

これらに対して Prettier 側が すべき対応は大きく分けて2つ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

②プリントの処理を書く

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

プリントの処理を書くのは(比較的)簡単 - もともと Babel の Optional Chaining と Nullish Coalescing には対応していた - Assertion Functions も class フィールドの declare キーワードも似たような構文が あったのでそんなに考えることはなさそうだった

Slide 22

Slide 22 text

今回困難だったのは 「①依存しているパーサーの更新」

Slide 23

Slide 23 text

Node バージョン問題

Slide 24

Slide 24 text

Prettier のサポートしている Node のバージョン - GitHub からの直接インストール - package.json に “prettier/prettier” を指定することでインストールできる - これは 1.18.2 では Node 6 までサポートしている - バージョン指定してインストール(トランスパイル済み) - 1.18.2 現在で Node 4 までサポートしている

Slide 25

Slide 25 text

typescript-estree の対応 Node バージョン - "^8.10.0 || ^10.13.0 || >=11.10.1"

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

① babel-ts パーサーの導入

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

② typescript-estree をなんとかする

Slide 33

Slide 33 text

案1: フォークしてNode6をサポートする - typescript-estree を Prettier 側でフォークして Node 6 をサポートできるように修 正して使おうという案 - 「メンテコストがしんどそう...」「もしやるなら 2.0 のリリースを急がないと...」

Slide 34

Slide 34 text

案2: GitHub インストールの Node 6 をドロップする - GitHub からの直接インストールの Node 6 をドロップする - バージョン指定インストールの場合トランスパイルして Node 6 をサポートし続けら れる - 「メジャーバージョンあげずに Node 6 を切っていいの？Semver は？」

Slide 35

Slide 35 text

案2について 「よく考えたら GitHub から直接 インストールするものに対しては我々は Semver を約束してない」

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

投票の結果...

Slide 38

Slide 38 text

レビューを経て...

Slide 39

Slide 39 text

Merged!!

Slide 40

Slide 40 text

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