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
430
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
デザインシステムと生成AIの相性について考える
sosukesuzuki
4
1.3k
イテレータとイテラブルの概要と課題、未来
sosukesuzuki
5
3.6k
JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す
sosukesuzuki
1
590
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
sosukesuzuki
8
11k
Prettier 3.0 の VSCode 拡張対応における技術的な意思決定~VSCode 拡張で dynamic import が動かない~
sosukesuzuki
1
2k
ESM移行は無理だけどおれもSindreのライブラリが使いたい!
sosukesuzuki
2
1.3k
JavaScript エコシステムを維持する OSS の努力と課題
sosukesuzuki
14
9.7k
Prettierに従わなくてもいい場合
sosukesuzuki
7
3.2k
Prettier 2.0
sosukesuzuki
2
1.7k
Other Decks in Programming
See All in Programming
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
890
CSC305 Lecture 10
javiergs
PRO
0
230
alien-signals と自作 OSS で実現する フレームワーク非依存な ロジック共通化の探求 / Exploring Framework-Agnostic Logic Sharing with alien-signals and Custom OSS
aoseyuu
2
460
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
430
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
チームの境界をブチ抜いていけ
tokai235
0
210
Introduce Hono CLI
yusukebe
6
3.1k
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
420
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Side Projects
sachag
455
43k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Pragmatic Product Professional
lauravandoore
36
7k
Agile that works and the tools we love
rasmusluckow
331
21k
Unsuck your backbone
ammeep
671
58k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
4 Signs Your Business is Dying
shpigford
185
22k
Typedesign – Prime Four
hannesfritz
42
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
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 でインストールすれば使えます)