Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Prettier の TypeScript 3.7 対応について
Search
sosukesuzuki
October 29, 2019
Programming
0
370
Prettier の TypeScript 3.7 対応について
2019年10月29日の nihonbashi.js での登壇です。
10月上旬に公開された TypeScript 3.7 のベータ版の Prettier のサポート状況についてお話しました。
sosukesuzuki
October 29, 2019
Tweet
Share
More Decks by sosukesuzuki
See All by sosukesuzuki
イテレータとイテラブルの概要と課題、未来
sosukesuzuki
5
2.9k
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
440
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
1.8k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.2k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
9.2k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3.1k
Prettier 2.0
sosukesuzuki
2
1.6k
Prettier のしくみ
sosukesuzuki
4
2.5k
Other Decks in Programming
See All in Programming
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
260
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.2k
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
240
Amazon S3 NYJavaSIG 2024-12-12
sullis
0
130
KubeCon NA 2024の全DB関連セッションを紹介
nnaka2992
0
110
fs2-io を試してたらバグを見つけて直した話
chencmd
0
280
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
5.7k
Findy Team+ Awardを受賞したかった!ベストプラクティス応募内容をふりかえり、開発生産性向上もふりかえる / Findy Team Plus Award BestPractice and DPE Retrospective 2024
honyanya
0
130
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
490
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
790
今年のアップデートで振り返るCDKセキュリティのシフトレフト/2024-cdk-security-shift-left
tomoki10
0
320
テストコード書いてみませんか?
onopon
2
280
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Building an army of robots
kneath
302
44k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
26
1.9k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
A designer walks into a library…
pauljervisheath
205
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
220
GitHub's CSS Performance
jonrohan
1030
460k
The World Runs on Bad Software
bkeepers
PRO
66
11k
Bash Introduction
62gerente
609
210k
Designing Experiences People Love
moore
139
23k
Speed Design
sergeychernyshev
25
720
Fireside Chat
paigeccino
34
3.1k
Transcript
Prettier の TypeScript 3.7 対応について nihonbashi.js 2019/10/29
自己紹介 - 鈴木颯介(Suzuki Sosuke) - GitHub(@sosukesuzuki) - Twitter(@__sosukesuzuki) - Prettier
メンテナ - 筑波大学情報科学類
None
Prettier とは
Prettier - JavaScriptで書かれたコードフォーマッター - JS / TS / HTML /
CSS / YAML / GraphQL などに 対応
フォーマット
TypeScript 3.7 とは
TypeScript 3.7 - 10月に入ってベータ版が公開されたまだ正式リリースされてない最新版の TypeScript - 4つの新構文が追加される - (このLTではこれらの機能自体には詳しく触れません) -
https://devblogs.microsoft.com/typescript/announcing-typescript-3-7-beta/
TypeScript 3.7 - Optional Chaining - 現在 ECMAScript Stage 3
のプロポーザル - Babel にはすでに入っている
TypeScript 3.7 - Nullish Coalescing Operator - 現在 ECMAScript Stage
3 のプロポーザル - Babel にはすでに入っている
TypeScript 3.7 - Assertion Functions - 型に関する機能なので ECMAScript のプロポーザルとかではない -
返り値に `asserts hoge is string` みたいなのを書いて型のアサートができる
TypeScript 3.7 - Class field “declare” keyword - ベータ版のアナウンスには含まれていなかった -
class field の declare キーワードをつけられる
これらに対して Prettier 側が すべき対応は大きく分けて2つ
①依存しているパーサーの更新
Prettier のしくみ(めっちゃ簡潔に) もとのテキスト AST(抽象構文木) フォーマットされたテ キスト パース プリント
Prettier は外部のパーサーを使っている - TS: typescript-eslint/typescript-estree - JS: babel/parser - まずパーサー側が対応するのを待つ必要がある
パーサー側の TS 3.7 対応が終わったら 依存しているバージョンをあげる
②プリントの処理を書く
ASTから実際にコードを フォーマットする処理を書く (このLTではここの詳細には触れません)
雑に一部抜粋(do 式と break のフォーマット)
プリントの処理を書くのは(比較的)簡単 - もともと Babel の Optional Chaining と Nullish Coalescing
には対応していた - Assertion Functions も class フィールドの declare キーワードも似たような構文が あったのでそんなに考えることはなさそうだった
今回困難だったのは 「①依存しているパーサーの更新」
Node バージョン問題
Prettier のサポートしている Node のバージョン - GitHub からの直接インストール - package.json に
“prettier/prettier” を指定することでインストールできる - これは 1.18.2 では Node 6 までサポートしている - バージョン指定してインストール(トランスパイル済み) - 1.18.2 現在で Node 4 までサポートしている
typescript-estree の対応 Node バージョン - "^8.10.0 || ^10.13.0 || >=11.10.1"
Node 6 はサポートされてない (個人的にはそろそろ Prettier が Node 6 のサポートを切るべきだと思いますが)
普通に更新してみたら Node 6 で テストコケた!
切りたいけどメジャーバージョンを あげないと Node 6 のサポートを切れない!
大きく分けて2つの対策が考えられる
① babel-ts パーサーの導入
babel-ts パーサー - Babel の TypeScript パーサーを使おうという話 - TS 3.7
が公開される前から babel-ts パーサーを入れる PR は出ていた - Babel にはもともと Optional Chaining と Nullish Coalescing は入っているのでい けるのでは? - (1.19には入らなさそう) - Assertion Functions と class フィールドの declare キーワードはまだ babel/parser が対応してないので使えない - なのであくまで回避策
② typescript-estree をなんとかする
案1: フォークしてNode6をサポートする - typescript-estree を Prettier 側でフォークして Node 6 をサポートできるように修
正して使おうという案 - 「メンテコストがしんどそう...」「もしやるなら 2.0 のリリースを急がないと...」
案2: GitHub インストールの Node 6 をドロップする - GitHub からの直接インストールの Node
6 をドロップする - バージョン指定インストールの場合トランスパイルして Node 6 をサポートし続けら れる - 「メジャーバージョンあげずに Node 6 を切っていいの?Semver は?」
案2について 「よく考えたら GitHub から直接 インストールするものに対しては我々は Semver を約束してない」
バージョン指定してインストールする ものに関してはトランスパイルして Node 6 をサポートするので Semver は守れる
投票の結果...
レビューを経て...
Merged!!
1.19.0 に入ります (今も多分 prettier/prettier でインストールすれば使えます)